<template>
  <MOSTY.PageTree :pageTitle="'承诺书'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="gotocnstj">
          <span>承诺书签订列表</span>
        </el-button>
        <el-button type="primary" @click="addInfo">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>制定承诺书</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <div class="perNum">
        <div class="perNum-li">
          <div class="num-font">{{ totalData.all }}</div>
          <div class="bot-img">
            <span>总人次</span>
            <div class="img">
              <img :src="getImgUrl('img/zrsqz.png')" />
            </div>
          </div>
        </div>
        <div class="perNum-li">
          <div class="num-font">{{ totalData.yqd }}</div>
          <div class="bot-img">
            <span>已签订人次</span>
            <div class="img">
              <img :src="getImgUrl('img/zrsqz.png')" />
            </div>
          </div>
        </div>
        <div class="perNum-li">
          <div class="num-font">{{ totalData.wqd }}</div>
          <div class="bot-img">
            <span>未签订人次</span>
            <div class="img">
              <img :src="getImgUrl('img/zrsqz.png')" />
            </div>
          </div>

        </div>
        <div class="perNum-li">
          <div class="num-font">{{ totalData.qbl }}%</div>
          <div class="bot-img">
            <span>签订率</span>
            <div class="img">
              <img :src="getImgUrl('img/zrsqz.png')" />
            </div>
          </div>
        </div>
      </div>
      <div class="reset">
        <el-button type="primary" @click="reset">
          <el-icon>
            <DArrowLeft />
          </el-icon>
          <span>返回上级</span>
        </el-button>
      </div>

      <div class="bars" v-loading="echartsLoading">
        <ltzzt ids="zrs" v-if="zrsNum.length > 0 && zrsTitle.length > 0" :barTitle="zrsTitle" :barNum="zrsNum"
          :loadingshow="barsShow" :keys="keys" @clickOrgId="clickOrgId">
        </ltzzt>
      </div>
    </template>
  </MOSTY.PageTree>

  <!-- 新增 -->
  <div v-if="addplanShow" class="dialog-box">
    <CnsInfo @close="closeadd" :saveBtnShow="saveBtnShow" :rowid="rowid" :title="title" />
  </div>

  <div v-if="cnsqdqkshow" class="dialog-box">
    <Cnsqdqk @close="cnsqdqkshow = false" :type='"01"' :orgcode='listQuery.orgcode' />
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { onMounted, reactive, ref, watch } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import CnsInfo from "./commponents/CnsInfo.vue";
import ltzzt from '../components/charts/ltzzt.vue';
import { useRouter } from 'vue-router';
import Cnsqdqk from "./Cnsqdqk.vue";
const router = useRouter()
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  },
]);
const rowid = ref(null)
const addplanShow = ref(false);
const echartsLoading = ref(false);
const cnsqdqkshow = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
const saveBtnShow = ref(true);
const title = ref(""); //弹窗标题
const backOrg = ref([])
const backLevel = ref(0)
const keys = ref(1)
//统计数据
const totalData = ref({
  all: 0,
  wqd: 0,
  yqd: 0,
  qbl: 0.0
})
const barsShow = ref(false);
const zrsTitle = ref([])
const zrsNum = ref([
  {
    name: "签订率",
    data: [],
    color: "#748EDE"
  }
])
function onSearch(obj) {
  listQuery.year = obj.year
}
// 初始化
onMounted(() => {
  getTotaldata()
  lineData()
  barsShow.value = true
})
watch(
  () => listQuery.year,
  (val) => {
    getTotaldata();
    lineData();
  }
);
const addInfo = () => {
  rowid.value = null
  title.value = "承诺书新增";
  addplanShow.value = true;
  saveBtnShow.value = true;
};

function gotocnstj() {
  router.push('/jgryandzz/Cnsqdqk')

}
//关闭弹窗
function closeadd() {
  addplanShow.value = false;
  rowid.value = null
  getTotaldata()
  lineData()
}
//		承诺书列表统计接口--数字
function getTotaldata() {
  getApi({ year: listQuery.year }, '/mosty-jcgl/cns/countQdqkSz').then((res) => {
    if (res) {
      totalData.value.all = res.allCount;
      totalData.value.wqd = res.wqdCount;
      totalData.value.yqd = res.yqdCount;
      if (res.yqdCount > 0 && res.allCount > 0) {
        let data = parseFloat(((parseInt(res.yqdCount) / (parseInt(res.allCount))) * 100)).toString();
        data = data.substring(0, data.indexOf('.') + 3); // 只保留前三位小数（包括小数点）
        totalData.value.qbl = data
      } else {
        totalData.value.qbl = '0'
      }
    }
  })
}
//柱状图点击事件
function clickOrgId(val) {
  backOrg.value[backLevel.value] = listQuery.orgcode
  backLevel.value = backLevel.value + 1
  let arr = ['10', '20', '30'];
  var index = arr.indexOf(val.data.orgLevel)
  listQuery.orgcode = val.data.orgId;
  if (index != -1) {
    lineData();
  } else {
    cnsqdqkshow.value = true
  }
}
//返回上级
function reset() {
  listQuery.orgcode = backOrg.value[backLevel.value - 1]
  backLevel.value = backLevel.value - 1
  lineData();
  barsShow.value = true
}
//	责任书数据统计--柱状
function lineData() {
  echartsLoading.value = true
  zrsTitle.value = []
  zrsNum.value.data = []
  getApi(listQuery, '/mosty-jcgl/cns/countQdqkZzt').then(async (res) => {
    if (res) {
      await res.forEach((item) => {
        zrsTitle.value.push(item.orgname)
        zrsNum.value.data.push({
          value: Number(item.qdl.substring(0, item.qdl.indexOf('%'))), orgId: item.orgid, orgLevel: item.orgLevel
        })
      })
    }
    keys.value++
    echartsLoading.value = false
  })
}



</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.perNum {
  display: flex;
  width: 100%;
  padding: 20px;
  justify-content: space-between;
  border-bottom: 1px dashed var(--el-color-primary);

  .perNum-li {
    width: 24%;
    text-align: center;
    background-color: #fff;
    border: 1px solid var(--el-color-primary);

    span {
      display: block;
      color: #000;
      font-weight: 400;
      font-size: 16px;
      padding: 0;
      margin: 0;
    }

    .img {
      width: 50px;
    }

    .num-font {
      font-family: DIN, DIN;
      font-weight: 500;
      font-size: 40px;
      color: #0F8E87;
      line-height: 47px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 20px;
    }
  }
}

.bot-img {
  display: flex;
  justify-content: space-between;
  padding: 0px 10px 20px;
}

.bars {
  width: 100%;
  height: 40vh;
}

.reset {
  width: 100%;
  text-align: right;
}
</style>
