<template>
  <div class="home-container layout-pd">
    <el-row :gutter="15" class="home-card-one mb15">

      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="home-card-item flex">
          <div class="flex-margin flex w100">
            <div class="flex-auto">
              <span class="font30">{{state.home.topBlock.corpTotal}}</span>
              <div class="mt10">开发企业总数</div>
            </div>
            <div class="home-card-item-icon flex" style="background-color: #ecf5ff">
              <i class="flex-margin font32 iconfont icon-folder-close"  style="color: #409eff"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="home-card-item flex">
          <div class="flex-margin flex w100">
            <div class="flex-auto">
              <span class="font30">{{state.home.topBlock.buildCorpTotal}}</span>
              <div class="mt10">在建企业总数</div>
            </div>
            <div class="home-card-item-icon flex" style="background-color: #f0f9eb">
              <i class="flex-margin font32 iconfont icon-folder-close"  style="color: #67c23a"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="home-card-item flex">
          <div class="flex-margin flex w100">
            <div class="flex-auto">
              <span class="font30">{{state.home.topBlock.projectTotal}}</span>
              <div class="mt10">项目总数</div>
            </div>
            <div class="home-card-item-icon flex" style="background-color: #fdf6ec">
              <i class="flex-margin font32 iconfont icon-folder-close"  style="color: #e6a23c"></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="home-card-item flex">
          <div class="flex-margin flex w100">
            <div class="flex-auto">
              <span class="font30">{{state.home.topBlock.superviseFund}}</span>
              <div class="mt10">预售监管余额</div>
            </div>
            <div class="home-card-item-icon flex" style="background-color: #fef0f0">
              <i class="flex-margin font32 iconfont icon-folder-close"  style="color: #f56c6c"></i>
            </div>
          </div>
        </div>
      </el-col>

    </el-row>
    <el-row :gutter="15" class="home-card-two mb15">
      <el-col :xs="24" :sm="10" :md="10" :lg="14" :xl="16">
        <div class="home-card-item maxauto">
          <div class="home-card-item-title">商品房数据</div>
          <div class="home-monitor">
            <div class="flex-warp">

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">商品房总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.totalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.totalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">批售总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.approveTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.approveTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">销售总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.saleTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.saleTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">库存总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.inventoryTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.inventoryTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">住宅总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.resTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.resTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">住宅批售总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.resApproveTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.resApproveTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">住宅销售总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.resSaleTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.resSaleTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

              <div class="flex-warp-item" style="height: auto">
                <div class="flex-warp-item-box" :class="`home-animation`">
                  <div class="uconss">
                    <img src="../../assets/test.svg" alt="" />
                    <div class="uconsstitle">住宅库存总数</div>
                    <div class="uconsstext">套数:{{state.home.topBlock.resInventoryTotalNum + '套'}}</div>
                    <div class="uconsstext">面积:{{state.home.topBlock.resInventoryTotalArea + 'm²'}}</div>
                  </div>
                </div>
              </div>

            </div>
            <br>
            <div class="home-card-item-title">各个区县商品房数据</div>
            <div style="height: 212px; margin-top: 10px" ref="homeLineRef"></div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="8" class="home-media">

        <div class="home-card-item autoheight" >
          <div class="home-card-item-title">商品房项目数据分析</div>
          <div class="qiyesj">
            <div class="qysme">
              在建项目总数：<span style="font-weight: bold">
              {{state.home.topBlockbuildProjectTotal ? state.home.topBlockbuildProjectTotal + '套' :'0'}}
            </span>
            </div>
            <div class="qysme">
              停工停建项目总数：<span style="font-weight: bold">
              {{state.home.shutdownProjectTotal ? state.home.shutdownProjectTotal + '套' :'0'}}
            </span>
            </div>
          </div>
          <br>
          <div class="qybt" style="height: 200px">

          </div>
        </div>
        <div class="home-card-item autoheight" style="margin-top: 20px">
          <div class="home-card-item-title">预售资金数据分析</div>

          <div class="yszj">

            <div class="yszj-block">
              <div class="money yszj-je">{{state.home.topBlock.superviseAmount + '元'}}</div>
              <div style="padding-top: 7px">监管总额度</div>
            </div>

            <div class="yszj-block">
              <div class="money yszj-je">{{state.home.topBlock.keepAmount + '元'}}</div>
              <div style="padding-top: 7px">留存总额度</div>
            </div>

            <div class="yszj-block">
              <div class="money yszj-je">{{state.home.topBlock.balance + '元'}}</div>
              <div style="padding-top: 7px">余额</div>
            </div>

            <div class="yszj-block">
              <div class="money yszj-je">{{state.home.topBlock.totalInAmount + '元'}}</div>
              <div style="padding-top: 7px">交存总金额</div>
            </div>

            <div class="yszj-block">
              <div class="money yszj-je">{{state.home.topBlock.totalOutAmount + '元'}}</div>
              <div style="padding-top: 7px">支出总金额</div>
            </div>

          </div>

        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="home">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
import * as echarts from "echarts";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";
import { useTagsViewRoutes } from "/@/stores/tagsViewRoutes";
import { homeApi } from "/@/api/home/index";

/*//调用临时缓存
import { useUser } from "/@/stores/cache";
const { yonghu } = storeToRefs(useUser());
console.log(yonghu.value)*/

// 定义变量内容
const { themeConfig } = storeToRefs(useThemeConfig());
const { isTagsViewCurrenFull } = storeToRefs(useTagsViewRoutes());

