<template>
  <div class="mobile">
    <van-search
      v-model="searchForm.KEYWORDS"
      show-action
      :clearable="false"
      placeholder="请输入搜索关键词"
      @search="fnGetData"
    >
      <template #action>
        <div @click="fnGetData">搜索</div>
      </template>
    </van-search>
    <van-cell-group
      v-for="(item, index) in list"
      :key="index"
      class="mt-10"
      @click="
        $router.push({
          path: '/mobile/risk_point/checklist',
          query: {
            IDENTIFICATIONPARTS_ID: item.IDENTIFICATIONPARTS_ID,
          },
        })
      "
    >
      <van-cell title="部位名称" :value="item.PARTSNAME" />
      <van-cell title="风险等级">
        <template #value>
          <span v-if="item.LEVELID === 'levelD'" class="text-blue">
            低风险/D级
          </span>
          <span v-else-if="item.LEVELID === 'levelC'" class="text-yellow">
            一般风险/C级
          </span>
          <span v-else-if="item.LEVELID === 'levelB'" class="text-orange">
            较大风险/B级
          </span>
          <span v-else-if="item.LEVELID === 'levelA'" class="text-red">
            重大风险/A级
          </span>
        </template>
      </van-cell>
      <van-cell title="风险点（单元）" :value="item.RISKUNITNAME" />
      <van-cell title="管控部门" :value="item.DEPT_NAME" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { getRiskPointList } from "@/request/mobile.js";
import { useRoute } from "vue-router";
import useListData from "@/assets/js/useListData.js";

const route = useRoute();
const { RISKUNIT_ID } = route.query;
const { list, fnGetData, searchForm } = useListData(getRiskPointList, {
  otherParams: {
    RISK_UNIT_ID: RISKUNIT_ID,
    IS_APP: 1,
    showCount: 1000,
    currentPage: 1,
  },
  usePagination: false,
});
</script>

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