<template>
  <div class="payment-reveived-page">
    <Card style="padding:20px;">
      <h2>收付款方式</h2>
      <CheckboxGroup v-model="type" class="check-group">
        <div>
          <Checkbox label="1" class="check-info">
            <span class="check-info-lable"> 微信支付</span>
          </Checkbox>
          <Input placeholder="请输入微信收款账号" class="input-val" v-model="wx"></Input>
        </div>
        <div>
          <Checkbox label="2" class="check-info">
            <span class="check-info-lable"> 支付宝</span>
          </Checkbox>
          <Input placeholder="请输入支付宝收款账号" class="input-val" v-model="alipay"></Input>
        </div>
      <div>
        <Checkbox label="3" class="check-info">
          <span class="check-info-lable"> 数字资产</span>
        </Checkbox>
        <Select v-model="count" class="input-val" clearable>
          <!-- <Option value>请选择</Option> -->
            <Option v-for="(item,index) in countData"
                :value="item.value"
                :key="index"
            >
                {{item.value}}
            </Option>
        </Select>
      </div>
    </CheckboxGroup>
    <div class="footer-btn">
    <Button type="primary" size="large" class="footer-btn" @click="btnDetermine">确 定</Button>
    </div>
    </Card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      type: [],
      wx: '',
      alipay: '',
      count: '',
      countData: []
    }
  },
  methods: {
    btnDetermine () {
      let pDTOs = []
      if (this.type.length == 0 && this.wx == '' && this.alipay == '' && this.count == '') {
        return this.$Notice.warning({ title: '请选择至少一种收款方式' })
      }
      this.type.forEach(item => {
        if (item == 1) {
          pDTOs.push({
            type: item,
            accountOrAddress: this.wx,
            coin: 'RMB'
          })
        }
        if (item == 2) {
          pDTOs.push({
            type: item,
            accountOrAddress: this.alipay,
            coin: 'RMB'
          })
        }
        if (item == 3) {
          pDTOs.push({
            type: item,
            accountOrAddress: '默认',
            coin: this.count
          })
        }
      })
      if (this.wx && !this.type.includes('1')) {
        return this.$Notice.warning({ title: '请选择对应收付款方式！' })
      }
      if (this.alipay && !this.type.includes('2')) {
        return this.$Notice.warning({ title: '请选择对应收付款方式！' })
      }
      if (this.count && !this.type.includes('3')) {
        return this.$Notice.warning({ title: '请选择对应收付款方式！' })
      }
      if (!pDTOs.every(o => Object.keys(o).every(i => o[i]))) {
        return this.$Notice.warning({ title: '请选择对应收款账号！' })
      }
      this.api({
        apiName: 'digitAdd',
        postdata: pDTOs,
        success: (res) => {
          console.log('res', res)
          this.$Message.success('添加成功')
          this.getqueryPayMode()
        }
      })
    },
    // 获取数字资产
    getDigitAssetsList () {
      let digit = {}
      this.countData = []
      this.api({
        apiName: 'digitAssetsList',
        success: (res) => {
          res.data.forEach(item => {
            digit = {
              value: item,
              id: item
            }
            this.countData.push(digit)
          })
        }
      })
    },
    // 查询支付方式
    getqueryPayMode () {
      // let digit = {}
      this.type = []
      this.api({
        apiName: 'queryPayMode',
        success: (res) => {
          // console.log('222222', res)
          res.data.forEach(item => {
            this.type.push(JSON.stringify(item.type))
            if (item.type == 1) {
              this.wx = item.accountOrAddress
            } else if (item.type == 2) {
              this.alipay = item.accountOrAddress
            } else if (item.type == 3) {
              this.count = item.coin
            }
          })
        }
      })
    }
  },

  created () {
    this.getDigitAssetsList()
    this.getqueryPayMode()
  }
}
</script>
<style lang="less" scoped>
.payment-reveived-page {
    .check-group {
      height: 200px;
      margin-top: 40px;
        // display: flex;
        // justify-content: space-around;
        // align-items: center;
        .check-info {
            text-align: center;
            .check-info-lable{
              display: inline-block;
              width: 100px;
              font-size: 16px;
              font-family: Source Han Sans CN;
              font-weight: 500;
              color: #333333;
              line-height: 46px;
            }
        }
        .input-val {
            // margin-top: 15px;
            width: 300px;
        }
    }
    .footer-btn {
      // text-align: center;
      margin-left: 30px;
    }
}
</style>
