<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">
          <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-card shadow="hover" class="mb10">
      <div class="title">年度住宅销售情况</div>
      <ucharts height="500px" :fullOptions="state.yearoption" :loading="state.yearloading"></ucharts>
    </el-card>
    <el-card shadow="hover" class="mb10">
      <div class="noticediv">
        <img src="../../../assets/notice.svg" alt="" />
        <p>
          {{ state.startdate }} 至 {{ state.enddate }} , 销售套数：<span>{{
        proxy?.$method.numFormat(state.totalnum.saleNum)
      }}</span>
          套，销售面积：<span>
            {{ proxy?.$method.numFormat(state.totalnum.saleArea, 1) }}</span>
          万m²，销售均价：<span>
            {{ proxy?.$method.numFormat(state.totalnum.unitPrice) }}</span>
          元/m²
        </p>
      </div>
    </el-card>
    <el-row class="home-card-one mb10" :gutter="10">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="title" style="margin-bottom: 10px;">月度住宅销售情况</div>
          <div class="ctitle">
            <el-button-group>
              <el-button @click="clicktab(0)" :type="state.ty == 0 ? 'primary' : ''" size="default">图表</el-button>
              <el-button @click="clicktab(1)" :type="state.ty == 1 ? 'primary' : ''" size="default">数据</el-button>
            </el-button-group>
            <div class="cstitle">
              <div class="utime">
                <div class="utimestart">{{ state.startdate }} -</div>
                <el-date-picker v-model="state.monthdate" size="default" type="month" placeholder="请选择时间"
                  @change="clicktime" />
              </div>
            </div>
          </div>
          <div v-if="state.ty == 1">
            <el-table :data="state.montable.data" v-loading="state.montable.loading" border stripe
              :header-cell-style="{ 'text-align': 'center' }">
              <el-table-column prop="yearMonth" label="年月" :align="'center'" />
              <el-table-column prop="saleNum" label="销售套数" :align="'center'">
                <template #default="scope">
                  {{ proxy?.$method.numFormat(scope.row.saleNum) }}套
                </template>
              </el-table-column>
              <el-table-column prop="saleNumQoq" label="环比" :align="'right'">
                <template #default="scope">{{ scope.row.saleNumQoq }}%</template>
              </el-table-column>
              <el-table-column prop="saleNumYoy" label="同比" :align="'right'">
                <template #default="scope">{{ scope.row.saleNumYoy }}%</template>
              </el-table-column>
              <el-table-column prop="saleAmount" width="150" label="销售面积(m²)" :align="'right'">
                <template #default="scope">{{
        proxy?.$method.numFormat(scope.row.saleArea)
      }}</template>
              </el-table-column>
              <el-table-column prop="saleAmountQoq" label="环比" :align="'right'">
                <template #default="scope">{{ scope.row.saleAreaQoq }}%</template>
              </el-table-column>
              <el-table-column prop="saleAmountYoy" label="同比" :align="'right'">
                <template #default="scope">{{ scope.row.saleAreaYoy }}%</template>
              </el-table-column>
              <el-table-column prop="unitPrice" label="销售单价(元/m²)" :align="'right'">
                <template #default="scope">{{
        proxy?.$method.numFormat(scope.row.unitPrice)
      }}</template>
              </el-table-column>
              <el-table-column prop="unitPriceQoq" label="环比" :align="'right'">
                <template #default="scope">{{ scope.row.unitPriceQoq }}%</template>
              </el-table-column>
              <el-table-column prop="unitPriceYoy" label="同比" :align="'right'">
                <template #default="scope">{{ scope.row.unitPriceYoy }}%</template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="state.ty == 0">
            <ucharts height="500px" :fullOptions="state.option" :loading="state.loading"></ucharts>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="hover" class="mb10" style="margin-top: 10px;">
      <div class='ctitle'>
        <div class="title">预售转现售面积分析</div>
        <el-date-picker v-model="state.pickyear" type="year" format="YYYY" :teleported="false" value-format="YYYY"
          placeholder="选择年" size="default" @change="pickerchange" />
      </div>
      <ucharts height="500px" :fullOptions="state.yoption" :loading="state.yloading"></ucharts>
    </el-card>
    <selectyear :radio="state.radio"></selectyear>
  </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 { monthApi, yearApi } 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 selectyear = defineAsyncComponent(
  () => import("/@/views/statistics/month/components/selectyear.vue")
);

import { dsjApi } from "/@/api/dsj";

const state: any = reactive({
  radio: "",
  options: [] as any,
  loading: false,
  option: {} as any,
  // 预售转现售分析
  yoption: [],
  yloading: false,
  pickyear: new Date().getFullYear().toString(),

  loading0: false,
  option0: {} as any,
  // 年度
  yearloading: false,
  yearoption: {} as any,

  ty: 0,
  monthdate: "",
  // 总数
  totalnum: {},
  montable: {
    data: [],
    loading: false,
  },
  startdate: "",
  enddate: "",
  areaNum: {
    data: [],
    loading: false,
  },
  datenow: undefined,
});

