<template>
  <div class="page-body">
    <div class="page-content">
      <q-table :pagination='qMsg' :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="none" :data="dataList" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <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="show" 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">
              <span v-if="!props.row.isEdit">{{props.row.ItemName}}</span>
              <q-input v-else v-model="props.row.ItemName" dense clearable style="padding-bottom:25px" />
            </q-td>
            <q-td key="ItemType" :props="props">
              <span v-if="!props.row.isEdit">{{props.row.ItemType==1?'选择':'手动填写'}}</span>
              <q-select v-else dense emit-value map-options color="primary" filled clearable option-value="Id"
                option-label="Name" :options="itemTypeOptions" v-model="props.row.ItemType" ref="ItemType"
                :rules="[val => !!val || '请选择事项类型']" />
            </q-td>
            <q-td key="ShiftsName" :props="props">
              <span v-if="!props.row.isEdit">{{props.row.ShiftsName}}</span>
              <q-select v-else dense emit-value map-options clearable multiple color="primary" filled option-value="Id"
                option-label="Name" :options="frequencyOptions" v-model="props.row.Shifts" ref="Shifts"
                :rules="[val => !!val || '请选择归属班次']" />
            </q-td>
            <q-td key="SchoolName" :props="props">
              <span v-if="!props.row.isEdit">{{props.row.SchoolName}}</span>
              <q-select v-else clearable dense emit-value map-options multiple color="primary" filled option-value="SId"
                option-label="SName" :options="schoolOptions" v-model="props.row.ItemSchools" ref="school"
                :rules="[val => !!val || '请选择归属校区']" />
            </q-td>
            <q-td key="optioned" :props="props">
              <q-btn flat size="xs" icon="edit" color="negative" style="font-weight:400" @click="delClass(props.row.Id)"
                label="删除" />
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="props.row.isEdit=true"
                label="编辑" v-if="!props.row.isEdit" />
              <q-btn flat size="xs" icon="edit" color="accent" style="font-weight:400" @click="save(props.row)"
                label="保存" v-if="props.row.isEdit" />
              </q-btn>
            </q-td>
          </q-tr>
        </template>
      </q-table>
      <template>
        <q-dialog ref="dialog" @hide="onDialogHide" persistent style="max-width:400px">
          <q-card class="q-dialog-plugin">
            <div class="q-pa-md">
              <q-form @submit="onSubmit" class="q-gutter-md">
                <div class="col-6">
                  <q-input stack-label dense filled ref="addItemName" v-model="msg.ItemName" label="事项名称" lazy-rules
                    :rules="[(val) => (!!val) || '请输入事项名称']" />
                </div>
                <div class="col-6">
                  <q-select stack-label dense emit-value map-options color="primary" filled clearable option-value="Id"
                    option-label="Name" :options="itemTypeOptions" v-model="msg.ItemType" ref="addItemType" label="事项类型"
                    :rules="[val => !!val || '请选择事项类型']" />
                </div>
                <div class="col-6">
                  <q-select stack-label dense emit-value map-options clearable multiple color="primary" filled
                    option-value="Id" option-label="Name" :options="frequencyOptions" v-model="msg.Shifts"
                    ref="addShifts" label="归属班次" :rules="[val => !!val || '请选择归属班次']" />
                </div>
                <div class="col-6">
                  <q-select stack-label clearable dense emit-value map-options multiple color="primary" filled
                    option-value="SId" option-label="SName" :options="schoolOptions" v-model="msg.ItemSchools"
                    ref="addschool" label="校区" :rules="[val => !!val || '请选择归属校区']" />
                </div>
                <div style="float:right;margin-bottom:20px">
                  <q-btn label="取消" flat class="q-ml-sm" text-color="primary" @click="hide"
                    style="border:1px solid #999" />
                  <q-btn label="提交" type="Submit" color="primary" style="margin-left:10px;" />
                </div>
              </q-form>
            </div>
          </q-card>
        </q-dialog>
      </template>
    </div>
  </div>
