<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <div class="right" style="width: 100%">
        <!-- 头部 -->
        <div class="headBox" style="justify-content: space-between">
          <div class="title">隐患列表</div>
          <div class="btnBox">
            <el-button type="primary" v-if="props.jctype == 'sjcc'" @click="addDangerFn">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增隐患</span>
            </el-button>
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div style="height: calc(100vh - 166px)">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading">
            <template #sourcetype="{ row }">
              <dict-tag :options="D_BZ_YHLX" :value="row.sourcetype" :tag="false" />
            </template>
            <template #pitfallLevel="{ row }">
              <dict-tag :options="D_DBZ_YHDJ" :value="row.pitfallLevel" :tag="false" />
            </template>

            <template #statename="{ row }">
              <span v-if="row.finishFlag == '3'">完结</span>
              <span v-else>{{ row.nextstaename }}</span>
            </template>
            <template #actions="{ row }">
              <span class="operesee" @click="setFn(row)">
                <el-icon>
                  <EditPen />
                </el-icon>
                详情
              </span>
            </template>
            <template #fenye>
              <div class="fenye" :style="{ top: tableHeight + 'px' }">
                <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
                  layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
              </div>
            </template>
          </MOSTY.Table>
        </div>
      </div>
    </div>
    <div class="dialog-box" v-if="yhjdShow">
      <!-- <Danger @changePage="changePage" :editObj="editObj.editObj"></Danger> -->
      <Ckyhjd @changePage="changePage" :editObj="editObj.editObj" />
    </div>
  </div>

  <AddDangerDia :rowData="props.rowData" :id="props.rowid.id" @refresh="getTableData" v-if="addDangerDiaShow"
    @close="closeAddDangerDiaFn" @backRefresh="backRefresh = true" />
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, defineEmits, defineProps, warn, watch } from "vue"
import Ckyhjd from "./ckyhjd.vue"
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import AddDangerDia from "../../components/sjcc/addDangerDia.vue"
const { proxy } = getCurrentInstance()
const emits = defineEmits(["close"])
const props = defineProps({
  rowid: {
    type: Object,
    default: {}
  },
  jctype: {
    type: String,
    default: ""
  },
  rowData: {
    type: Object,
    default: {}
  },
  pageCurrent: {
    type: Number,
    default: 1
  }
})

// 数据
const { D_DBZ_YHDJ, D_BZ_YHLX } = proxy.$dict("D_DBZ_YHDJ", "D_BZ_YHLX")
const yhjdShow = ref(false)
const bigHeight = ref() //整个高度
const tableloading = ref(false)
const tableData = ref([])
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
})
const tableColumns = ref([
  {
    title: "隐患编号",
    prop: "shortid"
  },
  {
    title: "隐患来源",
    prop: "sourcetype",
    slot: true
  },
  {
    title: "排查对象",
    prop: "objname"
  },
  {
    title: "发现人",
    prop: "founderName"
  },
  {
    title: "发现时间",
    prop: "founderTime"
  },
  {
    title: "隐患等级",
    prop: "pitfallLevel",
    slot: true
  },
  {
    title: "隐患描述",
    prop: "pitfallDescribe"
  },
  {
    title: "责任人",
    prop: "dutyUsername"
  },

  {
    title: "进度",
    prop: "statename",
    slot: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])

const tableHeight = ref()
const total = ref(0)

// 新增隐患弹窗控制
const addDangerDiaShow = ref(false)
// 打开新增隐患弹窗方法
const addDangerFn = () => {
  addDangerDiaShow.value = true
}
// 关闭新增隐患弹窗方法
const closeAddDangerDiaFn = () => {
  addDangerDiaShow.value = false
}

watch(
  () => props.rowid,
  val => {
    getTableData()
  },
  {
    deep: true
  }
)
onMounted(() => {
  bigHeightFn()
  tabHeightFn()
  getTableData()
  console.log(props.rowData, "props.rowData")
})

// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px"
}

// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 220
}
// 获取表格数据
const getTableData = () => {
  tableloading.value = true
  getApi({ logid: props.rowid.id }, "/mosty-jcgl/userChecklog/getYhList")
    .then(res => {
      if (res) {
        tableloading.value = false
        tableData.value = res
        tableData.value.forEach(item => {
          // if (item.controls) {
          //   item.controls = item.controls.split(",");
          // }
        })
        total.value = res.total
      }
    })
    .catch(err => {
      tableData.value = []
      tableloading.value = false
    })
}
// 返回是否刷新
const backRefresh = ref(false)
// 返回
const CloseEvent = () => {
  if (backRefresh.value) {
    console.log("返回", props.pageCurrent)
    emits("refresh", props.pageCurrent)
    emits("close")
  } else {
    emits("close")
  }
}
const editObj = reactive({
  editObj: null
})
function setFn(row) {
  editObj.editObj = row
  yhjdShow.value = true
}

function changePage(e) {
  yhjdShow.value = false
}

//删除
const deldete = row => {
  deleteApi({}, `/mosty-jcgl/danger2Baseinfo/removeDanger2Baseinfo/${row.id}`).then(res => {
    ElMessage.success("删除成功")
    getTableData()
  })
}

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

<style lang="scss" scoped>
.operate {
  color: yellowgreen !important;
}

.disab {
  margin: 0 5px;
  cursor: pointer;
  color: #807e7e66 !important;
}

.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .pztitle {
    color: red;
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }

    .btnBox {
      justify-content: flex-end;
      margin: 20px;

      .el-select {
        width: 150px;
      }

      .header-right {
        display: flex;
        align-items: center;
      }

      .btnBox {
        display: flex;
        width: 500px;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
}

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

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.el-form {
  display: flex;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-form-item {
  text-align: center;
}

.dix-cell {
  display: flex;
  // flex-wrap: wrap;
}

::v-deep .el-form--label-top .el-form-item {
  display: flex;
  align-items: baseline;
}
</style>
