<template>
  <Page name="search-driver" flank>
    <template #header>
      <u-alert type="error" description="警告：司机存在重名，请注意核实手机号，以免错付运费！" fontSize="12"></u-alert>
      <view class="search-bar-content">
        <search-bar v-model="query" placeholder="搜索手机号或姓名" auto @confirm="onSearch" />
      </view>
    </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 v-if="item.name" style="margin-right: 10upx">{{ item.name || '' }}</text>
                <text
                  >{{ item.mobile }}（<text style="color: #2673fb">最近使用：{{ item.latestVehicleNo || '无~' }}</text
                  >）</text
                >
              </view>
              <view style="float: right" :class="{ action: choseIndex === index }">
                <u-icon v-if="choseIndex !== index" name="checkmark-circle" size="20px"></u-icon>
                <u-icon v-else name="checkmark-circle-fill" size="20px"></u-icon>
              </view>
            </view>
          </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.freightDriverCommonSelect({ query: this.query, ...params });
    },
    onSelect() {
      let item = this.list[this.choseIndex];
      uni.$emit('select-driver', item);
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss">
.page-search-driver {
  &__header {
    padding: 0 !important;
    .search-bar-content {
      padding: 15rpx 22rpx !important;
    }
  }
  &__footer {
    background: $color-white;
  }
  .title {
    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>
