<template>
  <div v-loading="isLoading" class="pay-bank">
    <div v-if="showPrice" class="paymount">
      支付金额：<span class="exp">￥</span><span class="price">{{ data.payAmount | formatPrice }}</span>
    </div>
    <radio-card
      v-model="checkedBank"
      :list="bankList"
      :border="false"
      :show-un-active-icon="false"
      @change="handleBankChange"
    >
      <template #item="{ row }">
        <el-image :src="row.bankLogo" class="bank-icon" />
      </template>
    </radio-card>
    <div class="pay-submit">
      <div v-if="payWay === 3 && copyStatus" class="tip">
        <div class="copy-tip">
          若您在公司的职位无法直接使用企业网银付款，请点击右侧“复制支付链接”按钮，将该链接发送给公司财务人员进行企业网银付款
        </div>
        <el-tag type="danger" @click="handleClipboard($event)">复制支付链接</el-tag>
      </div>
      <el-button v-if="paySubmit" type="danger" @click="onSubmit">立即支付</el-button>
    </div>
    <!-- 确认支付 -->
    <el-dialog title="支付确认" :visible.sync="confirmVisiable" width="20%" center>
      <span>请在您新打开的页面上完成付款已完成付款完成付款后请点击下面的按钮！</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="mini" @click="handleConfirmPay">确 定</el-button>
      </span>
    </el-dialog>
    <div class="iframe" style="display: none" v-html="iframe" />
  </div>
</template>

<script>
import handleClipboard from '@/utils/clipboard'
// 单选 / 多选
import { RadioCard } from '@/views/components'
import { createPayUrl, fetchBankcodeList, payVipWithUnion } from '@/api/pay'
export default {
  components: { RadioCard },
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    payWay: {
      type: Number,
      default: 0
    },
    showPrice: {
      type: Boolean,
      default: true
    },
    copyStatus: {
      type: Boolean,
      default: true
    },
    confirm: {
      type: Boolean,
      default: false
    },
    paySubmit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isLoading: false,
      bankB2BList: [],
      bankB2CList: [],
      checkedBank: '',
      payData: {},
      confirmVisiable: false,
      userType: '',
      payUrl: '',
      iframe: ''
    }
  },
  computed: {
    bankCode() {
      return this.bankList.find((item) => item.id === this.checkedBank)
    },
    bankList() {
      return this.payWay === 3 ? this.bankB2BList : this.bankB2CList
    }
  },
  watch: {
    confirm() {
      this.confirmVisiable = this.confirm
    }
  },
  created() {
    this.fetchBankcodeList()
    if (this.copyStatus) {
      this.handleCreatePayUrl()
    }
  },
  methods: {
    // 获取网银支付列表
    fetchBankcodeList() {
      fetchBankcodeList().then((res) => {
        const result = JSON.parse(res.data)
        this.bankB2BList = result.B2B
        this.bankB2CList = result.B2C
      })
    },
    // 确认支付弹窗
    handleConfirmPay() {
      this.confirmVisiable = false
      this.checkedPayConfirm()
    },
    // 银行切换
    handleBankChange() {
      this.isLoading = true
      this.handlePay()
    },
    // 生成网银支付链接
    async handleCreatePayUrl() {
      try {
        const res = await createPayUrl({
          authVipRecordId: this.data.vipRecordId,
          unpaidAmount: this.data.payAmount,
          payType: 1
        })
        const linkLogo = res.data.slice(res.data.lastIndexOf('=') + 1)
        this.payUrl = `${process.env.VUE_APP_LOCAL}/#/share/pay/${linkLogo}`
      } catch (error) {
        console.log(error)
      }
    },
    // 复制支付链接
    handleClipboard($event) {
      // this.confirmVisiable = true
      handleClipboard(this.payUrl, '支付链接已复制到剪切板', $event)
    },
    // 提交
    onSubmit() {
      if (!this.iframe) {
        this.$message.warning('请选择付款银行')
        return
      }
      this.confirmVisiable = true
      this.$nextTick(() => {
        const onlineForm = document.getElementById('onlineForm')
        this.payData = { mbOrderId: onlineForm.P2_orderId.value }
        onlineForm.setAttribute('target', '_blank')
        onlineForm.submit()
      })
    },
    // 提交支付
    handlePay() {
      let code = ''
      if (this.payWay === 3) {
        this.userType = 'B2B'
        code = this.bankCode.b2B
      }
      if (this.payWay === 4) {
        this.userType = 'B2C'
        code = this.bankCode.b2C
      }
      const params = {
        bankCode: code,
        payType: 'YL',
        returnUrl: 'https://www.caimei365.com',
        userType: this.userType,
        vipRecordId: this.data.vipRecordId
      }
      // 提交支付信息生成支付链接
      payVipWithUnion(params)
        .then((res) => {
          this.iframe = res.data
          // 触发事件
          this.$emit('change', {
            type: this.userType,
            data: {
              ...this.data
            }
          })
        })
        .catch(() => {
          this.$message.error('支付系统遇到点小问题，请稍后重试')
          this.isLoading = false
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 验证确认支付
    checkedPayConfirm() {
      this.confirmVisiable = false
      // 触发确认支付事件
      this.$emit('pay-confirm', {
        type: this.userType,
        data: {
          ...this.payData,
          ...this.data
        }
      })
    }
  }
}
</script>

<style scoped>
.pay-bank >>> .el-dialog__body {
  padding: 15px !important;
  line-height: 1.6;
}
</style>

<style lang="scss">
.card {
  margin-bottom: 16px;
}
.bank-icon {
  display: block;
  width: 128px;
  height: 44px;
  background: #999;
}

.paymount {
  margin-bottom: 16px;
  font-size: 16px;
  color: #101010;

  .exp,
  .price {
    color: #ff6d6d;
  }

  .exp {
    font-size: 14px;
  }

  .price {
    font-size: 20px;
    font-weight: bold;
  }
}

.pay-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 40px 0;
  .tip {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    .copy-tip {
      font-size: 14px;
      color: #909399;
    }
  }
  .el-tag {
    border-color: #ff6d6d;
    background: #ffe8e8;
    cursor: pointer;
    margin-left: 26px;
  }
  .el-button {
    background-color: #ff6d6d;
    width: 200px;
    height: 40px;
    margin-top: 26px;
  }
}
</style>
