<template>
  <div>
    <save-form inline :model="search" @submit="submit" @reset="reset">
      <el-form-item prop="organIds">
        <el-select
          multiple
          clearable
          filterable
          collapse-tags
          v-model="search.organIds"
          placeholder="请选择分部"
        >
          <el-option v-for="(item,index) in selects.branchs"
            :key="index"
            :label="item.name"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="organIds">
        <el-select
          v-model.trim="search.teacherIdList"
          clearable
          filterable
          placeholder="请选择老师"
        >
          <el-option v-for="(item, index) in selects.teachers"
            :key="index"
            :value="item.id"
            :label="item.realName"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="month">
        <el-date-picker
          v-model="search.month"
          type="month"
          placeholder="请选择月份">
        </el-date-picker>
      </el-form-item>
      <el-button native-type="submit" type="primary">搜索</el-button>
      <el-button native-type="reset" type="danger">重置</el-button>
    </save-form>
    <el-button type="primary" @click="visible = true">添加任务</el-button>
    <el-table
      :data="list"
      style="width: 100%;margin-top: 20px;"
      :header-cell-style="{ background: '#EDEEF0', color: '#444' }"
    >
      <el-table-column
        label="分部"
        prop="organName"
      ></el-table-column>
      <el-table-column
        label="工作周期"
        prop="month"
      >
        <span slot-scope="scope">{{$helpers.dayjs(scope.row.month).format('YYYY-MM')}}</span>
      </el-table-column>
      <el-table-column
        label="乐团主管"
        prop="userName"
      ></el-table-column>
      <el-table-column
        label="任务事项数量"
        prop="itemNum"
      ></el-table-column>
      <el-table-column
        label="任务总次数"
        prop="times"
      ></el-table-column>
      <el-table-column
        label="操作"
        prop="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="view(scope.row)">查看</el-button>
          <el-button type="text" @click="edit(scope.row)">修改任务</el-button>
          <el-button type="text" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total.sync="rules.total"
      :page.sync="rules.page"
      :limit.sync="rules.limit"
      :page-sizes="rules.page_size"
      @pagination="FetchList"
    />
    <el-dialog
      :visible.sync="visible"
      title="创建任务"
      width="800px"
    >
      <create
        v-if="visible"
        @close="visible = false"
        @submited="FetchList"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="editVisible"
      title="修改任务"
      width="800px"
    >
      <create
        v-if="editVisible && detail"
        :id="detail.id"
        @close="editVisible = false"
        @submited="FetchList"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="viewVisible"
      title="查看任务"
      width="800px"
    >
      <view-detail
        v-if="viewVisible && detail"
        :id="detail.id"
        @close="viewVisible = false"
        @submited="FetchList"
      />
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/Pagination/index";
import { inspectionQueryPage, inspectionDelete } from '@/views/main/api'
import create from './modals/create'
import view from './modals/view'
import View from './modals/view.vue';
const initSearch = {
  organIds: [],
  month: '',
}
export default {
  components: {
    create,
    'view-detail': view,
    pagination,
  },
  data() {
    return {
      search: {...initSearch},
      list: [],
      visible: false,
      viewVisible: false,
      editVisible: false,
      detail: null,
      rules: {
        // 分页规则
        limit: 10, // 限制显示条数
        page: 1, // 当前页
        total: 0, // 总条数
        page_size: [10, 20, 40, 50] // 选择限制显示条数
      },
    }
  },
  mounted() {
    this.FetchList()
    this.$store.dispatch('setBranchs')
    this.$store.dispatch('setTeachers')
  },
  methods: {
    submit() {
      this.FetchList()
    },
    reset() {
      this.rules.page = 1
      this.search = {...initSearch}
      this.FetchList()
    },
    view(row) {
      this.viewVisible = true
      this.detail = row
    },
    edit(row) {
      this.editVisible = true
      this.detail = row
    },
    async remove(id) {
      try {
        await this.$confirm('是否确认删除此条数据?', '提示', {
          type: 'warning'
        })
        await inspectionDelete({
          id
        })
        this.$message.success('删除成功')
        this.FetchList()
      } catch (error) {}
    },
    async FetchList() {
      try {
        const res = await inspectionQueryPage({
          ...this.search,
          page: this.rules.page,
          rows: this.rules.limit,
        })
        this.list = res.data.rows
        this.rules.total = res.data.total
      } catch (error) {}
    }
  }
}
</script>
