<template>
  <Page name="search-payee" flank>
    <template #header>
      <search-bar v-model="query" placeholder="搜索手机号或姓名" auto @confirm="onSearch" />
    </template>
    <template #content>
      <List ref="list" v-model="list" :api="searchAPI">
        <template v-for="(item, index) in list">
          <view class="card" :key="index" @tap="choseIndex = index">
            <view class="title">
              <view>
                <text style="color: #999999; margin-right: 30upx">收款人</text>
                <text>{{ item.name }}</text>
                <text>{{ item.mobile }}</text>
              </view>
              <view style="float: right" :class="{ action: choseIndex === index }">
                <u-icon v-if="choseIndex !== index" name="checkmark-circle"></u-icon>
                <u-icon v-else name="checkmark-circle-fill"></u-icon>
              </view>
            </view>
            <payee :value="item"></payee>
          </view>
        </template>
      </List>
    </template>
    <template #footer>
      <u-button type="primary" @click="onSelect">确定</u-button>
    </template>
  </Page>
</template>

<script>
import payee from '../../components/card/payee.vue';
import UText from '../../uni_modules/uview-ui/components/u-text/u-text.vue';
export default {
  name: 'change-payee',
  components: { UText, payee },
  data() {
    return {
      choseIndex: '',
      list: [],
      query: '',
    };
  },
  methods: {
    searchAPI(params) {
      return uni.$u.api.filter.payeeCommonSelect({ query: this.query, ...params });
    },
    onSelect() {
      let item = this.list[this.choseIndex];
      uni.$emit('select-payee', item);
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.page-search-payee {
  &__header {
    padding: 15rpx 22rpx !important;
  }
  &__footer {
    background: $color-white;
  }
  .title {
    padding-bottom: $padding-md;
    display: flex;
    justify-content: space-between;
  }
  .card {
    padding: $padding-md;
    border-radius: $radius-md;
    margin-bottom: $padding-md;
    background: $color-white;
    .action {
      color: $color-primary;
    }
  }
}
</style>
