<template>
  <div class="page-body">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md">
        <div class="col-3">
          <q-select @input="resetSearch" clearable stack-label v-model="qMsg.DutyCategory" :options="dutyCategoryList"
            color="primary" filled label="分类" option-label="Name" option-value="Id" ref="DutyCategory" emit-value
            map-options @clear="resetSearch" />
        </div>
        <div class="col-3">
          <q-input @input="resetSearch" clearable standout="bg-primary text-white" v-model="qMsg.ItemName" label="事项名称"
            maxlength="20" @clear="resetSearch" />
        </div>
        <div class="col-3">
          <q-select @input="resetSearch" filled clearable multiple option-value="SId" option-label="SName"
            v-model="qMsg.ItemSchools" :options="schoolOptions" emit-value map-options label="校区"
            @clear="resetSearch" />
        </div>
      </div>
    </div>
    <div class="page-content">
      <q-table :pagination='qMsg' :loading="loading" no-data-label="暂无相关数据" flat class="sticky-right-column-table"
        separator="none" :data="dataList" :columns="columns" row-key="name">
        <template v-slot:top>
          <div class="col-2 q-table__title">值班事项管理</div>
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" class="q-mr-md" @click="EditItem(null)" label="新增事项管理" />
          </div>
        </template>
        <template v-slot:bottom>
          <q-pagination class="full-width justify-end" v-model="qMsg.pageIndex" color="primary" :max="pageCount"
            :input="true" @input="changePage" />
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="ItemName" :props="props">
              <div style="width:500px;word-break:break-word;white-space:normal;">{{props.row.ItemName}}</div>
            </q-td>
            <q-td key="DutyCategoryStr" :props="props">
              <div>{{props.row.DutyCategoryStr}}</div>
            </q-td>
            <q-td key="DutyTypeStr" :props="props">
              <div>{{props.row.DutyTypeStr}}</div>
            </q-td>
            <q-td key="ItemType" :props="props">
              <template v-if="props.row.DutyType==2">
                {{props.row.ItemType==1?'选择':'手动填写'}}
              </template>
            </q-td>
            <q-td key="ShiftsName" :props="props">
              {{props.row.ShiftsName}}
            </q-td>
            <q-td key="SchoolName" :props="props">
              {{props.row.SchoolName}}
            </q-td>
            <q-td key="optioned" :props="props">
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="EditItem(props.row)"
                label="编辑" v-if="!props.row.isEdit" />
              <q-btn flat size="xs" icon="edit" color="negative" style="font-weight:400" @click="delItem(props.row.Id)"
                label="删除" />
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </q-table>
    </div>
    <AddDutyItem v-if="isShowAdd" @close="closeAddDuty" :save-obj="itemObj" @success="resetSearch">
    </AddDutyItem>
  </div>
</template>
<script>
  import {
    queryDutyItemPage,
    removeDutyItem,
  } from '../../api/duty/index';
  import {
    getSchoolDropdown
  } from '../../api/school/index'; //获取校区列表
  import AddDutyItem from './addDutyItem';

  export default {
    components: {
      AddDutyItem
    },
    data() {
      return {
        loading: false,
        schoolOptions: [], //校区
        columns: [{
            name: 'ItemName',
            label: '事项名称',
            field: 'ItemName',
            align: 'left'
          },
          {
            name: 'DutyCategoryStr',
            label: '分类',
            field: 'DutyCategoryStr',
            align: 'left',
          },
          {
            name: 'DutyTypeStr',
            label: '类型',
            field: 'DutyTypeStr',
            align: 'left',
          },
          {
            name: 'ItemType',
            label: '填写方式',
            field: 'ItemType',
            align: 'left',
          },
          {
            name: 'ShiftsName',
            label: '归属班次',
            field: 'ShiftsName',
            align: 'left',
          },
          {
            name: 'SchoolName',
            label: '归属校区',
            field: 'SchoolName',
            align: 'left',
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'QuestionId'
          }
        ],
        dataList: [],
        qMsg: {
          pageIndex: 1,
          pageSize: 10,
          rowsPerPage: 10,
          ItemName: "", //事项名称
          ItemSchools: [], //所属校区
          DutyCategory: ''
        },
        pageCount: 0,
        isShowAdd: false, //是否显示添加事项弹窗
        itemObj: {}, //事项对象
        dutyCategoryList: [{
            Id: 1,
            Name: "工作清单"
          },
          {
            Id: 2,
            Name: "突发事件"
          },
          {
            Id: 3,
            Name: "交接说明"
          },
        ]
      }
    },
    created() {
      this.getCompanyList();
    },
    mounted() {
      this.getList();
    },
    methods: {
      //重新查询
      resetSearch() {
        this.qMsg.pageIndex = 1;
        this.getList();
      },
      //翻页
      changePage(val) {
        this.qMsg.pageIndex = val;
        this.getList();
      },
      //获取数据
      getList() {
        this.loading=true;
        queryDutyItemPage(this.qMsg).then(res => {
          this.loading=false;
          if (res.Code == 1) {
            this.pageCount = res.Data.PageCount;
            this.dataList = res.Data.PageData;;
          }
        })
      },
      //删除值班事项
      delItem(id) {
        let that = this
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          removeDutyItem({
            Id: id.toString()
          }).then((res) => {
            that.$q.notify({
              icon: 'iconfont icon-chenggong',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            that.getList()
          })
        }).onCancel(() => {});
      },
      //获取校区列表
      getCompanyList() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.schoolOptions = res.Data;
          }
        })
      },
      //对话框
      EditItem(obj) {
        this.isShowAdd = true;
        this.itemObj = obj;
      },
      //关闭
      closeAddDuty() {
        this.isShowAdd = false;
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bg-white {
    background-color: #ffffff;
  }
  @import url('~assets/css/table.sass')
</style>