<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-icon_analysis_expertsranking"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        :rules="rules"
      >
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">专家信息</div>
          </div>
        </div>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="专家分类" prop="expertTypeName">
              <el-input
                clearable
                v-model="parameter.expertTypeName"
                placeholder="请选择专家分类"
                @clear="clearExpertType"
              >
                <el-button
                  slot="append"
                  @click="open"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="专家姓名" prop="fullname">
              <el-input
                clearable
                @focus="handleName"
                prefix-icon="el-icon-search"
                v-model="parameter.fullname"
                placeholder="请输入专家姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作单位" prop="orgName">
              <el-input
                disabled
                v-model="parameter.orgName"
                placeholder="请选择工作单位"
              >
                <!-- <el-button
                  slot="append"
                  @click="openCompany"
                  icon="el-icon-search"
                ></el-button> -->
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="sex">
              <el-select
                style="width: 100%"
                v-model="parameter.sex"
                placeholder="请选择性别"
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                clearable
                style="width: 100%"
                v-model="parameter.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="民族" prop="nation">
              <el-input
                clearable
                v-model="parameter.nation"
                placeholder="请输入民族"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身份证号" prop="idCard">
              <el-input
                clearable
                v-model="parameter.idCard"
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式" prop="mobile">
              <el-input
                clearable
                v-model="parameter.mobile"
                placeholder="请输入手机"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="Email" prop="email">
              <el-input
                clearable
                v-model="parameter.email"
                placeholder="请输入Email"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作地址" prop="address">
              <el-input
                clearable
                v-model="parameter.address"
                placeholder="请输入工作地址"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评标类型" prop="evaType">
              <el-select v-model="parameter.evaType" style="width: 100%;" multiple clearable placeholder="请选择评标类型">
                  <el-option
                      v-for="item in option"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="专家级别" prop="academicDegree">
              <el-input
                clearable
                v-model="parameter.academicDegree"
                placeholder="请输入专家级别"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="6">
            <el-form-item label="省" prop="academicDegree">
              <el-input
                clearable
                v-model="parameter.academicDegree"
                placeholder="请输入省"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="市" prop="academicDegree">
              <el-input
                clearable
                v-model="parameter.academicDegree"
                placeholder="请输入市"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="区" prop="academicDegree">
              <el-input
                clearable
                v-model="parameter.academicDegree"
                placeholder="请输入区"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">资质信息</div>
          </div>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="addTable"
            style="margin-left: 10px"
            >添加</el-button
          >
        </div>

        <el-table
          class="down"
          :data="parameter.qualificationLabelList"
          border
          stripe
          style="width: 100%; margin-top: 20px"
        >
          <el-table-column prop="qualificationTypeName" label="资质分类">
            <template slot-scope="scope">
              <el-input
                disabled
                v-model="scope.row.qualificationTypeName"
                placeholder="请选择资质分类"
              >
                <el-button
                  slot="append"
                  @click="handleOpen(scope.row, scope.$index)"
                  icon="el-icon-search"
                ></el-button>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column prop="qualificationName" label="资质名称">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.qualificationName"
                placeholder="请输入资质名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="qualificationAcquisitionDate" label="取得日期">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.qualificationAcquisitionDate"
                type="date"
                placeholder="请选择取得日期"
                style="width: 100%"
                clearable
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="expiryDate" label="到期日期">
            <template slot-scope="scope">
              <el-date-picker
                style="width: 100%"
                v-model="scope.row.expiryDate"
                type="date"
                placeholder="请选择到期日期"
                clearable
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="文件名称"></el-table-column>
          <el-table-column prop="fileTime" label="上传时间"> </el-table-column>
          <el-table-column width="150px" label="附件">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                v-if="scope.row.accessoryList.length != 0"
              >
                <a
                  target="_blank"
                  @click="downloadFile(scope.row.name, scope.row.url)"
                  >下载</a
                >
              </el-button>
              <el-button
                size="small"
                v-if="scope.row.accessoryList.length != 0"
                type="text"
                @click="deleteHandle(scope.row, scope.$index)"
                >删除</el-button
              >
              <el-upload
                class="upload-demo"
                ref="upload"
                :headers="headers"
                :action="action"
                :file-list="scope.row.accessoryList"
                :multiple="true"
                :before-upload="
                  (res) => {
                    return beforeUpload(res, scope.row, scope.$index)
                  }"
                accept=".png,.jpg,.jpeg,.xlsx,.xls,.pdf,.docx,.doc,.zip,.rar"
                v-show="false"
                :show-file-list="false"
                :on-success="
                  (res) => {
                    return handleSuccess(res, scope.row, scope.$index)
                  }
                "
              >
                <el-button
                  slot="trigger"
                  @click="clickUpload"
                  size="small"
                  type="primary"
                  >上传文件</el-button
                >
              </el-upload>
              <el-button
                slot="trigger"
                v-if="scope.row.accessoryList.length == 0"
                @click="openUpload(scope.row)"
                size="small"
                type="primary"
                >上传文件</el-button
              >
            </template>
          </el-table-column>
          <el-table-column width="90px" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                circle
                icon="el-icon-close"
                @click="delTable(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button @click="handleClose">{{ $t('domestic.cancel') }}</el-button>
      <el-button type="primary" :loading="saveing" @click="handleSave">{{
        $t('domestic.save')
      }}</el-button>
    </div>
    <el-dialog
      title="专家分类"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="dialogBeforeClose"
    >
      <el-table
        :border="true"
        stripe
        fit
        size="mini"
        ref="multipleSelection"
        :data="dataList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" min-width="20%" align="center">
        </el-table-column>
        <el-table-column
          prop="expertTypeCode"
          min-width="20%"
          label="分类编号"
          align="center"
          resizable
        >
        </el-table-column>
        <el-table-column
          prop="expertTypeName"
          show-overflow-tooltip
          min-width="20%"
          align="center"
          label="分类名称"
          resizable
        >
        </el-table-column>
        <el-table-column
          prop="remarks"
          show-overflow-tooltip
          min-width="20%"
          align="center"
          label="备注"
          resizable
        >
        </el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveExpert">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 资质类型 -->
    <el-dialog
      title="资质类型"
      :visible.sync="visible"
      width="60%"
      v-loading="loading"
      :before-close="dialogBeforeClose"
    >
      <div>
        <div class="common-table-content btn-pagenation" ref="tableContent">
          <el-table
            :border="true"
            stripe
            fit
            size="mini"
            ref="multipleSelection"
            :data="aptitudeList"
            @selection-change="selectChange"
          >
            <el-table-column type="selection" min-width="20%" align="center">
            </el-table-column>
            <el-table-column
              prop="code"
              min-width="10%"
              label="资质类型编码"
              align="center"
              resizable
            >
            </el-table-column>
            <el-table-column
              prop="name"
              show-overflow-tooltip
              min-width="10%"
              align="center"
              label="资质类型名称"
              resizable
            >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="dialogBeforeClose">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 选择用户 -->
    <expertPoolUnits ref="user" @addDetail="addDetail"></expertPoolUnits>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import basicData from '@/api/basicData'
