<template>
  <div class="bigBox">
    <div class="titleBox">
      <div class="title">目标责任书</div>
      <div class="btnBox">
        <el-select v-model="listQuery.year">
          <el-option v-for="item in filterYear(6)" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <div class="btn">
          <el-button type="primary" @click="gotozrstj">
            <span>责任书签订统计</span>
          </el-button>
          <el-button type="primary" @click="zrsBtnCick(1)">
            <span>制定责任书</span>
          </el-button>
        </div>
      </div>
    </div>
    <div class="perNum">
      <div class="perNum-li" @click="showSignTable('')">
        <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" @click="showSignTable('1')">
        <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" @click="showSignTable('0')">
        <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" @click="showSignTable('')">
        <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" v-if='backLevel != 0'>
      <el-button type="primary" @click="reset">
        <el-icon>
          <DArrowLeft />
        </el-icon>
        <span>返回上级</span>
      </el-button>
    </div>

    <div class="bars" :class="{'is-had-return': backLevel != 0}" 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>

    <!-- 责任书签订情况 -->
    <div v-if="zrsqdqkshow" class="dialog-box">
      <Zqsqdqk :listQuery="listQuery" @close="zrsqdqkshow = false" />
    </div>

    <!-- 签订人数 -->
    <div v-if="isShowQdrs" class="dialog-box">
      <signTable :qdzt="qdrsType" :year="listQuery.year" :ssbmid="listQuery.ssbmid" @close="isShowQdrs = false" />
    </div>

  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
import { reactive, onMounted, ref, watch } from 'vue'
import ltzzt from '../components/charts/ltzzt.vue';
import Zqsqdqk from './commponents/zqsqdqk.vue';
import signTable from "./zrsCom/signTable.vue";
import { filterYear } from "@/utils/auth.js";
import { useRouter } from 'vue-router';
import { getApi } from "@/api/tobAcco_api.js";
const router = useRouter()
// 数据
const listQuery = reactive({
  year: new Date().getFullYear(),
  ssbmid: null,
  oldSsbmid: null
});
const echartsLoading = ref(false)
const zrsqdqkshow = ref(false)
//统计数据
const totalData = ref({
  all: 0,
  wqd: 0,
  yqd: 0,
  qbl: 0.0
})
const backOrg = ref([])
const backLevel = ref(0)
const keys = ref(1)
const barsShow = ref(false);
const zrsTitle = ref([])
const loadingShow = ref(false)
/** 是否展示签订人数 */
const isShowQdrs = ref(false)
/** 签订类型 0:未签, 1:已签 */
const qdrsType = ref('')
const zrsNum = ref([
  {
    name: "签订率",
    data: [],
    color: "#748EDE"
  }
])
const zrsBtnCick = (type) => {
  if (type == 1) {
    router.push('/jgryandzz/zrsstatisticsList')
  }
}
// 初始化
onMounted(() => {
  getTotaldata()
  lineData()
  barsShow.value = true
})
watch(
  () => listQuery.year,
  () => {
    getTotaldata();
    lineData();
  }
);
function showSignTable(type) {
  // 先不做这个
  // qdrsType.value = type
  // isShowQdrs.value = true
}
function gotozrstj() {
  router.push('/jgryandzz/zrsstatistics')
}
//	责任书数据统计--数字
function getTotaldata() {
  getApi(listQuery, '/mosty-jcgl/zrs/dataStatistics').then((res) => {
    if (res) {
      totalData.value.all = res.all || 0;
      totalData.value.wqd = res.wqd || 0;
      totalData.value.yqd = res.yqd || 0;
      /**签订率 */
      let qdl = 0
      if(!res.all || !res.yqd) {
        qdl = 0
      } else {
        qdl = parseFloat((res.yqd / res.all) * 100);
        qdl = qdl.toFixed(2)
      }
      totalData.value.qbl = qdl
    }
  })
}
//柱状图点击事件
function clickOrgId(val) {
  backOrg.value[backLevel.value] = listQuery.ssbmid
  backLevel.value = backLevel.value + 1
  let arr = ['10', '20', '30'];
  var index = arr.indexOf(val.data.orgLevel)
  listQuery.ssbmid = val.data.orgId;
  if (index != -1) {
    lineData();
    getTotaldata()
  } else {
    zrsqdqkshow.value = true
  }
}
//返回上级
function reset() {
  listQuery.ssbmid = backOrg.value[backLevel.value - 1]
  backLevel.value = backLevel.value - 1
  lineData();
  getTotaldata()
  barsShow.value = true
}
//	责任书数据统计--柱状
function lineData() {
  echartsLoading.value = true
  zrsTitle.value = []
  zrsNum.value.data = []
  getApi(listQuery, '/mosty-jcgl/zrs/echartPercent').then(async (res) => {
    if (res) {
      await res.forEach((item) => {
        zrsTitle.value.push(item.orgName)
        zrsNum.value.data.push({
          value: item.dql, orgId: item.orgId, orgLevel: item.orgLevel
        })
      })
    }
    keys.value++
    echartsLoading.value = false
  }).finally(() => {
    echartsLoading.value = false
  })
}
</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  width: 600px;
  justify-content: space-between;
}

.el-select {
  width: 150px;
}

.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;
    // cursor: pointer;
    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: calc(100% - 210px);
  &.is-had-return {
    height: calc(100% - 242px);
  }
}

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