<template>
  <div class="workshop-list">
    <div class="workshop-list-item" v-for="item in staticWorkshopList" :key="item.id">
      <div class="workshop-list-item-id">{{ item.id }}</div>
      <el-tooltip placement="top" :content="item.name">
        <div class="workshop-list-item-name">{{ item.name }}</div>
      </el-tooltip>
      <img
        class="workshop-list-item-icon"
        v-if="item.status"
        src="@/assets/images/institute-safety/alert.png"
        alt=""
        @click="handleOpenQuestionList(item.workshopCode)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { nextTick, onMounted, ref } from 'vue';
  import { ElTooltip } from 'element-plus';
  import { getWorkshopTodayExceptionStatus } from './apis';
  import { WORKSHOP_INFOS } from './constants';

  import useQuestionListStore from '@/views/institute-safety/modules/safety-company-home/stores/use-question-list';
  // import { storeToRefs } from 'pinia';

  const questionListStore = useQuestionListStore();
  // const { showQuestionList } = storeToRefs(questionListStore);

  const staticWorkshopList = ref(WORKSHOP_INFOS);

  function handleOpenQuestionList(code: string) {
    questionListStore.closeList();
    questionListStore.clearStore();
    nextTick(() => {
      questionListStore.setState({
        type: 'workshop',
        workshopCodes: [code],
      });
      questionListStore.openList();
    });
  }

  onMounted(() => {
    getWorkshopTodayExceptionStatus(staticWorkshopList.value.map((item) => item.workshopCode)).then((res) => {
      staticWorkshopList.value.forEach((item) => {
        item.status = res.find((x) => x.workshopCode === item.workshopCode)!.exceptionStatus;
      });
    });
  });
</script>

<style scoped>
  .workshop-list {
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
  }
  .workshop-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 200px;
    height: 40px;
    border: 1px solid #e8e8e8;
  }
  .workshop-list-item:nth-child(n + 12) {
    border: 1px solid rgba(232, 232, 232, 0.6);
  }
  .workshop-list-item:nth-child(n + 30) {
    border: 1px solid rgba(232, 232, 232, 0.3);
  }

  .workshop-list-item-id {
    margin: 0 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e8e8e8;
    font-size: 13px;
    color: #666666;
    font-weight: bold;
    font-family: DINAlternate;
    text-align: center;
    line-height: 20px;
  }

  .workshop-list-item-name {
    width: 126px;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .workshop-list-item-icon {
    cursor: pointer;
    margin: 0 8px 0 10px;
    width: 20px;
    height: 20px;
  }
</style>
