<!-- 多类型人员选择 -->
<template>
  <van-action-sheet
    v-model:show="show"
    :title="title"
    class="BCMulteTypePersonnerSelect"
    teleport="body"
  >
    <div class="content flex-column">
      <div class="search_wrap flex0">
        <VSearch
          placeholder="搜索"
          v-model="keyword"
          @onChange="onInput"
          closable
        />
      </div>
      <div class="tab_wrap flex0">
        <TabMulte :tabTypes="tabTypes" @onTabChange="onTabChange" />
      </div>
      <div class="flex1 info_wrap">
        <VLoadMore
          v-model:value="isLoading"
          :finished="isFinished"
          @load="onGetList"
        >
          <template v-if="type == 1 && customerList.length">
            <CustomerList
              :data="customerList"
              :isRadio="isRadio"
              @onUserChange="onCustomerChange"
              :checkedData="checkCustomer"
            />
          </template>
          <template v-if="type == 2 && wechatList.length">
            <WechatList
              :data="wechatList"
              :isRadio="isRadio"
              @onUserChange="onWechatChange"
              :checkedData="checkWechat"
            />
          </template>
          <template v-if="type == 3 && clueList.length">
            <ClueList
              :data="clueList"
              :isRadio="isRadio"
              @onUserChange="onClueChange"
              :checkedData="checkClue"
            />
          </template>
        </VLoadMore>
      </div>
      <footer class="flex-center flex0">
        <p class="flex-center" @click.stop="onSub">确认选择</p>
      </footer>
    </div>
  </van-action-sheet>
</template>

<script lang="ts">
import { defineComponent, reactive, SetupContext, toRefs, watch } from "vue";
import TabMulte from "./components/Tab.vue";
import VSearch from "./components/VSearch.vue";
import Api from "./http/api";
import CustomerList from "./components/CustomerList.vue";
import ClueList from "./components/ClueList.vue";
import WechatList from "./components/WechatList.vue";
import { ActionSheet as VanActionSheet } from "vant";
import VLoadMore from "./components/VLoadMore.vue"
import usePagination from "./utils/usePagination";
import { debounce } from "lodash-es";
import Store from "@mobileUI/store";
import { typeDetection } from "@mobileUI/utils";

