<template>
  <div class="home-container layout-pd">
    <el-card shadow="hover" class="mb10">
      <el-row :gutter="15" class="home-card-one mb10">
        <el-col :span="24">
          <div class="ctitle">
            <div class="title">筛选项</div>
            <el-select @change="changeselect" v-model="state.year" size="default" placeholder="请选择年份">
              <el-option v-for="item in state.yearlist" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
          <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-col>
      </el-row>
    </el-card>
    <el-row :gutter="10" class="home-card-one mb10">
      <el-col :span="spans">
        <el-card shadow="hover">
          <div class="utops">
            <div class="utopslef">
              <div class="utopstitle">{{ state.radio == '' ? "本市统计" : "本区县统计" }}</div>
              <div class="utopsnum">
                <span>套数：</span>
                <p v-if="state.radio == ''">{{
                  proxy?.$method.numFormat(state.totalnum.districtNum + state.totalnum.otherDistrictNum) }}</p>
                <p v-else>{{ proxy?.$method.numFormat(state.totalnum.districtNum) }}
                </p>
              </div>
              <div class="utopsarea">
                <span>面积：</span>
                <p v-if="state.radio == ''">{{
                  proxy?.$method.numFormat(state.totalnum.districtArea + state.totalnum.otherDistrictArea) }}</p>
                <p v-else>{{ proxy?.$method.numFormat(state.totalnum.districtArea) }}</p>
              </div>
            </div>
            <div class="utopsright onecolor">
              <img src="../../../assets/purchase/1.svg" alt="" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="spans" v-if="state.radio != ''">
        <el-card shadow="hover">
          <div class="utops">
            <div class="utopslef">
              <div class="utopstitle">本市其他区县统计</div>
              <div class="utopsnum">
                <span>套数：</span>
                <p>{{ proxy?.$method.numFormat(state.totalnum.otherDistrictNum) }}</p>
              </div>
              <div class="utopsarea">
                <span>面积：</span>
                <p>{{ proxy?.$method.numFormat(state.totalnum.otherDistrictArea) }}</p>
              </div>
            </div>
            <div class="utopsright twocolor">
              <img src="../../../assets/purchase/2.svg" alt="" />
            </div>
          </div>
        </el-card></el-col>
      <el-col :span="spans">
        <el-card shadow="hover">
          <div class="utops">
            <div class="utopslef">
              <div class="utopstitle">本省其他市统计</div>
              <div class="utopsnum">
                <span>套数：</span>
                <p>{{ proxy?.$method.numFormat(state.totalnum.otherCityNum) }}</p>
              </div>
              <div class="utopsarea">
                <span>面积：</span>
                <p>{{ proxy?.$method.numFormat(state.totalnum.otherCityArea) }}</p>
              </div>
            </div>
            <div class="utopsright threecolor">
              <img src="../../../assets/purchase/3.svg" alt="" />
            </div>
          </div>
        </el-card></el-col>
      <el-col :span="spans">
        <el-card shadow="hover">
          <div class="utops">
            <div class="utopslef">
              <div class="utopstitle">其他省统计</div>
              <div class="utopsnum">
                <span>套数：</span>
                <p>{{ proxy?.$method.numFormat(state.totalnum.otherProvinceNum) }}</p>
              </div>
              <div class="utopsarea">
                <span>面积：</span>
                <p>{{ proxy?.$method.numFormat(state.totalnum.otherProvinceArea) }}</p>
              </div>
            </div>
            <div class="utopsright fourcolor">
              <img src="../../../assets/purchase/4.svg" alt="" />
            </div>
          </div>
        </el-card></el-col>
    </el-row>

    <el-row :gutter="10" class="home-card-one mb10">
      <el-col :span="12">
        <el-card shadow="hover" class="mb10">
          <el-row :gutter="15" class="home-card-one mb10">
            <el-col :span="24">

              <div class="ctitle">
                <div class="title">购房人年龄段统计占比</div>
                <el-button-group>
                  <el-button @click="clicktab(0)" :type="state.agetype == 0 ? 'primary' : ''"
                    size="default">面积</el-button>
                  <el-button @click="clicktab(1)" :type="state.agetype == 1 ? 'primary' : ''"
                    size="default">套数</el-button>
                </el-button-group>
              </div>
              <ucharts height="300px" :fullOptions="state.optionage" :loading="state.loadingage"></ucharts>
              <div class="purcon" v-if="state.optionage.series" style="margin-top: 10px">
                <div class="purconitem" :class="state.agetype == 1 ? 'purconitems' : ''"
                  v-for="item in state.optionage.series[0].data">
                  <p>{{ proxy?.$method.numFormat(item.value) }}</p>
                  <span>{{ item.name }}</span>
                </div>
              </div>

            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="mb10">
          <el-row :gutter="15" class="home-card-one mb10">
            <el-col :span="24">
              <div class="ctitle">
                <div class="title">总面积占比</div>
              </div>
              <ucharts height="210px" :fullOptions="state.optionagearea" :loading="state.loadingagearea"></ucharts>
            </el-col>
          </el-row>
        </el-card>
        <el-card shadow="hover" class="mb10">
          <el-row :gutter="15" class="home-card-one mb10">
            <el-col :span="24">
              <div class="ctitle">
                <div class="title">总套数占比</div>
              </div>
              <ucharts height="210px" :fullOptions="state.optionageareas" :loading="state.loadingageareas"></ucharts>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="home-card-one mb10">
      <el-col :span="24">
        <el-card shadow="hover" class="mb10">
          <el-row :gutter="15" class="home-card-one mb10">
            <el-col :span="24">
              <div class="ctitle">
                <div class="title">购房人统计分析</div>
                <el-button-group>
                  <el-button @click="clicktabs(0)" :type="state.tys == 0 ? 'primary' : ''" size="default">面积</el-button>
                  <el-button @click="clicktabs(1)" :type="state.tys == 1 ? 'primary' : ''" size="default">套数</el-button>
                </el-button-group>
              </div>
              <ucharts height="400px" :fullOptions="state.option" :loading="state.loading"></ucharts>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

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

