<template>
  <el-dialog :title="textMap[dialogStatus]" width="1200px" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="110px">
      <el-row>
        <el-form-item label="操作类型" prop="optionType">
          <el-radio-group v-model="form.optionType">
            <el-radio label="0">退回核实</el-radio>
            <el-radio label="1">不予立案</el-radio>
            <el-radio label="2">立案</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row v-if="form.optionType==='0'" >
        <el-form-item label="选择人员" prop="taskUserId">
          <el-select v-model="form.taskUserId" filterable placeholder="请选择" style="width: 400px;">
            <el-option v-for="item in userList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
      </el-row>
      <div v-if="form.optionType==='2'">
        <div v-loading="registerLoading" element-loading-background="#ffffff69">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="案卷等级" prop="caseLevel">
                <el-select
                  v-model="form.caseLevel"
                  :loading="caseLevelLoading"
                  placeholder="选择立案等级"
                  @change="updateHoursAndMins">
                  <el-option
                    v-for="item in form.caseLevelList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="案卷类别" prop="eorc">
                <el-select
                  v-model="form.eorc"
                  :loading="caseEorcLoading"
                  placeholder="选择案卷类别"
                  @change="selectEorc">
                  <el-option
                    v-for="item in form.eorcList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="案卷大类" prop="caseType">
                <el-select
                  v-model="form.caseType"
                  :loading="caseTypeLoading"
                  filterable
                  placeholder="请选择案卷大类"
                  @change="selectCaseType"
                >
                  <el-option
                    v-for="item in form.caseTypeList"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="案卷小类" prop="caseTypeDetail">
                <el-select
                  v-model="form.caseTypeDetail"
                  :loading="caseTypeDetailLoading"
                  filterable
                  placeholder="请选择案卷小类"
                  @change="selectCaseTypeDetail"
                >
                  <el-option
                    v-for="item in form.caseTypeDetailList"
                    :key="item.id"
                    :label="item.typeDetailName"
                    :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="立案标准" prop="caseTypeTimes">
              <el-select
                v-model="form.caseTypeTime"
                :loading="caseTypeTimeLoading"
                filterable
                placeholder="请选择立案标准"
                style="width: 72%;"
                @change="updateHoursAndMins">
                <el-option v-for="item in form.caseTypeTimeList" :key="item.id" :label="item.name" :value="item.id"/>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="完成时限">
                <el-input-number v-model="form.hours" :min="0" :max="9999" step-strictly style="margin-right: 5px" /> 小时
                <el-input-number v-model="form.minutes" :min="0" :max="59" step-strictly	style="margin-left: 20px; margin-right: 5px" />分钟
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处置部门" prop="dept">
                <el-select v-model="form.dispatchDeptId" filterable placeholder="请选择" style="width: 400px;">
                  <el-option v-for="item in form.deptList" :key="item.id" :label="item.simplename" :value="item.id"/>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-row>
        <el-form-item label="处置意见" prop="remarks">
          <el-input v-model="form.remarks" type="textarea" maxlength="50" show-word-limit/>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="">
          <el-select v-model="commonLanguage" placeholder="请选择常用处理意见" clearable style="width: 400px;" @change="selectCommonLang">
            <el-option-group
              v-for="group in commonLanguageList"
              :key="group.label"
              :label="group.label">
              <el-option
                v-for="item in group.options"
                :key="item.id"
                :label="item.content"
                :value="item.content"/>
            </el-option-group>
          </el-select>
        </el-form-item>
      </el-row>
    </el-form>
    <div v-if="!isEditMode" slot="footer" class="dialog-footer">
      <el-button :loading="btnLoading" icon="el-icon-check" type="primary" @click="saveData">
        提 交
      </el-button>
      <el-button @click="cancel" icon="el-icon-close" style="margin-left: 10px">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import _ from 'lodash'