export default defineComponent({
  components: { TabMulte, CustomerList, ClueList, WechatList, VSearch, VanActionSheet, VLoadMore },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array || Object,
      default() {
        return [];
      }
    },
    title: {
      type: String,
      default: "选择对接人"
    },
    env_data:{
      type: Object,
      default: () => {
        return {
          sid: "",
          domain: "",
          corp_id: "",
          node_env: "uat",
          app_id: "",
          token: "",
          card_resource: "",
        };
      },
    },
    tabChangeClear: {
      type: Boolean,
      default: false
    },
    tabTypes: {
      type: Array,
      default: () => {
        return [1, 2, 3];
      },
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
  },
  setup(props: any, { emit }: SetupContext) {
    const { limit, page_count, isLoading, isFinished, judgeLoadStatus } =
      usePagination();

    Store.corp_id = props.env_data.corp_id;
    Store.node_env = props.env_data.node_env;
    Store.sid = props.env_data.sid;
    Store.token = props.env_data.token;
    Store.card_resource = props.env_data.card_resource;

    const state = reactive<{
      show: boolean;
      keyword: string;
      checkCustomer: any;
      checkClue: any;
      checkWechat: any;
      type: any;
      clueList: any[];
      wechatList: any[];
      customerList: any[];
    }>({
      show: false,
      keyword: "",
      checkCustomer: [],
      checkClue: [],
      type: props.tabTypes?.[0] || 1,
      checkWechat: [],
      clueList: [],
      wechatList: [],
      customerList: []
    });
    enum EnumType {
      "customerList" = 1,
      "wechatList" = 2,
      "clueList" = 3
    }
    const Methods = {
      onTabChange(res: any) {
        const { type } = res;
        state.type = type;
        page_count.value = 1;
        isFinished.value = false;
        Methods.onGetList();

      },
      onGetList: async () => {
        isLoading.value = true;
        const params = {
          type: state.type,
          page: {
            page_count: page_count.value,
            limit: limit.value,
            keyword: state.keyword
          },
          version_flag: 2,
        };
        if (page_count.value == 1) state[EnumType[params.type]] = [];
        const { data } = await Api.getBusinessRelatedCustomerList(params);
        const data_list = data.data_list || [];
        state[EnumType[params.type]] = [
          ...state[EnumType[params.type]],
          ...data_list
        ];
        judgeLoadStatus({ data_list });
      },
      onCustomerChange(res: any) {
        console.log(res, "cuatomer");
        if (props.isRadio) {
          state.checkClue = [];
          state.checkWechat = [];
        }
        state.checkCustomer = res;
      },
      onClueChange(res: any) {
        console.log(res, "clue");
        if (props.isRadio) {
          state.checkCustomer = [];
          state.checkWechat = [];
        }
        state.checkClue = res;
      },
      onWechatChange(res: any) {
        if (props.isRadio) {
          state.checkCustomer = [];
          state.checkClue = [];
        }
        state.checkWechat = res;
      },
      onInput: debounce((res: any) => {
        state.keyword = res;
        page_count.value = 1;
        Methods.onGetList();
      }, 300),
      onSub() {
        let arr1 = state.checkCustomer?.map((item: any) => {
          return {
            user_type: 1,
            ...item
          };
        });
        let arr2 = state.checkWechat?.map((item: any) => {
          return {
            ...item,
            user_type: 2
          };
        });
        let arr3 = state.checkClue?.map((item: any) => {
          return {
            user_type: 3,
            id: item.clue_id,
            ...item
          };
        });
        // 单选处理
        if (props.isRadio) {
          emit("onHandleChoose", ...[...arr1, ...arr2, ...arr3]);
          state.show = false;
          return;
        }
        if (!props.tabChangeClear) {
          emit("onHandleChoose", [...arr1, ...arr2, ...arr3]);
          state.show = false;
          return
        }
        if (state.type == 1) {
          emit("onHandleChoose", arr1);
        }
        if (state.type == 2) {
          emit("onHandleChoose", arr2);
        }
        if (state.type == 3) {
          emit("onHandleChoose", arr3);
        }
        state.show = false;
      }
    };
    watch(
      () => props.value,
      val => {
        state.show = val;
      }
    );
    watch(
      () => state.show,
      bol => {
        if (!bol) emit("update:value", false);
      }
    );
    watch(
      () => props.data,
      res => {
        let val: any = res;
        // 单选处理
        if (typeDetection(res) === "object") val = [res];
        state.checkCustomer =
          val.filter((item: any) => item.user_type == 1) || [];
        state.checkWechat =
          val.filter((item: any) => item.user_type == 2) || [];
        state.checkClue =
          val.filter((item: any) => {
            return item.user_type == 3;
          }) || [];
      },
      {
        deep: true,
        immediate: true
      }
    );
    return {
      ...toRefs(state),
      isLoading,
      isFinished,
      ...Methods
    };
  }
});
</script>


<style lang="scss">
.BCMulteTypePersonnerSelect.van-action-sheet {
  height: 80% !important;
  max-height: initial !important;
  .van-action-sheet__header {
    position: relative;
    .van-action-sheet__close {
      position: absolute;
    }
  }
}
</style>
<style scoped lang="scss">
.flex-center {
  @extend %flex-middle-center;
}

//子元素空间
.flex0 {
  flex-shrink: 0;
}

.flex1 {
  flex: 1;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
//下边框样式，缩小了1/2
@mixin borderBottom($color, $left: 0, $right: 0) {
  position: relative;

  &::after {
    position: absolute;
    right: $right;
    bottom: 0;
    left: $left;
    height: j(1);
    content: "";
    background-color: $color;
    transform: scaleY(0.5);
  }
}

:deep() {
  .van-action-sheet__content {
    height: 0;
  }

  .common-search {
    height: j(36);
    background-color: #ffffff;
    border: j(1) solid #dce1e5;
    border-radius: j(6);
  }
}

.content {
  height: 100%;

  .search_wrap {
    padding: 0 j(16);
  }

  .tab_wrap {
    @include borderBottom(#eeeeee);
    padding: j(12) j(16);
  }

  .info_wrap {
    padding: 0 j(16);
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }

  footer {
    height: j(74);
    padding: j(12) j(20) j(20);
    background: #ffffff;
    border: j(1) solid #eeeeee;
    box-shadow: 0px j(-4) j(12) rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(9px);
    border-radius: j(12) j(12) 0px 0px;

    p {
      width: 100%;
      height: j(42);
      background: #1c9fff;
      border-radius: j(8);
      color: #ffffff;
      font-weight: 500;
      font-size: 15px;
    }
  }
}
</style>
