<template>
  <MOSTY.PageTree :pageTitle="'隐患列表'" :isShowLeftTree="false">

    <template #table>
      <!-- 表格 -->
      <div class="tabBox">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
          :isSort="true" :actionsW='"250"'>
          <template #belongCountryname="{ row }">
            <span>{{ row.belongCountryname ? row.belongCountryname : (row.belongCityname ? row.belongCityname
              : "甘肃省烟草专卖局（公司）") }}</span>
          </template>
          <template #pitfallLevel="{ row }">
            <dict-tag :options="D_DBZ_YHDJ" :value="row.pitfallLevel" :tag="false"></dict-tag>
          </template>
          <template #sendStatus="{ row }">
            <span v-if="row.sendStatus == 0">未发送</span>
            <span v-else-if="row.sendStatus == 1">已发送</span>
          </template>
          <template #actions="{ row }">
            <div>
              <!-- <span class="operedit" @click="handleEdit(row)">
                <el-icon>
                  <EditPen />
                </el-icon>修改</span> -->
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handledelete(row)">
                <template #reference>
                  <span class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除</span>
                </template>
              </el-popconfirm>
              <!-- <span class="operesee" @click="handleSee(row)">
                <el-icon>
                  <Compass />
                </el-icon>查看</span> -->
            </div>
          </template>
        </MOSTY.Table>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>

      </div>
    </template>
  </MOSTY.PageTree>
  <div class="dialog-box" v-if="yhjdShow">
    <Ckyhjd @changePage="changePage" :editObj="xqlist" />
  </div>

</template>

<script setup>
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import Ckyhjd from "./components/ckyhjd.vue"
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const yhjdShow = ref(false)
const xqlist = ref({})
const { D_DBZ_YHDJ } = proxy.$dict("D_DBZ_YHDJ");
let cityId = localStorage.getItem("cityId");
let overallid = localStorage.getItem("overallid");
import { ElMessage } from "element-plus";

const tableColumns = reactive([

  {
    title: "所属单位",
    prop: "belongCountryname",
    slot: true
  },
  {
    title: "所属部门",
    prop: "belongDeptname",
  },
  {
    title: "隐患描述",
    prop: "pitfallDescribe",
  },
  // {
  //   title: "被检查场所",
  //   prop: "siteName",
  // },
  {
    title: "隐患级别",
    prop: "pitfallLevel",
    slot: true
  },
  {
    title: "状态",
    prop: "sendStatus",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }

])

const tableData = ref([]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  countryid: cityId,
  overallid: overallid
});
const handleEdit = (row) => {

};
const handledelete = (row) => {
  postApi([row.id], "/mosty-jcgl/yhb/delZhjcYh").then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
// 方法
onMounted(() => {
  getTableData();
});

// 获取表格数据
const getTableData = () => {
  getApi(listQuery.value, "/mosty-jcgl/zhjc/getPageCountDetails").then(
    (res) => {
      tableData.value = res.records;
      listQuery.value.total = res.total;
    }
  );
};


function changePage(params) {
  xqlist.value = {}
  yhjdShow.value = false;
}
//页码发生变化
const handleCurrentChange = (val) => {
  listQuery.value.pageCurrent = val;
  getTableData();
};
//查询条数发生变化
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getTableData();
};
</script>

<style lang="scss" scoped>
.top_box {
  height: 85 px;
  text-align: center;
}

.top_center {
  display: flex;
  justify-content: center;

  .top_li {
    padding: 10px;

    .top_bg {
      text-align: center;
      padding: 10px;
      width: 138px;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }

    .green {
      background: rgb(0 128 0);
    }

    .origin {
      background: rgb(230, 133, 7);
    }

    .red {
      background: rgb(245, 54, 54);
    }

    .blue {
      background: rgb(49, 129, 248);
    }

    .yell {
      background: rgb(212, 248, 49);
    }

    .top_text {
      text-align: center;
      padding: 10px;
      width: 138px;
      color: #aaa3a3;
      font-size: 18px;
    }
  }
}


.tabBox {
  height: calc(100vh - 237px);
  border-left: 0 !important;

}
</style>