const spans = ref(6)


const state: any = reactive({
  radio: "",
  year: "",
  yearlist: [],
  loading: false,
  option: {} as any,
  loadingage: false,
  optionage: {} as any,
  loadingagerea: false,
  optionagearea: {} as any,

  loadingagereas: false,
  optionageareas: {} as any,

  // 总数
  totalnum: {},
  ty: 0,
  tys: 0,
  agetype: 0
});

onMounted(() => {
  loadData();
});
function clicktab(e: number) {
  state.agetype = e;
  if (e == 0) agebars()
  else agebar()
}

async function agebars() {
  let item = await purchaseApi().getbarareaage({
    areaCode: state.radio,
    year: state.year,
  });
  // 折线图
  let list = item.data.series;
  let data = {
    type: "piemore",
    title: "年龄段",
    label: "0",
    tooltip: {
      valueFormatter: function (value: any) {
        let name = proxy?.$method.numFormat(value);
        return name + 'm²';
      }
    },
    series: [],
    float: "bottomcenter",
  } as any;
  list.forEach((res: any) => {
    data.series.push({ name: res.name, data: res.area });
  });
  state.optionage = startChart(data);
  state.loadingage = false;
  agearea();
}


async function agebar() {
  let item = await purchaseApi().getbarnumage({
    areaCode: state.radio,
    year: state.year,
  });
  // 折线图
  let list = item.data.series;
  let data = {
    type: "piemore",
    title: "年龄段",
    label: "0",
    tooltip: {
      valueFormatter: function (value: any) {
        let name = proxy?.$method.numFormat(value);
        return name + '套';
      }
    },
    series: [],
    float: "bottomcenter",
  } as any;
  list.forEach((res: any) => {
    data.series.push({ name: res.name, data: res.num });
  });
  state.optionage = startChart(data);
  state.loadingage = false;
  agearea();
}

async function agearea() {
  let list = state.totalnum;
  let data = {
    type: "piemore",
    title: "面积",
    label: "0",
    tooltip: {
      valueFormatter: function (value: any) {
        let name = proxy?.$method.numFormat(value);
        return name + 'm²';
      }
    },
    series: [
      { name: "本区县", data: list.districtArea },
      { name: "本市其他", data: list.otherDistrictArea },
      { name: "本省其他", data: list.otherCityArea },
      { name: "外省", data: list.otherProvinceArea },
    ],
    float: "left",
  } as any;
  if (state.radio == "") {
    data.series = [
      { name: "本市", data: list.districtArea + list.otherDistrictArea },
      { name: "本省其他", data: list.otherCityArea },
      { name: "外省", data: list.otherProvinceArea },
    ];
  }
  state.optionagearea = startChart(data);
  state.loadingagearea = false;
  agenum();
}

