<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input v-model="listQuery.username" placeholder="用户名" style="width: 200px; margin-right: 10px;"
        class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
        搜索
      </el-button>

      <el-button class="filter-item" type="primary" icon="el-icon-circle-plus" @click="onAdd">
        添加主播排班
      </el-button>

    </div>

    <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" fixed label="操作" width="220">
        <template slot-scope="scope">
          <el-button type="danger" @click="onDel(scope.row)" size="small" icon="el-icon-delete-solid">
            删除
          </el-button>

          <el-button type="primary" @click="onSave(scope.row)" size="small" icon="el-icon-edit">
            修改
          </el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="用户名" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.admin.username }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="姓名" width="160">
        <template slot-scope="scope">
          <span>{{ scope.row.admin.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="100px" label="头像">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.admin.avatar"></el-avatar>
        </template>
      </el-table-column>

      <el-table-column align="center" label="排班时间">
        <template slot-scope="scope">
          {{ scope.row.start| parseTime('{y}-{m}-{d} {h}:{i}') }} - {{ scope.row.end| parseTime('{y}-{m}-{d} {h}:{i}') }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="平台">
        <template slot-scope="scope">
          <template v-for="i in scope.row.os">
            {{ oss[i] }}
          </template>
        </template>
      </el-table-column>

      <el-table-column align="center" label="订单金额">
        <template slot-scope="scope">
          {{ scope.row.total/100 }}
        </template>
      </el-table-column>

      <el-table-column width="140px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column width="140px" align="center" label="修改时间">
        <template slot-scope="scope">
          <span>{{ scope.row.update_time | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog title="修改排班" :visible.sync="dialogWork">
      <el-form label-width="120px" :model="item">

        <el-form-item label="上班时间">
          <el-date-picker
            v-model="item.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="渠道">
          <el-checkbox-group v-model="item.oss">
            <el-checkbox v-for="(v,i,k) in oss" :label="i" :key="k">{{v}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSave()">保 存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="主播排班表" :visible.sync="dialogCreate">
      <el-form label-width="120px">
        <el-row v-for="an in anchors" style="margin-bottom: 10px;">
          <el-col :span="2">{{ an.name }}</el-col>
          <el-col :span="14">
            <el-date-picker
              v-model="an.times"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              :default-time="['07:00:00', '23:59:59']"
              style="width:90%"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
          <el-col :span="8">
            <el-checkbox-group v-model="an.os">
              <el-checkbox v-for="(v,i,k) in oss" :label="i" :key="k">{{v}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-loading="loading" @click="onSaves()">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'Works',
  components: { Pagination },
  data() {
    return {
      oss: {},
      list: null,
      total: 0,
      listLoading: true,
      loading: false,
      listQuery: {
        page: 1,
        limit: 20
      },
      dialogWork: false,
      dialogCreate: false,
      item: {},
      anchors: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.$axios.get('/admin/work/index', { params: this.listQuery }).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.oss = response.ext.oss
        this.listLoading = false
      }).catch(err => {
      })
    },
    onDel(item) {
      this.$axios.post('/admin/work/del', {id: item.id}).then(res => {
        this.dialogVisible = false
        this.getList()
      }).catch(err => {

      })
    },
    onSave(from) {
      if(from) {
        this.$set(from,'date',[new Date(from.start), new Date(from.end)]);
        this.item = from;
        this.item.os = from.os+'';
        this.dialogWork = true;
        return
      }
      this.$axios.post('/admin/work/save', this.item).then(response => {
        this.dialogWork = false
        this.getList()
      }).catch(err => {
      })
    },
    onAdd() {
      this.$axios.get('/admin/work/anchor').then((res) => {
        this.anchors = res.data || []
        this.dialogCreate = true
      }).catch(err=>{

      })
    },
    onSaves() {
      if(this.loading) return
      this.loading = true
      this.$axios.post('/admin/work/save2', this.anchors).then(res => {
        this.dialogCreate = false
        this.loading = false
      }).catch(err=> {
        this.loading = false
      })
    }
  }
}
</script>
