<!--
  @description:采购立项-供应商-正在参与项目-缴纳标书费-审核不通过
  @Modifier:gaoMy
  @routerPath:/procurement/procurementDriveSupplier/procurementCollectionAudit
  @date:2020/3/26-13:27
-->
<template>
  <div class="nobiddint">
    <el-form
      ref="form"
      :model="invoiceData"
      :rules="rules"
      :inline-message="true"
    >
      <p class="page-title">
        1.开票信息<span style="font-weight: 300;margin-left:60px;">开票信息有误？<a style="color:blue" @click="amendClick">点击修改</a></span>
      </p>
      <!--      点击取消是 默认取消状态-->
      <table class="from_table">
        <tr>
          <td>
            <p>发票抬头</p>
          </td>
          <td>
            <p>{{ invoiceData.invoiceTitle }}</p>
          </td>
          <td>
            <p>发票类型</p>
          </td>
          <td>
            电子发票<span v-for="(item,index) in invoiceTypeData" v-if="item.typecode===invoiceData.invoiceType" :key="index">{{ `(${item.typename})` }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <p>纳税人识别号</p>
            <p style="margin-left: 10px">
              (统一社会信用代码)
            </p>
          </td>
          <td>
            <p>{{ invoiceData.taxpayerIdentificationNumber }}</p>
          </td>
          <td>
            <p>地址、电话</p>
          </td>
          <td>
            <p>{{ invoiceData.taxpayeraddr }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <p>开户行及账号</p>
          </td>
          <td>
            <p>{{ invoiceData.bankname }}</p>
          </td>
          <td>
            <span>邮箱</span>
            <el-popover
              placement="top-start"
              popper-class="hint"
              width="420"
              offset="5"
              trigger="hover"
              content="用于接收电子发票"
            >
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </td>
          <td>
            <p>{{ invoiceData.email }}</p>
          </td>
        </tr>
      </table>
      <p class="page-title">
        2.订单支付
      </p>
      <table class="from_table">
        <tr class="singleRow">
          <td>
            <el-form-item label="标书费(元)" />
          </td>
          <td colspan="3">
            <p class="money">
              {{ feeData.payAmount }}
            </p>
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            <el-form-item label="支付方式" prop="feePayType" />
          </td>
          <td colspan="3">
            <el-radio-group v-model="saveDatas.payType">
              <el-radio
                v-for="(item) in payTypeList"
                :key="item.payType"
                :label="item.payType"
              >
                <i v-if="item.payType==='00'" class="iconfont icon-alipay" />
                <i v-if="item.payType==='01'" class="iconfont icon-weixinpay" />
                <span :class="{'alipay':item.payType==='00','weixinpay':item.payType==='01'}"> {{ item.payTypeName }}</span>
              </el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr v-if="invoiceData.FeePayType==='99'">
          <td>
            <el-form-item label="附件" />
          </td>
          <td colspan="3">
            <upload
              ref="upload"
              :title="''"
              :on-change="principalFile"
              :data="tenderFeeFileData"
              :file-list="principalList"
              :auto-delete="true"
              :auto-upload="false"
              :limit="1"
              tip-text=""
              file-ref="fileRef"
              but-text="点击上传"
            />
          </td>
        </tr>
      </table>
      <p style="margin-top:30px;margin-bottom:30px;">
        <span style="color:red;">注意：</span> 选择支付宝或者微信支付，需自付手续费
      </p>
    </el-form>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h footer-h">
        <div>
          <!-- 下一步 -->
          <el-button :loading="confirmLoading" plain @click="saveData('save')">
            保存
          </el-button>
          <el-button :loading="confirmLoading" type="primary" @click="nextStep('form')">
            提交订单
          </el-button>
        </div>
      </div>
    </div>
    <div
      v-for="(item, index) in reviewPicture"
      v-if="item.typecode===auditStatus"
      :key="index"
      class="nobiddingPicture"
    >
      <img :src="item.imgUrl" alt="">
    </div>
    <!-- 添加供应商弹框 -->
    <collectionDialog :dialog-data="dialogData" @consignContractInfo="consignContractInfo" @consignContractId="consignContractId" />
    <paymentDialog :dialog-data="paymentData" @consignPaymentInfo="consignPaymentInfo" />
  </div>
</template>

<script>
/* 接口*/
import { paymentOfTenderFeeMessage } from '@/api/procurement/procurementProtdoc'
import { getProtFeePage, saveFeeInvoice, saveFee, submitAudit } from '@/api/procurement/procurementFee' // 获取保存发票api
// vuex
import { mapGetters } from 'vuex'
import upload from '@comp/common/updownload/upload'// 文件上传组件
/* 修改弹框组件*/
import collectionDialog from '../procurementCollection/procurementCollection-dialog'
/* 支付时的弹框组件*/
import paymentDialog from '../procurementCollection/procurementPayment-dialog'
import { procurementTenderfeeMixins } from '../mixins/procurementTenderfeeMixins'
export default {
  name: 'ProcurementNoAduitAdd',
  inject: ['getTenderBase'],
  components: {
    upload,
    collectionDialog,
    paymentDialog
  },
  mixins: [procurementTenderfeeMixins],
  props: {
    auditStatus: {
      type: String,
      default: () => {}

    }
  },
  data() {
    return {
      confirmLoading: false, // loading
      // 开票信息数据
      invoiceData: {
        id: '', // 开票id
        invoiceTitle: '', // 开票标题
        invoiceType: '', // 开票类型
        taxpayerIdentificationNumber: '', // 纳税人识别号
        bankname: '', // 开户行及账号
        taxpayeraddr: '', // 地址、电话
        email: '' // 邮箱
      },
      // 获取缴费信息数据
      feeData: {
        packId: '', // 标段Id
        feeType: '', // 保证金 标书费
        payAmount: 0, // 金额
        invoiceType: ''
      },
      payTypeList: [], // 支付方式
      // 提交的数据
      saveDatas: {
        feeType: '', // 缴费类型
        id: '',
        invoiceId: '', // 发票id
        packId: '', // 标段id
        payAmount: '', // 支付金额
        payType: '', // 支付方式 01 支付宝 02 微信 99 其他
        status: '', // 保存 或者提交的字段 00保存 01 提交
        superaddition: '00', // 是否补录 00否 01是
        supplierId: '', // 供应商id
        supplierName: '' // 供应商名称
      },
      // 修改的弹框组件
      dialogData: {
        consignContractVisible: false,
        type: '',
        email: '',
        supplierId: '',
        id: ''
      },
      submitData: {
        id: '', // 提交审核id
        packId: '', // 标段id
        feeType: '' // 保证金或者标书费字段
      },
      // 支付的弹框组件
      paymentData: {
        consignContractVisible: false,
        imgUrl: ''
      },
      tenderBase: this.getTenderBase(), // 获取项目信息
      // 校验规则
      rules: {
        FeePayType: [{ required: true, message: '请选择', trigger: 'blur' }] // 支付方式
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
  },
  created() {
    this.submitData.packId = this.tenderBase.packId
    // 编辑时
    // 查询采购项目信息
    this.initData()
  },
  methods: {
    /* 保存*/
    saveData(type) {
      this.confirmLoading = true// btnLoding
      this.saveDatas.status = '00' // 保存字段为00 提交字段为01
      this.savesubmintData()
      if (this.saveDatas.payType !== '99') {
        // 跳转在线支付成功页 暂定
        this.$router.push({ path: '/procurement/procurementDriveSupplier/procurementCollectionDetail' })
      } else {
        // 跳转在线支付成功页 暂定
        this.$router.push({ path: '/procurement/procurementDriveSupplier/procurementCollectionVoucher' })
      }
    },
    // 提交订单
    nextStep(formName) {
      this.saveDatas.status = '01'
      this.confirmLoading = true// btnLoding
      // 校验输入内容
      this.$refs[formName].validate((valid, field) => {
        // 校验通过
        if (valid) {
          // 判断是否是其他支付状态99其他支付方式 00 01 支付宝 微信支付
          if (this.saveDatas.payType !== '99') {
            this.savesubmintData()
          }
        } else { // 校验不通过
          return false
        }
      })
    },
    // 点击打开弹框
    amendClick() {
      this.dialogData.consignContractVisible = true
    },
    // 附件上传
    principalFile(file, fileList) {
      this.principalList = fileList
    },
    // 修改开票信息 触发的回调
    consignContractInfo(val) {
      if (val) {
        this.initData(this.tenderBase.packId)
      }
    },
    consignContractId(val) {
      // 获取修改页面保存之后的发票id
      this.saveDatas.id = val
    },
    // 支付弹框 触发的回调
    consignPaymentInfo(val) {
      if (val) {
        // 调用支付审核结果函数
        this.submitDatas()
      }
    },
    // 初次加载页面获取请求开票数据字段信息
    initData() {
      // 获取开票信息字段
      paymentOfTenderFeeMessage(this.tenderBase.packId).then((response) => {
        this.feeData.packId = response.data.packId // 标段id
        this.feeData.feeType = response.data.feeType // 保证金或者标书费字段
        this.feeData.payAmount = response.data.payAmount // 标书费
        this.feeData.invoiceType = response.data.invoiceType // 发票类型
        // 保存提交数据
        this.saveDatas.supplierId = response.data.supplierId // 供应商id
        this.saveDatas.feeType = response.data.feeType // 费用类型 00 01
        this.saveDatas.payAmount = response.data.payAmount// 支付金额
        this.saveDatas.packId = response.data.packId// 标段id
        // 弹框存数据
        this.dialogData.type = response.data.invoiceType // 发票类型
        this.dialogData.supplierId = response.data.supplierId // 供应商id
        // 支付成功后提交审核数据
        this.submitData.feeType = response.data.feeType // 保证金或者标书费字段
        // 调用获取页面开票数据方法
        this.getProtFeeData(this.feeData)
      })
    },
    // 封装获取页面开票数据
    getProtFeeData(data) {
      getProtFeePage(data).then(res => {
        // 获取发票信息
        this.invoiceData.invoiceTitle = res.data.invoice.invoiceTitle // 发票抬头
        this.invoiceData.invoiceType = res.data.invoice.invoiceType // 发票类型
        this.invoiceData.taxpayerIdentificationNumber = res.data.invoice.taxpayerIdentificationNumber // 纳税号
        this.invoiceData.bankname = res.data.invoice.bankname // 银行名称和账号
        this.invoiceData.taxpayeraddr = res.data.invoice.taxpayeraddr // 用户电话号地址
        this.invoiceData.email = res.data.invoice.email // 邮箱
        this.invoiceData.id = res.data.invoice.id // 保存发票数据时的id
        this.saveDatas.id = res.data.id // 保存发票页的id
        this.saveDatas.invoiceId = res.data.invoice.id // 保存发票数据id
        this.dialogData.email = res.data.invoice.email // 获取邮箱 修改弹框需要
        this.dialogData.id = res.data.invoice.id // 保存发票id，修改页面需要使用
        this.payTypeList = res.data.list // 支付方式
        // this.saveDatas.invoiceId = res.data.invoice.id // 支付id
      }).catch(res => {
      })
    },
    // 保存缴费方法
    savesubmintData() {
      // 获取数据
      const data = this.invoiceData
      // 增加供应商id
      data.supplierId = this.saveDatas.supplierId // 供应商id
      saveFeeInvoice(data).then(res => {
        this.saveDatas.invoiceId = res.data // 获取发票id
        // 调用提交订单方法
        this.submintData()
      }).catch(() => {
      })
    },
    // 封装提交订单方法
    submintData() {
      const data = this.saveDatas
      saveFee(data).then(res => {
        if (res.header.ret === '0') { // 提交成功
          this.submitData.id = res.data.id // 提交成功返回的审核id
          this.paymentData.imgUrl = res.data.imgUrl // 传入弹框地址或图片路径
          this.paymentData.payAmount = this.feeData.payAmount // 传入支付金额
          this.paymentData.payType = this.saveDatas.payType // 传入支付金额
        }
        if (this.saveDatas.status === '01') {
          // 打开支付弹框
          this.paymentData.consignContractVisible = true
        }
        this.confirmLoading = false// btnLoding
      }).catch(res => {
        this.confirmLoading = false// btnLoding
      })
    },
    // 封装支付后的审核方法
    submitDatas() {
      const data = this.submitData
      submitAudit(data).then(res => {
      }).catch(res => {
      })
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
  .title{
    font-weight: 600;
  }
  .money{
    color:#ff0000;
    font-weight: bold;
  }
  .footer-h{
    text-align: center;
  }
  .alipay{
    display: inline-block;
    width:48px;
    height:48px;
    background-color: red;
  }
  .nobiddint {
    position: relative;
  }
  .nobiddingPicture {
    position: absolute;
    right: 26px;
    top: 26px;
    width: 96px;
    height: 96px;
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
  .icon-alipay{
    display: inline-block;
    margin-top: 5px;
    width:24px;
    height:24px;
    color:#00A8F2;
    font-size: 24px;
  }
  .icon-weixinpay{
    display: inline-block;
    margin-top: 5px;
    width:24px;
    height:24px;
    color:#3CB034;
    font-size: 24px;
  }
  .alipay{
    color:#00A8F2;
  }
  .weixinpay{
    color:#3CB034;
  }
</style>
