<template>
  <ele-modal custom-class="ele-dialog-form long-dialog-form"
             :centered="true" :visible.sync="addOrEditDialogFlag" :title="title"
             append-to-body
             :close-on-click-modal="false" width="70%" :before-close="cancel">

        <el-tabs v-model="activeName" type="card" >
          <el-tab-pane label="证书资质" name="QC">
            <el-form ref="form" :model="form" :rules="rules" class="el-form-box">
              <headerTitle title="基本信息"/>
              <el-row :gutter="20">
                <!--        <el-col :span="12">-->
                <!--          <el-form-item label="编码:" prop="code" label-width="90px">-->
                <!--            <el-input-->
                <!--              :disabled="type=='view'"-->
                <!--              v-model="form.code"-->
                <!--              clearable-->
                <!--              placeholder="请输入"-->
                <!--            />-->
                <!--          </el-form-item>-->
                <!--        </el-col>-->
                <el-col :span="12">
                  <el-form-item label="名称" prop="name"
                                label-width="90px"
                                :rules=" {required: true, message: '请输入',trigger: 'blur' }">
                    <el-input v-model="form.name" :disabled="type=='view'" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="有效时间:" prop="date" label-width="90px">
                    <el-date-picker
                      :disabled="type=='view'"
                      v-model="form.date"
                      style="width: 100%;"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>

              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="资质类型:" prop="certificationType" label-width="90px">
                    <el-select
                      style="width: 100%"
                      :disabled="type=='view'"
                      v-model="form.certificationType"
                      @change="changeCertificationType"
                      filterable
                    >
                      <el-option
                        v-for="item in qualificationOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="关联类型:" prop="relationName" label-width="90px">
                    <el-input
                      :disabled="type=='view'"
                      v-model="form.relationName"
                      readonly
                      clearable
                      @click.native="handleClick"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="备注" label-width="90px">
                    <el-input type="textarea" v-model="form.remark" :disabled="type=='view'" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="附件:" prop="accessory" label-width="90px">
                    <fileUpload
                      v-if="type!=='view'"
                      v-model="form.accessory"
                      module="main"
                      :showLib="false"
                      :limit="10"/>
                    <div v-else>
                      <el-link
                        v-for="link in form.accessory"
                        :key="link.id"
                        type="primary"
                        :underline="false"
                        @click="downloadFile(link)">
                        {{ link.name }}
                      </el-link>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
              <headerTitle title="资质信息"/>
              <ele-pro-table ref="linkTable" :columns="columns" :datasource="form.detailsList" :toolkit="[]" height="300px"
                             :need-page="false">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>

                  <el-button v-if="type!=='view'" type="primary" @click="handleAdd">添加</el-button>
                </template>
                <template v-slot:name="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.name'" :rules="{
            required: true,
            message: '',
            trigger: 'change'
          }">
                    <el-select v-if="type!=='view'" v-model="scope.row.name" clearable>
                      <el-option :disabled="disabledToType(scope.row).includes(item.dictCode)"
                                 v-for="item in dictList" :value="item.dictCode"
                                 :label="item.dictValue"></el-option>
                    </el-select>
                    <!--                <DictSelection v-if="type!=='view'" clearable dictName="客户/供应商资质类型" v-model="scope.row.type"-->
                    <!--                               @itemChange="(val)=>handleChangeType(val,scope.row)"></DictSelection>-->
                    <span v-else>{{ getLabelName(dictList, scope.row.name) }}</span>
                  </el-form-item>

                </template>
                <template v-slot:code="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.code'" :rules="{
            required: true,
            message: '',
            trigger: 'blur'
          }">
                    <el-input v-model="scope.row.code" :disabled="type=='view'" clearable></el-input>
                  </el-form-item>

                </template>
                <template v-slot:businessRange="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.businessRange'">
                    <el-input type="textarea" v-model="scope.row.businessRange" :disabled="type=='view'" clearable></el-input>
                  </el-form-item>
                </template>
                <template v-slot:startTime="scope">
                  <el-form-item inline-message :prop="'detailsList.' + scope.$index + '.startTime'" :rules="{
            required: true,
            message: '',
            trigger: 'change'

          }">
                    <el-date-picker
                      :disabled="type=='view'"
                      v-model="scope.row.startTime"
                      type="date"
                      style="width: 100%"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>

                </template>
                <template v-slot:endTime="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.endTime'"
                                :rules="{
            required: true,
            validator: validateEndDate(scope.row,scope.$index),
            trigger: ['blur','change']
          }">
                    <el-date-picker
                      :disabled="type=='view'"
                      v-model="scope.row.endTime"
                      type="date"
                      style="width: 100%"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>

                </template>
                <template v-slot:noticePersonName="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.noticePersonName'" :rules="{
            required: true,
            message: '',
            trigger: ['blur','change']

          }">
                    <el-input
                      :disabled="type=='view'"
                      @click.native="openStaffSelection(scope.$index)"
                      v-model="scope.row.noticePersonName"
                      placeholder="请选择"
                    ></el-input>
                  </el-form-item>

                </template>
                <template v-slot:accessory="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.accessory'" :rules="{
            required: true,
            message: '',
            trigger: ['change','blur']
          }">
                    <fileUpload
                      v-if="type!=='view'"
                      v-model="scope.row.accessory"
                      module="main"
                      :showLib="false"
                      :limit="10"/>
                    <div v-else>
                      <el-link
                        v-for="link in scope.row.accessory"
                        :key="link.id"
                        type="primary"
                        :underline="false"
                        @click="downloadFile(link)">
                        {{ link.name }}
                      </el-link>
                    </div>
                  </el-form-item>

                </template>
                <template v-slot:type="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.type'">
                    <el-select v-if="type!=='view'" v-model="scope.row.type" clearable>
                      <el-option v-for="item in typeList" :value="item.dictCode"
                                 :label="item.dictValue"></el-option>
                    </el-select>
                    <!--                <DictSelection v-if="type!=='view'" clearable dictName="客户/供应商资质类型" v-model="scope.row.type"-->
                    <!--                               @itemChange="(val)=>handleChangeType(val,scope.row)"></DictSelection>-->
                    <span v-else>{{ getLabelName(typeList, scope.row.type) }}</span>
                  </el-form-item>

                </template>
                <template v-slot:level="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.level'">
                    <el-select v-if="type!=='view'" v-model="scope.row.level" clearable>
                      <el-option v-for="item in levelOptions" :value="item.dictCode"
                                 :label="item.dictValue"></el-option>
                    </el-select>
                    <!--                <DictSelection v-if="type!=='view'" clearable dictName="客户/供应商资质类型" v-model="scope.row.type"-->
                    <!--                               @itemChange="(val)=>handleChangeType(val,scope.row)"></DictSelection>-->
                    <span v-else>{{ getLabelName(levelOptions, scope.row.type) }}</span>
                  </el-form-item>

                </template>
                <template v-slot:remark="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.remark'">
                    <el-input type="textarea" :disabled="type=='view'" v-model="scope.row.remark"></el-input>
                  </el-form-item>
                </template>
                <template v-slot:status="scope">
                  <el-form-item :prop="'detailsList.' + scope.$index + '.status'">
                    <el-tag v-if="scope.row.status" :type="statusTagTypeList[scope.row.status]">
                      {{ statusList[scope.row.status] }}
                    </el-tag>
                  </el-form-item>
                </template>
                <template v-slot:isRequired="{ column }">
                  <span class="is-required">{{ column.label }}</span>
                </template>
                <template v-slot:action="{ row, $index }">
                  <el-popconfirm
                    class="ele-action"
                    title="确定要删除该信息吗？"
                    @confirm="handleRemove($index)"
                  >
                    <template v-slot:reference>
                      <el-link
                        v-if="type!=='view'"
                        type="danger"
                        :underline="false"
                        icon="el-icon-delete"
                      >
                        删除
                      </el-link>
                    </template>
                  </el-popconfirm>
                </template>

              </ele-pro-table>

            </el-form>

          </el-tab-pane>
          <el-tab-pane v-if="form.processInstanceId" label="流程详情" name="processInstance">
            <bpmDetail :id="form.processInstanceId"></bpmDetail>
          </el-tab-pane>
        </el-tabs>
    <div slot="footer" v-if="activeName=='QC'">
      <el-button v-if="type!=='view'" type="primary" @click="handleSave(false)">保存</el-button>
      <el-button v-if="type!=='view'" type="primary" plan @click="handleSave(true)">提交</el-button>
      <el-button @click="cancel">返回</el-button>
    </div>
    <staffSelection
      ref="staffSelection"
      @confirm="confirmStaffSelection"
    ></staffSelection>
    <vendorDialog
      ref="vendorDialogRef"
      @success="confirmSelection"
    ></vendorDialog>
    <clientDialog
      ref="clientSelection"
      @success="confirmSelection"
    ></clientDialog>
  </ele-modal>
