<template>
  <!-- 开启顶部安全区适配 -->
  <van-nav-bar
    :border="false"
    safe-area-inset-top
    style="background-color: #5c8fff"
  />
  <div class="page_info">
    <div
      class="info_title"
      :style="{
        'margin-bottom': role != 'Maintenance' ? '54px' : '12px',
        'padding-bottom': role != 'Maintenance' ? '58px' : '',
      }"
    >
      <van-row align="center" class="position_pannel">
        <template v-if="role == 'Tenant'">
          <van-row justify="center" style="flex: 1">
            <van-col>首页</van-col>
          </van-row>
        </template>
        <template v-else>
          <van-col>
            <van-image
              :src="require('@/assets/position.svg')"
              width="16"
              height="16"
              fit="contain"
            />
            <van-col>{{ name }}</van-col>
            <van-image
              :src="require('@/assets/arrow-right.svg')"
              width="24"
              height="24"
              fit="contain"
            />
          </van-col>
        </template>

        <van-col
          @click="
            () => {
              $router.push({ path: '/userInfo', query: { type: 'password' } });
            }
          "
        >
          <van-image
            :src="require('@/assets/user.svg')"
            width="16"
            height="16"
            fit="contain"
          />
        </van-col>
      </van-row>
    </div>
    <!-- 维修工没有此块功能 -->
    <template v-if="role && role != 'Maintenance'">
      <div class="info_function">
        <div
          class="function_item"
          v-for="(item, index) in functionList"
          :key="index"
          :style="{ display: !item.role.includes(role) ? 'none' : '' }"
          @click="toPath(item.path, item.activeTab)"
        >
          <template v-if="item.role.includes(role)">
            <van-image :src="item.src" width="36" height="36" fit="contain" />
            <van-col>{{ item.label }}</van-col>
          </template>
        </div>
      </div>
    </template>
    <div class="info_list">
      <!-- 实时巡检begin -->
      <template v-if="role == 'Inspection'">
        <van-row align="center" justify="space-between" class="sub_title">
          <van-col class="title">实时巡检</van-col>
          <van-col
            class="function_btn"
            @click="
              () => {
                $router.push({ path: '/review/clock' });
              }
            "
          >
            <van-col>立即巡检</van-col>
            <van-image
              :src="require('@/assets/btn-arrow-right.svg')"
              width="24"
              height="24"
              fit="contain"
            />
          </van-col>
        </van-row>
        <van-row align="center" justify="space-around" class="list_item">
          <van-row
            align="center"
            justify="center"
            style="flex-direction: column"
            v-for="(item, index) in reviewList"
            :key="item + '_' + index"
          >
            <van-col>{{ item.dictLabel }}</van-col>
            <v-count-up
              :end-val="Number(item['count'])"
              class="count_up"
              :options="item['options']"
            />
          </van-row>
        </van-row>
      </template>
      <!-- 实时巡检end -->

      <!-- 工单待办begin -->
      <template v-if="role && role != 'Inspection'">
        <van-row align="center" justify="space-between" class="sub_title">
          <van-col class="title">{{
            role == "admin" ? "工单待办" : "实时报修"
          }}</van-col>
          <van-col
            class="function_btn"
            @click="
              () => {
                $router.push({ path: '/repair/list' });
              }
            "
          >
            <van-col>{{ role == "admin" ? "立即处理" : "立即查看" }}</van-col>
            <van-image
              :src="require('@/assets/btn-arrow-right.svg')"
              width="24"
              height="24"
              fit="contain"
            />
          </van-col>
        </van-row>
        <van-row align="center" justify="space-around" class="list_item">
          <van-row
            align="center"
            justify="center"
            style="flex-direction: column"
            v-for="(item, index) in workList"
            :key="item + '_' + index"
            :style="{ display: !item.role.includes(role) ? 'none' : '' }"
          >
            <van-col>{{ item.label }}</van-col>
            <v-count-up
              :end-val="Number(item['count'])"
              class="count_up"
              :options="item['options']"
            />
          </van-row>
        </van-row>
      </template>
      <!-- 工单待办end -->

      <!-- 设备异常begin -->
      <template v-if="role && role != 'Tenant'">
        <van-row align="center" justify="space-between" class="sub_title">
          <van-col class="title">设备异常</van-col>
          <van-col
            class="function_btn"
            @click="
              () => {
                $router.push({ path: '/device/list' });
              }
            "
          >
            <van-col>立即查看</van-col>
            <van-image
              :src="require('@/assets/btn-arrow-right.svg')"
              width="24"
              height="24"
              fit="contain"
            />
          </van-col>
        </van-row>
        <van-row align="center" justify="space-around" class="list_item">
          <van-row
            align="center"
            justify="space-between"
            style="flex-direction: column"
            v-for="(item, index) in deviceAlarmList"
            :key="item + '_' + index"
          >
            <van-col>{{ item.dictLabel }}</van-col>
            <v-count-up :end-val="Number(item['count'])" class="count_up" />
          </van-row>
        </van-row>
      </template>
      <!-- 设备异常end -->

      <!-- 欠费待收begin -->
      <template v-if="role == 'admin'">
        <van-row align="center" justify="space-between" class="sub_title">
          <van-col class="title">欠费待收</van-col>
          <van-col
            class="function_btn"
            @click="
              () => {
                $router.push({ path: '/pay/fee' });
              }
            "
          >
            <van-col>立即催收</van-col>
            <van-image
              :src="require('@/assets/btn-arrow-right.svg')"
              width="24"
              height="24"
              fit="contain"
            />
          </van-col>
        </van-row>
        <div class="list_item list_table">
          <van-row class="table_header">
            <van-col span="8">欠费类型</van-col>
            <van-col span="8">欠费租户数</van-col>
            <van-col span="8">累计欠费(元)</van-col>
          </van-row>
          <div class="table_body" :class="{ loading_info: loading }">
            <template v-if="!loading">
              <template v-if="billPaymentList.length > 0">
                <van-row v-for="(item, index) in billPaymentList" :key="index">
                  <van-col span="8" style="color: #999999; font-size: 12px">{{
                    `${dict_filter(item.payType, "payTypeList")["dictLabel"]}`
                  }}</van-col>
                  <van-col span="8">{{
                    (parseInt(item.arrearageNum * 100) / 100).toFixed(2)
                  }}</van-col>
                  <van-col span="8">{{
                    (parseInt(item.arrearageAmount * 100) / 100).toFixed(2)
                  }}</van-col>
                </van-row>
              </template>
              <template v-else>
                <van-empty image-size="60" description="暂无数据" />
              </template>
            </template>
            <template v-if="loading">
              <van-loading size="24px">加载中...</van-loading>
            </template>
          </div>
        </div>
      </template>
      <!-- 欠费待收end -->

      <!-- 账单待缴begin -->
      <template v-if="role == 'Tenant'">
        <van-row align="center" justify="space-between" class="sub_title">
          <van-col class="title">账单待缴</van-col>
          <van-col
            class="function_btn"
            @click="
              () => {
                $router.push({
                  path: '/bill/detail',
                  query: {
                    activeTab: 'bill',
                  },
                });
              }
            "
          >
            <van-col>立即缴费</van-col>
            <van-image
              :src="require('@/assets/btn-arrow-right.svg')"
              width="24"
              height="24"
              fit="contain"
            />
          </van-col>
        </van-row>
        <div class="list_item list_table">
          <van-row class="table_header">
            <van-col span="8">缴费类型</van-col>
            <van-col span="8">本期待缴金额(元)</van-col>
            <van-col span="8">累计待缴金额(元)</van-col>
          </van-row>
          <div class="table_body" :class="{ loading_info: loading }">
            <template v-if="!loading">
              <template v-if="billPaymentList.length > 0">
                <van-row v-for="(item, index) in billPaymentList" :key="index">
                  <van-col span="8" style="color: #999999; font-size: 12px">{{
                    `${dict_filter(item.payType, "payTypeList")["dictLabel"]}`
                  }}</van-col>
                  <van-col span="8">{{
                    (parseInt(item.currentAmount * 100) / 100).toFixed(2)
                  }}</van-col>
                  <van-col span="8">{{
                    (parseInt(item.cumulativeAmount * 100) / 100).toFixed(2)
                  }}</van-col>
                </van-row>
              </template>
              <template v-else>
                <van-empty image-size="60" description="暂无数据" />
              </template>
            </template>
            <template v-if="loading">
              <van-loading size="24px">加载中...</van-loading>
            </template>
          </div>
        </div>
      </template>
      <!-- 账单待缴end -->
    </div>
  </div>
  <!-- 底部tabbar -->
  <template v-if="role == 'admin'">
    <van-tabbar
      v-model="activeTabBar"
      active-color="#2E69EB"
      inactive-color="#0c1935"
    >
      <van-tabbar-item
        name="home"
        :icon="
          activeTabBar == 'home'
            ? require('@/assets/home-active.svg')
            : require('@/assets/home.svg')
        "
        to="/home"
        >首页</van-tabbar-item
      >
      <van-tabbar-item
        name="rentBill"
        :icon="
          activeTabBar == 'bill'
            ? require('@/assets/rent-bill-active.svg')
            : require('@/assets/rent-bill.svg')
        "
        to="/bill/list"
        >租户账单</van-tabbar-item
      >
      <van-tabbar-item
        name="remoteControl"
        :icon="
          activeTabBar == 'remoteControl'
            ? require('@/assets/remote-control-active.svg')
            : require('@/assets/remote-control.svg')
        "
        to="/remoteControl"
        >远程管控</van-tabbar-item
      >
    </van-tabbar>
  </template>
