<!--
    开发企业统计分析，包括开发企业总数、有在建在售项目的企业总数、
    企业资质等级分析、有在建在售项目的企业资质分析图表


-->
<template>
  <div class="home-container layout-pd">
    <el-row class="home-card-one">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="flex-items">
            <el-radio-group v-model="state.radio" @change="radioChange">
              <el-radio label="">潍坊市</el-radio>
              <el-radio v-for="(item, index) in state.county" :key="index" :label="item.value">{{ item.label
                }}</el-radio>
            </el-radio-group>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="10" class="home-card-one">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="flex-space-between">
            <div class="title">全部企业资质等级分析</div>
          </div>
          <el-row :gutter="10" class="home-card-one">
            <el-col :span="10">
              <div class="enterpriseNum">
                <div class="enterpriseNumitem">
                  <span>{{ state.asslist.num }}</span>
                  <p>全部企业</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.asslist.list[1] }}</span>
                  <p>一级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.asslist.list[2] }}</span>
                  <p>二级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.asslist.list[3] }}</span>
                  <p>三级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.asslist.list[4] }}</span>
                  <p>四级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.asslist.list[0] }}</span>
                  <p>暂定</p>
                </div>
              </div>
            </el-col>
            <el-col :span="14">
              <ucharts height="300px" :fullOptions="state.pieoptions" :loading="state.pieloading"></ucharts>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="flex-space-between">
            <div class="title">在建在售企业资质等级分析</div>
          </div>
          <el-row :gutter="15" class="home-card-one">
            <el-col :span="10">
              <div class="enterpriseNum">
                <div class="enterpriseNumitem">
                  <span>{{ state.list.num }}</span>
                  <p>在建在售企业</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.list.list[1] }}</span>
                  <p>一级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.list.list[2] }}</span>
                  <p>二级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.list.list[3] }}</span>
                  <p>三级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.list.list[4] }}</span>
                  <p>四级</p>
                </div>
                <div class="enterpriseNumitem">
                  <span>{{ state.list.list[0] }}</span>
                  <p>暂定</p>
                </div>
              </div>
            </el-col>
            <el-col :span="14">
              <ucharts height="300px" :fullOptions="state.pietwooptions" :loading="state.pietwoloading"></ucharts>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row> -->

    <el-row :gutter="15" class="home-card-one">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="title">各区县企业统计分析</div>
          <ucharts height="68vh" :fullOptions="state.lineoptions" :loading="state.loading"></ucharts>
        </el-card>
      </el-col>
    </el-row>
    <!-- <el-row :gutter="15" class="home-card-one">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="system-user-search mb15">
            <el-input
              size="default"
              v-model="state.search"
              placeholder="请输入企业名称"
              style="max-width: 180px"
            ></el-input>
            <el-button
              size="default"
              type="primary"
              class="ml10"
              @click="seletgetTableData()"
            >
              <el-icon><ele-Search /></el-icon>查询
            </el-button>
            <el-button
              size="default"
              type="primary"
              class="ml10"
              @click="seletgetTableData((state.search = ''))"
            >
              <el-icon><ele-RefreshRight /></el-icon>重置
            </el-button>
          </div>
          <el-table
            :data="state.tableData.data"
            v-loading="state.tableData.loading"
            style="width: 100%"
          >
            <el-table-column prop="name" label="企业名称" />
            <el-table-column prop="idCard" label="统一社会信用代码" />
            <el-table-column prop="registerAddress" label="注册地址" width="300" />
            <el-table-column prop="registerAsset" label="注册资本(万元)" />
            <el-table-column prop="legalName" label="法定代表人" />
            <el-table-column prop="establishDate" label="成立日期" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  size="small"
                  text
                  type="primary"
                  @click="onOpenEditDic(scope.row)"
                  >查看</el-button
                >
              </template>
</el-table-column>
</el-table>
<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
  v-model:current-page="state.tableData.param.pageNum" background v-model:page-size="state.tableData.param.pageSize"
  layout="total, prev, pager, next, jumper" :total="state.tableData.total">
</el-pagination>
</el-card>
</el-col>
</el-row> -->
  </div>
</template>

<script setup lang="ts" name="enterIndex">
import { reactive, onMounted, ref, defineAsyncComponent, watch, nextTick, onActivated, markRaw } from "vue";
import { entApi } from "/@/api/ent/index";
import { useRouter } from "vue-router";
import ucharts from "/@/components/BaseEchart/index.vue";
import { startChart } from "/@/components/BaseEchart/option";
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();

onMounted(() => {
  Apicounty();
});

// 定义变量内容
let router = useRouter();
const homeLineRef = ref();
const state = reactive({
  lineoptions: {} as any,
  loading: true,
  pieoptions: {} as any,
  pieloading: true,
  pietwooptions: {} as any,
  pietwoloading: true,
  asslist: { num: 0, list: [0, 0, 0, 0, 0] as any },
  list: { num: 0, list: [0, 0, 0, 0, 0] as any },
  total: {},
  radio: "",
  search: "",
  county: [] as any,
  echart: {
    chart: [],
    column: [],
  } as any,
  global: {
    homeChartOne: null,
    homeChartTwo: null,
  },
  tableData: {
    data: [],
    total: 1000,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  } as any,
});

