<template>
  <layout-body>
    <Form ref="withdraw" :model="data" class="detail" :label-width="100" :rules="ruleValidate">
      <Form-item label="店铺名称">
        <span>{{ data.shopName }}</span>
      </Form-item>
      <Form-item label="可提现金额">
        <span>{{ data.availableAmount }}</span
        ><br /><span class="red">*支付宝每日转账最高限额10万元人民币，单日超过10万人民币限额的，请联系平台客服</span>
      </Form-item>
      <Form-item label="提现方式">
        <span>{{ data.type }}</span>
      </Form-item>
      <Form-item label="提现金额">
        <span>{{ data.availableAmount }}</span>
      </Form-item>
      <Form-item label="提现到帐号">
        <span>{{ data.withdrawAccount }}</span>
      </Form-item>
      <Form-item label="账号名称">
        <span>{{ data.withdrawAccountName }}</span>
      </Form-item>
      <Form-item label="账号名称">
        <span>{{ data.withdrawAccountName }}</span>
      </Form-item>
      <Form-item label="备注">
        <span>{{ data.remark }}</span>
      </Form-item>
      <Form-item>
        <Button id="btnSubmit" type="primary" size="large" @click="submit">确认提现</Button>
        <Button type="primary" size="large">联系客服</Button>
        <Button id="cancel" type="primary" size="large">联系客服</Button>
      </Form-item>
    </Form>
  </layout-body>
</template>

<script>
import FinanceService from 'services/finance/finance-service';
import { WithdrawApply } from './store';

export default {
  data() {
    return WithdrawApply.call(this);
  },
  created() {
    const params = {
      token: this.$user.token,
      timestamps: Math.round(new Date().getTime() / 1000),
    };
    this.financeService = new FinanceService();
    this.financeService.shopWithdrawApplyInit(params).then(result => {
      if (result.code === 200) {
        Object.assign(this.data, result.data);
      }
    });
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    backList() {
      this.$router.push({ name: 'finance.withdraw.withdrawlist' });
    },
    getInfo() {
      return this.financeService.shopWithdrawApplyInit().then(result => {
        if (result.code === 200) {
          this.data = result.data;
          this.$emit('on-change', this.data);
        }
      });
    },
    submit() {
      this.getInfo();
    },
    refresh() {
      this.getInfo();
    },
  },
};
</script>

<style lang="scss">
.detail {
  .ivu-input-wrapper {
    width: 300px;
  }

  .ivu-date-picker-editor {
    width: 150px;
  }

  .ivu-select {
    width: 200px;
  }

  .ivu-table-cell {
    .ivu-input-wrapper {
      width: auto;
    }
  }

  .btn-fixed {
    &.fix {
      width: calc(100% - 200px);
      position: fixed;
      bottom: 0;
      left: 200px;
      text-align: right;
      padding-right: 50px;
      height: 60px;
      line-height: 60px;
      background: rgba(255, 255, 255, 0.7);
      box-shadow: 1px 0 5px 1px #ccc;
      z-index: 1002;
    }
  }
}
</style>