</template>
<script>
  import {
    queryDutyItemPage,
    removeDutyItem,
    getItemTypeEnumList,
    getDutyFrequencyList,
    getSetDutyItemModel
  } from '../../api/duty/index';
  import {
    getSchoolDropdown
  } from '../../api/school/index'; //获取校区列表
  import AddDutyItem from './addDutyItem';

  export default {
    components: {
      AddDutyItem
    },
    data() {
      return {
        loading: false,
        isShowsetForm: false,
        ruleObj: {}, //传入参数
        schoolOptions: [], //校区
        itemTypeOptions: [], //事项类型
        frequencyOptions: [], //班次列表
        columns: [{
            name: 'ItemName',
            label: '事项名称',
            field: 'ItemName',
            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: [],
        msg: {
          ItemName: "",
          ItemType: "",
          Shifts: [],
          ItemSchools: []
        },
        qMsg: {
          pageIndex: 1,
          pageSize: 5,
          rowsPerPage: 5,
        },
        pageCount: 0,
      }
    },
    mounted() {
      this.getList();
      this.getItemTypeEnumList();
      this.getCompanyList();
      this.getDutyFrequencyList();
    },
    methods: {
      //获取值班事项类型枚举
      getItemTypeEnumList() {
        getItemTypeEnumList({}).then(res => {
          if (res.Code == 1) {
            this.itemTypeOptions = res.Data;
          }
        })
      },
      //翻页
      changePage(val) {
        this.qMsg.pageIndex = val;
        this.getList();
      },
      //获取数据
      getList() {
        queryDutyItemPage(this.qMsg).then(res => {
          if (res.Code == 1) {
            var tempData = res.Data.PageData;
            this.pageCount = res.Data.PageCount;
            tempData.map(item => {
              item.Shifts = item.Shifts.split(",").map(_item => {
                _item = parseInt(_item)
                return _item
              })
              item.ItemSchools = item.ItemSchools.split(",").map(_item => {
                _item = parseInt(_item)
                return _item
              })
              item.isEdit = false
              return item
            })
            this.dataList = tempData;
          }
        })
      },
      //删除班次
      delClass(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',
              // color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            that.getList()
          })

        }).onCancel(() => {

        });


      },

      //获取校区列表
      getCompanyList() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.schoolOptions = res.Data;
          }
        })
      },
      //获取班次列表
      getDutyFrequencyList() {
        getDutyFrequencyList({}).then(res => {
          if (res.Code == 1) {
            this.frequencyOptions = res.Data;
          }
        })
      },
      save(item) {
        let msg = JSON.parse(JSON.stringify(item))
        if (item.isEdit) {
          item.isEdit = false
        }
        msg.Shifts = item.Shifts.join(",")
        msg.ItemSchools = item.ItemSchools.join(",")

        getSetDutyItemModel(msg).then((res) => {

          this.getList();
        })

      },
      //对话框
      show() {
        this.$refs.dialog.show();
      },

      hide() {
        this.$refs.dialog.hide();
      },

      onDialogHide() {
        // QDialog发出“hide”事件时
        // 需要发出
        this.$emit("hide");
      },

      onCancelClick() {
        // 我们只需要隐藏对话框
        this.hide();
      },

      onSubmit() {
        this.$refs.addItemName.validate();
        this.$refs.addItemType.validate();
        this.$refs.addShifts.validate();
        this.$refs.addschool.validate();
        if (!this.$refs.addItemName.hasError &&
          !this.$refs.addItemType.hasError &&
          !this.$refs.addShifts.hasError &&
          !this.$refs.addschool.hasError) {
          let msg = JSON.parse(JSON.stringify(this.msg))
          msg.ItemSchools = this.msg.ItemSchools.toString(),
            msg.Shifts = this.msg.Shifts.toString(),
            getSetDutyItemModel(msg).then((res) => {

              this.getList();
              this.hide();
            })

        }
      },

    }
  }

</script>
<style lang="scss" scoped>
  .bg-white {
    background-color: #ffffff;
  }

  @import url('~assets/css/table.sass')

</style>
