<template>
  <view class="payee">
    <view :class="haveAction ? '' : 'action'">
      {{ item.dueBank ? item.dueBank +'/' : '收款信息' }}{{ item.dueBankCardNo ? item.dueBankCardNo +'/' : '' }}{{
        item.openingBank && item.openingBankBranch ? item.openingBank + item.openingBankBranch : item.openingBank || item.openingBankBranch || ''
      }}
    </view>
    <view v-if="haveAction" class="action" @tap="toSelect">
      <u-text text="更换" suffix-icon="arrow-right"></u-text>
    </view>
  </view>
</template>
<script>
export default {
  name: 'payee',
  props: {
		value:{
			type: Object,
			default(){
				return {}
			},
		},
    haveAction: {
      type: Boolean,
      default: false,
    },
  },
	watch:{
		value: {
			handler(val){
				this.item = val;
			}
		}
	},
  data() {
    return {
      item: this.value
    };
  },
  methods: {
    toSelect() {
	    uni.$once('select-payee', item=>{
				this.item = item;
				this.$emit('input',item);
	    });
      uni.navigateTo({ url: '/pages/global/search-payee' });
    },
	  setItem(item){
			this.item = item;
	  }
  },
};
</script>

<style scoped lang="scss">
.payee {
  display: flex;
  justify-content: space-between;
  font-size: 24upx;
  padding: $padding-sm;
  border-radius: $radius-sm;
  background: #f6f8fb;
  .action {
    color: #2673fb;
	  min-width: 70rpx;
	  float: right;
  }
  margin: $padding-sm 0;
}
</style>
