<!-- 客户列表 -->
<template>
  <van-checkbox-group v-model="checked">
    <van-cell-group :border="false" v-if="data.length">
      <van-cell
        v-for="(item, index) in data"
        clickable
        :key="item.clue_id || item.id"
        @click="onToggle(index, item)"
      >
        <template #title>
          <div class="user_wrap flex-row cross-center">
            <div class="user_avatar flex-center">
              {{ item.user_name ? item.user_name.substr(0, 1) : "-" }}
            </div>
            <div class="user_info">
              <p class="name">{{ item.user_name }}</p>
              <p class="name">{{ item.mobile }}</p>
            </div>
          </div>
        </template>
        <template #right-icon>
          <van-checkbox :name="item.clue_id || item.id" ref="checkboxRefs" />
        </template>
      </van-cell>
    </van-cell-group>
  </van-checkbox-group>
</template>

<script lang="ts">
import { defineComponent, reactive, SetupContext, toRefs, watch } from "vue";
import {
  Checkbox as VanCheckbox,
  CheckboxGroup as VanCheckboxGroup,
  Cell as VanCell,
  CellGroup as VanCellGroup,
} from "vant";

export default defineComponent({
  components: { VanCheckbox, VanCheckboxGroup, VanCell, VanCellGroup },
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    checkedData: {
      type: Array,
      default() {
        return [];
      },
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
  },
  setup(props: any, { emit }: SetupContext) {
    const state = reactive<{
      checked: any;
      checkboxRefs: any;
      checkedList: Array<string>;
    }>({
      checked: [],
      checkboxRefs: null,
      checkedList: [],
    });
    const onToggle = (index: any, item: any) => {
      // 单选处理
      if (props.isRadio) {
        state.checked = [item.id];
        state.checkedList = [item];
        emit("onUserChange", state.checkedList);
        state.checkboxRefs[index].toggle();
        return;
      }
      if (
        state.checkedList.find(
          (res: any) => (res.clue_id || res.id) == item.clue_id
        )
      ) {
        state.checkedList = state.checkedList.filter(
          (res: any) => (res.clue_id || res.id) != item.clue_id
        );
      } else {
        state.checkedList.push(item);
      }
      emit("onUserChange", state.checkedList);
      state.checkboxRefs[index].toggle();
    };
    watch(
      () => props.checkedData,
      (res) => {
        if (!res) return;
        state.checked = res.map((item: any) => item.clue_id || item.id);
        state.checkedList = [...res];
      },
      {
        immediate: true,
      }
    );
    return {
      ...toRefs(state),
      onToggle,
    };
  },
});
</script>

<style scoped lang="scss">
.flex-center {
  @extend %flex-middle-center;
}

:deep() {
  .van-cell {
    padding: 8px 0 !important;
  }

  .van-cell::after {
    right: 0;
    left: 0;
  }
}

.user_avatar {
  background: linear-gradient(180deg, #6acbff 0%, #1c9fff 100%);
  color: #ffffff;
  font-size: j(18);
  font-weight: 500;
  width: j(32);
  height: j(32);
  border-radius: 50%;
}

.user_info {
  margin-left: j(10);

  .name {
    color: #000000;
  }

  .company {
    color: #ff9444;
    font-size: j(13);
  }
}

.flex-row,
.flex-column {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex1 {
  flex: 1;
}

.flex-row > .flex1 {
  width: 0;
  min-width: 0;
}
.cross-center {
  align-items: center;
}
</style>
