<!--
  @description:供应商联系人报名信息
  @Modifier:gmy
  @routerPath:/procurement/procurementParticipateNobiddingclass
  @date:2020/8/11-13:46
-->
<template>
  <div v-loading="loading">
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back">
        <i class="iconfont icon-fanhui mr10" />联系人信息登记
      </div>
    </section>
    <el-form
      ref="form"
      :model="projectCaseData"
      :rules="rules"
      :inline-message="true"
    >
      <p class="title">
        1.采购项目概况
      </p>
      <table class="from_table mb16">
        <tr>
          <td>
            <el-form-item label="采购项目名称" />
          </td>
          <td>
            <p>{{ projectData.tenderName }}</p>
          </td>
          <td>
            <el-form-item label="采购项目编号" />
          </td>
          <td>
            <p>{{ projectData.tenderNo }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="公告标题" />
          </td>
          <td colspan="3">
            <p>{{ projectData.title }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="采购单位" />
          </td>
          <td colspan="3">
            <p>{{ projectData.projectBuyersName }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="邀请函发布时间" />
          </td>
          <td>
            <p>{{ $Moment(projectData.publishTime).format(momentDateTime) }}</p>
          </td>
          <td>
            <el-form-item label="报价截止时间" />
          </td>
          <td>
            <p>{{ $Moment(projectData.quoteEndTime).format(momentDateTime) }}</p>
          </td>
        </tr>
        <tr v-if="isduration">
          <td>
            <el-form-item label="报价时长" />
          </td>
          <td colspan="3">
            <p>{{ projectData.publishTime }}</p>
          </td>
        </tr>
      </table>
    </el-form>
    <p class="title">
      2.联系人信息
    </p>
    <el-form
      ref="form"
      :model="formData"
      :rules="rules"
      :inline-message="true"
    >
      <table class="from_table mb16">
        <tr>
          <td>
            <el-form-item label="单位名称" prop="tenderNo" />
          </td>
          <td>
            <p>{{ projectData.companyName }}</p>
          </td>
          <td>
            <el-form-item label="联系人" prop="buyersLinkerName" />
          </td>
          <td>
            <el-input v-model="projectData.buyersLinkerName" placeholder="最多允许输入20个汉字" maxlength="20" />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="联系电话" prop="buyersLinkerTel" />
          </td>
          <td>
            <el-input v-model="projectData.buyersLinkerTel" placeholder="" />
          </td>
          <td>
            <el-form-item label="邮箱" prop="buyersLinkerEmail" />
          </td>
          <td>
            <el-input v-model="projectData.buyersLinkerEmail" placeholder="" />
          </td>
        </tr>
      <!--<tr>-->
        <!--<td>-->
        <!--<el-form-item label="附件" prop="principalData" />-->
        <!--</td>-->
        <!--<td colspan="3">-->
        <!--<upload-->
        <!--ref="upload"-->
        <!--:on-change="principalFile"-->
        <!--:data="principalData"-->
        <!--:file-list="principalList"-->
        <!--:auto-delete="true"-->
        <!--:auto-upload="false"-->
        <!--:success="successList"-->
        <!--title=""-->
        <!--tip-text="上传附件格式（*.doc;*.docx;*.pdf;*.png;*.jpg;*.zip;*.jpeg;*.txt;*.xlsx;*. xls;*.ppt;*.pptx;*.rar）"-->
        <!--accept=".doc,.docx,.pdf,.png,.jpg,.zip;.jpeg;.txt;.xlsx;. xls;.ppt;.pptx;.rar"-->
        <!--file-ref="fileRef"-->
        <!--but-text="点击上传"-->
        <!--/>-->
        <!--</td>-->
      <!--</tr>-->
      </table>
    </el-form>
    <p style="margin-top:30px;margin-bottom:30px;">
      <span style="color:red;">注意：</span> 1.报价截止前采购方无法查看您的报价信息。2.请真实填写报名信息，否则后果自负。
    </p>
    <!-- 审核信息 -->
    <auditInfoComp v-if="procurementSignUpAuditList.length>0 && isduration" :audit-list="procurementSignUpAuditList" />
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button :loading="confirmLoading" type="primary" @click="nextStep('form')">
            提交
          </el-button>
        </div>
      </div>
    </div>
    <!--    审核状态盖章-->
    <div
      v-for="(item, index) in auditPicture"
      v-if="item.typecode===projectData.auditStatus"
      :key="index"
      class="nobiddingPicture"
    >
      <img :src="item.imgUrl" alt="">
    </div>
  </div>
</template>

<script>
/* 接口*/
import { mapParticipationApply } from '@/api/procurement/procurementSignup' // 供应商-报名可参与项目列表-非竞价数据 报名提交
/* 公用方法*/
import { procurementGroupMixins } from '@/views/procurement/mixins/procurementGrounpMixins' // 公共字典
import { linkerName, email, phoneAndText, characters1_auto } from '@/assets/js/validate'// 校验输入内容
import { commonMxin } from '@/mixins/commonMxin'// 字典信息
/*   公共组件 */
import auditInfoComp from '@/views/procurement/components/procurementAuditComp/procurementAuditComp-detail'
// import upload from '@comp/common/updownload/upload'// 文件上传组件
// import cascader from '@comp/common/cascader' // 三级联动
import { procurementContactsApplyGrounps } from '../mixins/procurementContactsApplyGrounpMixins' // 公共字典
// vuex
import { mapGetters } from 'vuex'
export default {
  name: 'ProcurementProjectAdd',
  inject: ['getTenderBase'],
  components: {
    // upload,
    // cascader, // 三级联动
    auditInfoComp // 审核信息
  },
  mixins: [procurementContactsApplyGrounps, procurementGroupMixins, commonMxin],
  props: {
    // 项目信息
    projectData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 审核信息
    procurementSignUpAuditList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      labelposition: 'right',
      loading: true,
      isduration: false, // 是否展示竞价时长 采购方式为竞价的 展示 布尔值
      tenderBaer: this.getTenderBase(), // 获取项目信息
      // 校验输入内容
      rules: {
        buyersLinkerName: [{ required: true, validator: linkerName, trigger: 'blur' }], // 联系人
        buyersLinkerTel: [{ required: true, validator: phoneAndText, trigger: 'blur' }], // 联系电话
        buyersLinkerEmail: [{ required: true, validator: email, trigger: 'blur' }], // 邮箱
        buyersLinkerAddress: [{ required: true, validator: characters1_auto, trigger: 'blur' }],
        buyersLinkerStreet: [{ required: true, validator: characters1_auto, trigger: 'blur' }]
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
  },
  created() {
    // 是否展示竞价时长 采购方式为竞价的 展示 布尔值
    this.isduration = this.tenderBaer.tenderMethod === '14'
  },
  methods: {
    // 保存组装数据
    assemblyData() {
      const data = {
        linker: this.projectData.buyersLinkerName, // 采购项目名称
        linkerEmail: this.projectData.buyersLinkerEmail, // 联系人邮箱
        linkerTel: this.projectData.buyersLinkerTel, // 练习人电话
        packId: this.tenderBaer.packId, // 采购项目标段id
        tenderId: this.projectData.tenderId, // 采购项目id
        supplierId: this.projectData.supplierId, // 供应商Id
        supplierName: this.projectData.supplierName, // 供应商名称
        linkerAreaName: this.projectData.buyersLinkerAddress, // 联系地址
        linkerAddress: this.projectData.buyersLinkerStreet, // 联系详细地址
        linkerAreaCode: this.projectData.projectAreaCode // code
      }
      return data
    },
    // 报名数据请求
    getApply() {
      this.confirmLoading = true
      // 获取数据
      const data = this.assemblyData()
      // 获取采购方式
      const tenderMethod = this.tenderBaer.tenderMethod
      mapParticipationApply(data).then((res) => {
        this.principalData.bizId = res.data // 获取业务bizid
        // 文件上传数组不为空
        if (this.principalList.length > 0) {
          this.$refs.upload.submitUpload()// 上传附件
          return
        }
        this.routerPath(tenderMethod, 'next')
      }).catch(() => {
        this.confirmLoading = false
      })
    },
    // 提交
    nextStep(formName) {
      // 审核字段
      const audit = this.projectCaseData.signupAudit
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        // 校验通过
        if (valid) {
          // 判断是否需要审核audit 01需要审核
          if (audit && audit === '01') {
            this.$confirm('确认提交审核吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              confirmButtonClass: 'confirmBtn',
              cancelButtonClass: 'cancelBtn',
              type: 'warning'
            }).then(() => {
              // 调用报名方法
              this.getApply() // 调用请求项目数据方法
            }).catch(() => {
              this.confirmLoading = false
            })
            return
          }
          // 不需要审核 调用报名方法
          this.$confirm('确认提交吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            // 调用报名方法
            this.getApply() // 调用请求报名的方法
          }).catch(() => {
            this.confirmLoading = false
          })
        } else { // 校验不通过
          this.confirmLoading = false
          return
        }
      })
    },
    // 附件上传
    principalFile(file, fileList) {
      this.principalList = fileList
    },
    // 附件上传成功的回调
    successList(file) {
      // 获取采购方式
      const tenderMethod = this.tenderBaer.tenderMethod
      this.routerPath(tenderMethod, 'next')
    },
    // 返回
    back() {
      // 获取采购方式
      const tenderMethod = this.tenderBaer.tenderMethod
      // 调用跳转路由方法
      this.routerPath(tenderMethod)
    },
    // 所在区域三级联动组件使用
    regionData(regionName, location) {
      this.formData.buyersLinkerAddress = regionName
      this.formData.projectAreaCode = location.join(',')
    },
    // 封装路由跳转方法
    routerPath(tenderMethod, type) {
      // 返回路由
      const backPathing = {
        '11': '/proEnquiry/projectPaticipating', // 询价-项目管理列表
        '12': '/proSinglesource/projectPaticipating', // 单一来源-项目管理列表
        '13': '/proCompetitive/projectPaticipating', // 竞争性谈判-项目管理列表
        '14': '/proOurtcy/projectPaticipating' // 竞价-项目管理列表
      }
      const backPathObj = {
        '11': '/proEnquiry/projectCompleted', // 询价-项目管理列表
        '12': '/proSinglesource/projectCompleted', // 单一来源-项目管理列表
        '13': '/proCompetitive/projectCompleted', // 竞争性谈判-项目管理列表
        '14': '/proOurtcy/projectCompleted' // 竞价-项目管理列表
      }
      if (type === 'next') {
        // 提交报名
        this.$router.push(backPathing[tenderMethod])
        return
      }
      // 返回按钮
      this.$router.push(backPathObj[tenderMethod])
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
  .title{
    font-weight: 600;
  }
  .but_botton{
    line-height: 70px;
    text-align: center;
  }
  .nobiddingPicture {
    position: absolute;
    right: 26px;
    top: 26px;
    width: 96px;
    height: 96px;
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
</style>
