<template>
  <div class="home-container layout-pd">
    <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.options" :key="index" :label="item.value">{{ item.label
              }}</el-radio>
          </el-radio-group>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="home-card-one mb10">
      <el-col>
        <el-card shadow="hover">
          <div class="flex-space-between">
            <div class="title">项目信息</div>
          </div>
          <div class="projecttop">
            <div class="projecttopitem">
              <span>{{
      proxy?.$method.numFormat(state.home.topBlock.projectTotal)
    }}</span>
              <p>项目总数</p>
            </div>
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.waitProjectTotal, 1)
      }}</span>
              <p>拿地未开工项目</p>
            </div>
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.waitAreaTotal, 1)
      }}</span>
              <p>拿地未开工面积</p>
            </div>
            <!-- <div class="projecttopitem">
              <span>{{
                proxy?.$method.numFormat(state.home.topBlock.saleProjectTotal)
              }}</span>
              <p>在售项目总数</p>
            </div> -->
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.buildSaleProjectTotal)
      }}</span>
              <p>在建在售项目</p>
            </div>
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.buildBuildingTotal)
      }}</span>
              <p>在建在售楼幢</p>
            </div>
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.buildHouseTotal)
      }}</span>
              <p>在建在售套数</p>
            </div>
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.saleAreaTotal, 1)
      }}</span>
              <p>在售面积</p>
            </div>
            <div class="projecttopitem">
              <span>{{
        proxy?.$method.numFormat(state.home.topBlock.buildAreaTotal, 1)
      }}</span>
              <p>施工面积</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="title">各区县项目统计分析</div>
          <ucharts height="300px" :fullOptions="state.lineoptions" :loading="state.loading"></ucharts>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="title">在建在售楼幢分析</div>
          <ucharts height="300px" :fullOptions="state.pieoptions0" :loading="state.pieloading0"></ucharts>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="15" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="title">在建在售套数分析</div>
          <ucharts height="300px" :fullOptions="state.pieoptions1" :loading="state.pieloading1"></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="title">在建在售面积分析</div>
          <ucharts height="300px" :fullOptions="state.pieoptions2" :loading="state.pieloading2"></ucharts>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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

// 定义变量内容
const state = reactive({
  //  区县柱状图
  lineoptions: {} as any,
  loading: true,
  // 区县在建项目总楼幢对比
  pieoptions0: {} as any,
  pieloading0: true,
  // 在建项目总套数对比
  pieoptions1: {} as any,
  pieloading1: true,
  // 在建项目总面积对比
  pieoptions2: {} as any,
  pieloading2: true,

  qualification: "1",
  search: "",
  radio: "",
  options: [] as any,
  home: {
    topBlock: {} as any,
    totalList: [] as Array<object>,
  },
});

onMounted(async () => {
  let itemQx = await entApi().typeApi(); //区县数据
  state.options = itemQx.data;
  state.radio = state.options[0].value
  await ApiIndex();
});

// 在建项目总楼幢
function nowprol(chartData: Array<any>) {
  let data = {
    type: "line",
    legend: { show: false },
    title: "在建在售项目总楼幢",
    center: ["50%", "50%"],
    yname: "幢",
    series: [],
    xname: [],
  } as any;
  chartData.forEach((res: any) => {
    data.xname.push(res.areaName);
    data.series.push(res.buildBuildingTotal);
  });
  state.pieoptions0 = startChart(data);
  state.pieloading0 = false;
  nowprol1(chartData);
}

// 在建项目总套数
function nowprol1(chartData: Array<any>) {
  let data = {
    type: "line",
    legend: { show: false },
    title: "在建在售项目总套数",
    center: ["50%", "50%"],
    yname: "套",
    series: [],
    xname: [],
  } as any;
  chartData.forEach((res: any) => {
    data.xname.push(res.areaName);
    data.series.push(res.buildHouseTotal);
  });
  state.pieoptions1 = startChart(data);
  state.pieloading1 = false;
  nowprol2(chartData);
}

// 在建项目总面积
function nowprol2(chartData: Array<any>) {
  let data = {
    type: "line",
    legend: { show: false },
    title: "在建在售项目总面积",
    center: ["50%", "50%"],
    yname: "m²",
    series: [],
    xname: [],
  } as any;
  chartData.forEach((res: any) => {
    data.xname.push(res.areaName);
    data.series.push(res.buildAreaTotal);
  });
  state.pieoptions2 = startChart(data);
  state.pieloading2 = false;
}

// 柱状图
const Echartbla = () => {
  let list = state.home.totalList;
  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.projectTotal);
    data.series[1].data.push(res.buildSaleProjectTotal);
  });
  data.max = proxy?.$method.formatInt(Math.max(...data.series[0].data));
  state.lineoptions = startChart(data);
  state.loading = false;
  nowprol(state.home.totalList);
};
// 接口
const ApiIndex = async () => {
  let item = await proIndexApi().indexApi({
    areaCode: state.radio,
  }); //基本数据
  state.home.topBlock = item.data;
  state.home.totalList = item.data.totalList;
  Echartbla();
};
//单选事件
const radioChange = async (val: any) => {
  state.radio = val;
  let areaCode = {};
  state.home.totalList.forEach((a: any) => {
    if (val == a.areaCode) {
      areaCode = a;
    }
  });
  if (val == '') {
    let item = await proIndexApi().indexApi(); //基本数据
    areaCode = item.data;
  }
  ApiIndex()
  state.home.topBlock = areaCode;
};
</script>

<style scoped lang="scss">
.projecttop {
  display: flex;
  align-items: center;

  &item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    position: relative;

    &:last-child {
      &::before {
        width: 0;
      }

      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "万m²";
        }
      }
    }

    &:nth-child(1) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "个";
        }
      }
    }

    &:nth-child(2) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "个";
        }
      }
    }

    &:nth-child(3) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "万m²";
        }
      }
    }

    &:nth-child(4) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "个";
        }
      }
    }

    &:nth-child(5) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "幢";
        }
      }
    }

    &:nth-child(6) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "套";
        }
      }
    }

    &:nth-last-child(2) {
      span {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "万m²";
        }
      }
    }

    &::before {
      content: "";
      width: 2px;
      height: 30px;
      background-color: #eee;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }

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

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

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

.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>