const pickerchange = () => {
  loadnews();
}

function clicktime(date: Date) {
  state.datenow = date.toString();

  loadlist(date);
}
onMounted(() => {
  loadData();
});

async function loadData() {
  let itemQx = await entApi().typeApi();
  state.options = itemQx.data;
  state.radio = state.options[0].value.toString()
  loadlist();
  loadnews();
}

async function loadnews() {
  let data = {
    xname: [],
    yname: ["m²"],
    type: "bar",
    series: [],
    title: "",
  } as any;

  let list = await dsjApi().saApiors({
    district: state.radio,//区县编码
    year: state.pickyear
  })

  list.data.forEach((res: any) => {
    data.xname.push(res.yearMonth);
    data.series.push(res.approveArea);
  });

  data.xname.reverse();
  data.series.reverse();

  state.yoption = startChart(data);
  state.yloading = false;
}

// 获取列表
async function loadlist(date?: any) {
  if (date == undefined) {
    date = proxy?.$method.getLastYearMonthArray(undefined, false);
  } else {
    date = proxy?.$method.getLastYearMonthArray(date);
  }

  state.startdate = date[0];
  state.enddate = date[date.length - 1];
  state.monthdate = date[date.length - 1];
  let item = await monthApi().getnum({
    startDate: date[0],
    endDate: date[date.length - 1],
    district: state.radio,
  });
  state.totalnum = item.data;
  loadbar(date);
  loadyear();
}
function clicktab(num: Number) {
  state.ty = num;
  if (num == 1) loadlist();
  else loadbars();
}
async function loadyear() {
  let item = await yearApi().getline({ district: state.radio });
  let list = item.data;
  let data = {
    color: ["#5470C6", "#91CC75", "#e77122"],
    xname: [],
    yname: ["m²", "套", "元/m²"],
    type: "bars",
    yAxis: [
      {
        type: "value",
        name: "销售面积",
        position: "right",
        alignTicks: true,
        offset: 80,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#5470C6",
          },
        },
        axisLabel: {
          formatter: "{value} m²",
        },
      },
      {
        type: "value",
        name: "销售套数",
        position: "right",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#91CC75",
          },
        },
        axisLabel: {
          formatter: "{value} 套",
        },
      },
      {
        type: "value",
        name: "住宅均价",
        position: "left",
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#e77122",
          },
        },
        axisLabel: {
          formatter: "{value} m²/元",
        },
      },
    ],
    isd: true,
    series: [
      { name: "销售面积", data: [], type: "bar" },
      { name: "销售套数", data: [], type: "bar" },
      { name: "住宅均价", data: [], type: "line" },
    ],
    title: "",
    max: undefined,
    iswy: false,
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.yearMonth);
    data.series[0].data.push(res.saleArea);
    data.series[1].data.push(res.saleNum);
    data.series[2].data.push(res.unitPrice);
  });
  state.yearoption = startChart(data);
  state.yearloading = false;
}

async function loadbars() {
  // 折线图
  let list = state.montable.data;
  let data = {
    xname: [],
    yname: ["套", "元/m²"],
    type: "bars",
    isd: true,
    series: [
      { name: "销售套数", data: [], type: "line" },
      { name: "销售均价", data: [], type: "line" },
    ],
    title: "",
    max: undefined,
    iswy: false,
  } as any;
  list.forEach((res: any) => {
    data.xname.push(res.yearMonth);
    data.series[0].data.push(res.saleNum);
    data.series[1].data.push(res.unitPrice);
  });
  state.option = startChart(data);
  state.loading = false;
}
// 获取柱状图+列表
async function loadbar(date: any) {
  let item = await monthApi().getbars({
    startDate: date[0],
    endDate: date[date.length - 1],
    district: state.radio,
  });
  state.montable.data = item.data;
  if (state.ty == 0) loadbars();
}

async function loadmj(date: Array<string>) {
  let item = await monthApi().getline({
    startDate: date[0],
    endDate: date[date.length - 1],
    district: state.radio,
  });
  state.areaNum.data = item.data;
  if (state.ty == 0) loadbars();
}

const radioChange = (e: any) => {
  state.radio = e;
  let dateon = Object.assign({ date: state.datenow });
  if (dateon.date == undefined) return loadlist();
  let ss = Date.parse(dateon.date);
  let newdate = new Date(ss);
  loadlist(newdate);
};
</script>

<style scoped lang="scss">
.utime {
  display: flex;
  align-items: center;

  .utimestart {
    font-weight: bold;
    margin-right: 10px;
  }
}

.noticediv {
  display: flex;
  align-items: center;
  font-size: 15px;

  span {
    font-weight: bold;
  }

  img {
    height: 25px;
    margin-right: 10px;
  }
}

.titles {
  font-weight: bold;
  font-size: 16px;
  padding-left: 10px;
  border-left: 3px solid #409efe;
  margin: 20px 0;
}

.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;
}

.cstitle {
  display: flex;
  align-items: center;
}
</style>
