<template>
  <view class="box">
    <div class="searchBox" :style="{ height: localHeight + 'px', paddingTop: top + 'px' }">
      <div class="searchBox_add">
        <div class="searchBox_left">
          <u-icon bold color="#000" size="40" name="arrow-left" @click="back"></u-icon>
        </div>
        <div class="searchBox_mid">我的报修</div>
        <div class="searchBox_right"></div>
      </div>
    </div>

    <div class="tabList">
      <div :class="active == 1 ? 'tab active' : 'tab'" @click="headerTabsClick(1)">
        待指派 <span>({{ awaitingNumb }})</span>
      </div>
      <div :class="active == 2 ? 'tab active' : 'tab'" @click="headerTabsClick(2)">
        进行中 <span>({{ underwayNum }})</span>
      </div>
      <div :class="active == 4 ? 'tab active' : 'tab'" @click="headerTabsClick(4)">
        已作废 <span>({{ discardNum }})</span>
      </div>
      <div :class="active == 3 ? 'tab active' : 'tab'" @click="headerTabsClick(3)">
        已完成 <span>({{ doneNum }})</span>
      </div>
    </div>

    <div v-if="list.length !== 0" class="orderList" v-for="(item, index) in list" :key="index">
      <div class="orderItem" @click="handlerDetailClick(item.id)">
        <div :class="['orderItemTit', statusType[item.status].style]">
          <div class="orderItemTit_left">工单编号：{{ item.order_code }}</div>
          <div class="orderItemTit_right">{{ item.create_time }}</div>
        </div>
        <div class="orderItem_row">
          <div class="df">
            <div class="orderItem_row_label">小区房源名称</div>
            <div class="orderItem_row_con">{{ item.room.name }}</div>
          </div>

          <div :class="['orderItem_row_state', statusType[item.status].color]">
            {{ statusType[item.status].desc }}
          </div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">报修类型</div>
          <div class="orderItem_row_con">{{ item.ac.category_name }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">问题描述</div>
          <div class="orderItem_row_con">{{ item.problem_description }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">上门时间</div>
          <div class="orderItem_row_con">{{ item.service_time }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">联系人</div>
          <div class="orderItem_row_con">{{ item.contact_name }}</div>
        </div>

        <div class="orderItem_row">
          <div class="orderItem_row_label">联系人手机号</div>
          <div class="orderItem_row_con">{{ item.contact_phone }}</div>
        </div>
      </div>
    </div>

    <div v-if="list.length == 0" class="empty">
      <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_nearbyList_empty.png"
        mode="aspectFill"></image>
      暂无数据
    </div>

    <div class="addBtn" @click="oneRepair">在线报修</div>
  </view>
</template>

<script>
import { request, NavgateTo, menuButtonInfo } from "../../../utils";
import { apiArr } from "../../../api/v2Community";
export default {
  data() {
    return {
      top: "",
      localHeight: "",
      active: 1,
      page_num: 1,
      page_size: 10,
      flag: false, // 是否下拉请求接口
      list: [], // 列表数组
      awaitingNumb: '', // 待维修工单数量
      underwayNum: '', // 进行中工单数量
      doneNum: '', // 已完成工单数量
      discardNum: '', // 已废弃工单数量
      // 状态枚举类型
      statusType: {
        1: {
          desc: "待指派",
          style: "orderItemTit_state1",
          color: "orderItem_row_state1"
        },
        2: {
          desc: "进行中",
          style: "orderItemTit_state2",
          color: "orderItem_row_state2"
        },
        3: {
          desc: "已完成",
          style: "orderItemTit_state3",
          color: "orderItem_row_state3"
        },
        4: {
          desc: "已作废",
          style: "orderItemTit_state4",
          color: "orderItem_row_state4"
        },
      },
    };
  },
  methods: {
    oneRepair() {
      NavgateTo("../oneRepair/index");
    },

    handlerDetailClick(id) {
      NavgateTo(`../repairDetail/index?id=${id}`);
    },
    headerTabsClick(e) {
      this.active = e;
      this.list = [];
      this.flag = false;
      this.page_num = 1;
      this.getTabsList();
    },
    async init() {
      const [awaitingNumb, underwayNum, doneNum, discardNum] = await Promise.all([
        this.awaitingRes(),
        this.underwayRes(),
        this.doneRes(),
        this.discardRes(),
      ]);
      this.awaitingNumb = awaitingNumb;
      this.underwayNum = underwayNum;
      this.discardNum = discardNum;
      this.doneNum = doneNum;
    },
    async getTabsList() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: this.active,
        page_num: this.page_num,
        page_size: this.page_size,
      });

      if (res.rows) {
        let flag = false;
        if (res.rows.length == this.page_size) {
          flag = true;
        } else {
          flag = false;
        }
        this.list = this.list.concat(res.rows || []);
        this.flag = flag;
        this.page_num = this.page_num + 1;
      }
    },
    // 待维修工单数量
    async awaitingRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 1,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },
    // 进行中工单数量
    async underwayRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 2,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },
    // 已废弃工单数量
    async discardRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 3,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },
    // 已完成工单数量
    async doneRes() {
      const res = await request(apiArr.getWorkOrderCrudList, "POST", {
        status: 4,
        page_num: this.page_num,
        page_size: this.page_size,
      });
      return res.total;
    },

    back() {
      uni.navigateBack({
        delta: 1
      })
    }
  },

  onLoad(options) {
    const meun = menuButtonInfo();
    this.top = meun.top;
    this.localHeight = meun.height;
    this.init();
    this.getTabsList();
  },
  onReachBottom() {
    if (this.flag) {
      this.init();
    }
  },

  onPullDownRefresh() {
    this.list = [];
    this.flag = false;
    this.page_num = 1;
    this.getTabsList();
    uni.stopPullDownRefresh();
  },
};
</script>

<style>
@import url("./index.css");
</style>
