<template>
  <div class="factory-select">
    <div class="label-box" @click="openList">
      <span>{{ companyName }}</span>
      <span
        class="triangle"
        :style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }"
      ></span>
    </div>
    <div class="option-list" v-show="isOpen">
      <div
        v-for="item in company"
        :key="item.id"
        @click="chooseCompany(item.id, item.name)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FactorySelect",
  props: {
    companyName: {
      type: String,
    },
    companyId: {
      type: String,
    },
  },
  data() {
    return {
      isOpen: false,
      company: [
        { id: "1", name: "瑞昌中建材光电材料有限公司" },
        { id: "2", name: "邯郸中建材光电材料有限公司" },
        { id: "3", name: "株洲中建材光电材料有限公司" },
        { id: "4", name: "佳木斯中建材光电材料有限公司" },
        { id: "5", name: "成都中建材光电材料有限公司" },
        { id: "6", name: "凯盛中建材光电材料有限公司" },
        { id: "7", name: "蚌埠中建材光电材料有限公司" },
      ],
    };
  },
  methods: {
    openList() {
      this.isOpen = !this.isOpen;
    },
    chooseCompany(id, name) {
      // this.companyId = id;
      // this.companyName = name;
      this.$emit("updateCompany", { companyName: name, companyId: id });
      this.isOpen = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.factory-select {
  width: 100%;
  position: relative;
  .label-box {
    flex: 1;
    position: relative;
    background: #006acd40;
    backdrop-filter: blur(3px);
    padding: 12px;
    padding-left: 20px;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
  }
  .label-box::before,
  .label-box::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: 0;
    background: transparent;
    border-style: solid;
    border-width: 2px;
    border-color: transparent;
    border-top-color: #007be4;
  }

  .label-box::before {
    left: 0;
    border-left-color: #007be4;
  }

  .label-box::after {
    right: 0;
    border-right-color: #007be4;
  }
  .triangle {
    position: absolute;
    right: 15px;
    top: 18px;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #1d74d8;
  }
  .option-list {
    width: 100%;
    position: absolute;
    z-index: 1000;
    div {
      padding-left: 23px;
      font-size: 20px;
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: rgba(1, 34, 86, 0.8);
      cursor: pointer;
    }
    div:hover {
      background-color: rgba(0, 106, 205, 0.61);
    }
  }
  .option-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 34, 86, 0.9);
    filter: blur(2px);
    z-index: -1;
  }
}
</style>
