<template>
  <el-select class="platform-selection" v-model="platform" popper-class="platform-selection-popper" @change="noPlatformChange">
    <template #prefix>
      <i class="prefix-icon"></i>
    </template>
    <el-option
      v-for="item in platformOptions.filter((x) => x.role.includes(userRole))"
      :key="item.value"
      :value="item.value"
      :label="item.label"
      :disabled="item.disabled"
    >
      <i class="option-prefix"></i>
      <span>{{ item.label }}</span>
    </el-option>
  </el-select>
</template>

<script>
export default {
  name: "PlatformSelection",
  props: {
    userRole: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      platform: "",
      platformOptions: [
        {
          value: "1",
          label: "指挥调度台",
          role: ["Company", "Urban", "SubUrb", "PoliceStation", "PopulationPoliceStation", "PopulationUrban", "PopulationSubUrb"],
        },
        {
          value: "2",
          label: "内保调度台",
          role: ["Proprietor", "PoliceStation", "PopulationPoliceStation"],
        },
        {
          value: "3",
          label: "临保调度台",
          role: ["Company", "Urban", "SubUrb", "PoliceStation", "PopulationPoliceStation"],
          disabled: true,
        },
      ],
    };
  },
  methods: {
    noPlatformChange() {
      localStorage.setItem("platform", this.platform);
      window.location.reload();
    },
  },
  mounted() {
    const platformInfRole = this.platformOptions.filter((x) => x.role.includes(this.userRole));
    const defaultPlatform = platformInfRole[0].value;
    console.log("defaultPlatform: " + defaultPlatform);
    const storePlatform = localStorage.getItem("platform");
    if (platformInfRole.filter((x) => x.value === storePlatform).length <= 0) {
      this.platform = defaultPlatform;
      localStorage.setItem("platform", this.platform);
    } else {
      this.platform = storePlatform;
    }
  },
};
</script>

<style scoped lang="scss">
.platform-selection {
  //width: 180px;
  margin-right: 24px;
  ::v-deep .el-input__inner {
    width: 163px;
    height: 40px;
    background: rgba(14, 113, 255, 0.08);
    border-radius: 2px;
    border: 1px solid #0e71ff;
    color: #0e71ff;
    padding-left: 40px;
  }
  ::v-deep .el-input__prefix {
    display: flex;
    align-items: center;
    justify-content: center;
    left: 13px;
    //padding-left: 13px;
  }
  ::v-deep .el-select__caret {
    color: #0e71ff;
  }
  .prefix-icon {
    display: block;
    width: 20px;
    height: 20px;
    background: url("~@/assets/images/layout/prefix-icon-active.png") no-repeat;
    background-size: 100% 100%;
  }
}
</style>