//区县接口
const Apicounty = async () => {
  let itemQx = await entApi().typeApi(); //区县数据
  state.county = itemQx.data;

  let itemColumn = await entApi().columnApi(); //柱状图数据
  // 柱状图
  let list = itemColumn.data;
  let data = {
    xname: [],
    yname: ["", ""],
    type: "bars",
    isd: true,
    series: [
      { name: "全部企业", data: [] },
      { name: "在建在售企业", data: [] },
    ],
    title: "",
    max: undefined,
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.areaName);
    data.series[0].data.push(res.corpTotal);
    data.series[1].data.push(res.buildCorpTotal);
  });

  data.max = proxy?.$method.formatInt(Math.max(...data.series[0].data));
  state.lineoptions = startChart(data);
  state.loading = false;
  ApiIndex();
};

const initmorechart = (chartData: any) => {
  let data = {
    type: "piemore",
    title: "企业数量",
    label: "0",
    series: [
      { name: "一级", data: [chartData.proQualification1] },
      { name: "二级", data: [chartData.proQualification2] },
      { name: "三级", data: [chartData.proQualification3] },
      { name: "四级", data: [chartData.proQualification4] },
      { name: "暂定", data: [chartData.proQualification0] },
    ],
    float: "bottomcenter",
  } as any;
  state.pietwooptions = startChart(data);
  state.pietwoloading = false;
};
// 计算总量-分级

// 接口
const ApiIndex = async () => {
  //扇形图接口
  let itemEchart = await entApi().qualificationApi({
    district: state.radio,
  });
  let chartData = itemEchart.data;
  let data = {
    type: "piemore",
    title: "企业数量",
    series: [],
    label: "0",
    float: "bottomcenter",
    max: undefined,
  } as any;
  state.total = chartData
  data.series = [
    { name: "一级", data: [chartData.totalQualification1] },
    { name: "二级", data: [chartData.totalQualification2] },
    { name: "三级", data: [chartData.totalQualification3] },
    { name: "四级", data: [chartData.totalQualification4] },
    { name: "暂定", data: [chartData.totalQualification0] },
  ];
  state.pieoptions = startChart(data);
  state.pieloading = false;
  let assnum = chartData.totalQualification0 + chartData.totalQualification1 + chartData.totalQualification2 + chartData.totalQualification3 + chartData.totalQualification4
  let num = chartData.proQualification0 + chartData.proQualification1 + chartData.proQualification2 + chartData.proQualification3 + chartData.proQualification4
  state.asslist = { num: assnum, list: [chartData.totalQualification0, chartData.totalQualification1, chartData.totalQualification2, chartData.totalQualification3, chartData.totalQualification4] };
  state.list = { num: num, list: [chartData.proQualification0, chartData.proQualification1, chartData.proQualification2, chartData.proQualification3, chartData.proQualification4] };
  initmorechart(chartData);

  //企业列表接口
  //   state.tableData.loading = true;
  //   let item = await entApi().searchApi({
  //     areaCode: state.radio,
  //     name: state.search,
  //     page: state.tableData.param.pageNum,
  //     limit: state.tableData.param.pageSize,
  //   });
  //   if (!item) return;
  //   state.tableData.data = item.data;
  //   state.tableData.total = item.count;
  //   setTimeout(() => {
  //     state.tableData.loading = false;
  //   }, 500);
  //   initLineChart();
};
//单选框事件
const radioChange = (val: any) => {
  state.radio = val;
  ApiIndex();
};
//查询企业
const seletgetTableData = () => {
  state.tableData.param.pageNum = 1;
  ApiIndex();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  ApiIndex();
};
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  ApiIndex();
};
//跳转页面
const onOpenEditDic = (val: any) => {
  const set = val.id;
  router.push({
    path: "/enterprise/details",
    query: {
      type: set,
    },
  });
};
</script>

<style scoped lang="scss">
.enterpriseNum {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 20px;

  &item {
    background-color: #f4f4f4;
    width: 48%;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 4px;

    span {
      font-weight: bold;
      font-size: 20px;
    }

    p {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }

    &:nth-child(n + 3) {
      margin-top: 10px;
    }
  }
}

.flex-space-between {
  ::v-deep .el-input__wrapper {
    border-radius: 0px !important;
  }
}

.title {
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
  margin-right: 20px;
}

.home-container {
  overflow: hidden;

  .home-card-one {
    padding: 5px 0;

    &:nth-child(1) {
      padding-top: 0;
    }

    .home-card-item {
      width: 100%;
      height: 130px;
      border-radius: 4px;
      transition: all ease 0.3s;
      padding: 20px;
      overflow: hidden;
      background: var(--el-color-white);
      color: var(--el-text-color-primary);
      border: 1px solid var(--next-border-color-light);

      &:hover {
        box-shadow: 0 2px 12px var(--next-color-dark-hover);
        transition: all ease 0.3s;
      }

      &-icon {
        width: 70px;
        height: 70px;
        border-radius: 100%;
        flex-shrink: 1;

        i {
          color: var(--el-text-color-placeholder);
        }
      }

      &-title {
        font-size: 15px;
        font-weight: bold;
        height: 30px;
      }
    }
  }

  .home-card-one {
    @for $i from 0 through 3 {
      .home-one-animation#{$i} {
        opacity: 0;
        animation-name: error-num;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
        animation-delay: calc($i/4) + s;
      }
    }
  }
}
</style>
