<template>
  <div>
    <el-card shadow="hover">
      <div class="ctitle">
        <div class="title">在建在售住宅统计</div>
      </div>
      <el-row :gutter="15" class="home-card-one mb10">
        <el-col :span="16">
          <el-tabs type="border-card" @tab-change="tabChange">
            <el-tab-pane label="面积统计分析">
              <div v-if="state.curr == 0">
                <ucharts
                  height="316px"
                  :fullOptions="state.options0"
                  :loading="state.loading0"
                ></ucharts>
              </div>
            </el-tab-pane>
            <el-tab-pane label="楼层统计分析">
              <div v-if="state.curr == 1">
                <ucharts
                  height="316px"
                  :fullOptions="state.options1"
                  :loading="state.loading1"
                ></ucharts></div
            ></el-tab-pane>
            <el-tab-pane label="户型统计分析">
              <div v-if="state.curr == 2">
                <ucharts
                  height="316px"
                  :fullOptions="state.options2"
                  :loading="state.loading2"
                ></ucharts>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <div class="ctitle">
              <div class="title">装修类型占比</div>
              <el-button-group>
                <el-button
                  @click="zidxclick(0)"
                  :type="state.zidx == 0 ? 'primary' : ''"
                  size="small"
                  >套数占比</el-button
                >
                <el-button
                  @click="zidxclick(1)"
                  :type="state.zidx == 1 ? 'primary' : ''"
                  size="small"
                  >面积占比</el-button
                >
              </el-button-group>
            </div>
            <div>
              <ucharts
                height="300px"
                :fullOptions="state.options3"
                :loading="state.loading3"
              ></ucharts>
            </div>
          </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,
  // 房型统计
  options2: {} as any,
  loading2: true,
  // 装修占比
  options3: {} as any,
  loading3: true,
  // 面积段 1 建筑形态 2 房型 3 装修 4
  curr: 0,
  // 选择套数占比/面积占比
  zidx: 0,
  // 所有参数
  dataList: [[], [], [], [], []],
  // 判断是哪个
  nums: 1,
});
const props = defineProps({
  radio: {
    type: String,
    default: "",
  },
});

watch(
  () => [props.radio],
  () => {
    loadData(state.curr + 1);
    loadData(4);
  },
  { deep: true }
);
onMounted(() => {
  loadData(1);
  loadData(4);
});
const zidxclick = (num: number) => {
  state.zidx = num;
  if (num == 0) showopt3(state.dataList[4]);
  else showopt4(state.dataList[4]);
};

const tabChange = (val: any) => {
  loadData(Number(val) + 1);
  state.curr = val;
};

async function loadData(num: number) {
  let item = await housApi().HistogramApi({
    houseContrast: num,
    district: props.radio,
  });

  let data = item.data.series;
  state.nums = num;
  state.dataList[num] = data;
  if (num == 1) showopt0(data);
  if (num == 2) showopt1(data);
  if (num == 3) showopt2(data);
  if (num == 4) showopt3(data);
}
function showopt0(list: Array<object>) {
  let data = {
    xname: [],
    yname: ["套", "㎡"],
    type: "bars",
    isd: true,
    series: [
      { name: "套数", data: [] },
      { name: "面积", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.name);
    data.series[0].data.push(res.num);
    data.series[1].data.push(res.area);
  });
  state.options0 = startChart(data);
  state.loading0 = false;
}
function showopt1(list: Array<object>) {
  let data = {
    xname: [],
    yname: ["套", "㎡"],
    type: "bars",
    isd: true,
    series: [
      { name: "套数", data: [] },
      { name: "面积", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.name);
    data.series[0].data.push(res.num);
    data.series[1].data.push(res.area);
  });
  state.options1 = startChart(data);
  state.loading1 = false;
}
function showopt2(list: Array<object>) {
  let data = {
    xname: [],
    yname: ["套", "㎡"],
    type: "bars",
    isd: true,
    series: [
      { name: "套数", data: [] },
      { name: "面积", data: [] },
    ],
    title: "",
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.name);
    data.series[0].data.push(res.num);
    data.series[1].data.push(res.area);
  });
  state.options2 = startChart(data);
  state.loading2 = false;
}
function showopt3(list: Array<object>) {
  let data = {
    type: "piemore",
    title: "套数",
    label: "0",
    series: [],
    float: "bottomcenter",
  } as any;

  list.forEach((res: any) => {
    data.series.push({ name: res.name, data: res.num });
  });
  state.options3 = startChart(data);
  state.loading3 = false;
}

function showopt4(list: Array<object>) {
  let data = {
    type: "piemore",
    title: "面积",
    label: "0",
    series: [],
    float: "bottomcenter",
  } as any;
  list.forEach((res: any) => {
    data.series.push({ name: res.name, data: res.area });
  });
  state.options3 = startChart(data);
  state.loading3 = false;
}
</script>

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