<!-- 客户列表 -->
<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.id"
        @click="onToggle(index, item)"
      >
        <template #title>
          <div class="user_wrap flex-row cross-center">
            <div class="user_avatar">
              <img
                class="avatar"
                :src="item.head_img_url || defaultAvatar"
                alt=""
              />
              <img
                class="icon"
                :src="item.type == 2 ? qwIcon : wechatIcon"
                alt=""
              />
            </div>
            <div class="user_info">
              <p class="name">{{ item.nick_name }}</p>
              <p v-if="item.corp_name" class="company">@{{ item.corp_name }}</p>
            </div>
          </div>
        </template>
        <template #right-icon>
          <van-checkbox :name="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 { formatCosUrl } from "../utils/dict";
import { defaultAvatar } from "@mobileUI/utils/cdn";
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;
      defaultAvatar: any;
      qwIcon: string;
      wechatIcon: string;
      checkboxRefs: any;
      checkedList: Array<string>;
    }>({
      checked: [],
      defaultAvatar,
      qwIcon: formatCosUrl("/worktable-h5/icon/lxx-icon/qw.png"),
      wechatIcon: formatCosUrl("/worktable-h5/icon/lxx-icon/wechat.png"),
      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.id == item.id)) {
        state.checkedList = state.checkedList.filter(
          (res: any) => res.id != item.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.id);
        state.checkedList = [...res];
      },
      {
        immediate: true
      }
    );
    return {
      ...toRefs(state),
      onToggle
    };
  }
});
</script>

<style scoped lang="scss">
:deep() {
  .van-cell {
    padding: 8px 0 !important;
  }

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

.user_avatar {
  position: relative;
  width: j(32);
  height: j(32);

  .avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .icon {
    position: absolute;
    width: j(16);
    height: j(16);
    bottom: 0;
    right: 0;
  }
}

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

  .name {
    color: #000000;
    word-break: break-all;
  }

  .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>
