<template>
  <el-dialog
    title="配件记账应收费用支付"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :append-to-body="true"
    :destroy-on-close="true"
    width="1050px"
  >
    <div>
      <el-descriptions>
        <el-descriptions-item label="支付单号">{{ data.id }}</el-descriptions-item>
        <el-descriptions-item label="应收金额">￥{{ data.payAmount }}</el-descriptions-item>
        <el-descriptions-item label="收款方">{{ item.websitName }}</el-descriptions-item>
        <el-descriptions-item label="支付方式">
          <el-radio v-model="radio" label="wx">微信支付</el-radio>
          <el-radio v-model="radio" label="xj">现金支付</el-radio>
        </el-descriptions-item>
        <el-descriptions-item v-if="radio === 'wx'" label="支付商户">
          <el-select style="width: 220px" v-model="payConfigId" size="small" clearable placeholder="请选择支付商户">
            <el-option
              v-for="item in payConfigs"
              :key="item.id"
              :label="item.name + ' | ' + item.mchNo"
              :value="item.id"
            />
          </el-select>
        </el-descriptions-item>
      </el-descriptions>
      <br />
      <div class="pay-img-info" v-if="radio === 'wx'">
        <div class="qr-code-view">
          <p>微信支付</p>
          <div v-if="showPayQRCode" ref="payQRCode" style="display: flex; justify-content: center" />
          <p>￥{{ data.payAmount }}</p>
        </div>
        <p style="text-align: center" v-if="radio === 'wx'">
          {{ data.codeUrl }}
        </p>
        <p style="text-align: center" v-if="radio === 'wx'">支付失效时间：{{ data.timeExpire }}</p>
      </div>
      <div style="text-align: center" v-if="radio === 'xj'">
        <el-button size="small" type="info" @click="handleClose">未收款</el-button>
        <el-button size="small" type="primary" @click="yjsqxj">已收取现金</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { queryPayStatus } from '@/api/material-system/website/website-parts-shop-sales'
import { adminWebsitPayConfigList } from '@/api/common.js'
import QRCode from 'qrcodejs2'
import { partsCreditCode, partsCreditChangeCash } from '@/api/masterAccountingManagement'
export default {
  props: {
    item: {
      type: Object
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      radio: 'wx',
      dialogVisible: this.visible,
      data: {},
      bool: true,
      payConfigs: [],
      payConfigId: '',
      showPayQRCode: true
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        this.dialogVisible = newVal
        if (newVal) {
          this.$nextTick(() => {
            if (this.item.websitId) {
              adminWebsitPayConfigList({
                status: true,
                websitId: this.item.websitId,
                category: 'P'
              }).then(res => {
                this.payConfigs = res.data
                if (this.payConfigs.length > 0) {
                  this.payConfigId = this.payConfigs[0].id
                }
              })
            }
          })
        }
      },
      immediate: true
    },
    payConfigId() {
      this.showPayQRCode = false
      if (this.payConfigId && this.visible && this.item) {
        partsCreditCode({
          id: this.item.id,
          payConfigId: this.payConfigId
        })
          .then(res => {
            this.data = res.data
            this.setqr()
          })
          .catch(err => {})
      } else if (this.timeId) {
        clearTimeout(this.timeId)
      }
    },
    radio() {
      this.showPayQRCode = false
      this.setqr()
    },
    dialogVisible() {
      if (!this.dialogVisible) {
        if (this.timeId) {
          clearTimeout(this.timeId)
        }
        this.data = {}
        this.payConfigId = ''
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$emit('setVisible', false)
    },
    setqr() {
      if (this.radio === 'wx') {
        this.showPayQRCode = true
        this.$nextTick(() => {
          this.queryOrder()
          new QRCode(this.$refs.payQRCode, {
            text: this.data.codeUrl,
            width: 160,
            height: 160,
            colorDark: '#333333',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.L
          })
        })
      } else if (this.timeId) {
        clearTimeout(this.timeId)
      }
    },
    queryOrder() {
      if (this.item.websitId && this.data.id && this.item.id) {
        const params = {
          websitId: this.item.websitId,
          id: this.item.id,
          outTradeNo: this.data.id
        }
        queryPayStatus(params).then(res => {
          if (res && res.data.payFlag === 'YES') {
            this.$emit('setVisible', false)
            this.$emit('success')
            if (this.bool) {
              this.bool = false
              this.$message({
                type: 'success',
                message: `支付成功!`
              })
            }
          } else {
            this.timeId = setTimeout(() => {
              this.queryOrder()
            }, 1000)
          }
        })
      }
    },
    yjsqxj() {
      partsCreditChangeCash({
        id: this.item.id
      }).then(res => {
        this.$emit('setVisible', false)
        this.$emit('success')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#new-repair-parts-listing {
  width: 100%;
  height: 500px;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 20px;
}
#new-repair-parts-listing table {
  border: 1px solid #aaa;
}
#new-repair-parts-listing th,
#new-repair-parts-listing td {
  height: 30px;
  border: 1px solid #aaa;
}
.new-repair-parts-title {
  text-align: center;
  font-weight: bold;
}
.new-repair-parts-info {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.pay-img-info {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  .qr-code-view {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    background: limegreen;
    width: 240px;
    height: 240px;
    p {
      margin: 0;
      color: #fff;
    }
  }
  p {
    width: 100%;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
}
</style>
