<template>
  <i-col class="assets-info-con" :xs="12" :md="12" :xl="8" :xxl="6">
    <Card class="balance-con">
      <Spin fix v-if="assetsLoading" />
      <div class="title">
        <span>{{title}}</span>
        <Tooltip content="绑定银行卡" placement="right-start">
          <Icon
            type="md-settings"
            :size="18"
            style="cursor: pointer"
            color="#2b85e4"
            @click="handleBind"
          />
        </Tooltip>
      </div>
      <div class="amt-con">
        <div class="label">可用余额：</div>
        <count-to :end="assetsTotal" count-class="balance-amt" :decimals="2" />
      </div>
      <div class="amt-con">
        <div class="label">可提现余额：</div>
        <count-to :end="cashAmt" count-class="balance-amt" :decimals="2" />
      </div>
      <div class="opt-con">
        <Button long type="primary" @click="handleWithdraw"
          >提&nbsp;&nbsp;&nbsp;现</Button
        >
      </div>
    </Card>

    <Modal
      v-model="bindModal"
      title="绑定银行卡："
      :width="460"
      @on-cancel="handleCancelBind"
      class="bind-modal-con"
      :footer-hide="hasBindCard"
    >
      <Form
        ref="bindForm"
        :model="bindForm"
        :rules="bindRules"
        :label-width="150"
        v-show="bindType == 'base'"
      >
        <FormItem label="银行：" prop="bankIndex">
          <span v-if="hasBindCard">{{
            bankMap[cardInfo.bankCode] || "--"
          }}</span>
          <Select v-else placeholder="请选择银行" v-model="bindForm.bankIndex">
            <Option
              v-for="(item, index) of bankList"
              :value="index + ''"
              :key="'bank-option-' + index"
              >{{ item.name }}</Option
            >
          </Select>
        </FormItem>
        <FormItem label="开户行：" prop="openBranch">
          <span v-if="hasBindCard">{{ cardInfo.openBranch }}</span>
          <Input
            v-else
            placeholder="请输入开户行"
            v-model="bindForm.openBranch"
          />
        </FormItem>
        <FormItem label="银行卡号：" prop="cardNo">
          <span v-if="hasBindCard">{{ cardInfo.cardNo | cardFilter }}</span>
          <Input
            v-else
            placeholder="请输入银行卡号"
            v-model="bindForm.cardNo"
          />
        </FormItem>
        <FormItem label="企业名称：" prop="companyName">
          <span v-if="hasBindCard">{{ cardInfo.companyName }}</span>
          <Input
            v-else
            placeholder="请输入企业名称"
            v-model="bindForm.companyName"
          />
        </FormItem>
        <FormItem label="企业统一社会信用码：" prop="uniqeCode">
          <span v-if="hasBindCard">{{ cardInfo.uniqeCode | idFilter }}</span>
          <Input
            v-else
            placeholder="请输入企业统一社会信用码"
            v-model="bindForm.uniqeCode"
          />
        </FormItem>
        <FormItem label="企业法人名称：" prop="realName">
          <span v-if="hasBindCard">{{ cardInfo.realName }}</span>
          <Input
            v-else
            placeholder="请输入企业法人名称"
            v-model="bindForm.realName"
          />
        </FormItem>
        <FormItem label="企业法人身份证：" prop="idNo">
          <span v-if="hasBindCard">{{ cardInfo.idNo | idFilter }}</span>
          <Input
            v-else
            placeholder="请输入企业法人身份证"
            v-model="bindForm.idNo"
          />
        </FormItem>
        <FormItem label="企业法人手机号：" prop="phone">
          <span v-if="hasBindCard">{{ cardInfo.phone | phoneFilter }}</span>
          <Input
            v-else
            placeholder="请输入企业法人手机号"
            v-model="bindForm.phone"
          />
        </FormItem>
      </Form>
      <div v-show="bindType == 'code'" class="code-con">
        <div class="title">
          <font class="text-no">1. </font>请输入验证金额，至小数点后两位：
        </div>
        <one-box-one-word
          ref="obow"
          :box-num="4"
          v-model="bindForm.authAmt"
          style="margin-bottom: 36px"
        ></one-box-one-word>
        <div class="title"><font class="text-no">2. </font>请输入指令号：</div>
        <one-box-one-word
          ref="obow"
          :box-num="6"
          v-model="bindForm.orderNo"
        ></one-box-one-word>
      </div>
      <Row type="flex" justify="center" slot="footer" v-if="!hasBindCard">
        <template v-if="bindType == 'base'">
          <Button style="margin-right: 30px" @click="handleCancelBind"
            >取 消</Button
          >
          <Button
            @click="handleBindNext"
            type="primary"
            :loading="bindNextLoading"
            >下一步</Button
          >
        </template>
        <template v-else>
          <Button style="margin-right: 30px" @click="handleBindBack"
            >返 回</Button
          >
          <Button
            @click="handleBindSubmit"
            type="primary"
            :loading="bindLoading"
            >保 存</Button
          >
        </template>
      </Row>
      <Button
        v-if="hasBindCard"
        long
        type="error"
        @click="handleUnbind"
        :loading="unbindLoading"
        >解 绑</Button
      >
    </Modal>

    <Modal
      v-model="withdrawModal"
      title="提现："
      :width="360"
      @on-cancel="handleCancelWithdraw"
      class-name="vertical-center-modal"
    >
      <Form
        ref="withdrawForm"
        :model="withdrawForm"
        :rules="withdrawRules"
        :label-width="90"
      >
        <FormItem label="提现金额：" prop="amt">
          <Input
            placeholder="请输入提现金额"
            v-model="withdrawForm.amt"
            type="number"
            number
            style="width: 200px"
          />
          <span
            style="cursor: pointer; color: #2b85e4; margin-left: 10px"
            @click="withdrawAll"
            >全 部</span
          >
        </FormItem>
      </Form>
      <Row type="flex" justify="center" slot="footer">
        <Button style="margin-right: 30px" @click="handleCancelWithdraw"
          >取 消</Button
        >
        <Button
          @click="handleWithdrawSubmit"
          type="primary"
          :loading="withdrawLoading"
          >保 存</Button
        >
      </Row>
    </Modal>
  </i-col>
