<template>
  <div class="enterprise-list" data-weiling-mobile-ui-bc-enterprise-list>
    <template v-if="data.length <= retract">
      <div
        class="enterprise-item"
        v-for="item in data"
        :key="item.company_id"
        @click.stop="onClickEnterprise(item)"
      >
        <p class="avatar">
          <WlPic :src="item.image_url || defaultAvatar" />
        </p>
        <p class="item-name">
          {{ item.company_name }}
        </p>
      </div>
    </template>
    <div v-else class="retract-enterprise" >
      <div class="retract-avatars">
        <WlPic
          class="avatar"
          v-for="(item, index) in retractImgs"
          :key="index"
          :src="item || defaultAvatar"
        />
      </div>
      <div class="retract-text-wrap">
        <p class="retract-text name">
          {{ data[0].company_name }}
        </p>
        <p
          class="retract-text"
          :class="{ 'retract-text--clickable': canViewMore }"
          @click.stop="onClickRetract"
        >
          共{{ data.length }}家
        </p>
      </div>
    </div>
    <WlPopup
      v-model="popupVisible"
      position="bottom"
      :style="{ height: '300px' }"
      round
      title="企业"
      :headerVisible="true"
    >
      <div
        class="enterprise-popup"
        data-weiling-mobile-ui-bc-enterprise-list-enterprise-popup
      >
        <div class="content">
          <div
            class="enterprise-popup-item"
            v-for="item in data"
            :key="item.company_id"
            @click.stop="onClickEnterprise(item)"
          >
            <p class="avatar">
              <WlPic :src="item.image_url || defaultAvatar" />
            </p>
            <p class="item-name">{{ item.company_name }}</p>
            <WlSvgIcon
              type="arrowRight"
              width="16"
              height="16"
              color="var(--wl-text-color-secondary-2)"
            />
          </div>
        </div>
      </div>
    </WlPopup>
  </div>
</template>

<script lang="ts">
export default {
  name: "BCEnterpriseList",
};
</script>

<script lang="ts" setup>
import WlSvgIcon from "@mobileUI/components/WlSvgIcon/src/index.vue";
import { ref, computed } from "vue";
import { en_default_logo } from "@mobileUI/utils/cdn";
import WlPic from "@mobileUI/components/WlPic/src/index.vue";
import WlPopup from "@mobileUI/components/WlPopup/src/index.vue";

let popupVisible = ref(false);
const emit = defineEmits(["onClickEnterprise", "onClickRetract"]);
type TData = {
  company_id: string;
  company_name: string;
  image_url: string;
};
type Props = {
  data: TData[];
  retract?: number;
  defaultAvatar?: string;
  canViewMore?: boolean;
};
const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  retract: 2,
  defaultAvatar: en_default_logo,
  canViewMore: true,
});

const retractImgs = computed(() => {
  const temp_arr = props.data.slice(0, props.retract + 1);
  return temp_arr.reduce((acc, item) => {
    if (props.retract < props.data.length) {
      acc.push(item["image_url"]);
    }
    return acc;
  }, []);
});

const onClickEnterprise = (item: TData) => {
  emit("onClickEnterprise", item);
};
const onClickRetract = () => {
  if (!props.canViewMore) return;
  popupVisible.value = true;
  emit("onClickRetract", true);
};
// const onClosePopup = () => {
//   popupVisible.value = false;
// };
</script>

<style lang="scss">
.enterprise-list[data-weiling-mobile-ui-bc-enterprise-list] {
  .avatar {
    width: j(26);
    height: j(26);
    background-color: #fff;
    border-radius: j(4);
    overflow: hidden;
  }

  .enterprise-item,
  .retract-enterprise {
    background-color: var(--wl-primary-color-lightest);
    box-shadow: 0px j(1) j(3) rgba(0, 0, 0, 0.02);
    border-radius: j(4);
    padding-right: j(8);
    box-sizing: border-box;
    width: 100%;
    height: j(26);
    cursor: pointer;
    @extend %flex-middle;
  }

  .enterprise-item {
    &:not(:last-child) {
      margin-bottom: j(10);
    }

    .avatar {
      flex-shrink: 0;
      margin-right: $left-right-spacing;
    }

    .item-name {
      font-size: j(14);
      color: #0e0e0e;
      flex: 1;
      margin: j(0) j(4);
      @include textEllipsis(1);
    }
  }

  .retract-enterprise {
    .retract-avatars {
      @extend %flex-middle;
      padding-left: j(13);
      margin-right: j(4);

      .avatar {
        margin-left: j(-13);
        box-shadow: 0px 0px j(4) rgba(0, 0, 0, 0.15);
      }
    }

    .retract-text-wrap {
      @extend %flex-middle;

      .retract-text {
        font-size: j(14);
        color: #0e0e0e;
        padding-left: $left-right-spacing;
        &--clickable {
          color: var(--wl-primary-color);
          cursor: pointer;
        }
      }

      .name {
        flex: 1;
        @include textEllipsis(1);
      }
    }
  }
}

.enterprise-popup[data-weiling-mobile-ui-bc-enterprise-list-enterprise-popup] {
  height: 100%;
  font-size: j(14);
  @extend %flex-direction-column;

  .avatar {
    width: j(26);
    height: j(26);
    background-color: #fff;
    border-radius: j(4);
    overflow: hidden;
  }

  .header {
    flex-shrink: 0;
    @include halfBorder("bottom", rgba(238, 238, 238, 1));
  }

  .content {
    flex: 1;
    overflow-y: auto;
    padding-top: j(10);

    .enterprise-popup-item {
      cursor: pointer;
      padding: $left-right-padding;
      background-color: white;
      @extend %flex-middle;

      .avatar {
        margin-right: j(4);
        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
      }

      .item-name {
        flex: 1;
        margin-left: $left-right-spacing;
      }

      .icon {
        color: rgba(145, 150, 153, 1);
      }
    }
  }
}
</style>
