<template>
  <div class="render-card-company">
    <BCEnterpriseList
      v-if="data?.length"
      class="company-list"
      :data="data"
      :canViewMore="!!listItem.allowClick"
      :retract="listItem.retract || 0"
      @onClickEnterprise="onClickEnterprise"
      @onClickRetract="onClickRetract"
    />

    <div class="company-add" v-if="listItem.isAdd" @click.stop="onAdd">
      <WlSvgIcon
        type="add"
        width="12"
        height="12"
        color="var(--wl-primary-color)"
      />
      <span>添加</span>
    </div>

    <!-- 企业选择器 -->
    <BCSearchEnterprisePopup
      v-model="enterpriseVisible"
      :env_data="env_data"
      @onChoose="onChoose"
      @sendSearchValue="sendSearchValue"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import BCEnterpriseList from "@mobileUI/components/BCEnterpriseList";
import { VCardItem } from "../../types/interface";
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import BCSearchEnterprisePopup from "@mobileUI/components/BCSearchEnterprisePopup";

interface Props {
  data: any;
  listItem: VCardItem;
  env_data: TEnv.TEnvData;
}
const props = withDefaults(defineProps<Props>(), {
  data: (): any => {},
  listItem: (): VCardItem => {
    return {};
  },
  env_data: (): any => {
    return {};
  },
});

type TData = {
  company_id: string;
  company_name: string;
  image_url: string;
  [key: string]: string;
};
const emit = defineEmits<{
  (e: "onClickEnterprise", val: TData): void;
  (e: "onClickRetract", val: boolean): void;
  (e: "onChoose", val: any): void;
  (e: "sendSearchValue", val: string): void;
}>();

// 点击企业
const onClickEnterprise = (item: TData) => {
  if (!props.listItem?.allowClick) return;
  emit("onClickEnterprise", item);
};

// 打开所有企业弹窗
const onClickRetract = (bol: boolean) => {
  if (!props.listItem?.allowClick) return;
  emit("onClickRetract", bol);
};

// 添加企业
const enterpriseVisible = ref(false);
const onAdd = () => {
  enterpriseVisible.value = true;
};
const onChoose = (item: any) => {
  emit("onChoose", item);
};
const sendSearchValue = (name: any) => {
  emit("sendSearchValue", name);
};
</script>

<style scoped lang="scss">
.render-card-company {
  .company-list {
    margin-bottom: j(8);
  }
  .company-add {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: j(4) j(8);
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--wl-primary-color-light, #e8f9ff);
    color: var(--wl-primary-color);

    span {
      color: var(--wl-primary-color);
      margin-left: j(4);
      font-size: j(12);
    }
  }
}
</style>
