<style>
  .addDutyUpload .ItemImgDiv {
    width: 118px;
    height: 118px;
    position: relative;
    margin: 0 10px 10px 0;
    display: inline-block;
  }

  .addDutyUpload .avatar-uploader .el-upload {
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;
    color: #8c939d;
    position: relative;
    overflow: hidden;
  }

  .addDutyMain {
    display: inline-block;
    width: 118px;
    height: 118px;
    font-size: 70px;
    border: 1px dashed #d9d9d9;
    line-height: 120px;
  }
</style>
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:800px;">
      <q-card-section>
        <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改值班事项":"新增值班事项"}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">

        <div class="row wrap">
          <div class="col-6">
            <q-select stack-label v-model="FrequencyArr" multiple :options="frequencyOptions" color="primary" filled
              label="选择班次" option-label="Name" option-value="Id" ref="Shifts" @input="getSchoolListByFrequencyIds"
              emit-value map-options :rules="[val => !!val || '请选择班次']" class="col-6 q-pr-lg q-pb-lg" />
          </div>
          <div class="col-6">
            <q-select stack-label v-model="schoolArr" multiple :options="schoolOptions" color="primary" filled
              label="选择校区" option-label="SName" option-value="SId" ref="ItemSchools"
              @input="getDutyFrequencyBySchoolIds" emit-value map-options :rules="[val => !!val || '请选择校区']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-select stack-label v-model="msg.DutyCategory" :options="dutyCategoryList" color="primary" filled
              label="分类" option-label="Name" option-value="Id" ref="DutyCategory" emit-value map-options
              :rules="[val => !!val || '请选择分类']" class="col-6 q-pr-lg q-pb-lg" />
          </div>
          <div class="col-6">
            <q-select stack-label v-model="msg.DutyType" :options="msg.DutyCategory==1?dutyTypeList:dutyTypeList2"
              color="primary" filled label="类型" option-label="Name" option-value="Id" ref="DutyType" emit-value
              map-options :rules="[val => !!val || '请选择类型']" />
          </div>
        </div>
        <div class="row wrap" v-if="msg.DutyType==2">
          <div class="col-6 q-pr-lg">
            <q-select stack-label color="primary" filled clearable label="选择事项类型" option-value="Id" option-label="Name"
              :options="itemTypeOptions" v-model="msg.ItemType" ref="ItemType" emit-value map-options
              :rules="[val => !!val || '请选择事项类型']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-12">
            <q-input filled type="textarea" :rows="2" stack-label :dense="false" v-model="msg.ItemName" ref="ItemName"
              class="col-12 q-pb-lg" label="事项名称" :rules="[val => !!val || '请填写事项名称']" />
          </div>
        </div>
        <div class="row wrap addDutyUpload">
          <div class="col-12">
            <div style="display:flex;flex-wrap: wrap;">
              <template v-if="msg.ItemImgList&&msg.ItemImgList.length>0">
                <div v-for="(item,index) in msg.ItemImgList" :key="index">
                  <div class="ItemImgDiv">
                    <q-img :src="item" spinner-color="white" style="height: 100%;height:100%" />
                    <q-btn size="7px" @click="deleteItemImg(index)" style="position:absolute;right:-5px;top:-5px;" round
                      color="red" icon="iconfont icon-guanbi1" />
                  </div>
                </div>
              </template>
              <el-upload class="avatar-uploader addDutyMain" action="" :before-upload="uploadFile"
                :show-file-list="false">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeRuleForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="saveRule" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    saveDutyItem,
    queryDutyItemInfo,
    getSchoolListByFrequencyIds,
    getDutyFrequencyBySchoolIds,
    getItemTypeEnumList,
    getDutyFrequencyList,
  } from "../../api/duty/index"
  import {
    getSchoolDropdown
  } from '../../api/school/index'; //获取校区列表
  import {
    UploadSelfFile
  } from "../../api/common/common"; //上传图片

  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        itemArr: [],
        FrequencyArr: [], //多选班次列表
        schoolArr: [], //多选校区列表
        msg: {
          Id: 0,
          ItemName: "",
          ItemSchools: "",
          ItemType: 0,
          Shifts: "",
          ItemImgList: [],
          DutyCategory: '', //值班事项分类(1-工作清单，2-突发事项，3-交接说明)
          DutyType: '', //值班类型(1-规则事项，2-值班事项)
        },
        BasicImg: "",
        dutyCategoryList: [{
            Id: 1,
            Name: "工作清单"
          },
          {
            Id: 2,
            Name: "突发事件"
          },
          {
            Id: 3,
            Name: "交接说明"
          },
        ],
        dutyTypeList: [{
            Id: 1,
            Name: "规则事项"
          },
          {
            Id: 2,
            Name: "值班事项"
          },
        ],
        dutyTypeList2: [{
          Id: 1,
          Name: "规则事项"
        }],
        persistent: true,
        schoolOptions: [],
        frequencyOptions: [],
        itemTypeOptions: [],
      }
    },
    computed: {},
    created() {
      this.getCompanyList();
      this.getDutyFrequencyList();
      this.queryItemTypeEnumList();
    },
    mounted() {
      this.initObj();
    },
    methods: {
      uploadFile(files) {
        UploadSelfFile("course", files, res => {
          if (res.Code == 1) {
            this.BgImg = res.FileUrl;
            this.msg.ItemImgList.push(res.FileUrl);
            this.BgImg = "";
          }
        });
      },
      initObj() {
        if (this.saveObj && this.saveObj.Id > 0) {
          queryDutyItemInfo({
            Id: this.saveObj.Id
          }).then(res => {
            if (res.Code == 1) {
              var tempData = res.Data;
              if (tempData) {
                this.msg.Id = tempData.Id;
                this.msg.ItemName = tempData.ItemName;
                this.msg.ItemSchools = tempData.ItemSchools;
                this.msg.ItemType = tempData.ItemType;
                this.msg.Shifts = tempData.Shifts;
                this.msg.ItemImgList = tempData.ItemImgList;
                this.msg.DutyCategory = tempData.DutyCategory;
                this.msg.DutyType = tempData.DutyType;

                if (tempData.ShiftList && tempData.ShiftList.length > 0) {
                  this.FrequencyArr = tempData.ShiftList.map(i => i * 1);
                }
                if (tempData.SchoolList && tempData.SchoolList.length > 0) {
                  this.schoolArr = tempData.SchoolList.map(i => i * 1);
                }
              }
            }
          })
        } else {
          this.clearMsg();
        }
      },
      //获取值班事项类型枚举
      queryItemTypeEnumList() {
        getItemTypeEnumList({}).then(res => {
          if (res.Code == 1) {
            this.itemTypeOptions = res.Data;
          }
        })
      },
      //清空消息
      clearMsg() {
        this.msg.Id = 0;
        this.msg.ItemName = "";
        this.msg.ItemSchools = "";
        this.msg.ItemType = "";
        this.msg.Shifts = "";
        this.msg.ItemImgList = [];
        this.msg.DutyCategory = "";
        this.msg.DutyType = "";
        this.BgImg = "";
      },
      //保存信息
      saveRule() {
        this.$refs.ItemName.validate();
        this.$refs.Shifts.validate();
        this.$refs.ItemSchools.validate();
        this.$refs.DutyCategory.validate();
        this.$refs.DutyType.validate();
        if (this.msg.DutyType == 2) {
          this.$refs.ItemType.validate();
          if (this.$refs.ItemType.hasError) {
            return
          }
        }
        if (!this.$refs.ItemName.hasError &&
          !this.$refs.Shifts.hasError &&
          !this.$refs.ItemSchools.hasError &&
          !this.$refs.DutyCategory.hasError &&
          !this.$refs.DutyType.hasError) {
          this.msg.ItemSchools = this.schoolArr.toString();
          this.msg.Shifts = this.FrequencyArr.toString();
          saveDutyItem(this.msg).then(res => {
            if (res.Code == 1) {
              this.clearMsg();
              this.$emit('success');
              this.closeRuleForm();
            }
          })
        }
      },
      //关闭窗口
      closeRuleForm() {
        this.$emit('close');
        this.persistent = false
      },
      //根据班次获取学校信息
      getSchoolListByFrequencyIds() {
        let Shifts = this.FrequencyArr.toString();
        getSchoolListByFrequencyIds({
          Shifts: Shifts
        }).then((res) => {
          this.schoolOptions = res.Data;
          this.schoolArr = [];
        })
      },
      //根据学校id获取对应的班次
      getDutyFrequencyBySchoolIds() {
        let SchoolIds = this.schoolArr.toString();
        getDutyFrequencyBySchoolIds({
          SchoolIds: SchoolIds
        }).then((res) => {
          this.frequencyOptions = res.Data
        })
      },
      //获取校区列表
      getCompanyList() {
        getSchoolDropdown({}).then(res => {
          if (res.Code == 1) {
            this.schoolOptions = res.Data;
          }
        })
      },
      //获取班次列表
      getDutyFrequencyList() {
        getDutyFrequencyList({}).then(res => {
          if (res.Code == 1) {
            this.frequencyOptions = res.Data;
          }
        })
      },
      //删除图片
      deleteItemImg(index) {
        this.msg.ItemImgList.splice(index, 1);
      }
    },
  }
</script>