<template>
  <div class="mobile">
    <van-tabs v-model:active="tabsActive" sticky>
      <van-tab title="检查记录" name="1">
        <van-search
          v-model="searchForm.KEYWORDS"
          show-action
          :clearable="false"
          placeholder="请输入搜索关键词"
          @search="fnGetIdentifyingPartsInspectionRecordList"
        >
          <template #action>
            <div @click="fnGetIdentifyingPartsInspectionRecordList">搜索</div>
          </template>
        </van-search>
        <van-cell-group
          v-for="(item, index) in inspectionRecordList"
          :key="index"
          class="mt-10"
          @click="
            $router.push({
              path: '/mobile/identifying_parts/inspection_record',
              query: {
                CHECKRECORD_ID: item.CHECKRECORD_ID,
                IDENTIFICATIONPARTS_ID,
              },
            })
          "
        >
          <van-cell title="检查清单" :value="item.LISTMANAGERNAME" />
          <van-cell title="检查时间" :value="item.CHECK_TIME" />
          <van-cell title="检查人" :value="item.USERNAME" />
        </van-cell-group>
      </van-tab>
      <van-tab title="风险分布" name="2">
        <van-cell-group>
          <van-cell :title="info.RISKUNITNAME" :value="info.PARTSNAME" />
          <van-cell title="存在风险">
            <template #label>
              <div v-for="(item, index) in infoList" :key="index" class="mt-10">
                {{ index + 1 }}. {{ item.RISK_DESCR }}
              </div>
            </template>
          </van-cell>
          <van-cell title="主要管控措施">
            <template #label>
              <div v-for="(item, index) in infoList" :key="index" class="mt-10">
                {{ index + 1 }}. {{ item.MEASURES }}
              </div>
            </template>
          </van-cell>
          <van-cell title="管控部门" :value="info.DEPTNAME" />
          <van-cell title="事故类型" :label="info.ACCIDENTS_NAME" />
          <van-cell title="风险等级">
            <template #value>
              <span v-if="LEVELID === 'levelD'" class="text-blue">
                低风险/D级
              </span>
              <span v-else-if="LEVELID === 'levelC'" class="text-yellow">
                一般风险/C级
              </span>
              <span v-else-if="LEVELID === 'levelB'" class="text-orange">
                较大风险/B级
              </span>
              <span v-else-if="LEVELID === 'levelA'" class="text-red">
                重大风险/A级
              </span>
            </template>
          </van-cell>
        </van-cell-group>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getIdentifyingPartsInfo,
  getIdentifyingPartsInfoList,
  getIdentifyingPartsInspectionRecordList,
} from "@/request/mobile.js";
import { useRoute } from "vue-router";
import useListData from "@/assets/js/useListData.js";

const route = useRoute();
const { IDENTIFICATIONPARTS_ID, LEVELID } = route.query;
const tabsActive = ref("1");
const info = ref({});
const { list: infoList } = useListData(getIdentifyingPartsInfoList, {
  otherParams: { CHECK_IDENTIFICATION_ID: IDENTIFICATIONPARTS_ID },
  usePagination: false,
});
const {
  list: inspectionRecordList,
  searchForm,
  fnGetData: fnGetIdentifyingPartsInspectionRecordList,
} = useListData(getIdentifyingPartsInspectionRecordList, {
  otherParams: { IDENTIFICATIONPARTS_ID },
  usePagination: false,
});
const fnGetData = async () => {
  const resData = await getIdentifyingPartsInfo({
    IDENTIFICATIONPARTS_ID,
  });
  info.value = resData.pd;
};
fnGetData();
</script>

<style scoped lang="scss">
.mt-10 {
  &:first-child {
    margin-top: 0;
  }
}
</style>
