<template>
  <div>
    <MOSTY.PageTree :pageTitle="'承诺书统计'" :searchType="'01'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="CloseEvent">返回 </el-button>
        </div>
      </template>
      <template #table>
        <section class="eltab3">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #actions="{ row }">
              <span class="operesee" @click="handleck(row)" v-if="isSeexq"><el-icon>
                  <View />
                </el-icon>查看</span>
              <span v-else>--</span>
            </template>
          </MOSTY.Table>
        </section>
      </template>
    </MOSTY.PageTree>
    <!--  承诺书签订详情 -->
    <div v-if="addplanShow" class="dialog-box">
      <cnsqdxq @close="addplanShow = false" v-if="addplanShow" :orgcode="orgcode" :xqid="xqid" />
    </div>
  </div>
</template>

<script setup>
// 引入
import {
  reactive,
  onMounted,
  watch,
  ref,
  getCurrentInstance,
  isShallow
} from "vue";
import cnsqdxq from "./cnsqdxq.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
const { proxy } = getCurrentInstance();
const emits = defineEmits(["close"]);
const props = defineProps({
  saveBtnShow: {
    default: true,
    type: Boolean
  },
  qdid: String
});
//关闭综合配置表
const CloseEvent = () => {
  emits("close");
};
// 数据
//查询条件
const addplanShow = ref(false);
const isSeexq = ref(false);
const total = ref(0);

const tableData = ref([]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  orgcode: ""
});
const tableColumn = ref([
  {
    title: "单位/部门",
    prop: "orgname",
    sortable: true
  },
  {
    title: "人员总数",
    prop: "count",
    sortable: true
  },
  {
    title: "已签订人员数",
    prop: "yqd",
    sortable: true
  },
  {
    title: "未签订人员数",
    prop: "wqd",
    sortable: true
  },
  {
    title: "签订率",
    prop: "qdl",
    sortable: true
  },
  {
    title: "颁发单位",
    prop: "fbjg",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
//获取列表数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  listQuery.cnsId = props.qdid;
  getApi(listQuery, "/mosty-jcgl/cns/qdqkStatistics").then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
      tableData.value.forEach((item) => {
        if (item.yqd == "0" || item.count == "0") {
          item.qdl = "0%";
        } else {
          item.qdl = Math.round((item.yqd / item.count) * 10000) / 100 + "%";
        }
        if (item.orglevel % 10 != 0) {
          item.status = true;
        }
      });
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}

const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1
  if (['11', '21', '31', '40'].includes(val.orglevel)) {
    isSeexq.value = true
  } else {
    isSeexq.value = false
  }
  getListData()
};
onMounted(() => {

});
// 方法
//查看安全目标指标
const xqid = ref("")
const orgcode = ref("");
function handleck(val) {
  addplanShow.value = true
  xqid.value = listQuery.cnsId
  orgcode.value = val.orgid
}



//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 300px);
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.dialog-box {
  z-index: 3 !important;
}
</style>