import {
  caseAdd,
  getCaseLevelList,
  getCaseTypeDetailList,
  getCaseTypeList,
  getCaseTypeTimes,
  getDeptList,
  getEorc,
  getUserList,
  getUserReplyList,
  updateCaseLevel
} from '@/api/case'
import { validate01 } from '@/utils/validate'
export default {
  name: 'EditCase',
  data() {
    const validateNum = (rule, value, callback) => {
      if (value !== '') {
        if (validate01(value) === true) {
          callback()
        } else {
          callback(new Error('范围在0,1之间最多两位小数'))
        }
      } else {
        callback(new Error('评估计算权重不能为空'))
      }
    }
    const validateEmptyString = (rule, value, callback) => {
      if (!value.trim()) {
        callback(new Error('处置意见不能为空'))
      } else {
        callback()
      }
    }
    return {
      dialogFormVisible: false, // 对话框是否显示
      dialogStatus: '', // 对话框类型：create,update
      isEditMode: true,
      commonLanguage: '', // 常用语
      commonLanguageList: [], // 常用语列表
      registerLoading: false,
      caseLevelLoading: false,
      caseEorcLoading: false,
      caseTypeLoading: false,
      caseTypeDetailLoading: false,
      caseTypeTimeLoading: false,
      form: {
        id: '',
        optionType: '',
        name: '',
        description: '',
        weight: '',
        remarks: ''
      }, // 表单
      caseDetail: {},
      textMap: {
        update: '案卷处理',
        create: '案卷处理',
        detail: '案卷处理'
      }, // 表头显示标题
      btnLoading: false, // 保存按钮的加载中状态
      userList: [],
      deptList: [],
      rules: {
        optionType: [{ required: true, message: '操作类型必选', trigger: ['blur', 'change'] }],
        taskUserId: [{ required: true, message: '核实人员必选', trigger: ['blur', 'change'] }],
        description: [{ required: true, message: '描述不能为空', trigger: ['blur', 'change'] }],
        weight: [{ required: true, validator: validateNum, trigger: ['blur', 'change'] }],
        remarks: [{ required: true, validator: validateEmptyString, trigger: ['blur', 'change'] }]
      } // 前端校验规则
    }
  },
  watch: {
    'form.optionType': {
      handler(newValue, oldValue) {
        if (newValue === '2') {
          this.init2()
        }
      }
    },
    'form.eorc': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.selectEorc(newValue)
        }
      }
    },
    'form.caseType': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.selectCaseType(newValue)
        }
      }
    },
    'form.caseTypeDetail': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.selectCaseTypeDetail(newValue)
        }
      }
    },
    'form.caseTypeTime': {
      handler(newValue, oldValue) {
        if (oldValue) {
          this.updateHoursAndMins()
        }
      }
    }
  },
  computed: {
  },
  created() {
    this.fetchOption()
  },
  methods: {
    async fetchOption() {
      const userRes = await getUserList('supervisor')
      this.userList = userRes.data
      const deptRes = await getDeptList()
      this.deptList = deptRes.data
      // 查询常用语列表
      const languageRes = await getUserReplyList()

      if (languageRes.data) {
        const options = languageRes.data.filter(option => option.type === '2')
        if (options.length > 0) {
          this.commonLanguageList.push({ label: '个人常用语', options: options })
        }
        this.commonLanguageList.push({ label: '固定常用语', options: languageRes.data.filter(option => option.type === '1') })
      }
    },
    // 初始化对话框
    initDialog: function(dialogStatus, row = null) {
      this.dialogStatus = dialogStatus
      this.dialogFormVisible = true
      this.btnLoading = false
      this.caseDetail = row
      this.form.optionType = '0'
      if (dialogStatus === 'update') { // 如果是修改，将row中数据填写到输入框中
        this.init2()
        this.isEditMode = false
      }
    },
    async init2() {
      this.registerLoading = true

      const caseLevelRes = await getCaseLevelList() // 案卷等级
      this.$set(this.form, 'caseLevelList', caseLevelRes.data)
      this.$set(this.form, 'caseLevel', '1')

      const eorcListRes = await getEorc() // 事部件
      this.$set(this.form, 'eorcList', eorcListRes.data)
      this.$set(this.form, 'eorc', this.caseDetail.eorc)

      const deptRes = await getDeptList()// 处置部门列表
      this.$set(this.form, 'deptList', deptRes.data)

      // 初始化大类、小类、立案标准、完成时限
      this.$set(this.form, 'caseTypeList', [])
      this.$set(this.form, 'caseTypeDetailList', [])
      this.$set(this.form, 'caseTypeTimeList', [])
      this.$set(this.form, 'caseType', '')
      this.$set(this.form, 'caseTypeDetail', '')
      this.$set(this.form, 'caseTypeTime', '')
      this.$set(this.form, 'hours', '')
      this.$set(this.form, 'minutes', '')
      this.$set(this.form, 'dispatchDeptId', '')

      // 大类列表
      if (this.caseDetail.eorc) {
        const caseTypeRes = await getCaseTypeList(this.caseDetail.eorc)
        this.form.caseTypeList = caseTypeRes.data
      }
      // 大类
      if (this.caseDetail.casetypeCode) {
        const defaultCaseType = _.find(this.form.caseTypeList, ['typeCode', this.caseDetail.casetypeCode])
        this.form.caseType = defaultCaseType.id
      }
      // 小类列表
      if (this.caseDetail.eorc && this.form.caseType) {
        const caseTypeDetailRes = await getCaseTypeDetailList(this.caseDetail.eorc, this.form.caseType)
        this.form.caseTypeDetailList = caseTypeDetailRes.data
      }
      // 小类
      if (this.caseDetail.casetypeDetailCode) {
        const defaultCaseTypeDetail = _.find(this.form.caseTypeDetailList, ['typeDetailCode', this.caseDetail.casetypeDetailCode])
        this.form.caseTypeDetail = defaultCaseTypeDetail.id
      }
      // 立案标准列表
      if (this.form.caseTypeDetail) {
        const caseTypeTimeRes = await getCaseTypeTimes(this.form.caseTypeDetail)
        this.form.caseTypeTimeList = caseTypeTimeRes.data
      }
      // 立案标准
      this.form.caseTypeTime = ''
      if (this.form.caseTypeTime) {
        const deafultDispatchDept = _.find(this.form.caseTypeTimeList, ['caseTypeTime', this.form.caseTypeTime])
        this.form.dispatchDeptId = deafultDispatchDept.deptId
      }
      this.registerLoading = false
    },
    /**
     * 选择事部件，更新大类
     */

    async selectEorc(value) {
      console.log('selectEorc', this.form)
      if (this.form.eorc) {
        this.caseTypeLoading = true
        const caseTypeRes = await getCaseTypeList(this.form.eorc)
        this.form.caseTypeList = caseTypeRes.data
        this.caseTypeLoading = false
      } else {
        this.form.caseTypeList = []
      }
      this.form.caseType = ''
    },
    /**
     * 选择大类，更新小类下拉框
     */
    async selectCaseType(value) {
      console.log('selectCaseType', this.form)
      if (this.form.eorc && this.form.caseType) {
        this.caseTypeDetailLoading = true
        const caseTypeDetailRes = await getCaseTypeDetailList(this.form.eorc, this.form.caseType) // 小类
        this.form.caseTypeDetailList = caseTypeDetailRes.data
        this.caseTypeDetailLoading = false
      } else {
        this.form.caseTypeDetailList = []
      }
      this.form.caseTypeDetail = ''
    },
    /**
     * 选择小类，更新立案标准下拉框
     */
    async selectCaseTypeDetail(value) {
      console.log('selectCaseTypeDetail', this.form)
      if (this.form.caseTypeDetail) {
        this.caseTypeTimeLoading = true
        const caseTypeTimesRes = await getCaseTypeTimes(this.form.caseTypeDetail) // 小类
        this.form.caseTypeTimeList = caseTypeTimesRes.data
        this.caseTypeTimeLoading = false
      } else {
        this.form.caseTypeTimeList = []
      }
      this.form.caseTypeTime = ''
    },
    /**
     * 案卷等级和立案标准发生改变时，更新hours和minutes,dispatchDeptId
     */
    updateHoursAndMins() {
      console.log('updateHoursAndMins', this.form.caseTypeTime)
      // if (!this.form.caseLevel) {
      //   this.$message.error('请选择案卷等级')
      //   return
      // }
      if (!this.form.caseTypeTime) {
        this.form.hours = ''
        this.form.minutes = ''
        this.form.dispatchDeptId = ''
        return
      }
      const caseTypeTimeObj = _.find(this.form.caseTypeTimeList, ['id', this.form.caseTypeTime])
      console.log(caseTypeTimeObj)
      const day = parseInt(caseTypeTimeObj.day)
      let hours = parseInt(caseTypeTimeObj.hours)
      const minutes = parseInt(caseTypeTimeObj.minutes)
      if (day) {
        switch (this.form.caseLevel) {
          case '1':
            hours += day * 7
            break
          case '2':
            hours += day * 24
            break
          default:
            this.$message.error('请选择案卷等级')
        }
      }
      this.form.hours = hours
      this.form.minutes = minutes

      this.form.dispatchDeptId = caseTypeTimeObj.deptId
    },
    selectCommonLang(value) {
      this.form.remarks = value
    },
    saveData: function() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          let params
          switch (this.form.optionType) {
            case '0': // 退回核实
              params = {
                videoCaseId: this.caseDetail.id,
                caseStatus: this.caseDetail.caseStatus,
                isNeedVerify: 1,
                verifyPersonId: this.form.taskUserId,
                remarks: this.form.remarks
              }
              break
            case '1': // 不予立案
              params = {
                videoCaseId: this.caseDetail.id,
                caseStatus: '2',
                isNeedVerify: 0,
                verifyPersonId: '',
                remarks: this.form.remarks
              }
              break
            case '2': // 立案派遣
              params = {
                videoCaseId: this.caseDetail.id,
                caseStatus: this.caseDetail.caseStatus,
                isNeedVerify: 0,
                verifyPersonId: '',
                remarks: this.form.remarks,
                eorc: this.form.eorc,
                casetypeCode: this.form.caseType, // 大类
                casetypeDetailCode: this.form.caseTypeDetail, // 小类
                hours: this.form.hours,
                minutes: this.form.minutes,
                caseLevel: this.form.caseLevel,
                casetypesTimeId: this.form.caseTypeTime,
                dispatchDeptId: this.form.dispatchDeptId,
              }
              break
          }
          caseAdd(params).then(response => {
            if (response.code === 200) {
              this.$message.success('视频立案成功')
              this.$refs['dataForm'].clearValidate()
              this.$emit('watchChild')
              this.dialogFormVisible = false
            }
          }).catch(_ => { // 异常情况，loading置为false
            this.btnLoading = false
          })
        }
      })
    },
    cancel: function() {
      this.dialogFormVisible = false
      this.$emit('watchChild')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .el-dialog{
    width:700px
  }
  .el-select{
    width: 100%;
  }
</style>