<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" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>
        <div class="tip">
          <div class="red-tip">(实际完成次数标红代表未完成检查任务)</div>
          <div class="num-tip">
            检查任务数（次）： {{ props.obj.jcrws ? props.obj.jcrws : 0 }}次 &nbsp; &nbsp; &nbsp;
            实际检查数（次）： {{ props.obj.sjjcs ? props.obj.sjjcs : 0 }}次 &nbsp; &nbsp; &nbsp;
            <span>未检查数（次）</span>： {{ props.obj.jcrws - props.obj.sjjcs }}次
          </div>
          <div></div>
        </div>
        <!-- 表格 -->
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData"
         :tableloading="tableloading" :tableHeight='"68vh"'>
          <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>
</template>

<script setup>
// 引入
import {
  reactive,
  onMounted,
  ref,
  getCurrentInstance,
  defineEmits,
  defineProps,
  warn,
  watch
} from "vue";
import { getApi, deleteApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import PcflTree from "../../aqfxfjgk/component/pcflTree.vue";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const props = defineProps({
  userid: String,
  time: String,
  obj: Object
});


const dialogVisible = ref(false);
const bigHeight = ref(); //整个高度
const tableloading = ref(false);
const showrkbtn = ref(false);
const loading = ref(false); //新增保存按钮截流
const tableData = ref([
  {
    sgx: "张三"
  }
]);
const formData = ref({});
const formRef = ref();
const formQuery = ref({});
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const tableColumns = ref([
  {
    title: "姓名",
    prop: "username"
  },
  {
    title: "检查对象",
    prop: "obj_name"
  },
  {
    title: "检查开始时间",
    prop: "checkbegintime"
  },
  {
    title: "检查周期结束时间",
    prop: "checkendtime"
  },
  {
    title: "检查任务数（次）",
    prop: "checkcount"
  },
  {
    title: "实际完成数（次）",
    prop: "factcount"
  }
]);

const tableHeight = ref();
const total = ref(0);
const addDiaShow = ref(false);
const saveshow = ref(true);
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rules = reactive({
  region: [{ required: true, message: "请选择通用检查频率", trigger: "blur" }]
});
// 控制新增与检查配置修改的标题
const title = ref("");
onMounted(() => {
  bigHeightFn();
  tabHeightFn();

  getTableData()
});

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

// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 220;
};
// 获取表格数据
const getTableData = () => {
  listQuery.value.userid = props.userid;
  listQuery.value.time = props.time;
  tableloading.value = true;
  postApi(listQuery.value, "/mosty-jcgl/userCheckplan/getJcjlListDetail")
    .then((res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;

        tableData.value.forEach((item) => {
          if (item.controls) {
            item.controls = item.controls.split(",");
          }
        });
        total.value = res.total;
      }
    })
    .catch((err) => {
      tableData.value = [];
      tableloading.value = false;
    });
};

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

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

<style lang="scss" scoped>
.tip {
  font-size: 15px;
  color: #000;
  display: flex;
  justify-content: space-between;

  .red-tip {
    color: red;
  }

  .num-tip {
    span {
      color: red;
    }
  }
}

.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>
