<!--
@description: 采购文件-支付方式弹框
@Modifier: gaoMy
@routerPath:
@date: 2020-5-13 13:20:15
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogData.consignContractVisible"
    :close-on-click-modal="false"
    title="在线支付"
    width="896px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <section class="dialog-content">
      <div class="mt10">
        <p v-for="(item, index) in paymentWaylist" v-if="item.typecode === dialogData.payType " :key="index" class="title">
          {{ item.typename }}扫一扫付款(元)
        </p>
        <p style="font-weight: bold;color: #FF6600">
          {{ dialogData.payAmount }}
        </p>
      </div>
      <img :src="imgUrl" alt="">
    </section>
    <!--底部操作按钮-->
    <div slot="footer" class="dialog-footer">
      <el-button :loading="confirmLoading" type="primary" @click="ensure">
        支付成功
      </el-button>
      <el-popover
        v-model="visible"
        placement="top"
        width="160"
      >
        <p>您确定取消支付吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button type="primary" size="mini" @click="yetClick">
            确定
          </el-button>
          <el-button size="mini" type="text" @click="noClick">
            取消
          </el-button>
        </div>
        <el-button slot="reference">
          取消支付
        </el-button>
      </el-popover>
    </div>
  </el-dialog>
</template>

<script>
// api
import { submitAudit } from '@api/procurement/procurementFee' // 提价定价审核
import { startProjectDriveNodeByTaskIdentification } from '@api/procurement/procurementOffer'
// 公共方法
import { procurementTenderfeeMixins } from '../mixins/procurementTenderfeeMixins'
// 图片路径
import { readImage } from '@api/common/uploadCenter'
export default {
  name: 'ProcurementCollectionDialogVue',
  mixins: [procurementTenderfeeMixins],
  props: {
    // 弹框展示状态
    dialogData: {
      type: Object,
      default: function() {

      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      readImage: readImage,
      principalData: {
        id: '', // 上传Id
        fileType: 'pay_extinfo_invoice_attachment_base'// 文件类型
      },
      visible: false,
      invoiceData: {},
      small: 'small',
      principalList: [],
      imgUrl: ''
    }
  },
  watch: {
    // 监听-弹框展示状态
    'dialogData.consignContractVisible'(val) {
      if (val) {
        // 弹框已打开
        // 加载数据
        this.loadData()
      } else {
        // 弹框关闭是触发提交审核方法
        this.submitDatas()
      }
    }
  },
  methods: {
    // 弹框打开时获取二维码路径
    loadData() {
      this.imgUrl = this.readImage + this.dialogData.imgUrl
    },
    // 确认
    ensure() {
      this.dialogData.consignContractVisible = false
      // 父子通信
      this.$emit('consignPaymentInfo', true)
    },
    // 确定取消按钮
    yetClick() {
      this.visible = false
      this.$emit('consignPaymentInfo', false)
      this.dialogData.consignContractVisible = false
    },
    // 取消支付
    noClick() {
      this.visible = false
    },
    // 封装支付后的审核方法
    submitDatas() {
      const data = this.dialogData.data
      submitAudit(data).then(res => {
        // 支付成功后跳转在线支付详情页 onClose
        this.getDriveState() // 调用获取新驱动方法
        this.$message({
          message: '支付成功',
          onClose: () => {
            this.$router.push({ path: '/procurement/procurementDriveSupplier/procurementCollectionDetail', query: { packId: this.dialogData.data.packId }})
            // 强制刷新页面
            window.location.reload()
          }
        })
      }).catch(res => {
      })
    },
    // 封装获取通过驱动编码将当前驱动节点标记为选择的进程状方法
    getDriveState() {
      const data = {
        packId: this.$route.query.packId,
        supplierId: this.dialogData.supplierId,
        taskIdentification: 'protoffer',
        processStatus: '01'
      }
      startProjectDriveNodeByTaskIdentification(data).then(res => {
      }).catch(res => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
.dialog-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
