<template>
  <div class="layout-pd">
    <el-row :gutter="15" class="home-card-one mb15">
      <el-col :span="16">
        <el-card shadow="hover">
          <div class="title">各区县面积/数量统计</div>
          <div>
            <ucharts height="300px" :fullOptions="state.options" :loading="state.loading"></ucharts>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card shadow="hover">
          <div class="title">
            <span>各区县面积/数量占比</span>
            <el-button-group>
              <el-button @click="changetypepie(1)" :type="state.typepie == 1 ? 'primary' : ''"
                size="small">数量占比</el-button>
              <el-button @click="changetypepie(0)" :type="state.typepie == 0 ? 'primary' : ''"
                size="small">面积占比</el-button>
            </el-button-group>
          </div>
          <div style="padding: 0 0">
            <ucharts height="295px" :fullOptions="state.pieoptions" :loading="state.loading"></ucharts>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover">
          <el-radio-group v-model="state.radio" @change="radioChange">
            <el-radio v-for="(item, index) in state.county" :key="index" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="home-card-one mb15">
      <el-col>
        <el-card shadow="hover">
          <div class="title">停工停建列表</div>
          <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
            <el-table-column prop="district" label="区县名称" />
            <el-table-column prop="projectName" label="项目名称" />
            <el-table-column prop="projectNumber" label="项目编号" />
            <el-table-column prop="address" label="地址" width="200" show-overflow-tooltip />
            <el-table-column prop="houseNum" label="户型数" />
            <el-table-column prop="buildingNum" label="楼栋数" />
<!--            <el-table-column prop="floorArea" label="占地面积">
              <template #default="scope"> {{ scope.row.floorArea }}m² </template>
            </el-table-column>-->
            <el-table-column prop="houseArea" label="建筑面积">
              <template #default="scope"> {{ scope.row.constructArea }}m² </template>
            </el-table-column>
            <el-table-column prop="startDate" label="开工日期">
            </el-table-column>
            <el-table-column prop="person" label="项目负责人" />
            <el-table-column prop="phone" label="负责人电话" />
          </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="stopindex">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
import { entApi } from "/@/api/ent/index";
import { stopApi } from "/@/api/stop/index";
import { useRouter } from "vue-router";
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();

//柱状图
import ucharts from "/@/components/BaseEchart/index.vue";
import { startChart } from "/@/components/BaseEchart/option";

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

// 定义变量内容
let router = useRouter();
const state = reactive({
  options: {} as any,
  pieoptions: {} as any,
  typepie: 1,
  loading: true,
  radio: 370702,
  county: [] as any,
  tableData: {
    data: [],
    total: 1000,
    loading: false,
    param: {
      pageNum: 1,
      pageSize: 10,
    },
  } as any,
});
// 渲染柱状图
const barApi = async () => {
  let item = await stopApi().barChartApi({
    areaCode: state.radio,
  });

  let data = {
    xname: [],
    yname: ["", "㎡"],
    type: "bars",
    series: [
      { name: "停工数量", data: [] },
      { name: "停工面积", data: [] },
    ],
    title: "",
  } as any;

  item.data.forEach((res: any) => {
    data.xname.push(res.district);
    data.series[0].data.push(res.number);
    data.series[1].data.push(res.area);
  });

  state.options = startChart(data);
  state.loading = false;
  pieApi();
};

// 渲染饼图
const pieApi = async () => {
  let item = await stopApi().pieChartApi({
    areaCode: state.radio,
    type: state.typepie,
  });

  let data = {
    xname: [],
    type: "piemore",
    center: ['50%', '45%'],
    label: "0",
    series: [],
    title: state.typepie == 1 ? "数量占比" : "面积占比",
    float: "bottomcenter",
  } as any;

  item.data.forEach((res: any) => {
    data.series.push({
      name: res.district,
      data: res.ratio,
    });
  });

  state.pieoptions = startChart(data);
  state.loading = false;
};

//区县接口
const Apicounty = async () => {
  let itemQx = await entApi().typesApi(); //区县数据
  state.county = itemQx.data;
};
// 接口
const ApiIndex = async () => {
  state.tableData.loading = true;
  let item = await stopApi().indexApi({
    areaCode: state.radio,
    page: state.tableData.param.pageNum,
    limit: state.tableData.param.pageSize,
  });
  if (!item) return;
  state.tableData.data = item.data;
  state.tableData.total = item.count;
  state.tableData.loading = false;
  barApi();
};
const changetypepie = (val: any) => {
  state.typepie = val;
  pieApi();
};

//单选框事件
const radioChange = (val: any) => {
  state.radio = val;
  ApiIndex();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  state.tableData.param.pageNum = val;
  ApiIndex();
};
const onHandleSizeChange = (val: number) => {
  state.tableData.param.pageSize = val;
  ApiIndex();
};
</script>

<style scoped lang="scss">
.title {
  font-weight: bold;
  font-size: 14px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
  display: flex;
  justify-content: space-between;
}

.home-container {
  overflow: hidden;

  .home-card-one {
    .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>
