<template>
  <div>
    <MOSTY.PageTree :pageTitle="'责任书签订统计'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="download">
            <span>统计台账下载</span>
          </el-button>
          <router-link to="/dutyBook/jgryandzz/zrs" style="margin-left: 10px;">
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <ArrowLeft />
              </el-icon>
              <span>返回</span>
            </el-button>
          </router-link>
        </div>
      </template>
      <template #table>
        <section class="eltab4">
          <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="registration(row)">
                <el-icon>
                  <Compass />
                </el-icon>详情</span>
            </template>
          </MOSTY.Table>
        </section>
      </template>
    </MOSTY.PageTree>

    <!-- 详情-->
    <div v-if="comprehensiveShow" class="dialog-box">
      <Responsibility @close="comprehensiveShow = false" :orgId='orgId' :year='listQuery.year' />
    </div>
  </div>
</template>
<script setup>
// 引入
import { onMounted, ref, defineEmits, reactive, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import Responsibility from './Responsibility.vue';
import { exportXlsx } from "@/excel/Export2Excel.js";
import { useRouter } from 'vue-router';
import { useStore } from "vuex";
import { getApi } from "@/api/tobAcco_api.js";
const router = useRouter()
const store = useStore();
const comprehensiveShow = ref(false)
const orgId = ref(null)
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  },
]);
const tableColumn = ref([
  {
    title: "单位/部门",
    prop: "orgName",
    sortable: true
  },
  {
    title: "人员总数",
    prop: "all",
    sortable: true
  },
  {
    title: "已签订人员",
    prop: "yqd",
    sortable: true
  },
  {
    title: "未签订人员",
    prop: "wqd",
    sortable: true
  },
  {
    title: "签订率",
    prop: "qdl",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])

const tableloading = ref(false)
const emits = defineEmits(["close"]);
const tableData = ref([]);
//点击详情
const registration = (row) => {
  comprehensiveShow.value = true
  orgId.value = row.orgId;
};
const listQuery = reactive({
  year: new Date().getFullYear()
});
onMounted(() => {
});
function onSearch(obj) {
  listQuery.year = obj.year
  getDataList();
}
const SortChange = (val) => {}
const getdeptId = (val) => {
  listQuery.ssbmid = val.id;
  listQuery.pageCurrent = 1
  getDataList();
}
//列表查询
watch(
  () => listQuery.year,
  (val) => {
    getDataList();
  }
);
//获取列表数据
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/zrs/echartStatistics').then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
      tableData.value.forEach((item) => {
        item.qdl = item.all ? ((Number(item.yqd) / Number(item.all)) * 100).toFixed(2) + "%" : '0.00%'
      })
    }
  })
}
//统计台账下载
function download() {
  let title = {
    orgName: '单位/部门',
    all: '人员总数',
    yqd: '已签订人员',
    wqd: '未签订人员',
    qdl: '签订率(%)',
  }
  let tablename = '责任书统计台账.xlsx'
  let data = [...tableData.value]
  exportXlsx(title, data, '责任书统计台账', tablename);
}
function CloseEvent() {
  let arr = store.getters.tagsViewList;
  for (let i = 0; i < arr.length; i++) {
    const e = arr[i];
    if (e.path == '/jgryandzz/zrsstatistics') {
      arr.splice(i, 1);
    }
  }
  router.push("/dutyBook/jgryandzz/zrs");
}

</script>

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

.bigBox {
  display: flex;

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

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


  }

  .detail {
    border-top: 1px dashed green;
    padding: 15px 100px;
    display: flex;
    justify-content: space-between;

    div {
      width: 300px;
      height: 150px;
      text-align: center;

      span {
        font-size: 18px;
        display: block;
        width: 300px;
        height: 30px;
        line-height: 30px;
        padding: 0;
        margin: 0;
        background-color: orange;
      }

      h2 {
        font-size: 50px;
        background-color: skyblue;
        width: 300px;
        height: 120px;
        line-height: 120px;
        padding: 0;
        margin: 0;
      }
    }
  }
}
</style>