function agenum() {
  let list = state.totalnum;
  let data = {
    type: "piemore",
    title: "面积",
    label: "0",
    tooltip: {
      valueFormatter: function (value: any) {
        let name = proxy?.$method.numFormat(value);
        return name + '套 ';
      }
    },
    series: [
      { name: "本区县", data: list.districtNum },
      { name: "本市其他", data: list.otherDistrictNum },
      { name: "本省其他", data: list.otherCityANum },
      { name: "外省", data: list.otherProvinceNum },
    ],
    float: "left",
  } as any;
  if (state.radio == "") {
    data.series = [
      { name: "本市", data: list.districtNum + list.otherDistrictNum },
      { name: "本省其他", data: list.otherCityANum },
      { name: "外省", data: list.otherProvinceNum },
    ];
  }
  state.optionageareas = startChart(data);
  state.loadingageareas = false;
}

async function loadData() {
  let itemQx = await entApi().typeApi();
  state.options = itemQx.data;
  state.radio = state.options[0].value.toString()
  const now = new Date();
  let year = now.getFullYear();
  for (let i = 0; i < 5; i++) {
    state.yearlist.push({ value: year - i, label: year - i + "年" });
  }
  state.year = year;
  loadlist();
}

// 获取列表
async function loadlist() {
  if (state.radio == '') spans.value = 8
  else spans.value = 6

  let item = await purchaseApi().getnum({ areaCode: state.radio, year: state.year });
  state.totalnum = item.data;
  loadarea();
  agebars();
}

function changeselect(e: any) {
  state.year = e;
  loadlist();
}
function clicktabs(e: number) {
  state.tys = e;
  if (e == 0) loadarea();
  else loadbar();
}

async function loadarea() {
  let item = await purchaseApi().getbararea({
    areaCode: state.radio,
    year: state.year,
  });
  // 折线图
  let list = item.data.series;
  let data = {
    xname: [],
    yname: ["m²", ""],
    type: "lines",
    // isd: true,
    series: [
      { name: "区县面积", data: [] },
      { name: "本市其他区县面积 ", data: [] },
      { name: "本省其他市面积 ", data: [] },
      { name: "其他省面积 ", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.name);
    data.series[0].data.push(res.districtArea);
    data.series[1].data.push(res.otherDistrictArea);
    data.series[2].data.push(res.otherCityArea);
    data.series[3].data.push(res.otherProvinceArea);
  });
  state.option = startChart(data);
  state.loading = false;
}

// 获取总量折线图
async function loadbar() {
  let item = await purchaseApi().getbarnum({
    areaCode: state.radio,
    year: state.year,
  });
  // 折线图
  let list = item.data.series;
  let data = {
    xname: [],
    yname: ["套", ""],
    type: "lines",
    // isd: true,
    series: [
      { name: "区县套数", data: [] },
      { name: "本市其他区县套数 ", data: [] },
      { name: "本省其他市套数 ", data: [] },
      { name: "其他省套数 ", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.name);
    data.series[0].data.push(res.districtNum);
    data.series[1].data.push(res.otherDistrictNum);
    data.series[2].data.push(res.otherCityNum);
    data.series[3].data.push(res.otherProvinceNum);
  });
  state.option = startChart(data);
  state.loading = false;
}

function clicktime(date: Date) {
  //   loadbar(date);
}

const radioChange = (e: any) => {
  state.radio = e;
  loadlist();
};
</script>

<style lang="scss">
.utops {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .onecolor {
    background-color: #6fb7ff;
  }

  .twocolor {
    background-color: #d885ff;
  }

  .threecolor {
    background-color: #feaf40;
  }

  .fourcolor {
    background-color: #40c5fe;
  }

  .utopsright {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 50px;
      height: 50px;
    }
  }

  .utopslef {
    .utopstitle {
      font-size: 14px;
      font-weight: bold;
    }

    .utopsnum {
      padding: 10px 0;

      p {
        &::after {
          content: "套" !important;
        }
      }
    }

    .utopsnum,
    .utopsarea {
      display: flex;
      align-items: center;

      p {
        font-size: 18px;
        font-weight: bold;

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

      span {
        color: #666;
        font-size: 13px;
      }
    }
  }
}

.purcon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;

  .purconitem {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f4f4f4;
    padding: 20px 0;
    margin-top: 10px;

    span {
      font-size: 14px;
      color: #666;
    }

    p {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 4px;

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

  .purconitems {
    p {
      &::after {
        content: "套";
        font-size: 14px;
        font-weight: normal;
      }
    }
  }
}

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

.ctitle {
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
