<template>
  <div>
    <el-dialog
      width="500px"
      custom-class="dialog"
      :title="dialogTitle"
      modal
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
    >
      <div class="pay-type">
        <p class="header-title">支付方式</p>
        <el-radio-group v-model="radio">
          <el-radio :label="0">余额支付</el-radio>
          <!-- <el-radio :label="1">账户支付</el-radio> -->
        </el-radio-group>
      </div>
      <div v-if="radio == 0" class="flex-top" v-loading="loading">
        <div v-if="balance.length != 0">
          <el-card
            v-loading="loading"
            shadow="hover"
            v-for="(item, index) in balance"
            :key="item.id"
            :class="activeBalance == index ? 'activeClass' : '  '"
            class="dialog-card"
          >
            <div @click="handelBalance(item, index)">
              <div class="card-header">
                <div class="header-title">
                  {{ item.enterpriseBankOpening }}
                </div>
                <div style="font-size: 14px">
                  {{ item.enterpriseBankNumber }}
                </div>
              </div>
              <div class="card-footer">￥{{ item.userBalance }}</div>
            </div>
          </el-card>
        </div>
        <div v-else>
          <el-card
            shadow="hover"
            :class="activeBalance == radio ? 'activeClass' : '  '"
            class="dialog-card"
          >
            <div
              class="card-header"
              style="text-align: center; padding: 10px 0"
            >
              <span style="color: red"
                >请前往支付信息平台账户管理添加账户！</span
              >
            </div>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" :loading="loadingBtn" @click="handleSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import bank from '@/api/bank.js'
import utils from '@/utils.js'
import bankCardDialog from './bankCardDialog.vue'
export default {
  components: {},
  data() {
    return {
      account: '选择账户',
      name: '',
      code: '',
      balance: [],
      radio: 0,
      activeBalance: 0,
      dialogTitle: '选择账户',
      dialogFormVisible: false,
      paramsArr: [],
      loading: false,
      userBalance: 0, //余额
      loadingBtn: false,
      corporateAccounts: {
        bankCard: '9558853100011248469',
        payAccountBank: '中国工商银行股份有限公司重庆解放碑支行',
        collectUnitName: '重庆盛普物资有限公司',
        collectUnitCode: '1575018828683939840',
      }, //收款账户
      data: {
        payAccountBank: '',
        bankCode: '',
      },
      params: {
        collectAccount: '9558853100011248469', // 收款账号
        collectAccountBank: '中国工商银行股份有限公司重庆解放碑支行', //收款账号开户行
        collectUnitName: '重庆盛普物资有限公司', // 收款单位名称
        payAccount: '', //支付账号
        payAccountBank: '', //支付账号开户行
        payAmount: '', //支付金额
        payTime: '', //支付时间
        payUnitCode: '',
        noticeType: '',
        payUnitName: '', //支付单位名称
        payType: 2,
        noticeId: '',
        participationId: '',
      },
    }
  },
  created() {},
  mounted() {
    // this.getBank()
  },
  methods: {
    open(row) {
      console.log(row, 'ppppppppp')
      let sum = 0
      let noticeId = []
      let participationId = []
      // 在父组件调用打开
      this.dialogFormVisible = true
      this.getBank()
      row.forEach((item) => {
        this.params.noticeType = item.noticeType
        if(item.type==2&&item.type!=1){
          this.params.payType = 5
        }else{
          this.params.payType = 2
        }
        sum += item.price
        noticeId.push(item.noticeId)
        participationId.push(item.id)
      })
      this.params.noticeId = noticeId.toString()
      this.params.participationId = participationId.toString()
      this.params.payAmount = sum
      
    },
    getBank() {
      this.$http
        .post('${portal}/bizRegistrationOrder/v1/getCurrentAccount')
        .then((res) => {
          this.loading = false
         
          if (res.data.state) {
            this.balance = []
            this.activeBalance = 0
            if ( JSON.stringify(res.data.value) == '{}' ) {
              this.balance = []
            } else {
              this.balance = res.data.value.data
              if (this.balance.length != 0) {
                this.params.payAccountBank =
                  this.balance[0].enterpriseBankOpening
                this.params.payAccount = this.balance[0].enterpriseBankNumber
                this.userBalance = this.balance[0].userBalance
                this.balance.forEach((item, index) => {
                  if (item.enterpriseBankNumber == '9558853100011248469') {
                    this.balance.splice(index, 1)
                    return this.balance
                  }
                })
              }
            }
          } else {
            this.$message.error(res.data.state)
          }
        })
    },
    handleClose() {
      this.dialogFormVisible = false
      this.loading = false
    },
    handleSubmit() {
      let moment = require('moment')
      this.params.payTime = moment().format('YYYY-MM-DD HH:mm:ss')
      console.log(this.params, 1111111)
      if (this.params.payAmount > this.userBalance) {
        // this.$confirm('余额不足，是否跳转充值?', '提示', {
        //   confirmButtonText: '确定',
        //   cancelButtonText: '取消',
        //   type: 'warning',
        // })
        this.$confirm('余额不足，请前往支付信息平台进行充值?', '提示', {
          // confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            // this.$router.push({
            //   path: '/frontPlat/myApplication/myBalance',
            // })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            })
          })
      } else {
        this.loadingBtn = true
        this.$http
          .post('${portal}/bizRegistrationOrder/v1/payByBalance', this.params)
          .then((res) => {
            console.log(res, 'res')
            if (res.data.state) {
              this.$message.success(res.data.message)
              this.dialogFormVisible = false
              this.$emit('load')
            }
            this.loadingBtn = false
          })
      }
    },
    handelBalance(item, index) {
      console.log(item, 'item')
      this.activeBalance = index
      this.userBalance = item.userBalance
      this.params.payAccountBank = item.enterpriseBankOpening
      this.params.payAccount = item.enterpriseBankNumber
    },
  },
}
</script>

<style lang="scss" scoped>
.activeClass {
  background-color: #fff8e0 !important;
  border-radius: 10px;
  border: 1px solid #ffbe3a;
}
/deep/ .dialog {
  .el-dialog__body {
    height: 500px;
  }
  .el-card__body {
    padding: 10px;
  }
  .el-dialog__footer {
    padding-top: 16px;
    margin-top: 30px;
  }
}

.dialog-card {
  background-color: #cbc1c1;
  margin-bottom: 10px;
  img {
    width: 60px;
    height: 50px;
  }
}
.dialog-card:hover {
  cursor: pointer;
}
.card-header {
  // display: flex;
  align-items: center;

  .header-title1 {
    color: grey;
  }
}
.header-title {
  font-size: 18px;
  font-weight: 700;
  // color: #ffffff;
}
.card-footer {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 5px;
  font-size: 30px;
  // color: #ffffff;
}
/deep/.el-radio__label {
  font-size: 16px;
}
.btn {
  width: 100%;
  height: 50px;
}
.del-icon {
  float: right;
  font-size: 20px !important;
}
.del-icon:hover {
  color: red;
}
.pay-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-top {
  height: 100%;
  overflow-y: scroll;
}
</style>
