<template>
  <div class="a4-screen">
    <div class="a4-screen-content">
      <div class="top-wrap">
        <implementationTotal :data="state.summary" />
        <implementationIng :data="state.data" />
      </div>
      <div class="bottom-wrap">
        <implementationNowYear :data="serviceData" />
        <Market :data="state.market_vs_month" />
      </div>
    </div>
  </div>
</template>

<script>
  import implementationTotal from "../components/implementary/total.vue"
  import implementationIng from "../components/implementary/ing.vue"
  import implementationNowYear from "../components/implementary/now-year.vue"
  import Market from "../components/market.vue"

  import { huiJiaApi } from "@/api"

  export default {
    name: "A4Screen",
    components: {
      implementationTotal,
      implementationIng,
      implementationNowYear,
      Market,
    },
    data() {
      return {
        state: {
          data: [], // 进行中的实施服务列表
          market_vs_month: {
            customer: {
              // 新增企业
              last_month: 0,
              this_month: 0,
            },
            followup: {
              // 新增企业
              last_month: 0,
              this_month: 0,
            },
            contact: {
              // 新增联系人
              last_month: 0,
              this_month: 0,
            },
            residence: {
              // 新增小区
              last_month: 0,
              this_month: 0,
            },
            contract: {
              // 新增合同
              last_month: 0,
              this_month: 0,
            },
            household: {
              // 新增户数
              last_month: 0,
              this_month: 1,
            },
          }, // 市场拓展数据
          summary: {
            cities: 0, // 城市总数
            customers: 0, // 企业总数
            contracts: 0, // 合同总数
            perform_times: 0, // 履约次数
            service_time: 0, // 服务时长
            residences: 0, // 小区总数
            contracted_households: 0, // 签约户数
            actual_households: 0, // 实施户数
          }, // 实施服务，汇总
          year_summary: {
            cities: 0, // 履约城市
            customers: 0, // 服务企业
            residences: 0, // 服务小区
            contracts: 0, // 合同份数
            contracted_households: "0", // 签约户数
            actual_households: "0", // 实施户数
          },
          service_ing: {
            // 实施服务，进行中
            cities: 0,
            customers: 0,
            contracts: 0,
            residences: 0,
            contracted_households: "0",
            plan: 0,
          },
          service_last_month: {
            // 实施服务，上月
            cities: 0,
            customers: 0,
            contracts: 0,
            residences: 0,
            contracted_households: 0,
            actual_households: 0,
          },
        },
        serviceData: {},
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getServiceData() {
        // 图表字段顺序
        const properties = [
          "contracted_households",
          "contracts",
          "residences",
          "customers",
          "cities",
        ]
        const result = {
          year_summary: properties.map((key) => this.state.year_summary[key]),
          service_ing: properties.map((key) => this.state.service_ing[key]),
          service_last_month: properties.map(
            (key) => this.state.service_last_month[key]
          ),
        }
        this.serviceData = result
      },
      getData() {
        huiJiaApi.getScreenData().then((res) => {
          if (res && res.data) {
            this.state = res.data.data
            this.getServiceData()
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  $gap-padding: halfW(8);
  .a4-screen {
    width: calc(100vw - halfW(8) * 2);
    height: calc(100vh - halfH(8) * 2);
    padding: halfW(8);
    background: var(--page-bg);
    font-family: DreamHanSansCN;
  }
  .a4-screen-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: halfW(16);
    .top-wrap {
      display: flex;
      justify-content: space-around;
      gap: halfW(16);
      width: 100%;
      height: calc(50% - $gap-padding);
      .total-container {
        width: calc(35% - $gap-padding);
        ::v-deep .total-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(4, 1fr);
          .total-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: stretch;
            justify-content: center;
          }
        }
      }
      .implementing-container {
        width: calc(65% - $gap-padding);
      }
    }
    .bottom-wrap {
      display: flex;
      justify-content: space-around;
      gap: halfW(16);
      width: 100%;
      height: calc(50% - $gap-padding);
      .now-year-container {
        width: calc(65% - $gap-padding);
      }
      .market-container {
        width: calc(35% - $gap-padding);
      }
    }
  }
</style>