import {mapState} from 'vuex'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import expertPoolUnits from './expertPoolUnits.vue'
export default {
  name: 'domesticDialog',
  components: {Breadcrumb,dictUtils,expertPoolUnits},
  props: {
    editData: Object,
  },
  data() {
    return {
      breadcrumbOpt: [{breadcrumbName: '专家库'}, {breadcrumbName: '新增'}],
      saveing: false,
      dialogVisible: false,
      visible: false,
      index: null,
      loading: false,
      aptitudeList: [],
      params: {},
      multipleSelection: [],
      option:[],
      fileList: [],
      userList:[],
      sexOptions: [
        {
          name: '女',
          value: '0',
        },
        {
          name: '男',
          value: '1',
        },
      ],
      rules: {
        // email: [
        //   {
        //     required: true,
        //     message: '请输入邮箱',
        //     trigger: 'blur'
        //   },
        //   {
        //     pattern: /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/,
        //     message: '邮箱格式不正确',
        //     trigger: 'blur'
        //   }
        // ],
        idCard: [
          {
            required: true,
            message: '请输入身份证号',
            trigger: 'blur',
          },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '身份证号格式不正确',
            trigger: 'blur',
          },
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号码',
            trigger: 'blur',
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式不正确',
            trigger: 'blur',
          },
        ],
        account: [
          {
            required: true,
            message: '请输入门户账号',
            trigger: 'blur',
          },
        ],
        expertTypeName: [
          {
            required: true,
            message: '请选择专家分类',
            trigger: 'blur',
          },
        ],
        fullname: [
          {
            required: true,
            message: '请输入专家名称',
            trigger: 'blur',
          },
        ],
        evaType: [
          {
            required: true,
            message: '请选择评标类型',
            trigger: 'blur'
          }
        ],
        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'blur',
          },
        ],
      },
      dataList: [],
      parameter: {
        fullname: '',
        account: '',
        nation: '',
        address: '',
        idCard: '',
        birthday: '',
        mobile: '',
        email: '',
        sex: '1',
        academicDegree: '',
        orgName: '',
        userNumber: '',
        expertTypeName: '',
        typeList: [],
        evaType:'',
        isAddAccount: '',
        qualificationLabelList: [],
      },
    }
  },
  created() {
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
    this.parameter.orgName = this.currentUser.org[0].orgName
    this.parameter.orgId = this.currentUser.org[0].orgId
    this.parameter.orgCode = this.currentUser.org[0].orgCode
    this.addModifyBtn()
    this.option = dictUtils.getDictItemsFromCache('zjpbfl')
  },
  computed: {
    ...mapState({
      headers: (state) => {
        return {Authorization: `Bearer ${state.login.currentUser.token}`}
      },
      action: function () {
        return window.context.portal + '/biz/universal/v1/minioUpload'
      },
    }),
  },
  mounted() {},
  methods: {
    handleName(){
      this.$refs.user.add()
    },
    open() {
      this.getExpert()
      this.dialogVisible = true
    },
    handleOpen(row, index) {
      this.params = row
      this.index = index
      this.loading = true
      this.visible = true
      basicData.bizQualificationCategoryQuery(this.queryParam).then((res) => {
        this.loading = false
        this.aptitudeList = res.value.rows
      })
    },
    dialogBeforeClose() {
      this.visible = false
      this.dialogVisible = false
    },
    // 上传附件成功回调
    handleSuccess(res, row, index) {
      this.parameter.qualificationLabelList.forEach((item, i) => {
        if (i == this.index) {
          item.accessoryList.push(res.value)
        }
        item.accessoryList.forEach((val) => {
          item.name = val.name
          item.fileTime = val.createTime
          item.url = val.url
        })
      })
    },
    beforeUpload(file) {
      let acceptList = ['xlsx', 'xls','png','jpg','jpeg','xlsx','xls','pdf','docx','doc','zip','rar']
      // 根据文件名获取文件的后缀名
      let fileType = file.name.split('.').pop().toLowerCase()
      // 判断文件格式是否符合要求
      if (acceptList.indexOf(fileType) === -1) {
        this.$message.error('请上传 .png,.jpg,.jpeg,.xlsx,.xls,pdf,.docx,.doc,.zip,.rar 格式的文件 !')
        return false
      }
    },
    openUpload(row) {
      if (
        row.qualificationTypeName == '' ||
        row.qualificationTypeName == undefined
      ) {
        this.$message.warning('请先选择资质分类')
      } else {
        this.clickUpload()
      }
    },
    clickUpload() {
      this.$refs['upload'].$refs['upload-inner'].handleClick()
    },
    //下载按钮回调
    downloadFile(name, url) {
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      a.download = name
      a.target = '_blank'
      a.href = url
      a.dispatchEvent(event)
    },
    // 删除
    deleteHandle(row, index) {
      this.$confirm('是否确认删除该附件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        row.accessoryList.splice(index, 1)
        row.name = ''
        row.fileTime = ''
        row.url = ''
        row.accessoryList = []
      })
    },
    addTable() {
      this.parameter.qualificationLabelList.push({
        qualificationTypeName: '',
        qualificationTypeCode: '',
        qualificationAcquisitionDate: '',
        expiryDate: '',
        accessoryList: [],
      })
    },
    addDetail(data){
      console.log(data);
      this.parameter.fullname = data[0].fullname
      this.parameter.mobile = data[0].mobile
      this.parameter.account =  data[0].account
      this.parameter.userId = data[0].id
      this.parameter.sex = data[0].sex
      this.parameter.email = data[0].email
      this.parameter.orgName = data[0].orgName
      this.parameter.orgId = data[0].orgId
      this.parameter.orgCode = data[0].orgCode
    },
    //列表删除行
    delTable(index, row) {
      this.parameter.qualificationLabelList.splice(index, 1)
      if (row.id) {
        this.parameter.qualificationLabelList.push(row.id)
      }
    },
    //编辑
    addModifyBtn() {
      if (this.$route.query.editRows) {
        console.log()
        this.breadcrumbOpt[1].breadcrumbName = '编辑'
        this.modifychoData(this.$route.query.editRows)
      } else {
        this.breadcrumbOpt[1].breadcrumbName = '新增'
      }
    },
    getExpert() {
      basicData.bizExpertTypeQuery(this.queryParam).then((res) => {
        this.dataList = res.rows
      })
    },
    saveExpert() {
      this.parameter.typeList = this.multipleSelection
      let data = this.parameter.typeList.map((item) => {
        return item.expertTypeName
      })
      this.parameter.expertTypeName = data.toString()
      this.dialogVisible = false
    },
    clearExpertType() {
      this.parameter.expertTypeName = ''
      this.parameter.typeList = []
      this.multipleSelection = []
      this.$forceUpdate()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    selectChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length > 1) {
        this.$refs.multipleSelection.toggleRowSelection(
          this.multipleSelection[0],
          false
        )
      }
    },
    save() {
      this.parameter.qualificationLabelList.forEach((item, index) => {
        if (index == this.index) {
          this.multipleSelection.forEach((val) => {
            item.qualificationTypeName = val.name
            item.qualificationTypeCode = val.code
          })
        }
      })
      this.dialogBeforeClose()
    },
    //获取修改回显数据
    modifychoData(val) {
      this.$http
        .post('${portal}/bizExpertDatabase/v1/selectOne?id=' + val.id)
        .then((res) => {
          if (res.data.state) {
            this.parameter = res.data.value
            if (this.parameter.qualificationLabelList == undefined) {
              this.parameter.qualificationLabelList = []
            }
            this.parameter.expertTypeName = ''
            if (
              this.parameter.typeList &&
              this.parameter.typeList.length != 0
            ) {
              this.parameter.expertTypeName = this.parameter.typeList.map(
                (item) => {
                  return item.expertTypeName
                }
              )
            }
            this.parameter.evaType = res.data.value.evaType.split(',')  
            if (this.parameter.orgList && this.parameter.orgList.length != 0) {
              this.parameter.useOrgList = this.parameter.orgList.map((item) => {
                return item.name
              })
            }
            this.parameter.qualificationLabelList.forEach((item) => {
              item.accessoryList.forEach((val) => {
                if (item.id == val.sourceId) {
                  item.name = val.name
                  item.url = val.url
                  item.fileTime = val.createTime
                }
              })
            })
          }
        })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.go(-1)
      this.parameter = {}
    },
    // 保存
    handleSave() {
      this.parameter.qualificationLabelList.forEach((item) => {
        if (item.id) {
          delete item.id
        }
        if (item.accessoryList) {
          item.accessoryList.forEach((val) => {
            if (val.id) {
              delete val.id
            }
          })
        }
      })
      this.parameter.evaType = this.parameter.evaType.toString()
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          this.saveing = true
          basicData.bizExpertDatabaseSave(this.parameter).then((res) => {
            this.saveing = false
            if (res.state) {
              this.$message.success('保存成功')
              this.handleClose()
            }
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
  padding: 10px 0;
  .rows-left {
    margin-right: 10px;
    .rows-hr {
      width: 3px;
      height: 18px;
      background-color: #0e6eff;
      border-radius: 2px;
    }
  }
  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
    }
  }
}
.tooltip {
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
  }
}
</style>