</template>

<script>
import CountTo from '_c/count-to'
import OneBoxOneWord from '_c/one-box-one-word'
export default {
  components: {
    CountTo,
    OneBoxOneWord
  },
  props: {
    type: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: '总资产'
    }
  },
  data () {
    return {
      assetsTotal: 0,
      cashAmt: 0,
      cardInfo: null,
      assetsLoading: false,

      bindType: 'base',
      bankList: [],
      bankMap: {},
      bindModal: false,
      bindRules: {
        realName: { required: true, message: '不能为空！', trigger: 'blur' },
        bankIndex: { required: true, message: '不能为空！', trigger: 'change' },
        openBranch: { required: true, message: '不能为空！', trigger: 'blur' },
        cardNo: { required: true, message: '不能为空！', trigger: 'blur' },
        idNo: { required: true, message: '不能为空！', trigger: 'blur' },
        phone: { required: true, message: '不能为空！', trigger: 'blur' },
        uniqeCode: { required: true, message: '不能为空！', trigger: 'blur' },
        companyName: { required: true, message: '不能为空！', trigger: 'blur' }
      },
      bindForm: {
        realName: '',
        bank: '',
        bankCode: '',
        openBranch: '江宁支行',
        cardNo: '',
        idNo: '',
        phone: '11111111111',
        authAmt: '',
        orderNo: '',
        type: 1,
        uniqeCode: '',
        companyName: '',

        bankIndex: ''
      },
      bindNextLoading: false,
      bindLoading: false,
      sendCodeTimeRemaining: 0,

      withdrawModal: false,
      withdrawForm: {
        amt: ''
      },
      withdrawRules: {},
      withdrawLoading: false,

      unbindLoading: false
    }
  },
  computed: {
    hasBindCard () {
      return this.cardInfo != null
    }
  },
  methods: {
    requestBank () {
      this.api({
        apiName: 'getBankList',
        success: (res) => {
          this.bankList = res.data
          this.bankMap = {}
          this.bankList.forEach((item) => {
            this.bankMap[item.code] = item.name
          })
        }
      })
    },
    requestAssets () {
      this.assetsLoading = true
      this.api({
        apiName: 'getAssetsInfo',
        postdata: { type: this.type },
        success: (res) => {
          this.assetsLoading = false
          this.assetsTotal = parseFloat(res.data.amt)
          this.cashAmt = parseFloat(res.data.cashAmt)
          this.cardInfo = res.data.cardInfo
        }
      })
    },

    handleBind () {
      this.bindModal = true
    },
    handleBindNext () {
      this.$refs.bindForm.validate((valid) => {
        if (valid) {
          this.bindNextLoading = true
          this.bindForm.authAmt = ''
          this.bindForm.orderNo = ''
          let index = this.bindForm.bankIndex
          this.bindForm.bank = this.bankList[index].superNumber
          this.bindForm.bankCode = this.bankList[index].code

          this.api({
            apiName: 'adminBindCard',
            postdata: this.bindForm,
            success: (res) => {
              this.bindType = 'code'
            },
            complete: () => {
              this.bindNextLoading = false
            },
            error: (res) => {
              this.$Notice.error({ title: res.msg, desc: res.data })
            }
          })
        }
      })
    },
    handleBindBack () {
      this.bindType = 'base'
      this.bindForm.authAmt = ''
      this.bindForm.orderNo = ''
    },
    handleCancelBind () {
      this.bindModal = false
      this.bindType = 'base'
      this.$refs.bindForm.resetFields()
    },
    handleBindSubmit () {
      if (
        !this.bindForm.authAmt ||
        !/^\d+(.\d{2})$/.test(this.bindForm.authAmt)
      ) {
        this.$Notice.warning({ title: '请输入正确的验证金额！' })
        return
      }
      // if (!this.bindForm.orderNo || this.bindForm.orderNo.length != 6) {
      //   this.$Notice.warning({ title: "请输入正确的指令号！" });
      //   return;
      // }

      this.bindLoading = true
      this.api({
        apiName: 'adminBindVerifyCode',
        postdata: this.bindForm,
        success: (res) => {
          this.$Notice.success({ title: '绑定成功！' })
          this.handleCancelBind()
          this.requestAssets()
        },
        complete: () => {
          this.bindLoading = false
        },
        error: (res) => {
          this.$Notice.error({ title: res.msg, desc: res.data })
        }
      })
    },

    handleWithdraw () {
      if (!this.hasBindCard) {
        this.$Notice.warning({ title: '当前尚未绑定银行卡！' })
        return
      }
      this.withdrawModal = true
    },
    handleCancelWithdraw () {
      this.withdrawForm.amt = ''
      this.withdrawModal = false
    },
    handleWithdrawSubmit () {
      let { amt } = this.withdrawForm
      if (!amt) {
        return this.$Notice.warning({ title: '请输入提现金额！' })
      }
      if (amt > this.cashAmt) {
        return this.$Notice.warning({ title: '余额不足！' })
      }
      if (amt <= 0) {
        return this.$Notice.warning({ title: '请输入正确的金额' })
      }
      this.withdrawLoading = true
      this.api({
        apiName: 'adminWithdraw',
        postdata: { type: this.type, amt },
        success: (res) => {
          this.$Notice.success({ title: '提现成功！' })
          this.handleCancelWithdraw()
          this.requestAssets()
        },
        complete: () => {
          this.withdrawLoading = false
        },
        error: (res) => {
          this.$Notice.error({ title: res.msg, desc: res.data })
        }
      })
    },
    withdrawAll () {
      this.withdrawForm.amt = this.cashAmt
    },
    handleUnbind () {
      this.$Modal.confirm({
        title: `确定解绑 ？`,
        onOk: () => {
          this.unbindLoading = true
          this.api({
            apiName: 'adminUnbindCard',
            postdata: { type: this.type },
            success: () => {
              this.bindModal = false
              this.$Notice.success({ title: '已解绑！' })
              this.requestAssets()
            },
            complete: () => {
              this.unbindLoading = false
            }
          })
        }
      })
    }
  },
  filters: {
    phoneFilter (val) {
      return val.substring(0, 3) + '****' + val.substr(val.length - 2)
    },
    idFilter (val) {
      return val.substring(0, 3) + '************' + val.substr(val.length - 2)
    },
    cardFilter (val) {
      return '**** ' + val.substr(val.length - 4)
    }
  },
  mounted () {
    this.requestBank()
    this.requestAssets()
    this.bindForm.type = this.type
  }
}
</script>

<style lang="less">
.assets-info-con .balance-con {
  // width: 400px;
  border-radius: 6px;
  // background: #2d8cf0;
  .title {
    // color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 18px;
    color: #516b91;
  }
  .balance-amt {
    font-size: 24px;
    font-weight: bold;
    // color: #ffffff;
  }
  .opt-con {
    margin-top: 10px;
  }
  .amt-con {
    display: flex;
    align-items: center;
    justify-content: center;
    > .label {
      color: #808695;
      width: 100px;
    }
  }
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}

.bind-modal-con {
  .ivu-modal-body {
    // height: 372px;
  }
  .code-con {
    padding: 50px 0;
    .title {
      font-size: 16px;
      margin-bottom: 10px;
    }
    .text-no {
      font-size: 30px;
      font-weight: bold;
      font-style: italic;
    }
  }
}
</style>