const homeLineRef = ref();
const state = reactive({
  home:{
    topBlock:"",
    totalList:"",
  },
  global: {
    homeChartOne: null,
    homeChartTwo: null,
    homeChartTwo1: null,
    homeCharThree: null,
    dispose: [null, "", undefined],
  } as any,
  myCharts: [] as EmptyArrayType,
  charts: {
    theme: "",
    bgColor: "",
    color: "#303133",
  },
});
// 接口
const ApiIndex = async () =>{
  let item = await homeApi().index();
  if(!item)return
  state.home.topBlock = item.data
  state.home.totalList = item.data.totalList
}
// 柱状图
const initLineChart = () => {

  var totalList = state.home.totalList
  var totalArea= []
  var totalNum= []
  var xAxle = []
  for (var i = 0;i<totalList.length;i++){
      totalArea.push(state.home.totalList[i].totalArea)
      totalNum.push(state.home.totalList[i].totalNum)
      xAxle.push(state.home.totalList[i].areaName)
  }

  if (!state.global.dispose.some((b: any) => b === state.global.homeChartOne))
  state.global.homeChartOne.dispose();
  state.global.homeChartOne = markRaw(
    echarts.init(homeLineRef.value, state.charts.theme)
  );
  const option = {
      tooltip: {
          trigger: 'axis',
          axisPointer: {
              type: 'cross',
              crossStyle: {
                  color: '#999'
              }
          }
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '13%',
          containLabel: true
      },
      legend: {
          data: ['面积', '套数']
      },
      xAxis: [
          {
              type: 'category',
              data: xAxle,
              axisPointer: {
                  type: 'shadow'
              }
          }
      ],
      yAxis: [
          {
              type: 'value',
              axisLabel: {
                  formatter: '{value} 套'
              }
          },
          {
              type: 'value',
              splitLine:{
                show:false
              },
              axisLabel: {
                  formatter: '{value} ㎡'
              }
          }
      ],
      series: [
          {
              name: '套数',
              type: 'bar',
              tooltip: {
                  valueFormatter: function (value) {
                      return value + ' 套';
                  }
              },
              data: totalNum
          },
          {
              name: '面积',
              type: 'bar',
              yAxisIndex: 1,
              tooltip: {
                  valueFormatter: function (value) {
                      return value + '㎡';
                  }
              },
              data: totalArea
          }
      ]
  };
  state.global.homeChartOne.setOption(option);
  state.myCharts.push(state.global.homeChartOne);
};
// 饼图1
const initPieChart1 = () => {

};
// 饼图
const initPieChart = () => {

};
// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.myCharts.length; i++) {
      setTimeout(() => {
        state.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener("resize", initEchartsResizeFun);
};
// 页面加载时
onMounted(() => {
  initEchartsResize();
});
// 由于页面缓存原因，keep-alive
onActivated(() => {
  initEchartsResizeFun();
});
// 监听 pinia 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
watch(
  () => isTagsViewCurrenFull.value,
  () => {
    initEchartsResizeFun();
  }
);
// 监听 pinia 中是否开启深色主题
watch(
  () => themeConfig.value.isIsDark,
  (isIsDark) => {
    nextTick(() => {
      state.charts.theme = isIsDark ? "dark" : "";
      state.charts.bgColor = isIsDark ? "transparent" : "";
      state.charts.color = isIsDark ? "#dadada" : "#303133";
      ApiIndex()
      setTimeout(() => {
        initLineChart();
      }, 500);
      setTimeout(() => {
        initPieChart();
      }, 700);
      setTimeout(() => {
        initPieChart1()
      }, 1000);
    });
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
  .yszj{
    display: flex;flex-direction: row;flex-wrap: wrap;justify-content: center;
    .yszj-block{
      background-color: rgba(243, 224, 224, 0.49);
      padding: 20px 30px;
      text-align: center;
      margin: 7px 15px;
      .yszj-je{
        color: #ff0000;font-weight: bold;font-size: 18px
      }
    }
  }
  .qiyesj{
    display: flex;flex-direction: row;justify-content: space-between;margin-top: 10px;
    .qysme{
      background-color: #ebeef5;padding: 16px 20px;
    }

  }
  .qybt{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
/*  */
  .money{
    &::before{
      content: "￥";
      font-size: 12px;
    }
  }
.smetext {
  &::before {
    content: "套数:";
  }
}
.smetexts {
  &::before {
    content: "面积:";
  }
}
.uconss {
  text-align: left;
  padding: 10px 20px;

  .uconsstitle {
    font-size: 15px;
    font-weight: bold;
    margin: 8px 0;
  }
  .uconsstext {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
  }
  img {
    height: 26px;
  }
}
.bold {
  font-weight: bold;
}
.maxauto {
  height: auto !important;
}
.autoheight {
  height: auto !important;
}
$homeNavLengh: 8;
.home-container {
  overflow: hidden;
  .home-card-one,
  .home-card-two,
  .home-card-three {
    .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;
      }
    }
  }
  .home-card-two,
  .home-card-three {
    .home-card-item {
      height: 400px;
      width: 100%;
      overflow: hidden;
      .home-monitor {
        height: 100%;
        .flex-warp-item {
          width: 25%;
          height: 111px;
          display: flex;
          .flex-warp-item-box {
            margin: auto;
            text-align: center;
            color: var(--el-text-color-primary);
            display: flex;
            border-radius: 5px;
            background: var(--next-bg-color);
            cursor: pointer;
            transition: all 0.3s ease;
            &:hover {
              background: var(--el-color-primary-light-9);
              transition: all 0.3s ease;
            }
          }
          @for $i from 0 through $homeNavLengh {
            .home-animation#{$i} {
              opacity: 0;
              animation-name: error-num;
              animation-duration: 0.5s;
              animation-fill-mode: forwards;
              animation-delay: calc($i/10) + s;
            }
          }
        }
      }
    }
  }
}
</style>
