<!--
  @description:集约化评标-添加/编辑抽取条件-弹框
  @Modifier: 肖文龙
  @routerPath:
  @date: 2020-3-6-9:43
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogData.dialog"
      :close-on-click-modal="false"
      title="添加抽取条件"
      width="500px"
      custom-class="el-dialog__body-p0"
      top="calc((100vh - 441px) / 2)"
    >
      <section class="main" style="width: 94%;">
        <el-form ref="formData" :model="formData" :rules="rules" label-width="100px">
          <el-row>
            <el-col>
              <el-form-item ref="specialName" prop="specialName" label="专家专业">
                <el-input
                  v-model="formData.specialName"
                  disabled
                  show-word-limit
                  maxlength="200"
                  style="width: calc(100% - 156px)"
                  placeholder="请选择"
                />
                <el-button type="primary" @click="LibraryTreeDialogData.dialog=true">
                  选择
                </el-button>
                <el-button type="primary" plain @click="LibraryTreeInfo('clear')">
                  清空
                </el-button>
              </el-form-item>
              <!--分组-->
              <el-form-item v-if="dialogData.judgesGroupedStatus==='01'" ref="groupType" label="分组" prop="groupType">
                <el-radio-group v-model="formData.groupType">
                  <el-radio v-for="(item,index) in expertGroupList" :key="index" :label="item.typecode">
                    {{ item.typename }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <!--集团内/外-->
              <el-form-item ref="groupStatus" prop="groupStatus" label="集团内/外">
                <el-select
                  v-model="formData.groupStatus"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item,index) in systemSourceList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </el-form-item>
              <!--所属地区-->
              <el-form-item ref="cityName" prop="cityName" label="所属地区">
                <!--地区组件-->
                <cascader v-if="dialogData.dialog" :region-text="formData.cityName" @regionData="regionData" />
              </el-form-item>
              <!--技术职称-->
              <el-form-item ref="technicalTitle" prop="technicalTitle" label="技术职称">
                <el-select
                  v-model="formData.technicalTitle"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item,index) in titleList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </el-form-item>
              <!--专家星级-->
              <el-form-item ref="expertLevel" prop="expertLevel" label="专家星级">
                <el-select
                  v-model="formData.expertLevel"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="(item,index) in expertsSarList"
                    :key="index"
                    :label="item.typename"
                    :value="item.typecode"
                  />
                </el-select>
              </el-form-item>
              <!--抽取人数-->
              <el-form-item ref="expertNum" prop="expertNum" label="抽取人数">
                <el-input v-model="formData.expertNum" type="number" show-word-limit maxlength="15" placeholder="抽取人数" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ensure('formData')">确 定</el-button>
        <el-button @click="dialogData.dialog = false">取 消</el-button>
      </span>
    </el-dialog>
    <!--选择专家专业弹框-->
    <LibraryTreeDialog :dialog-data="LibraryTreeDialogData" @LibraryTreeInfo="LibraryTreeInfo" />
  </div>
</template>

