<!--
  @description:业务经办人信息
  @Modifier:qk
  @routerPath:/supplierDeclaration/supplier/businessManagerInfo
  @date:2020/2/17-17:27
-->
<template>
  <div>
    <div>
      <!-- 新增业务经办人 -->
      <div v-if="listArray.length < 3" style="margin-bottom:10px;">
        <el-button type="primary" @click="addClick">
          {{ language.Newbusinessoperator }}
        </el-button>
        <el-button
          size="mini"
          style="color: red;font-size:18px;"
          type="text"
        >
          （必填）
        </el-button>
      </div>
      <section class="p0-16">
        <el-row v-for="(item,index) in listArray" :key="index" :gutter="40">
          <!-- 经办人 -->
          <el-form
            :ref="'form'"
            :model="item"
            :rules="rules"
            :inline-message="true"
          >
            <table class="from_table">
              <tr>
                <td :style="{'border-top':index>0?'0px':''}" colspan="4" style="text-align: left;font-weight: bold">
                  业务经办人{{ index+1 }}
                  <el-button v-if="index === 2" style="margin-right:24px" type="text" @click="delteAdd(index)">
                    删除
                  </el-button>
                </td>
              </tr>
              <tr>
                <!--姓名-->
                <td>
                  <el-form-item
                    ref="linkname"
                    :label="language.surname"
                    prop="linkname"
                  />
                </td>
                <td>
                  <el-input v-model="item.linkname" :placeholder="language.Pleaseinput" />
                </td>
                <!--身份证号或护照号-->
                <td>
                  <el-form-item
                    ref="linkerID"
                    label="身份证号或护照号"
                    prop="linkerID"
                  />
                </td>
                <td>
                  <el-input v-model="item.linkerID" :placeholder="language.Pleaseinput" />
                </td>
              </tr>
              <tr>
                <!--手机-->
                <td>
                  <el-form-item
                    ref="linktel"
                    :label="language.phone"
                    prop="linktel"
                  />
                </td>
                <td><el-input v-model="item.linktel" :placeholder="language.Pleaseinput" /></td>
                <!--邮箱-->
                <td>
                  <el-form-item
                    ref="email"
                    :label="language.buyersLinkerEmail"
                    maxlength="50"
                    prop="email"
                  />
                </td>
                <td><el-input v-model="item.email" :placeholder="language.Pleaseinput" /></td>
              </tr>
              <tr>
                <!--身份证号或护照扫描件-->
                <td>
                  <el-form-item
                    :label="language.IDcardnumberor"
                    prop="identityCardType"
                  />
                </td>
                <td>
                  <upload
                    :ref="'identityCard'+index"
                    :on-change="identityCardTFileChange"
                    :data="item.identityCardData"
                    :auto-delete="true"
                    :auto-upload="true"
                    :limit="1"
                    but-text="图片上传"
                    title=""
                    accept="image/jpg,image/jpeg,image/png"
                    tip-text="上传格式 (.jpg .png)"
                  />
                </td>
                <!--授权书扫描-->
                <td class="letter-attorney">
                  <el-form-item
                    ref="letterAttorneyType"
                    prop="letterAttorneyType"
                  >
                    <template slot="label">
                      <span>
                        <span>授权书扫描</span>
                        <!-- <a v-if="index === 0" style="margin-left: 10px;">
                          <el-button type="text" @click="dowloadFile">下载模板</el-button>
                        </a> -->
                      </span>
                    </template>
                  </el-form-item>
                </td>
                <td>
                  <upload
                    :ref="'uploads'+index"
                    :on-change="fileChange"
                    :data="item.letterAttorneyData"
                    :auto-delete="true"
                    :auto-upload="true"
                    :limit="1"
                    title=""
                    but-text="图片上传"
                    accept="image/jpg,image/jpeg,image/png"
                    tip-text="上传格式 (.jpg .png)"
                  />
                </td>
              </tr>
            </table>
          </el-form>
        </el-row>
      </section>
      <!-- 审核意见 -->
      <inforaMtionAudit />
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <!-- 编辑申报材料 -->
        <template v-if="pageType==='declarationFirst'">
          <!-- 上一步 -->
          <el-button :loading="confirmLoading" @click="prevStep">
            {{ language.Previousstep }}
          </el-button>
          <!-- 保存 -->
          <el-button :loading="confirmLoading" @click="saveData('save')">
            {{ language.keep }}
          </el-button>
          <!-- 下一步 -->
          <el-button :loading="confirmLoading" type="primary" @click="nextStep('form')">
            {{ language.approvalNext }}
          </el-button>
        </template>
        <!-- 申报材料变更 -->
        <template v-if="pageType==='declarationChange'">
          <el-button :loading="confirmLoading" @click="butSaveData('form')">
            保存
          </el-button>
          <el-button :loading="confirmLoading" type="primary" @click="submitData('form')">
            提交
          </el-button>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { saveDepartLinkerInfo, getUpdateLinker } from '@/api/supplier/supplierBaseInfo'// 暂存 ，获取
