<template>
  <div class="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" @click.stop="onClickRetract">
      <div class="retract-avatars">
        <p class="avatar" v-for="(item, index) in retractImgs" :key="index">
          <WlPic :src="item || defaultAvatar" />
        </p>
      </div>
      <div class="retract-text-wrap">
        <p class="retract-text name">{{ data[0].company_name }}</p>
        <p class="retract-text">共{{ data.length }}家</p>
      </div>
    </div>
    <WlPopUp v-model="popupVisible" position="bottom" :style="{ height: '300px' }" round>
      <div class="enterprise-popup">
        <WlHeader class="header" showClose @onClose="onClosePopup">企业</WlHeader>
        <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>
            <span class="icon-mobile-ui-you iconfont icon"></span>
          </div>
        </div>
      </div>
    </WlPopUp>
  </div>
</template>

<script>
import { en_default_logo } from "@packages/utils/cdn";
import WlPic from "@packages/components/Common/WlPic/src/index.vue";
import WlPopUp from "@packages/components/Common/WlPopUp/src/index.vue";
import WlHeader from "@packages/components/Common/WlHeader/src/index.vue";
export default {
  name: "EnEnterpriseList",
  components: { WlPic, WlHeader, WlPopUp },
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    retract: {
      type: Number,
      default: 2,
    },
    defaultAvatar: {
      type: String,
      default: en_default_logo,
    },
  },
  data() {
    return {
      popupVisible: false,
    };
  },
  computed: {
    retractImgs() {
      const temp_arr = this.data.slice(0, this.retract + 1);
      return temp_arr.reduce((acc, item) => {
        if (this.retract < this.data.length) {
          acc.push(item["image_url"]);
        }
        return acc;
      }, []);
    },
  },
  methods: {
    onClickEnterprise(item) {
      this.$emit("onClickEnterprise", item);
    },
    onClickRetract() {
      this.popupVisible = true;
      this.$emit("onClickRetract", true);
    },
    onClosePopup() {
      this.popupVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar {
  width: j(26);
  height: j(26);
  background-color: #fff;
  border-radius: j(4);
  overflow: hidden;
}
.enterprise-list {
  .enterprise-item,
  .retract-enterprise {
    background-color: #f7fbfe;
    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;
      }
      .name {
        flex: 1;
        @include textEllipsis(1);
      }
    }
  }
}
.enterprise-popup {
  height: 100%;
  font-size: $size-iconfont;
  @extend %flex-direction-column;
  .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>
