<template>
  <el-dialog title="提现" :close-on-click-modal="false" :visible.sync="visible" @close="onClose">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="120px"
    >
      <el-form-item label="店铺名称：" prop="shopName">
        <span class="shop-name">{{dataForm.shopName}}</span>
      </el-form-item>

      <!-- <el-form-item label="付款账户：" prop="shopBalance">
        <el-radio v-model="radio" label="店铺余额">店铺余额</el-radio>
      </el-form-item>-->

      <el-form-item label="可提现余额：" prop="withdrawalAmount">
        <span class="withdrawalAmount">{{settledAmount}}&nbsp;元</span>
      </el-form-item>

      <el-form-item label="本次提现：" prop="amount">
        <div>
          <el-input
            type="number"
            v-model="dataForm.amount"
            placeholder="请输入提现金额"
            :disabled="settledAmount<1"
            @change="checkAmount"
          ></el-input>
          <el-button type="text" class="text-btn" v-if="settledAmount>0" @click="allAmount">全部提现</el-button>
          <span class="error-tips" v-if="settledAmount<1">可提现金额不足1元，本次无法提现</span>
        </div>
      </el-form-item>

      <el-form-item label="到账银行卡：" prop="shopBankCardId">
        <div class="bankcard-box">
          <div
            :class="['bankcard',dataForm.shopBankCardId == item.shopBankCardId?'active':'']"
            @click="clickCard(item.shopBankCardId)"
            v-for="(item,shopBankCardId) in bankCardList"
            :key="shopBankCardId"
          >
            <div class="close-icon" @click="deleteBankCard(item)">×</div>
            <div class="card-num">{{item.cardNo}}</div>
            <div class="card-bottom">
              <div class="card-name">{{item.bankName}}</div>
              <div class="default" v-if="item.isDefault === 1">默认银行卡</div>
              <div
                class="chooseDefault"
                v-if="item.isDefault === 0"
                @click="setDefault(item.shopBankCardId)"
              >设为默认</div>
            </div>
          </div>
        </div>
      </el-form-item>
      <div class="add-card">
        <el-button type="text" @click="addBankCard">添加银行卡</el-button>
      </div>

      <el-form-item label="短信验证：" prop="code">
        <div>
          <el-input v-model="dataForm.code" placeholder></el-input>
          <el-button type="primary" @click="sendCode">获取验证码</el-button>
        </div>
      </el-form-item>
      <br />
      <div class="yzm-tips" v-if="isSendCode">验证短信将发送到你登录的手机：{{this.mobile}}，请注意查收</div>

      <el-form-item label="备注：" prop="shopRemarks">
        <el-input type="textarea" placeholder="最多可输入60字，特殊字符会被过滤" v-model="dataForm.shopRemarks"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>

    <addBankCardPop v-if="showAddCardPop" ref="addBankCardPop" @refreshCardList="getShopCardList"></addBankCardPop>
  </el-dialog>
</template>