</template>
<script>
import { isEmpty, getDictDataList } from "@/utils/index.js";
import api from "../utils/api";
import VCountUp from "./CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      role: "",
      tenantInfo: {}, //角色为Tenant时有值
      name: "电商园四期-B座",
      activeTabBar: "home",
      functionList: [
        {
          path: "/repair/create",
          src: require("@/assets/repair-online.svg"),
          label: "线上报修",
          role: ["admin", "Inspection", "Tenant"],
        },
        {
          path: "/review/list",
          src: require("@/assets/check-review.svg"),
          label: "巡检记录",
          role: ["admin", "Inspection"],
        },
        {
          path: "/pay/record",
          src: require("@/assets/reduce-record.svg"),
          label: "扣缴记录",
          role: ["admin", "Tenant"],
          activeTab: "record",
        },
      ],
      workList: [
        {
          label: "待指派",
          count: 0,
          role: ["admin"],
        },
        {
          label: "待维修",
          count: 0,
          role: ["admin", "Maintenance", "Tenant"],
        },
        {
          label: "已维修",
          count: 0,
          role: ["admin", "Maintenance", "Tenant"],
        },
      ],
      reviewList: [],
      deviceAlarmList: [],
      payTypeList: [],
      billPaymentList: [],
      loading: true,
    };
  },
  async mounted() {
    this.role = localStorage.getItem("role");
    await this.getPayTypeList();
    await this.getDeviceAlarmList();
    await this.getReviewList();
    this.getHomeData();
    if (this.role == "Tenant") {
      this.tenantInfo = JSON.parse(localStorage.getItem("tenantInfo"));
    } else {
      this.tenantInfo = {};
    }
  },
  methods: {
    getPayTypeList() {
      this.payTypeList = getDictDataList("PayType");
    },
    getDeviceAlarmList() {
      this.deviceAlarmList = getDictDataList("DeviceAlarm");
    },
    getReviewList() {
      this.reviewList = getDictDataList("Review");
    },
    dict_filter(val, list) {
      if (isEmpty(val)) {
        return {};
      }
      return this[list].find((item) => item.dictValue == val);
    },

    getHomeData() {
      api.homedata().then((res) => {
        if (res.code == 0) {
          //工单代办数据
          for (let k in res.data.workOrder) {
            this.workList[k - 1].count = res.data.workOrder[k];
          }
          //设备异常数据
          let deviceArr = [];
          for (let key in res.data.equip.maps) {
            if (key != "Relay") {
              deviceArr.push({
                dictValue: key,
                count: res.data.equip.maps[key],
              });
            }
          }
          //赋值异常总数
          deviceArr.unshift({
            dictValue: "abnormalNum",
            count: res.data.equip.abnormalNum,
          });
          this.deviceAlarmList.forEach((item) => {
            item.count = deviceArr.find(
              (ele) => ele.dictValue == item.dictValue
            ).count;
          });

          //实时巡检数据
          let reviewArr = [];
          for (let key in res.data.inspectionInfo) {
            reviewArr.push({
              dictValue: key,
              count: res.data.inspectionInfo[key],
            });
          }
          this.reviewList.forEach((item) => {
            item.count = reviewArr.find(
              (ele) => ele.dictValue == item.dictValue
            ).count;
          });
          //欠费待收数据
          this.billPaymentList = res.data.billPaymentList;
        }
        this.loading = false;
      });
    },
    toPath(path, val) {
      let params = {};
      if (this.role == "Tenant") {
        params = {
          tenantId: this.tenantInfo.tenantId,
          tenantName: this.tenantInfo.tenantName,
          activeTab: val,
        };
        path = "/bill/detail";
      }
      this.$router.push({
        path: path,
        query: params,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page_info {
  position: relative;
  .info_title {
    width: 100%;
    background: #5c8fff;
    border-radius: 0px 0px 16px 16px;
    box-sizing: border-box;
    .position_pannel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      .van-col {
        height: 44px;
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
        text-indent: 4px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
        display: flex;
        align-items: center;
        letter-spacing: 2px;
      }
    }
  }
  .info_function {
    position: absolute;
    top: 52px;
    width: calc(100% - 32px);
    margin: 0 16px;
    background: #ffffff;
    box-shadow: 0px 0px 8px 0px rgba(51, 51, 51, 0.08);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px 0;
    box-sizing: border-box;
    .function_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .van-col {
        height: 20px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        margin-top: 4px;
      }
    }
  }
  .info_list {
    padding: 0 16px;
    .sub_title {
      margin: 12px 0 6px 0;
      .title {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: #0c1935;
        line-height: 20px;
      }
      .function_btn {
        display: flex;
        align-items: center;
        .van-col {
          height: 16px;
          font-size: 12px;
          font-weight: 400;
          color: #2e69eb;
          line-height: 16px;
        }
      }
    }
    .list_item {
      background: #ffffff;
      box-shadow: 0px 0px 4px 0px rgba(51, 51, 51, 0.08);
      border-radius: 4px;
      padding: 16px 0;
      height: 32px;
      .van-col {
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 16px;
      }
      .count_up {
        margin-top: 4px;
        height: 22px;
        font-size: 16px;
        color: #0c1935;
        line-height: 22px;
      }
    }
    .list_table {
      padding: 8px 16px 4px 16px;
      min-height: 156px;
      .table_header {
        padding: 8px 0;
        border-bottom: 1px solid #eeeeee;
        .van-col {
          height: 16px;
          font-size: 12px;
          font-weight: 600;
          color: #999999;
          line-height: 16px;
        }
      }
      .table_body {
        height: calc(100% - 33px);
        .van-row {
          padding: 12px 0;
          border-bottom: 1px solid #eeeeee;
        }
        .van-col {
          height: 16px;
          font-size: 16px;
          color: #0c1935;
          line-height: 16px;
        }
      }
      .loading_info {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>