<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :hasFooter="true">
    <view class="form-container">
      <view class="item">
        <view class="label">账户类型</view>
        <u-tag text="个人账户" size="small" plain plainFill></u-tag>
      </view>
      <view class="item" @tap="isShowBankDialog = true">
        <view class="label"><text>*</text>开户银行</view>
        <view class="picker">
          <text class="value" v-if="bank">{{bank.dictValue}}</text>
          <text class="placeholder" v-else>请选择</text>
          <text class="iconfont icon-jinru"></text>
        </view>
      </view>
      <view class="item">
        <view class="label"><text>*</text>开户支行</view>
        <u--input
          placeholder="请输入开户支行"
          border="none"
          inputAlign="right"
          v-model="subBank"
        ></u--input>
      </view>
      <view class="item">
        <view class="label"><text>*</text>银行卡号</view>
        <u--input
          placeholder="请输入银行卡号(信用卡无效)"
          border="none"
          inputAlign="right"
          v-model="bankNo"
        ></u--input>
      </view>
      <view class="item">
        <view class="label"><text>*</text>持卡人名</view>
        <u--input
          placeholder="请输入持卡人姓名"
          border="none"
          inputAlign="right"
          v-model="bankUserName"
        ></u--input>
      </view>
      <view class="item">
        <view class="label"><text>*</text>身份证号</view>
        <u--input
          placeholder="请输入持卡人身份证号"
          type="idcard"
          border="none"
          inputAlign="right"
          v-model="idcard"
        ></u--input>
      </view>
    </view>

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button text="删除" v-if="id" @click="deleteData"></u-button>
        <u-button type="primary" text="保存" @click="submitData"></u-button>
      </view>
    </template>

    <zjDialogPicker
      ref="bankDialog"
      :isShow="isShowBankDialog"
      :multiple="false"
      :styleType="2"
      :title="'开户银行'"
      :list="bankList"
      :keyName="'dictValue'"
      @cancel="isShowBankDialog = false"
      @confirm="confirmBankDialog">
    </zjDialogPicker>

  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageMine/pages/salesProfit/account/form`, pam, crossPagePam)" @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
	import zjDialogPicker from "@/components/zj-dialog/zj-dialog-picker.vue";

  export default {
    components: {
    	zjDialogPicker
    },

    data() {
      return {
        id: null,
        bank: null,
        bankList: [],
        isShowBankDialog: false,
        subBank: '',
        bankNo: '',
        bankUserName: '',
        idcard: '',
      }
    },

    onLoad({id}) {
      this.id = id;
      uni.setNavigationBarTitle({
      　title: id ? '编辑账户' : '新增账户'
      })
      this.getBankList();
      if(id) {
        this.getDetail();
      }
    },

    methods: {
      getBankList() {
        this.$api.post('/pay/sysDict', {
          dictType: 'BANK'
        }).then(res => {
          this.bankList = res.data;
        })
      },

      getDetail() {
        this.$api.post('/worker/bank/detail', {
          id: this.id,
        }).then(res => {
          const data = res.data;
          this.bank = {dictValue: data.bank};
          this.subBank = data.subBank;
          this.bankNo = data.bankNo;
          this.bankUserName = data.bankUserName;
          this.idcard = data.idcard;
        })
      },

      confirmBankDialog(e) {
        this.bank = this.bankList[e[0]];
        this.isShowBankDialog = false;
      },

      deleteData() {
        this.$modal({
          content: '确定删除该账户吗？'
        }).then(() => {
          this.$api.post('/worker/bank/delete', {
            id: this.id
          }).then(res => {
            this.$successToast();
            this.crossPage.$emit('refreshAccountList', '');
            this.$navToPage({
            	delta: 1
            }, 'navigateBack')
          })
        }).catch(() => {})
      },

      submitData() {
        if(!this.bank) return this.$toast('请选择品牌');
        if(!this.subBank) return this.$toast('请输入开户支行');
        if(!this.bankNo) return this.$toast('请输入银行卡号');
        if(!this.bankUserName) return this.$toast('请输入持卡人姓名');
        if(!this.idcard) return this.$toast('请输入持卡人身份证号');

        this.$api.postJson('/worker/bank/save', {
          id: this.id || '',
          bank: this.bank.dictValue,
          subBank: this.subBank,
          bankNo: this.bankNo,
          bankUserName: this.bankUserName,
          idcard: this.idcard,
        }).then(res => {
          this.$successToast();
          this.crossPage.$emit('refreshAccountList', '');
          this.$navToPage({
          	delta: 1
          }, 'navigateBack')
        })
      },
    },
  }

  // #endif
  // #ifndef H5
  export default {
    data() {
      return {
        pam: {},
      }
    },
    onLoad(pam) {
      this.pam = pam;
    }
  }
  // #endif
</script>

<style lang="scss" scoped>
.form-container {
  background: #ffffff;
  margin-top: 20rpx;
  border-top: 1px solid #f5f5f5;
  .item {
    height: 108rpx;
    border-bottom: 1px solid #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    .label {
      margin-right: 30rpx;
      text {
        color: $error-color;
      }
    }
    .picker {
      .placeholder {
        color: $sec-font;
      }
      .iconfont {
        margin-left: 12rpx;
        color: $sec-font;
      }
    }
    ::v-deep .u-radio-group {
      flex: unset;
      .u-radio {
        margin-left: 50rpx;
      }
    }
    ::v-deep .u-tag {
      font-size: 24rpx;
      padding: 8rpx 12rpx;
    }
  }
}
</style>
