<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>
            <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>

          <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="ctitle">
        <div class="title">预售资金总数</div>
      </div>
      <div class="fundstop">
        <div class="fundstopitem">
          <span>监管额度</span>
          <p>{{ proxy?.$method.numFormat(state.totalnum.superviseAmount, 1) }}</p>
        </div>
        <div class="fundstopitem">
          <span>留存额度</span>
          <p>{{ proxy?.$method.numFormat(state.totalnum.keepAmount, 1) }}</p>
        </div>
        <div class="fundstopitem">
          <span>账户余额</span>
          <p>{{ proxy?.$method.numFormat(state.totalnum.balance, 1) }}</p>
        </div>
        <div class="fundstopitem">
          <span>入账金额</span>
          <p>{{ proxy?.$method.numFormat(state.totalnum.totalInAmount, 1) }}</p>
        </div>
        <div class="fundstopitem">
          <span>支出金额</span>
          <p>{{ proxy?.$method.numFormat(state.totalnum.totalOutAmount, 1) }}</p>
        </div>
        <div class="fundstopitem">
          <span>监管比例</span>
          <p>{{ (state.totalnum.supervisePercentage * 100).toFixed(2)}}</p>
        </div>
      </div>
    </el-card>
    <el-row class="home-card-one">
      <el-col :span="24">
        <el-card shadow="hover">
          <div class="title">预售资金分析（近12个月）</div>
          <ucharts height="500px" :fullOptions="state.option" :loading="state.loading"></ucharts>
        </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 { fundsApi } 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 state: any = reactive({
  radio: "",
  options: [] as any,
  loading: false,
  option: {} as any,
  month: "",
  // 总数
  totalnum: {},
  startdate: "",
  enddate: "",
  monthdate: "",
});

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

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

// 获取列表
async function loadlist() {
  let item = await fundsApi().getList({ district: state.radio });
  state.totalnum = item.data;
  loadbar();
}

// 获取柱状图
async function loadbar(date?: any) {
  if (date == undefined) date = proxy?.$method.getLastYearMonthArray();
  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 fundsApi().getbars({
    district: state.radio,
    startDate: date[0],
    endDate: date[date.length - 1],
  });
  // 折线图
  let list = item.data.series;
  let data = {
    xname: [],
    yname: ["元", "元"],
    type: "bars",
    isd: true,
    series: [
      { name: "入账金额", data: [] },
      { name: "出账金额", data: [] },
    ],
    title: "",
    max: undefined,
    iswy: true,
  } as any;
  let num: any = [];
  list.forEach((res: any) => {
    data.xname.push(res.name);
    data.series[0].data.push(res.inAmount);
    data.series[1].data.push(res.outAmount);
    num.push(res.inAmount, res.outAmount);
  });

  data.max = Math.max(...num);
  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">
.utime {
  display: flex;
  align-items: center;

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

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

  .fundstopitem {
    flex: 1;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    &:last-child {
      &::before {
        width: 0;
      }
    }

    &:last-child {
      p {
        &::after {
          font-size: 14px;
          font-weight: normal;
          margin-left: 2px;
          content: "%";
        }
      }
    }

    p {
      font-size: 24px;
      font-weight: bold;
      margin-top: 5px;

      &::after {
        font-size: 14px;
        font-weight: normal;
        margin-left: 2px;
        content: "万元";
      }
    }

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

    &::before {
      content: "";
      width: 2px;
      height: 30px;
      background-color: #eee;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
}

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