<template>
  <!-- #ifdef H5 -->
  <zj-page-layout
    :hasFooter="true"
    :isScroll="true"
    :refresherTriggered="refresherTriggered"
    @refresherrefresh="refresherrefresh">

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index" @tap="chooseAccount(item)">
        <view class="left">
          <view class="title">{{item.bank}}</view>
          <view class="card">
            <u-tag text="个人" size="small" plain plainFill></u-tag>
            <view class="value">{{item.bankNo}}</view>
          </view>
          <view class="row">
            <view class="label">持卡人名：</view>
            <view class="value">{{item.bankUserName}}</view>
          </view>
          <view class="row">
            <view class="label">身份证号：</view>
            <view class="value">{{item.idcard}}</view>
          </view>
        </view>
        <view class="right">
          <text class="iconfont icon-bianji" @tap.stop="toEdit(item)"></text>
        </view>
      </view>
    </view>

    <Loading
    	:type="2"
    	:loadStatus="loadStatus"
    	:dataList="dataList"
    />

    <template slot="footer">
      <view class="footer-btn-group">
        <u-button type="primary" text="新增提现账户" @click="toAdd"></u-button>
      </view>
    </template>
  </zj-page-layout>
  <!-- #endif -->

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

<script>
  // #ifdef H5
  export default {
    data() {
      return {
				dataList: [],
				loadStatus: 0,
				refresherTriggered: false, // 下拉刷新状态
      }
    },

    onLoad() {
      this.getList();

      this.crossPage.$on('refreshAccountList', () => {
        this.dataList = [];
        this.getList();
      });
    },

    onUnload() {
      this.crossPage.$off('refreshAccountList');
    },

    methods: {
      getList() {
      	this.loadStatus = 1;
      	this.$api.post('/worker/bank/list')
        .then(res => {
      		this.loadStatus = 0;
      		let list = res.data;
      		if(list.length < 1){
      			this.loadStatus = 2;
      		}
      		this.dataList = list;
      	}).catch(() => {
      		this.loadStatus = 2;
      	}).finally(res => {
      		this.refresherTriggered = false;
      	})
      },

      // 触发下拉刷新
      async refresherrefresh(e) {
      	this.refresherTriggered = true;
      	this.dataList = [];
      	this.getList();
      },

      toAdd() {
        this.$navToPage({
          url: `/packageMine/pages/salesProfit/account/form`
        })
      },

      toEdit(item) {
        this.$navToPage({
          url: `/packageMine/pages/salesProfit/account/form?id=${item.id}`
        })
      },
      
      chooseAccount(item) {
        this.crossPage.$emit('chooseAccount', item);
        this.$navToPage({
        	delta: 1
        }, 'navigateBack')
      },
    },
  }

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

<style lang="scss" scoped>
.list-container {
  padding: 0 20rpx;
  .item {
    @include zj-card;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    .left {
      .title {
        font-size: 36rpx;
        font-weight: 500;
      }
      .card {
        display: flex;
        align-items: center;
        margin-top: 12rpx;
        ::v-deep .u-tag {
          font-size: 22rpx;
          padding: 4rpx 8rpx;
        }
        .value {
          font-size: 28rpx;
          font-weight: 500;
          margin-left: 12rpx;
        }
      }
      .row {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        .label {
          font-size: 28rpx;
          color: $sec-font;
        }
        .value {
          flex: 1;
          font-size: 28rpx;
        }
      }
    }
    .right {
      .iconfont {
        font-size: 40rpx;
        color: $theme-color;
      }
    }
  }
}
</style>
