 <!--leixiaoyan 复核设值弹窗-->
<template>
  <div v-if="dialogVisible">
    <dialog-edit :visible.sync="dialogVisible"
                 :form="forms"
                 :autoSave="false"
                 :editModel="editModel"
                 :api="api"
                 @onSaved="onSaved"
                 :title="$t('reviewPersonSetupIndex.popHead')"
                 :autoClose="true"
                 width="800px"
                 @close="close">
        <div>
          <el-form ref="submitForm" :model="submitForm" label-width="160px">
            <el-form-item :label="$t('reviewPersonSetupIndex.staffName')" prop='name'>
              <el-input :disabled="true" v-model="submitForm.name" size="medium"></el-input>
            </el-form-item>
            <el-form-item :label="$t('reviewPersonSetupIndex.committeePrincipal')" prop='review'>
              <el-radio-group v-model="submitForm.review">
                <el-radio label="1">{{$t('reviewPersonSetupIndex.yes')}}</el-radio>
                <el-radio label="0">{{$t('reviewPersonSetupIndex.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('reviewPersonSetupIndex.reviewProductName')"  prop='product'>
              <el-select popper-class="treeDropdown" collapse-tags v-model="mineStatus" :placeholder="$t('common.pleaseSelect')" multiple  @change="selectChange" style="width:100%" size="medium">
                <el-option :value="mineStatusValue" style="height: auto">
                  <el-tree :data="options"
                           show-checkbox
                           :default-expand-all="true"
                           node-key="id"
                           :default-checked-keys="selected"
                           ref="tree"
                           highlight-current
                           :props="defaultProps"
                           @check-change="handleCheckChange"></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import { DialogEdit } from 'newepoch-components'
import reviewPersonApi from '@/api/assetaudit/reviewPersonSetupApi'
import mixin from '@/pages/mixin'
export default {
  extends: new BaseEdit(),
  mixins: [mixin],
  name: 'reviewPersonSetupPop',
  components: { DialogEdit },
  props: {
    options: {
      type: [Array],
      default () {
        return []
      }
    },
    selected: {
      type: [Array],
      default () {
        return []
      }
    },
    detail: {
      type: [Object],
      default () {
        return {}
      }
    },
    keyId: {
      type: [String],
      default () {
        return ''
      }
    },
    editModel: {
      type: [String],
      default () {
        return 'E'
      }
    }
  },
  data () {
    return {
      appendToBody: false,
      toolMenuFlag: true,
      loadCount: 0,
      menuFlag: false,
      operateBtnLayout: '',
      loadingFlag: false, // 加载动画控件
      queryParas: {},
      contactData: [],
      forms: {},
      submitForm: { name: '', review: '', product: '' },
      mineStatus: '', // 选择的label字符串
      mineStatusValue: [], // 选中值得数组
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted () {
    // 设值 复核产品 select值
    if (this.editModel === 'E') {
      let productNameArr = []
      let mineStatusValue = []
      this.options[0].children.filter(item => {
        this.selected.includes(item.id) && productNameArr.push(item.label) && mineStatusValue.push({ id: item.id, label: item.label })
      })
      this.mineStatusValue = mineStatusValue
      this.mineStatus = productNameArr
    }
    this.submitForm.name = this.detail.staffName // 复核人员姓名
    // this.submitForm.review = this.detail.committeePrincipal === '' ? '1' : this.detail.committeePrincipal// 是否复核
    this.submitForm.review = this.detail.committeePrincipal
  },
  computed: {
    // 创建复核人员api
    api () {
      return reviewPersonApi.reviewPerson
    }
  },
  methods: {
    // 反馈素材 选择
    selectChange (e) {
      var arrNew = []
      var dataLength = this.mineStatusValue.length
      var eleng = e.length
      for (let i = 0; i < dataLength; i++) {
        for (let j = 0; j < eleng; j++) {
          if (e[j] === this.mineStatusValue[i].label) {
            arrNew.push(this.mineStatusValue[i])
          }
        }
      }
      this.$refs.tree.setCheckedNodes(arrNew) // 设置勾选的值
    },
    handleCheckChange () {
      let res = this.$refs.tree.getCheckedNodes(true, true) // 这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      let arrLabel = []
      let arr = []
      res.forEach(item => {
        arrLabel.push(item.label)
        arr.push(item)
      })
      this.mineStatusValue = arr
      this.mineStatus = arrLabel
    },
    // 新增接口
    create (data) {
      this.$LoadingShow()
      this.api.create(data).then(res => {
        this.$LoadingClose()
        if (res && res.data) {
          this.success(this.$i18n.messages[this.$i18n.locale].reviewPersonSetupIndex.setSuccess)
          this.$emit('operateSuccess', true)
          this.dialogVisible = false
        } else {
          this.error(this.$i18n.messages[this.$i18n.locale].reviewPersonSetupIndex.setError)
        }
      })
    },
    // 编辑接口
    update (keyId, data) {
      this.$LoadingShow()
      this.api.update(keyId, data).then(res => {
        this.$LoadingClose()
        if (res && res.data) {
          this.success(this.$i18n.messages[this.$i18n.locale].reviewPersonSetupIndex.setSuccess)
          this.$emit('operateSuccess', true)
          this.dialogVisible = false
        } else {
          this.error(this.$i18n.messages[this.$i18n.locale].reviewPersonSetupIndex.setError)
        }
      })
    },
    // 保存事件
    onSaved () {
      if (this.submitForm.review === '' && this.mineStatusValue.length === 0) { // 判断是否选中复核
        this.warning('请选择是否复核或者选择无需复核产品')
        return
      }
      let auditConfigPostDTO = {
        committeePrincipal: this.submitForm.review, // 是否复核
        productNameIds: this.mineStatusValue.map(item => item.id), // 复核产品id‘，’分割字符串
        staffName: this.submitForm.name, // 复核名字
        staffNameId: this.detail.staffNameId, // 复核人的id
        productName: this.mineStatusValue.map(item => item.label).join(',') // // 复核产品label‘，’分割字符串
      }

      if (this.editModel === 'E') { // 审核设置修改
        this.update(this.keyId, auditConfigPostDTO)
      } else if (this.editModel === 'C') { // 审核设置新增
        this.create(auditConfigPostDTO)
      }

      this.$refs.tree.setCheckedKeys([])
      this.$refs['submitForm'] = {}
    },
    // 关闭按钮
    close () {
      this.$refs['submitForm'] = {}
      this.dialogVisible = false
    }
  },
  // 销毁组件清空数据
  destroyed () {
    this.close()
  }
}
</script>

<style lang="scss">
  .treeDropdown{
    .el-checkbox{
      margin-right: 9px;
    }
    .el-select-dropdown__item{
      background: #fff;
    }
  }
</style>
