<template>
  <div>
    <div class="titleBox">
      <div class="title ml10">法律法规</div>
      <div class="btnBox">
        <div>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              功能菜单<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="(item, index) in list" :key="index" :command="item.value">{{ item.lable
                  }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- charts -->
    <div class="chartsBox">
      <!-- 饼图 -->
      <div class='pieboxs'>
        <AnnularPie :data="yewulxlist" :key="ywlxkey" :text='kstext' />
      </div>
      <!-- 柱状图 -->
      <div class='pieboxs2'>
        <oneBar ids="flfg" v-if="barNum.length > 0 && barTitle.length > 0" :barNum="barNum" :barTitle="barTitle"
          :title="'类别统计柱状图 '" :loadingshow="barShow" :keys="keys" @clickbarli="clickbarli">
        </oneBar>
      </div>
    </div>
    <section class="eltab3">
      <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
        :isSort="false" style="width: 100%;">
      </MOSTY.Table>
    </section>

  </div>
</template>

<script setup>
// 引入

import { ref, onMounted, reactive } from 'vue';
import AnnularPie from "../components/charts/annularPie.vue"
import oneBar from '../components/charts/oneBar.vue';
import { getApi } from "@/api/tobAcco_api.js";
import { useRouter } from 'vue-router';
import * as MOSTY from "@/components/MyComponents/index";
const router = useRouter()
const tableloading = ref(false)
const keys = ref(1)
const ywlxkey = ref(1)
const kstext = ref('总数' + '\n\n' + '0')
const list = reactive([
  { value: '01', lable: '识别获取' },
  { value: '02', lable: '合规性评价' },
])
const yewulxlist = ref([])
// 数据
const tableData = ref()
const tableColumn = ref([
  {
    title: "法律",
    prop: "fl"
  },
  {
    title: "法规",
    suntab: [
      {
        title: "国家",
        prop: "fg1"
      },
      {
        title: "地方政府",
        prop: "fg2"
      },
    ]
  },
  {
    title: "规章",
    suntab: [
      {
        title: "国家",
        prop: "gz1"
      },
      {
        title: "地方政府",
        prop: "gz2"
      },
    ]
  },
  {
    title: "规章",
    suntab: [
      {
        title: "国家",
        prop: "bz1"
      },
      {
        title: "地方政府",
        prop: "bz2"
      },
      {
        title: "行业",
        prop: "bz3"
      },
    ]
  }
])
// 初始化
onMounted(() => {
  barShow.value = true
  // 获取统计数据
  getdata();
  // 获取列表数据
  getList()
})
function getList() {
  getApi({}, `/mosty-jcgl/lawRegulations/getCartogramList`).then((res) => {
    if (res) {
      let data = {}
      res.forEach(item => {
        if (item.dm == '0100') {
          data.fl = item.count
        } else if (item.dm == '0201') {
          data.fg1 = item.count
        } else if (item.dm == '0202') {
          data.fg2 = item.count
        } else if (item.dm == '0301') {
          data.gz1 = item.count
        } else if (item.dm == '0302') {
          data.gz2 = item.count
        } else if (item.dm == '0401') {
          data.bz1 = item.count
        } else if (item.dm == '0402') {
          data.bz2 = item.count
        } else if (item.dm == '0403') {
          data.bz3 = item.count
        }
      })
      tableData.value = [data]
    }
  });
}
function getdata() {
  getApi({}, `/mosty-jcgl/lawRegulations/getCartogram`).then((res) => {
    if (res) {
      tableData.value = res;
      let arr = []
      tableData.value.forEach(e => {
        e.value = e.count
        e.name = e.dictName
        arr.push({ value: e.count, orderNum: e.dm, name: e.zdmc })
      });
      let count = 0;
      yewulxlist.value = res.map(item => {
        count += item.count
        return {
          value: item.count,
          name: item.zdmc
        }
      })
      kstext.value = '总数' + '\n\n' + count
      barNum.value = arr
      keys.value++
      ywlxkey.value++
    } else {
      tableData.value = [];
    }
  });
}
// 柱状图数据
const barNum = ref([
  0, 0, 0, 0, 0
])
const barTitle = ref([
  '法律', '法规', '规章', '标准'
])
const barShow = ref(false)

function handleCommand(val) {
  if (val == '01') {
    //识别获取
    router.push('/law/lawRules/knowGet')
  }
  if (val == '02') {
    router.push('/law/lawRules/regularpj')
  }
}
</script>

<style lang="scss" scoped>
.titleBox {
  background-color: #fff;
}

.btnBox {
  display: flex;
  margin-top: 21px;
  width: 91px;
  justify-content: space-between;
}

.chartsBox {
  // height: 500px;
  display: flex;
  justify-content: space-between;

  div {
    background-color: #fff;
    padding: 10px;
    margin: 10px 0;
  }
}

.pieboxs {
  height: 35vh;
  width: 40%;
}

.pieboxs2 {
  height: 35vh;
  width: 58%;
}

.eltab3 {
  height: calc(100vh - 35vh - 203px);
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>