<template>
  <a-collapse
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('ABNORMAL_LOCATION')">
      <a-descriptions>
        <!--生产车间-->
        <a-descriptions-item :label="`${$t('PRODUCTION_WORKSHOP')}`">{{
          formatData(fabList, detailInfo.fabId, "fabName") || "--"
        }}</a-descriptions-item>
        <!--生产区域-->
        <a-descriptions-item :label="`${$t('PRODUCTION_AREA')}`">{{
          formatData(areaList, detailInfo.areaId, "areaName") || "--"
        }}</a-descriptions-item>
        <!--生产线-->
        <a-descriptions-item :label="`${$t('PRODUCTION_LINE')}`">{{
          formatData(lineList, detailInfo.lineId, "lineName") || "--"
        }}</a-descriptions-item>
        <!--工位-->
        <a-descriptions-item :label="`${$t('STATION')}`">{{
          formatData(stationList, detailInfo.stationId, "stationName") || "--"
        }}</a-descriptions-item>
      </a-descriptions>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
import ApiConstant from "@/api/ApiConstant";

export default {
  name: "LocationInfo",
  props: {
    detailInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeKey: "a",
      fabList: [],
      areaList: [],
      lineList: [],
      stationList: [],
    };
  },
  computed: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      const params = {
        enableFlag: "Y",
      };
      return Promise.all([
        this.$axios.get(
          `${ApiConstant.PREFIX_CORE}/api/mdm/fac-fab/list-by-factory-code`,
          {
            params,
          }
        ),
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/mdm/fac-area/list`, {
          params,
        }),
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/mdm/fac-line/list`, {
          params,
        }),
        this.$axios.get(`${ApiConstant.PREFIX_CORE}/api/mdm/fac-station/list`, {
          params,
        }),
      ]).then(([facRes, areaRes, lineRes, stationRes]) => {
        this.fabList = facRes.data.data || [];
        this.areaList = areaRes.data.data || [];
        this.lineList = lineRes.data.data || [];
        this.stationList = stationRes.data.data || [];
      });
    },
    formatData(data, id, name) {
      const result = data.find((item) => item.id === id);
      return result ? result[name] : "";
    },
  },
};
</script>
<style lang="less" scoped></style>
