<!--
  @description:供应商联系人报名信息
  @Modifier:gmy
  @routerPath:/procurement/procurementParticipateNobiddingclass
  @date:2020/8/11-13:46
-->
<template>
  <div v-loading="loading">
    <div class="content-header tools clearfix" style="padding: 0 8px">
      <div class="title-back fl pointer">
        <!--返回-->
        <i class="iconfont icon-fanhui" @click="back" />
        <h1 class="titleH1">
          联系人信息登记
        </h1>
      </div>
    </div>
    <div class="main">
      <el-form
        ref="form"
        :model="projectCaseData"
        :rules="rules"
        :inline-message="true"
      >
        <p class="page-title">
          1.采购项目概况
        </p>
        <table class="tableData mb16">
          <tr>
            <td>
              采购项目名称
            </td>
            <td>
              {{ projectCaseData.tenderName }}
            </td>
            <td>
              采购项目编号
            </td>
            <td>
              {{ projectCaseData.tenderNo }}
            </td>
          </tr>
          <tr>
            <td>
              公告标题
            </td>
            <td colspan="3">
              {{ projectCaseData.title }}
            </td>
          </tr>
          <tr>
            <td>
              采购单位
            </td>
            <td colspan="3">
              {{ projectCaseData.projectBuyersName }}
            </td>
          </tr>
          <tr>
            <!-- tenderType 00 公开 01邀请-->
            <td>
              {{ projectCaseData.tenderType==='00'?'公告发布时间':'邀请函发布时间' }}
            </td>
            <td :colspan="projectCaseData.tenderMethod!=='12'?'0':'3'">
              {{ projectCaseData.publishTime && $Moment(projectCaseData.publishTime).format(momentDateTime) }}
            </td>
            <!-- tenderMethod 采购方式为单一来源时不显示报价截止时间字段 -->
            <template v-if="projectCaseData.tenderMethod!=='12'">
              <td>
                报价截止时间
              </td>
              <td>
                {{ projectCaseData.quoteEndTime && $Moment(projectCaseData.quoteEndTime).format(momentDateTime) }}
              </td>
            </template>
          </tr><tr v-if="isduration">
            <td>
              报价时长
            </td>
            <td colspan="3">
              {{ projectCaseData.publishTime }}
            </td>
          </tr>
        </table>
        <p class="title">
          2.联系人信息
        </p>
        <table class="from_table">
          <tr>
            <td>
              <el-form-item label="单位名称" prop="tenderNo" />
            </td>
            <td>
              {{ projectCaseData.companyName }}
            </td>
            <td>
              <el-form-item label="联系人" prop="buyersLinkerName" />
            </td>
            <td>
              <el-input v-model.trim="projectCaseData.buyersLinkerName" placeholder="最多允许输入20个汉字" maxlength="20" />
            </td>
          </tr>
          <tr>
            <td>
              <el-form-item label="联系电话" prop="buyersLinkerTel" />
            </td>
            <td>
              <el-input v-model="projectCaseData.buyersLinkerTel" placeholder="请输入联系电话" />
            </td>
            <td>
              <el-form-item label="邮箱" prop="buyersLinkerEmail" />
            </td>
            <td>
              <el-input v-model="projectCaseData.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="true"-->
          <!--                :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>
      <div style="margin-top:30px;margin-bottom:30px;color:red;">
        <span>注意：</span>
        <p>1.报价截止前采购无法查看您的报价信息</p>
        <p>2.请真实填写报价信息，否则后果自负</p>
        <p>3.请各位供应商在确认参与报价后认真阅读采购文件及附件要求，如对采购物料品牌、型号、附加零部件以及附加服务等有任何疑问，请务 必通过供应商界面点击“正在参与项目”，选中参与项目，点击“澄清质疑”中“供应商澄清”提交问题。如无提交则视为全部 理解满足用户采购需求，如弃标将严格考核。</p>
      </div>
    </div>
    <!--保存按钮-->
    <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>
</template>

