<template>
  <div class="global">
    <div class="mainContainer">
      <div class="title">新增预警</div>
      <el-form label-width="120px" :model="formData" :rules="rules" ref="formData" >
        <el-form-item label="预警项目名称:" prop="warnName">
          <el-select v-model="formData.warnName" placeholder="请选择" :disabled="isDetail" style="width:100%">
            <el-option
              v-for="item in projectList"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查周期:" prop="inspectCycle">
          <el-select v-model="formData.inspectCycle" placeholder="请选择" :disabled="isDetail" style="width:100%">
            <el-option
              v-for="item in checkDateList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>     
        </el-form-item>
        <el-form-item label="预警时间:" prop="warningTime">
          <el-select v-model="formData.warningTime" placeholder="请选择" :disabled="isDetail" style="width:100%">
            <el-option
              v-for="item in timeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="人员类型:"  prop="warnTargetType">
            <el-select v-model="formData.warnTargetType" placeholder="请选择" :disabled="isDetail" style="width:100%" @change="warnTargetTypeSelect">
              <el-option
                v-for="item in roleList"
                :key="item.roleCode"
                :label="item.roleName"
                :value="item.roleCode">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查人员:"  prop="warnTargetArr">
            <div style="border:1px solid #ccc;padding:15px;width:1200px ">
              <el-checkbox-group v-model="formData.warnTargetArr"  :disabled="isDetail" v-if="personList && personList.length>0">
                <el-checkbox v-for="item in personList" :key="item.code" :label="item.code">{{item.name}}</el-checkbox>
              </el-checkbox-group>
              <span v-if="!personList || personList.length == 0" style="color:#cccccc">暂无数据</span>
            </div>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button type="success" plain @click="cancel()">取消</el-button>
        <el-button type="success" @click="btnSave('formData')">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {addFun,updateFun,detailFun,getAllRole,gerPersonByRole} from '@/api/system/earlyWarningManagement'
export default {
  name: 'AddPartment',
  data() {
    return {
      formData: {
        warnName: '',
        inspectCycle: '',
        warningTime: '',
        warnTargetType: '',
        warnTargetArr:[],
        warnTarget:'',
        warnTargetNames:''
      },
      projectList:[
        {
          value:'0',
          label:'保管员每周粮情检查'
        },
        {
          value:'1',
          label:'安全员每天安全检查'
        },
        {
          value:'2',
          label:'仓储科长每2周本库检查'
        },
        {
          value:'3',
          label:'业务科长每2周分库检查'
        },
        {
          value:'4',
          label:'监管科长每2周租仓、委托点检查'
        },
        {
          value:'5',
          label:'分管副总每月粮情检查'
        },
        {
          value:'6',
          label:'分管副总每月质量检查'
        },
        {
          value:'7',
          label:'分管副总每月分库检查'
        },
        {
          value:'8',
          label:'总经理每季检查粮情'
        },
        {
          value:'9',
          label:'安全员每天租仓管理/委托管理'
        },
        {
          value:'10',
          label:'保管员每天租仓管理/委托管理'
        },

      ],
      checkDateList:[
        {
          value:'1_day',
          label:'日'
        },
        {
          value:'1_week',
          label:'周'
        },
        {
          value:'2_week',
          label:'2周'
        },
        {
          value:'1_month',
          label:'月'
        },
        {
          value:'1_season',
          label:'季'
        },
      ],  
      timeList:[
        {
          value:'3_day',
          label:'到期前3天'
        },
        {
          value:'2_day',
          label:'到期前2天'
        },
        {
          value:'1_day',
          label:'到期前1天'
        },
        {
          value:'10_hour',
          label:'到期前10小时'
        },
      ],
      roleCheckList:[],
      roleList:[],
      personList:[],
      // 校验规则
      rules: {
        warnName: [{ required: true, message: '请选择预警项目名称', trigger: 'change' }],
        inspectCycle: [{ required: true, message: '请选择检查周期', trigger: 'change' }],
        warningTime: [{ required: true, message: '请选择预警时间', trigger: 'change' }],
        warnTargetType: [{ required: false, message: '请选择人员类型', trigger: 'change' }],
        warnTargetArr: [{ required: false, message: '请选择检查人员', trigger: 'change' }]
      },
      isDetail:false
    }
  },
  mounted() {
    this.getRoleList()
    // 对表单进行重置
    this.$nextTick(() => {
      this.$refs['formData'].resetFields()
    })
    if (this.$route.query.state == 'edit') {
      this.detailInfo()
    }
  },
  methods: {
    getRoleList() {
      getAllRole().then(res => {
        this.roleList = res.data
      })
    },
    addList() {
      // let data = {
      //   warnName:"保管员每周粮情检查",
      //   inspectCycle:"1_day",
      //   warningTime:"1_day",
      //   warnTargetType:"1",
      //   warnTarget:"9,10,11",
      //   warnTargetNames:"ceshi,测试23,ceshi"
      // }
      addFun(this.formData).then(res => {
        if (res.code == 200) {
          this.$message.success('新增成功')
          window.history.go(-1)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    updateList() {
      updateFun(this.formData).then(res => {
        if (res.code == 200) {
          this.$message.success('修改成功')
          window.history.go(-1)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    detailInfo() {
      detailFun(this.$route.query.id).then(res => {
        if (res.code == 200) {
          this.formData = res.data
          this.warnTargetTypeSelect()
          this.formData.warnTargetArr = this.formData.warnTarget.split(',')
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    btnSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formData.warnTarget = this.formData.warnTargetArr.join(',')
          let warnTargetNames = []
            this.formData.warnTargetArr.forEach(item => {
              this.personList.forEach(itemPer => {
                if(item == itemPer.code){
                   warnTargetNames.push(itemPer.name)
                }
              })
            })
            this.formData.warnTargetNames =  warnTargetNames.join(',')
          if (this.$route.query.state == 'add') {
            this.addList()
          } else if (this.$route.query.state == 'edit') {
            this.updateList()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    cancel() {
      window.history.go(-1)
    },
    warnTargetTypeSelect() {
      gerPersonByRole(this.formData.warnTargetType).then(res => {
        console.log(res)
        this.personList = []
        let person = {
          code:'',
          name:''
        }   
        for(var key in res){  
          person.code = key
          person.name = res[key]  
          this.personList.push(JSON.parse(JSON.stringify(person)))
        }   
      })
    }
  }
}
</script>
<style lang="scss" scoped>
    .mainContainer{
        .title{
            margin-bottom:20px;
        }
        .btns{
            text-align:right;
        }
    }
</style>
<style>
    .el-input{
        width:30%;
    }
</style>