import { submitDepartLinkerChangeInfo } from '@/api/supplier/supplierChange'// 基本信息变更提交
import { downLoadFile } from '@/api/common/uploadCenter' // 下载接口
import { download } from '@/assets/js/utils/index' // 根据文件流下载附件
/* 公用方法 */
import { linkerName, email, makeSureId, phone } from '@/assets/js/validate'
import { validFn, randomData, cloneObject } from '@assets/js/utils'// 常用方法
/* 混合开发*/
import { declareHegSupperMixins } from '@/views/supplier/editorDeclaration/mixins/declareHegSupperMixins'// 供应商-公用方法参数
/* 组件*/
import inforaMtionAudit from '../inforaMtionAudit/inforaMtionAudit-detail'// 审核信息
import upload from '@comp/common/updownload/upload'
import { mapGetters } from 'vuex'
export default {
  name: 'BusinessManagerInfo',
  components: {
    upload,
    inforaMtionAudit
  },
  mixins: [declareHegSupperMixins],
  props: {
    departData: {
      type: String,
      default: function() {
        return ''
      }
    },
    changeRecord: {
      type: Boolean,
      default: function() {
        return
      }
    }
  },
  data() {
    return {
      // 授权书扫描模板下载地址
      fileUrl: '',
      // 获取数据所需参数
      judgePageData: {
        departId: '', // 供应商id
        declarationId: '', // 申报id
        isViewPage: '01' // 非变更查看页面传01 否则传空
      },
      pageType: this.$route.meta.type, // 当前页面所处状态 declarationFirst 编辑申报材料查看 declarationChange 申报材料变更时
      confirmLoading: false, // 暂存Loding
      // 新增业务经办人字段
      addData: {
        id: '', // 经办人id
        linkname: '', // 姓名
        linkerID: '', // 身份证
        linktel: '', // 手机
        /* 图片上传-不传给后端主要是为了校验是否上传了文件*/
        identityCardType: '', // 身份证号或护照扫描件-附件是否上传
        letterAttorneyType: '' // 授权书扫描-附件是否上传
      },
      // 校验输入内容
      rules: {
        linkname: [{ required: true, validator: linkerName, trigger: 'blur' }], // 姓名
        linkerID: [{ required: true, validator: makeSureId, trigger: 'blur' }], // 身份证号或护照号
        email: [{ required: true, validator: email, trigger: 'blur' }], // 邮箱
        linktel: [{ required: true, validator: phone, trigger: 'blur' }], // 手机
        /* 图片上传-不传给后端主要是为了校验是否上传了文件*/
        identityCardType: [{ required: true, message: '请上传', trigger: 'change' }], // 身份证号或护照扫描件-附件是否上传
        letterAttorneyType: [{ required: true, message: '请上传', trigger: 'change' }] // 授权书扫描-附件是否上传
      },
      // 下载模板参数
      fileData: {
        fileId: '',
        fileType: 'infustrial_entrust_tender_file'
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  created() {
    this.judgePageData.isViewPage = this.pageType === 'declarationChange' ? '' : '01'
    if (this.pageType === 'declarationFirst') { // 编辑申报材料查看
      this.initData()// 初始化业务经办人
    } else if (this.pageType === 'declarationChange') { // 申报材料变更时
      this.initData()// 初始化业务经办人
    }
    // 下载模板拼接地址
    this.getFileUrl()
  },
  methods: {
    // 下载模板拼接地址
    getFileUrl() {
      // 获取fileId
      this.$store.dispatch('SetSysConfig', 'infustrial_entrust_tender_file').then((data) => {
        this.fileData.fileId = data.configValue
        // const params = {
        //   fileId: data.configValue,
        //   fileType: 'infustrial_entrust_tender_file'
        // }
        // this.fileUrl = downLoadFileUrl + '?fileId=' + params.fileId + '&fileType=' + params.fileType
      })
    },
    // 删除业务经办人
    delteAdd(index) {
      this.listArray.splice(index, 1)
    },
    // 新增业务经办人
    addClick() {
      if (this.listArray.length < 3) {
        const data = cloneObject(this.addData)// 深层拷贝
        data.id = randomData()// 随机生成Id
        this.listArray.push(data)
      }
    },
    // 身份证号或护照扫描件附件上传监听
    identityCardTFileChange() {
      this.listArray.forEach((item, index) => {
        // 授权书扫描-附件是否上传
        if (this.$refs['identityCard' + index][0].fileList.length > 0) {
          this.$set(item, 'identityCardType', 'true')// 上传了
        } else {
          this.$set(item, 'identityCardType', '')// 未上传
        }
      })
    },
    // 附件上传监听
    fileChange() {
      this.listArray.forEach((item, index) => {
        // 授权书扫描-附件是否上传
        if (this.$refs['uploads' + index][0].fileList.length > 0) {
          this.$set(item, 'letterAttorneyType', 'true')// 上传了
        } else {
          this.$set(item, 'letterAttorneyType', '')// 未上传
        }
      })
    },
    // 初始化业务经办人
    // departId
    initData(val) {
      if (val === '01') {
        this.judgePageData.isViewPage = ''
      } else {
        this.judgePageData.isViewPage = '01'
      }
      const params = {
        departId: this.judgePageData.departId,
        declarationId: this.judgePageData.declarationId, // 申报id
        isViewPage: this.judgePageData.isViewPage // 判断是否为变更数据
      }
      getUpdateLinker(params).then((response) => {
        // 如果为空默认生成两条数据
        if (response.data.linkerlist.length <= 1) {
          this.addClick()// 新增业务经办人
          this.addClick()// 新增业务经办人
          return
        } else { // 保存过
          const listArray = [...response.data.linkerlist]
          // 初始化参数
          listArray.forEach(item => {
            item.identityCardType = '' // 身份证号或护照扫描件-附件是否上传
            item.letterAttorneyType = '' // 授权书扫描-附件是否上传
          })
          this.listArray = listArray
        }
      })
    },
    // 保存组装数据
    assemblyData() {
      const data = {
        departInfoId: this.departData, // 机构信息Id
        dto: {
          departId: this.$route.query.departId, // 机构Id
          linkerlist: [...this.listArray]
        }
      }
      data.dto.linkerlist.forEach(item => {
        item.departId = data.dto.departId// 机构Id
        item.departInfoId = data.departInfoId // 机构信息Id
      })
      return data
    },
    // 保存数据接口下一步
    saveData(type) {
      this.confirmLoading = true// btnLoding
      const data = this.assemblyData()// 组装数据
      saveDepartLinkerInfo(data).then(res => {
        // route携带参数
        const pathData = {
          ...this.$route.query
        }
        if (type === 'next') { // 下一步
          this.$emit('stepPage', 'next', pathData)// 步骤条切换方法 next 下一步
        } else if (type === 'save') { // 保存
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        }
        this.confirmLoading = false// btnLoding
      }).catch(() => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 上一步
    prevStep() {
      // route携带参数
      const pathData = {
        ...this.$route.query
      }
      this.$emit('stepPage', 'prev', pathData)// 步骤条切换方法 prev 上一步
    },
    // 申报材料变更-保存
    butSaveData(formName) {
      let is_valid = true// 校验是否通过
      // 校验输入内容
      this.$refs[formName].forEach(ele => {
        ele.validate((valid, field) => {
          if (!valid && is_valid) {
            is_valid = false
            validFn(field, this)// 校验
          }
        })
      })
      // 校验通过
      if (is_valid) {
        this.saveData('save')//
      }
    },
    // 申报材料变更-提交
    submitData(formName) {
      let is_valid = true// 校验是否通过
      // 校验输入内容
      this.$refs[formName].forEach(ele => {
        ele.validate((valid, field) => {
          if (!valid && is_valid) {
            is_valid = false
            validFn(field, this)// 校验
          }
        })
      })
      // 校验通过
      if (is_valid) {
        this.$confirm('确认提交审核吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.changeRecord === true) {
            this.listArray.id = ''
          }
          const params = {
            departId: this.departId,
            linkerlist: this.listArray,
            departInfoId: this.departData
          }
          submitDepartLinkerChangeInfo(params).then((response) => {
            if (response.header.ret === '0') {
              this.$message({
                type: 'success',
                message: '提交成功'
              })
              this.$nextTick(function() {
                this.$emit('showStatuschage')// 传给父集组件参数-审核状态-审核图片展示
                const data = '01'
                this.initData(data)
              })
            } else {
              this.$message({
                type: 'warning',
                message: '提交失败'
              })
            }
          })
        }).catch(() => {
        })
      }
    },
    // 暂存，进行下一步
    nextStep(formName) {
      let is_valid = true// 校验是否通过
      // 校验输入内容
      this.$refs[formName].forEach(ele => {
        ele.validate((valid, field) => {
          if (!valid && is_valid) { // 校验不通过
            is_valid = false
            this.$confirm('业务信息未完善, 是否进入下一步?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              confirmButtonClass: 'confirmBtn',
              cancelButtonClass: 'cancelBtn',
              type: 'warning'
            }).then(() => {
              this.saveData('next')
            }).catch(() => {
            })
          }
        })
      })
      // 校验通过
      if (is_valid) {
        this.saveData('next')//
      }
    },
    // 下载模板
    dowloadFile() {
      downLoadFile(this.fileData).then((res) => {
        download(res, '授权书扫描模板.docx')
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.letter-attorney{
  /deep/ .el-form-item__content{
    &:after{
      display: none;
    }
  }
}
</style>
