<template>
  <div>
    <!-- <el-card shadow="hover" class="home-card-one mb10">
      <div class="ctitle">
        <div class="title">商品房年度新增统计</div>
      </div> -->
    <el-row :gutter="10" class="home-card-one mb10">
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="ctitle">
            <div class="title">商品房年度新增面积统计分析</div>
          </div>
          <ucharts
            height="300px"
            :fullOptions="state.options0"
            :loading="state.loading0"
          ></ucharts>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div class="ctitle">
            <div class="title">商品房年度新增套数统计分析</div>
          </div>
          <ucharts
            height="300px"
            :fullOptions="state.options1"
            :loading="state.loading1"
          ></ucharts>
        </el-card>
      </el-col>
    </el-row>
    <!-- </el-card> -->
  </div>
</template>

<script setup lang="ts" name="enterIndex">
import { reactive, onMounted, defineProps, watch } from "vue";
import ucharts from "/@/components/BaseEchart/index.vue";
import { startChart } from "/@/components/BaseEchart/option";
import { housApi } from "/@/api/hous/index";

const state: any = reactive({
  // 套数/总套数
  options0: {} as any,
  loading0: true,
  // 面积/总面积
  options1: {} as any,
  loading1: true,
});

const props = defineProps({
  radio: {
    type: String,
    default: "",
  },
});

watch(
  () => [props.radio],
  () => {
    loadData();
  },
  { deep: true }
);
onMounted(() => {
  loadData();
});

async function loadData() {
  let item = await housApi().yearhouseApi({
    district: props.radio,
  });
  let list = item.data;
  let data = {
    xname: [],
    yname: ["万㎡", "㎡"],
    type: "lines",
    legend: "1",
    series: [
      { name: "总面积", data: [] },
      { name: "住宅总面积", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.year);
    data.series[0].data.push(res.totalArea);
    data.series[1].data.push(res.resTotalArea);
  });
  state.options0 = startChart(data);
  state.loading0 = false;
  loads(list);
}
function loads(list: Array<object>) {
  let datas = {
    xname: [],
    yname: ["套", "套"],
    type: "lines",
    legend: "1",
    series: [
      { name: "总套数", data: [] },
      { name: "住宅总套数", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    datas.xname.push(res.year);
    datas.series[0].data.push(res.totalNum);
    datas.series[1].data.push(res.resTotalNum);
  });
  state.options1 = startChart(datas);
  state.loading1 = false;
}
</script>

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