<template>
  <div>
    <el-card shadow="hover">
      <div class="ctitle">
        <div class="title">年度范围统计分析</div>
        <div class="dateyear">
          <el-select v-model="state.startDate" size="default" placeholder="请选择开始年份">
            <el-option v-for="item in state.stateDatelist" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <p class="dateyearx">-</p>
          <el-select v-model="state.endDate" size="default" placeholder="请选择结束年份">
            <el-option v-for="item in state.endDatelist" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-button size="default" type="primary" @click="loadData" style="margin-left: 10px;">确认</el-button>
        </div>
      </div>
      <el-row :gutter="15" class="home-card-one mb10">
        <el-col :span="16">
          <el-card shadow="hover">
            <div v-if="state.options0">
              <ucharts height="345px" :fullOptions="state.options0" :loading="state.loading0"></ucharts>
            </div>
          </el-card>
        </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 v-if="state.options3 != null">
              <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">
import { reactive, onMounted, defineProps, watch } from "vue";
import ucharts from "/@/components/BaseEchart/index.vue";
import { startChart } from "/@/components/BaseEchart/option";
import { yearApi } from "/@/api/statistics/index";
import { ElMessage } from 'element-plus'
import { useCurrentInstance } from "/@/method/get";
const { proxy } = useCurrentInstance();
const name = [
  "≤60m²",
  "60-90m²",
  "90-120m²",
  "120-144m²",
  "144-180m²",
  "180m²以上",
];
let date = new Date();
let year = date.getFullYear();

// 定义变量内容
const state: any = reactive({
  stateDatelist: [],
  endDatelist: [],
  // 面积段统计
  options0: {} as any,
  loading0: true,
  // 户型占比
  options3: {} as any,
  loading3: true,
  // 面积段 1 建筑形态 2 房型 3 装修 4
  curr: 0,
  // 选择套数占比/面积占比
  zidx: 0,
  // 所有参数
  dataList: [[], [], [], [], []],
  // 判断是哪个
  nums: 1,
  startDate: (year - 5),
  endDate: year,
});

for (let i = 5; i >= 0; i--) {
  state.stateDatelist.push({ value: year - i, lable: (year - i) + '年' })
  state.endDatelist.push({ value: year - i, lable: (year - i) + '年' })
}

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();
  else showopt4();
};
async function loadData(num: number) {
  let item = await yearApi().getarea({
    district: props.radio,
    startDate: state.startDate,
    endDate: state.endDate
  });
  let data = item.data;

  if (data == null) {
    return
  }
  showopt0(data)
  showopt3()
}
function showopt0(list: any) {
  let data = {
    xname: name,
    yname: ["套", "㎡"],
    type: "bars",
    isd: true,
    series: [
      { name: "套数", data: [list.num60, list.num6090, list.num90120, list.num120144, list.num144180, list.num180] },
      { name: "面积", data: [list.area60, list.area6090, list.area90120, list.area120144, list.area144180, list.area180] },
    ],
    title: "",
  } as any;
  state.options0 = startChart(data);
  state.loading0 = false;
}
async function showopt3() {
  let item = await yearApi().gethx({
    district: props.radio,
    startDate: state.startDate,
    endDate: state.endDate
  });
  let list = item.data;
  if (list == null) {
    ElMessage.error('暂无数据，请重新选择年份')
    state.options3 = null;
    state.loading3 = true;
    return
  }
  let data = {
    type: "piemore",
    title: "户型",
    label: "0",
    tooltip: {
      valueFormatter: function (value: any) {
        let name = proxy?.$method.numFormat(value);
        return name + '套';
      }
    },
    series: [{ name: '一室', data: list.oneRoomNum }, { name: '两室', data: list.twoRoomNum }, { name: '三室', data: list.threeRoomNum }, { name: '四室', data: list.fourRoomNum }, { name: '五室', data: list.fiveRoomNum }],
    float: "bottomcenter",
  } as any;
  state.options3 = startChart(data);
  state.loading3 = false;
}

async function showopt4() {
  let item = await yearApi().gethx({
    district: props.radio,
    startDate: state.startDate,
    endDate: state.endDate
  });
  let list = item.data;
  if (list == null) {
    ElMessage.error('暂无数据，请重新选择年份')
    state.options3 = null;
    state.loading3 = true;
    return
  }
  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.oneRoomArea }, { name: '两户', data: list.twoRoomArea }, { name: '三户', data: list.threeRoomArea }, { name: '四户', data: list.fourRoomArea }, { name: '五户', data: list.fiveRoomArea }],
    float: "bottomcenter",
  } as any;
  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;
}

.dateyear {
  display: flex;
  align-items: center;

  .dateyearx {
    padding: 0 10px;
  }
}

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