<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">{{ props?.title || "检查记录" }}列表</div>
          <div class="btnBox">
            <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"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #ctype="{ row }">
              <dict-tag :options="D_TB_BMJCLX" :value="row.ctype" :tag="false"></dict-tag>
            </template>
            <template #checktype="{ row }">
              <dict-tag :options="D_BZ_YHLX" :value="row.checktype" :tag="false"></dict-tag>
            </template>
          </MOSTY.Table>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import {
  reactive,
  onMounted,
  ref,
  getCurrentInstance,
  defineEmits,
  defineProps,
  watch
} from "vue";

import { getApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const props = defineProps({
  rowid: {
    type: Object,
    default: {}
  },
  /** 当前id */
  xqId: {
    type: String,
    default: ""
  },
  title: {
    type: String,
    default: "检查记录"
  }
});
// 数据
const { D_DBZ_YHDJ, D_BZ_YHLX,D_TB_BMJCLX } = proxy.$dict(
  "D_DBZ_YHDJ",
  "D_BZ_YHLX",
  "D_TB_BMJCLX"
);
const bigHeight = ref(); //整个高度
const tableloading = ref(false);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  zhId: props.xqId
});
const tableColumns = ref([
 {
    title: "所属部门",
    prop: "deptname"
  },
  {
    title: "被检查的对象",
    prop: "objname",
    width: '200px',
  },
  {
    title: "检查人员",
    prop: "username"
  },
  {
    title: "检查时间",
    prop: "addtime"
  },
  {
    title: "检查类型",
    prop: "checktype",
    slot: true
  },
  {
    title: "类型",
    prop: "ctype",
    slot: true
  },
  {
    title: "所属单位",
    prop: "orgname"
  },
  {
    title: "隐患数量",
    prop: "dangercount"
  },
  {
    title: "整改完成",
    prop: "finishCount"
  },
  // {
  //   title: "操作",
  //   prop: "actions",
  //   slot: true
  // }
]);

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

watch(() => props.rowid,
  (val) => {
    // getTableData()
  }, {
  deep: true
}
)
onMounted(() => {
  bigHeightFn();
  tabHeightFn();
  getTableData();
});

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

// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 220;
};
// 获取表格数据
const getTableData = () => {
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/zhjc/getCheckRecord")
    .then((res) => {
      console.log(res,'res');
      if (res) {
        tableloading.value = false;
        tableData.value = res.records;
      }
    })
    .catch((err) => {
      tableData.value = [];
      tableloading.value = false;
    });
};

const CloseEvent = () => {
  emits("close");
};

</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;

    &::after {
      content: "";
      background: #006e4a;
      height: 16px;
      width: 3px;
      position: absolute;
      z-index: 9;
      left: -7px;
      top: 22px;
    }
      .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>
