<template>
  <a-collapse
    v-model="activeKey"
    expand-icon-position="right"
    class="collapse-header-divide"
  >
    <a-collapse-panel key="a" :header="$t('EQUIPMENT_INFORMATION')">
      <a-descriptions>
        <!--设备编码-->
        <a-descriptions-item :label="`${$t('EPMS_EQP_CODE')}`">{{
          eqpCurrentDetail.eqpCode
        }}</a-descriptions-item>
        <!--设备名称-->
        <a-descriptions-item :label="`${$t('EQP_NAME')}`">{{
          eqpCurrentDetail.eqpName
        }}</a-descriptions-item>
        <!--生产车间-->
        <a-descriptions-item :label="`${$t('PRODUCTION_WORKSHOP')}`">{{
          eqpCurrentDetail.fabName
        }}</a-descriptions-item>
        <!--生产区域-->
        <a-descriptions-item :label="`${$t('PRODUCTION_AREA')}`">{{
          eqpCurrentDetail.areaName
        }}</a-descriptions-item>
        <!--生产线-->
        <a-descriptions-item :label="`${$t('PRODUCTION_LINE')}`">{{
          eqpCurrentDetail.lineName
        }}</a-descriptions-item>
        <!--设备状态-->
        <a-descriptions-item :label="`${$t('EQP_STATUS')}`">
          <div style="display: flex; align-items: center">
            <div
              class="statusColor"
              :style="{
                width: '14px',
                height: '14px',
                background: eqpCurrentDetail.statusColor,
              }"
            ></div>
            <div style="margin-left: 10px">
              {{ eqpCurrentDetail.statusName }}
            </div>
          </div>
        </a-descriptions-item>
      </a-descriptions>
    </a-collapse-panel>
  </a-collapse>
</template>

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

export default {
  name: "EqpInfo",
  props: {
    eqpCurrentDetail: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      activeKey: "a",
    };
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
@import "@/assets/css/fault_repair.less";
</style>