<script>
import addBankCardPop from './addBankCard'
export default {
  components: {
    addBankCardPop
  },
  data () {
    return {
      visible: false,
      radio: true,
      isCheckCard: false,
      showAddCardPop: false,  // 添加银行卡弹框
      dataForm: {
        shopName: '',
        shopBankCardId: '', // 当前选择的银行卡id
        amount: 1,  // 提现金额
        code: null,  // 验证码
        shopRemarks: '' // 备注
      },
      mobile: '',
      settledAmount: 1, // 全部可提现金额
      isSendCode: false,
      dataRule: {
        settledAmount: [
          { required: true, message: '可提现余额不能为空', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
        shopBankCardId: [
          { required: true, message: '请选择到账银行卡', trigger: 'blur' }
        ]
      },
      bankCardList: [], // 银行卡列表
      currentCard: {} // 当前银行卡
    }
  },
  methods: {
    init () {
      this.isSendCode = false
      this.visible = true
      this.getDataList()
    },
    /**
     * 获取店铺钱包信息
     */
    getDataList () {
      this.$http({
        url: this.$http.adornUrl('/shop/withdrawCash/getShopInfo'),
        method: 'get'
      }).then(({ data }) => {
        this.dataForm = data
        this.dataForm.amount = parseInt(data.amount)
        this.settledAmount = parseInt(data.amount)
        this.getShopCardList()
      })
    },
    /**
     * 获取店铺绑定的银行卡
     */
    getShopCardList () {
      this.$http({
        url: this.$http.adornUrl('/shop/shopBankCard/getShopBankCardList'),
        method: 'get'
      }).then(({ data }) => {
        this.bankCardList = data
        console.log(data)
        this.$set(this.bankCardList, data)
      })
    },
    /**
     * 校验提现金额的格式
     */
    checkAmount () {
      let num = Math.round(this.dataForm.amount)
      if (num < 0) {
        this.dataForm.amount = 0
      } else if (num > this.settledAmount) {
        this.dataForm.amount = this.settledAmount
      } else {
        this.dataForm.amount = num
      }
    },
    /**
     * 发送验证码
     */
    sendCode () {
      this.$http({
        url: this.$http.adornUrl('/shop/shopDetail/sendCode'),
        method: 'post',
        data: this.$http.adornData()
      }).then(({ data }) => {
        this.isSendCode = true
        this.mobile = data
      })
    },
    /**
     * 设置默认银行卡
     */
    setDefault (shopBankCardId) {
      this.$http({
        url: this.$http.adornUrl('/shop/shopBankCard/setDefault'),
        method: 'put',
        data: this.$http.adornData({
          shopBankCardId: shopBankCardId
        })
      }).then(({ data }) => {
        this.getShopCardList()
      })
    },
    /**
     * 选择银行卡
     */
    clickCard (cardId) {
      this.bankCardList.forEach(element => {
        if (element.cardId === cardId) {
          this.currentCard = element
        }
      })
      this.dataForm.shopBankCardId = cardId
    },
    /**
     * 添加银行卡
     */
    addBankCard () {
      console.log(this.showAddCardPop)
      this.showAddCardPop = true
      console.log(this.showAddCardPop)
      this.$nextTick(() => {
        this.$refs.addBankCardPop.init()
      })
    },
    /**
     * 删除银行卡
     */
    deleteBankCard (item) {
      let cardId = item.shopBankCardId
      if (item.isDefault === 1) {
        return
      }
      this.$http({
        url: this.$http.adornUrl('/shop/shopBankCard/' + cardId),
        method: 'delete'
      }).then(({ data }) => {
        this.getShopCardList()
      })
    },
    /**
     * 刷新回调
     */
    refreshChange () {
      console.log('asfsafsa')
      this.showAddCardPop = false
      // this.page = this.$refs.crud.$refs.tablePage.defaultPage
      // 请求银行卡列表
      this.getDataList()
    },
    onClose () {
      this.visible = false
      this.$emit('refreshDataList', this.page)
      console.log(this.visible)
    },
    allAmount () {
      this.dataForm.amount = this.settledAmount
    },
    /**
     * 表单提交
     */
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/shop/withdrawCash/apply'),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({ data }) => {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList', this.page)
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.shop-name {
  font-size: 15px;
}
.balance {
  font-size: 15px;
  color: #e43130;
}
.el-input {
  width: 35%;
}
.el-textarea__inner {
  width: 55%;
  min-height: 100px;
}
>>> .el-input .el-input--suffix input.el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
>>> .el-textarea__inner {
  width: 60%;
  height: 130px;
}
.yzm-tips {
  display: block;
  color: #aaa;
  margin-left: 120px;
  line-height: 2em;
  margin-bottom: 10px;
}
.error-tips {
  color: #e43130;
}
.add-card {
  display: block;
  margin-left: 120px;
  line-height: 1em;
}
.el-form-item {
  margin-bottom: 15px;
  /* margin-top: 15px; */
}
>>> .el-dialog__header {
  padding-bottom: 0 !important;
}
>>> .el-dialog__body {
  padding: 10px 20px !important;
}
/* 银行卡 */
.bankcard {
  position: relative;
  display: inline-block;
  width: 250px;
  height: 100px;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 10px;
  margin-right: 20px;
  cursor: pointer;
  margin-top: 10px;
}
.close-icon {
  display: block;
  position: absolute;
  top: 6px;
  right: 6px;
  border: 1px solid #bbb;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  font-size: 12px;
  color: #bbb;
  cursor: pointer;
  z-index: 11;
}
.card-num {
  font-size: 15px;
  line-height: 1.5em;
  color: #333;
  text-align: left;
  margin-bottom: 20px;
}
.card-bottom {
  position: absolute;
  bottom: 10px;
  font-size: 14px;
  display: flex;
  width: 90%;
  justify-content: space-between;
  line-height: 1.5em;
}
.chooseDefault {
  color: #02a1e9;
  cursor: pointer;
}
.default {
  color: #999;
  cursor: auto;
}
.active {
  border: 1px solid #e43130;
}
</style>