<script>
/* api*/
import { saveOrUpdateExpertExtractConditionInfo } from '@/api/intensiveeval/intensiveeval'
/* 公共方法*/
import { checkRate, validateInput } from '@/assets/js/validate'// 校验
import { cloneObject, randomData, restoreInitialValue } from '@/assets/js/utils'// 深拷贝,生成随机Id,清空value值
/* 混合开发*/
import { groupMixin } from '@/views/intensiveeval/mixins/intensiveevalGroupMixin'// 字典信息
/* 组件*/
import cascader from '@comp/common/cascader'// 地区三级联动
import LibraryTreeDialog from '@/views/common/tools/LibraryTree-dialog'// 入库专业选择弹框
export default {
  name: 'ExtractConditionDialog',
  components: {
    cascader,
    LibraryTreeDialog
  },
  mixins: [groupMixin],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialog: false // 是否展开 布尔值
        }
      }
    },
    // 参数
    data: {
      type: Object,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
    //  选择专家专业弹框- 弹窗展示状态
      LibraryTreeDialogData: {
        dialog: false, // 弹窗状态
        selectCodes: [], // 当前选中的专业Code
        onlyOneSelected: true, // 是否只能选最后一级且是单选
        multipleChoice: true // true多选 false单选（默认单选）
      },
      // 添加/编辑抽取条件信息
      formData: {
        applyId: '', // 条件Id
        batchNumber: '', // 批次号
        cityCode: '', // 所属地区编码
        cityName: '', // 所属地区
        expertLevel: '00', // 专家星级 00 1星 01 2星 02 3星 03 4星 04 5星 05 全部
        expertNum: '', // 抽取人数
        groupType: '00', // 分组类型（00 商务组 01技术组 02商务技术组）
        groupStatus: '02', // 集团内/外 00:集团内 01:集团外 02:全部
        id: '', // 主键id
        isAdd: '', // 是否是补抽条件 00 否 01是
        isExecute: '', // 是否轮询中 00 否 01 是
        juryId: '', // 评委会id
        submitType: '', // 提交状态（00 修改 01 新增）
        resultStatus: '', // 抽取状态
        specialId: '', // 专家专业编号
        specialName: '', // 专家专业
        technicalTitle: '02', // 技术职称（00中级，01高级，02正高级）
        type: ''// 类别
      },
      // 校验
      rules: {
        applyId: [{ required: true, validator: validateInput, trigger: 'change' }], // 条件Id
        specialName: [{ required: true, message: '请选择', trigger: 'change' }], // 专家专业
        groupType: [{ required: true, message: '请选择', trigger: 'change' }], // 分组
        groupStatus: [{ required: true, message: '请选择', trigger: 'change' }], // 集团内/外
        cityCode: [{ required: true, message: '请选择', trigger: 'change' }], // 所属地区编码
        technicalTitle: [{ required: true, message: '请选择', trigger: 'change' }], // 技术职称
        expertLevel: [{ required: true, message: '请选择', trigger: 'change' }], // 专家星级
        expertNum: [{ required: true, validator: checkRate, trigger: 'blur' }]// 抽取人数
      }
    }
  },
  watch: {
    // 监听-弹窗展示状态
    'dialogData.dialog'(val) {
      if (this.dialogData.submitType === '00') { // 编辑
        this.formData = cloneObject(this.data)
        this.LibraryTreeDialogData.specialId = [this.formData.specialId]// 当前选中的专家专业
      } else {
        this.$nextTick(() => {
          this.$refs.formData.resetFields()
        })
        if (val) {
          this.formData.applyId = randomData()// 评委会id
          this.formData.id = this.formData.applyId// 主键Id
        }
      }
      this.formData.submitType = this.dialogData.submitType// 提交状态
      this.formData.batchNumber = this.$route.query.batchNumber// 批次号
      this.formData.juryId = this.$route.query.juryId// 评委会id
    }
  },
  methods: {
    // 所属地区-三级联动组件使用
    regionData(regionName, location) {
      this.formData.cityName = regionName
      this.formData.cityCode = location.join(',')
    },
    // 专家专业选择/清空
    LibraryTreeInfo(data) {
      if (data === 'clear') { // 清空
        this.formData.specialName = ''// 名称
        this.formData.specialId = ''// 编号
        this.LibraryTreeDialogData.selectCodes = []// 回显
      } else { // 选择
        const labels = data.labels.replace(/,/g, ';')
        this.formData.specialName = labels// 名称
        this.formData.specialId = data.keys// 编号
        this.LibraryTreeDialogData.selectCodes = data.keys.split(',')// 回显
      }
    },
    // 保存组装数据
    assemblyData() {
      const data = {
        ...cloneObject(this.formData),
        status// 提交状态
      }
      // 分组状态为 00 不分组
      if (this.dialogData.judgesGroupedStatus === '00') {
        data.groupType = '02' // 02 商务技术组
      }
      return data
    },
    // 确定
    ensure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveOrUpdateExpertExtractConditionInfo(this.assemblyData()).then(res => {
            this.$emit('extractConditionInfo', this.assemblyData())
            this.initialize()// 重置数据
          })
        }
      })
    },
    // 取消
    cancel() {
      if (this.dialogData.submitType === '00') { // 编辑)
        this.initialize()// 重置数据
      }
    },
    // 重置数据
    initialize() {
      // 恢复初始值
      restoreInitialValue(this.formData)
      this.formData.groupStatus = '02' // 集团内/外
      this.formData.technicalTitle = '02' // 技术职称
      this.formData.expertLevel = '00' // 专家星级
      this.LibraryTreeDialogData.selectCodes = []// 专家回显清空
      this.dialogData.dialog = false// 关闭弹窗
    }
  }
}
</script>

<style scoped lang="less">

</style>
