<template>
  <div class="body-layer">
    <div class="body-head">
      <h3 style="visibility: hidden">项目列表</h3>
      <div class="table-ctrl-right">
        <slot name="tableCtrl" />
      </div>
    </div>

    <el-table
      :data="pagging.state.table.rows"
      id="multipleTable"
      style="width: 100%"
      class="table"
      size="large"
      @selection-change="pagging.changeSelectRows"
    >
      <el-table-column
        v-if="!isRecycle"
        type="selection"
        width="50"
        :selectable="() => !!operateIsPermissionByPath(checkPerm)"
      />
      <el-table-column label="序号" width="70" v-slot:default="{ $index }">
        <div style="text-align: center">
          {{ pagging.state.pag.size * (pagging.state.pag.currentPage - 1) + $index + 1 }}
        </div>
      </el-table-column>
      <el-table-column label="项目编号" prop="projectSn"></el-table-column>
      <el-table-column label="事件分类" prop="field5" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.field5"
          placement="bottom-start"
          v-if="row.field5 && row.field5.length > 10"
        >
          <p class="tip oper-user">{{ row.field5.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.field5 }}</p>
      </el-table-column>
      <el-table-column label="起火对象" prop="projectName" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.projectName"
          placement="bottom-start"
          v-if="row.projectName && row.projectName.length > 10"
        >
          <p class="tip oper-user">{{ row.projectName.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.projectName }}</p>
      </el-table-column>
      <el-table-column label="分类登记" prop="field6" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.field6"
          placement="bottom-start"
          v-if="row.field6 && row.field6.length > 10"
        >
          <p class="tip oper-user">{{ row.field6.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.field6 }}</p>
      </el-table-column>
      <el-table-column label="详细地址" prop="projectAddress" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.projectAddress"
          placement="bottom-start"
          v-if="row.projectAddress && row.projectAddress.length > 10"
        >
          <p class="tip oper-user">{{ row.projectAddress.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.projectAddress }}</p>
      </el-table-column>
      <el-table-column label="起火场所" prop="projectSite" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.projectSite"
          placement="bottom-start"
          v-if="row.projectSite && row.projectSite.length > 10"
        >
          <p class="tip oper-user">{{ row.projectSite.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.projectSite }}</p>
      </el-table-column>
      <el-table-column label="天气情况" prop="field7" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.field7"
          placement="bottom-start"
          v-if="row.field7 && row.field7.length > 10"
        >
          <p class="tip oper-user">{{ row.field7.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.field7 }}</p>
      </el-table-column>

      <el-table-column label="勘验地址" prop="field1" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.field1"
          placement="bottom-start"
          v-if="row.field1 && row.field1.length > 10"
        >
          <p class="tip oper-user">{{ row.field1.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.field1 }}</p>
      </el-table-column>
      <el-table-column label="全宗名称" prop="caseNewName" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.caseNewName"
          placement="bottom-start"
          v-if="row.caseNewName && row.caseNewName.length > 10"
        >
          <p class="tip oper-user">{{ row.caseNewName.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.caseNewName }}</p>
      </el-table-column>
      <el-table-column label="勘验人员" prop="organizerUsers" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.field3"
          placement="bottom-start"
          v-if="row.field3 && row.field3.length > 10"
        >
          <p class="tip oper-user">{{ row.field3.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.field3 }}</p>
      </el-table-column>
      <el-table-column label="勘验人单位、职务" prop="field4" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.field4"
          placement="bottom-start"
          v-if="row.field4 && row.field4.length > 10"
        >
          <p class="tip oper-user">{{ row.field4.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.field4 }}</p>
      </el-table-column>

      <el-table-column label="勘验单位" prop="organizerDeptName"></el-table-column>
      <el-table-column label="事故日期" prop="accidentDate"></el-table-column>
      <el-table-column label="勘验日期" prop="field8"></el-table-column>
      <el-table-column label="火灾原因" prop="fireReason" v-slot:default="{ row }">
        <el-tooltip
          class="item"
          effect="dark"
          :content="row.fireReason"
          placement="bottom-start"
          v-if="row.fireReason && row.fireReason.length > 10"
        >
          <p class="tip oper-user">{{ row.fireReason.substring(0, 10) }}...</p>
        </el-tooltip>
        <p class="tip" v-else>{{ row.fireReason }}</p>
      </el-table-column>
      <el-table-column label="项目状态" v-slot:default="{ row }">
        {{ fireStatusDesc[row.status as FireStatus] }}
      </el-table-column>
      <slot name="appendColumn" />
      <el-table-column label="操作" v-slot:default="{ row }" :width="220" fixed="right">
        <slot name="rowCtrl" :row="row" />
      </el-table-column>
    </el-table>

    <com-pagination
      @size-change="pagging.changPageSize"
      @current-change="pagging.changPageCurrent"
      :current-page="pagging.state.pag.currentPage"
      :page-size="pagging.state.pag.size"
      :total="pagging.state.pag.total"
    />
  </div>
</template>

<script lang="ts" setup>
import comPagination from "@/components/pagination/index.vue";
import { fireStatusDesc } from "@/app/fire/constant/fire";
import { FireStatus } from "@/app/fire/store/fire";
import { operateIsPermissionByPath } from "@/directive/permission";
import { FirePagging } from "./pagging";

defineProps<{ pagging: FirePagging; checkPerm: string; isRecycle: boolean }>();
</script>