</template>
<script>
import FileUpload from "@/components/upload/fileUpload.vue";
import staffSelection from "./staffSelection.vue";
import {
  getProfessionCertificationById,
  saveProfessionCertification,
  updateProfessionCertificationById,
  contactQcSubmit
} from "@/api/qualification";
import {getFile} from "@/api/system/file";
import bpmDetail from "@/views/bpm/processInstance/businessDetail.vue";
import {mapActions, mapGetters} from "vuex";
import dictEnum from "@/enum/dict";
import clientDialog from "@/views/factoryModel/qualificationManagement/components/clientDialog.vue";
import vendorDialog from "@/views/factoryModel/qualificationManagement/components/vendorDialog.vue";

export default {
  name: "addOrEditDialog",
  components: {vendorDialog, clientDialog, bpmDetail, FileUpload, staffSelection},
  props: {
    addOrEditDialogFlag: Boolean,
    typeInfo: String,
    typeList: Array

  },
  data() {
    return {
      title: '',
      type: '',
      activeName:'QC',
      qualificationOptions: [
        {
          label: '客户资质',
          value: '1'
        },
        {
          label: '供应商资质',
          value: '2'
        },
        {
          label: '个人资质',
          value: '3'
        }
      ],
      levelOptions: [
        {
          dictValue: '初级',
          dictCode: '1'
        },
        {
          dictValue: '中级',
          dictCode: '2'
        },
        {
          dictValue: '高级',
          dictCode: '3'
        }
      ],
      defaultData: {
        accessory: [],
        name: "",
        noticePersonId: "",
        noticePersonName: "",
        num: "",
        remark: "",
        businessRange: "",
        type: "",
        endTime: "",
        startTime: ""
      },
      form: {
        accessory: [],
        detailsList: [],
        relationName: '',
        name: '',
        date: [],
        remark: '',

      },
      rules: {
        name: [{required: true, message: '请输入名称', trigger: 'blur'}],
        code: [{required: true, message: '请输入编码', trigger: 'blur'}],
        certificationType: [{required: true, message: '请选择资质类型', trigger: 'change'}],
        relationName: [{required: true, message: '请选择关联类型', trigger: 'change'}],
        date: [{required: true, message: '请选择有效时间', trigger: 'change'}],
      },
      curIndex: null,
      StaffType: '',

      statusList: {
        10: '有效',
        20: '无效',
        30: '已过期',
      },
      statusTagTypeList: {
        10: 'success',
        20: 'info',
        30: 'danger',
      },
    }
  },
  computed: {
    ...mapGetters(['dict']),
    dictList() {
      return this.dict[dictEnum['客户/供应商资质类型']] || [];
    },
    columns() {
      return [
        {
          type: 'index',
          width: 55,
          align: 'center'
        },
        {
          label: '名称',
          prop: 'name',
          slot: 'name',
          headerSlot: 'isRequired',
          minWidth: 180,
          align: 'center'
        },
        {
          label: '编号',
          prop: 'code',
          slot: 'code',
          headerSlot: 'isRequired',
          minWidth: 120,
          align: 'center'
        },
        {
          label: '许可/经营范围',
          prop: 'businessRange',
          slot: 'businessRange',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '有效期起始日期',
          prop: 'startTime',
          slot: 'startTime',
          headerSlot: 'isRequired',
          minWidth: 160,
          align: 'center'
        },
        {
          label: '有效期截止日期',
          prop: 'endTime',
          slot: 'endTime',
          headerSlot: 'isRequired',
          minWidth: 160,
          align: 'center'
        },
        {
          label: '通知人',
          prop: 'noticePersonName',
          slot: 'noticePersonName',
          headerSlot: 'isRequired',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '附件',
          prop: 'accessory',
          slot: 'accessory',
          headerSlot: 'isRequired',
          minWidth: 140,
        },
        {
          label: '等级',
          prop: 'level',
          slot: 'level',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '分类',
          prop: 'type',
          slot: 'type',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '备注',
          prop: 'remark',
          slot: 'remark',
          minWidth: 140,
          align: 'center'
        },
        {
          label: '状态',
          prop: 'status',
          slot: 'status',
          align: 'center',
        },
        {
          action: 'action',
          slot: 'action',
          label: '操作',
          align: 'center',
          fixed: 'right'
        }
      ]
    },
    disabledToType() {
      return (row) => {
        let list = this.form.detailsList.map(item => item.name)
        let dictCodeList = this.dictList.map(item => item.dictCode)
        let intersectionList = list.filter((v) => dictCodeList.indexOf(v) > -1)
        intersectionList = intersectionList.filter(v => row.name !== v)
        return intersectionList
      }
    },
  },
  created() {
    this.requestDict('客户/供应商资质类型');
  },
  methods: {
    ...mapActions('dict', ['requestDict']),
    getLabelName(arr, id) {
      if (!id) return ''
      return arr.find(item => item.dictCode == id)?.dictValue
    },
    //删除资质
    handleRemove(index) {
      this.form.detailsList.splice(index, 1)
    },
    //结束日期验证
    validateEndDate(row, index) {
      return (rule, value, callback) => {
        if (!value) return callback(new Error(''))
        if (
          row.endTime &&
          row.startTime &&
          value < row.startTime
        ) {
          callback(new Error('截止日期不能小于起始日期'))
        } else {
          callback()
        }
      }
    },
    //页面初始化
    init(type, row = {}) {
      this.title = type == 'add' ? '新增' : type == 'edit' ? '修改' : '详情'
      this.type = type
      if (type !== 'add') {
        this.getCertificateInfo(row)
      }
    },

    handleClick() {
      switch (this.form.certificationType) {
        case '1':
          this.$refs.clientSelection.open();
          break;
        case '2':
          this.$refs.vendorDialogRef.open();
          break;
        case '3':
          this.StaffType = 2
          this.$refs.staffSelection.open([]);
          break;
      }
    },
    changeCertificationType(value) {
      this.form.certificationType = value;
      this.form.relationName = '';
      this.form.relationId = '';
    },
    confirmSelection(obj) {
      this.form.relationId = obj.id
      this.form.relationName = obj.name
      this.$forceUpdate();
    },
    async getCertificateInfo(row) {
      this.form = await getProfessionCertificationById(row.id)
      this.form.date = [this.form.startTime, this.form.endTime]
    },
    //打开选择负责人弹窗
    openStaffSelection(index) {
      this.curIndex = index
      this.StaffType = 1
      this.$refs.staffSelection.open([]);
    },
    //选择负责人回调
    confirmStaffSelection(data, type) {
      if (this.StaffType == 1) {
        this.form.detailsList[this.curIndex].noticePersonName = data.map((item) => item.name).toString();
        this.form.detailsList[this.curIndex].noticePersonId = data.map((item) => item.id).toString();
      } else {
        this.form.relationId = data.map((item) => item.id).join(',');
        this.form.relationName = data.map((item) => item.name).join(',');
      }

    },
    //新增
    handleAdd() {
      this.form.detailsList.push({...this.defaultData})
    },
    //修改资质证书
    handleChangeType(val, row) {
      if (!val) return row.name = ''
      row.name = this.dictList.find(i => i.dictCode == val)?.dictValue || ''

    },
    downloadFile(file) {
      getFile({objectName: file.storePath}, file.name);
    },
    //保存/提交
    handleSave(isSub) {
      this.$refs.form.validate(async (valid) => {
        if (!valid) return this.$message.warning('有必填项未填写，请检查')
        if (!this.form.detailsList.length) return this.$message.warning('至少保存一条资质信息')
        this.form.startTime = this.form.date[0]
        this.form.endTime = this.form.date[1]
        let api = this.type == 'add' ? saveProfessionCertification : updateProfessionCertificationById
        let id = await api(this.form)
        if (isSub) {
          let businessId = this.type == 'add' ? id : this.form.id
          await contactQcSubmit({businessId: businessId, certificationType: this.form.certificationType})
        }
        this.$message.success('保存成功')
        this.$emit('reload')
        this.cancel()
      })

    },
    //关闭弹窗
    cancel() {
      this.$emit('update:addOrEditDialogFlag', false)
    },
  }

}
</script>
<style scoped lang="scss">
:deep.el-form-item {
  margin-bottom: 0
}
</style>