<script>
/* 接口*/
import { notBiddingInfo, mapParticipationApply } from '@/api/procurement/procurementSignup' // 供应商-报名可参与项目列表-非竞价数据 报名提交
/* 公用方法*/
import { linkerName, email, characters1_auto, phoneAndText } from '@/assets/js/validate'// 校验输入内容
import { randomData } from '@/assets/js/utils' // 生成随机Uid
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' // 公共字典
import { procurementContactsApplyMinxs } from '../mixins/procurementContactsApplyMixins'
// vuex
import { mapGetters } from 'vuex'
export default {
  name: 'ProcurementProjectAdd',
  // components: {
  //   upload,
  //   cascader, // 三级联动
  //   auditInfoComp // 审核信息
  // },
  mixins: [procurementContactsApplyGrounps, procurementContactsApplyMinxs, commonMxin],
  data() {
    return {
      confirmLoading: false,
      labelposition: 'right',
      loading: true,
      isduration: false, // 是否展示竞价时长 采购方式为竞价的 展示 布尔值
      // 采购项目信息
      pathData: {
        packId: this.$route.query.packId
      },
      // 校验输入内容
      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.$route.query.tenderMethod === '14'
    this.initData(this.pathData)
  },
  methods: {
    // 获取采购项目信息
    initData(pathData) {
      notBiddingInfo(pathData).then((response) => {
        const { immediatelyQuotedPriceVo } = response.data
        this.loading = false
        // 获取联系人信息
        const data = this.$store.state.user.info
        // 判断singUpid是否存在 存在无需自动生成
        if (!immediatelyQuotedPriceVo.signUpId) {
          immediatelyQuotedPriceVo.signUpId = randomData()
          this.principalData.bizId = immediatelyQuotedPriceVo.signUpId
        }
        this.principalData.bizId = immediatelyQuotedPriceVo.signUpId
        // 采购项目信息
        this.projectCaseData = {
          ...immediatelyQuotedPriceVo,
          companyName: data.companyName,
          buyersLinkerName: data.realName,
          buyersLinkerEmail: data.email,
          buyersLinkerTel: data.mobilePhone
        }
      })
    },
    // 保存组装数据
    assemblyData() {
      const data = {
        id: this.projectCaseData.signUpId, // 报名id
        linker: this.projectCaseData.buyersLinkerName, // 单位名称
        linkerEmail: this.projectCaseData.buyersLinkerEmail, // 联系人邮箱
        linkerTel: this.projectCaseData.buyersLinkerTel, // 练习人电话
        packId: this.$route.query.packId, // 采购项目标段id
        tenderId: this.projectCaseData.tenderId, // 采购项目id
        supplierId: this.projectCaseData.supplierId, // 供应商Id
        supplierName: this.projectCaseData.supplierName // 供应商名称
      }
      return data
    },
    // 报名数据请求
    getApply() {
      this.confirmLoading = true
      // 获取数据
      const data = this.assemblyData()
      // 获取采购方式
      const tenderMethod = this.$route.query.tenderMethod
      mapParticipationApply(data).then((res) => {
        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) {
      // 获取采购方式
    },
    // 返回
    back() {
      // 获取采购方式
      const tenderMethod = this.$route.query.tenderMethod
      // 调用跳转路由方法
      this.routerPath(tenderMethod)
    },
    // 封装路由跳转方法
    routerPath(tenderMethod, type) {
      // 返回路由
      const backPathing = {
        '11': '/procurement/enquiryPaticipating', // 询价-正在参与列表
        '12': '/procurement/singleSourcePaticipating', // 单一来源-正在参与列表
        '13': '/procurement/competitivePaticipating', // 竞争性谈判-正在参与列表
        '14': '/procurement/qutcryPaticipating' // 竞价-正在参与列表
      }
      const backPathObj = {
        '11': '/procurement/enquiryPaticipation', // 询价-可参与列表
        '12': '/procurement/singleSourcePaticipation', // 单一来源-可参与列表
        '13': '/procurement/competitivePaticipation', // 竞争性谈判-可参与列表
        '14': '/procurement/qutcryPaticipation' // 竞价-可参与列表
      }
      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;
    }
  }
  .nobiddint {
    position: relative;
  }
  .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>
