<template>
  <div class="asset-detail" v-if="isFinish >= 2">
    <van-nav-bar :title="isMaintenanceShow || isRepairShow ? '设备详情' : '设备信息'" @click-left="backPage"
      @click-right="handleRightClick">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#333333" />
      </template>
      <template #right v-if="active == 1 || active == 2">
        <i class="iconfont wanda-scan"></i>
      </template>
    </van-nav-bar>
    <div class="asset-information" v-if="!isMaintenanceShow && !isRepairShow">
      <Information :data="informationData" />
    </div>
    <van-tabs v-else v-model="active" class="other-tabs" color="#025BAA" @change="changeTab"
      title-active-color="#025BAA" :line-width="60">
      <van-tab title="设备信息">
        <Information :data="informationData" />
      </van-tab>
      <van-tab v-if="isMaintenanceShow" title="重要维保">
        <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
      </van-tab>
      <van-tab v-if="isRepairShow" title="重要维修">
        <RepairMaintenance ref="repair" type="repair" :list="repairData" @onSearch="getData" />
      </van-tab>
    </van-tabs>

    <!-- 点击头部筛选,出现的右侧弹窗 -->
    <van-popup class="m-popup-container" v-model="showPopup" position="right">
      <div class="m-popup">
        <!-- 是否更换配件 -->
        <div class="system">
          <h1 class="title">是否更换配件</h1>
          <div class="system-btn-container">
            <div class="system-btn" v-for="(item, index) in sfghpjList" :key="index">
              <van-button class="m-btn" :class="item.active" @click="isChangeParts(item)">{{ item.text }}</van-button>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <!-- 填报日期 -->
        <div class="sbss">
          <h1 class="title">填报日期</h1>
          <div class="system-btn-container">
            <div class="system-btn" :class="item.text === '自定义'?'self-btn':''" v-for="(item, index) in fillinList"
              :key="index">
              <van-button class="m-btn" :class="item.active" @click="changeFillinDate(item)">
                {{ `${item.text} ${(item.text==='自定义' && fillinDateText)?'('+fillinDateText+')':''}` }}</van-button>
            </div>
          </div>
        </div>
        <div class="divider"></div>
        <!-- 验收日期 -->
        <div class="sbss">
          <h1 class="title">验收日期</h1>
          <div class="system-btn-container">
            <div class="system-btn" :class="item.text === '自定义'?'self-btn':''" v-for="(item, index) in acceptanceList"
              :key="index">
              <van-button class="m-btn" :class="item.active" @click="changeAcceptanceDate(item)">
                {{ `${item.text} ${(item.text==='自定义' && acceptanceDateText)?'('+acceptanceDateText+')':''}` }}</van-button>
            </div>
          </div>
        </div>
        <div class="footer">
          <van-button size="large" color="#025BAA" plain type="info" @click="reset">重置</van-button>
          <van-button size="large" color="#025BAA" type="info" @click="confirm">确定</van-button>
        </div>
      </div>
    </van-popup>
    <van-calendar ref="fillinDate" color="#025baa" v-model="showFillinDate" :min-date="minDate" type="range"
      @confirm="onConfirmFillinDate" />
    <van-calendar ref="acceptanceDate" color="#025baa" v-model="showAcceptanceDate" :min-date="minDate" type="range"
      @confirm="onConfirmAcceptanceDate" />
  </div>
</template>
<script>
/**
 * 设备详情
 */
import Vue from "vue";
import { mapGetters } from "vuex";
import { NavBar, Tab, Tabs, Popup, Button, Toast, Calendar } from "vant";
import Information from "@/components/assetDetail/Information.vue";
import RepairMaintenance from "@/components/assetDetail/RepairMaintenance.vue";
import { queryEquipmentList } from "@/api/equipmentList.js";
import { getUpdateDetail1, getUpdateDetail4 } from "@/api/overview";
import moment from "moment";
Vue.use(NavBar).use(Tab).use(Tabs).use(Popup).use(Button).use(Toast).use(Calendar);
export default {
  name: "AssetDetail",
  props: {},
  components: { Information, RepairMaintenance },
  computed: {
    ...mapGetters(["plazaId"]),
  },
  data() {
    return {
      active: 0,
      showPopup: false,
      isMaintenanceShow: true,
      isRepairShow: true,
      informationData: {},
      maintenanceData: [],
      repairData: [],
      sfghpjList: [
        { text: "是", value: 1, active: "active" },
        { text: "否", value: 0, active: "" },
      ],
      fillinList: [
        { text: "全部", value: 0, active: "active" },
        { text: "15天", value: 1, active: "" },
        { text: "30天", value: 2, active: "" },
        { text: "3个月", value: 3, active: "" },
        { text: "6个月", value: 4, active: "" },
        { text: "1年", value: 5, active: "" },
        { text: "自定义", value: 6, active: "" },
      ],
      acceptanceList: [
        { text: "全部", value: 0, active: "active" },
        { text: "15天", value: 1, active: "" },
        { text: "30天", value: 2, active: "" },
        { text: "3个月", value: 3, active: "" },
        { text: "6个月", value: 4, active: "" },
        { text: "1年", value: 5, active: "" },
        { text: "自定义", value: 6, active: "" },
      ],
      minDate: new Date(1988, 0, 1),
      isFinish: 0,
      isParts: 1,
      fillinDate: 0,
      acceptanceDate: 0,
      showFillinDate: false,
      showAcceptanceDate: false,
      fillinDateText: "",
      acceptanceDateText: "",
      fillinDateList: [],
      acceptanceDateList: [],
    };
  },
  props: {},
  beforeMount() { },
  mounted() { },
  methods: {
    backPage() {
      if (this.$route.query.first) {
        this.$router.push({ path: "/" });
      } else {
        this.$router.go(-1);
      }
    },
    /**
     * 点击右侧筛选
     */
    handleRightClick() {
      if (this.active == 1 || this.active == 2) {
        this.showPopup = true;
      }
    },
    changeTab(active) {
      console.log(this.active);
    },
    // 查询设备信息/维修/维保数据
    getData() {
      if (this.active === 1) {
        if (!isMaintenanceShow && this.isRepairShow) {// 如果没有维保有维修
          //维修
          this.getRepairData();
        } else {
          //维保
          this.getMaintenanceData();
        }
      } else if (this.active === 2) {
        //维修
        this.getRepairData();
      }
    },
    // 查询设备信息数据
    getInformationData() {
      let data = {
        plazaId: this.plazaId,
        keyword: `${this.$route.query.assetid}:assetid;`,
      },
        postParams = {};
      queryEquipmentList({ data, postParams }).then((res) => {
        if (res.data.result == "success" && res.data.data && res.data.data[0]) {
          this.informationData = res.data.data[0];
          this.getMaintenanceData(true);
          this.getRepairData(true);
        } else {
          Toast({
            message: "未查询到该设备内容！",
            type: "fail",
            duration: 2000,
            onClose: () => {
              this.$router.push({ path: "/" });
            }
          });
        }
      });
    },
    // 查询维保数据
    getMaintenanceData(first) {
      if (this.informationData.assetnum) {
        let getParams = {
          assetnum: this.informationData.assetnum,
          plazaId: this.plazaId,
          onlyMainAsset: true, //仅查询重要维修/维保
          ismodel: this.isParts, //是否更换配件
        };
        //查询关键字(重要事项记录)
        if (this.$refs.maintenance && this.$refs.maintenance.keyword) {
          getParams.keyword = `${this.$refs.maintenance.keyword}:matters`;
        }
        //填报日期
        switch (this.fillinDate) {
          // 15天
          case 1:
            getParams.reportdateStartDate = moment()
              .subtract(15, "days")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 30天
          case 2:
            getParams.reportdateStartDate = moment()
              .subtract(30, "days")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 3个月
          case 3:
            getParams.reportdateStartDate = moment()
              .subtract(3, "months")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 6个月
          case 4:
            getParams.reportdateStartDate = moment()
              .subtract(6, "months")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 一年
          case 5:
            getParams.reportdateStartDate = moment()
              .subtract(1, "years")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 自定义
          case 6:
            const [start, end] = this.fillinDateList;
            if (start && end) {
              getParams.reportdateStartDate = moment(start.getTime()).format('YYYYMMDD000000');
              getParams.reportdateEndDate = moment(end.getTime()).format('YYYYMMDD000000');
            }
            break;
          // 默认 全部
          default:
            break;
        }
        //验收日期
        switch (this.acceptanceDate) {
          // 15天
          case 1:
            getParams.sjjssjStartDate = moment()
              .subtract(15, "days")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 30天
          case 2:
            getParams.sjjssjStartDate = moment()
              .subtract(30, "days")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 3个月
          case 3:
            getParams.sjjssjStartDate = moment()
              .subtract(3, "months")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 6个月
          case 4:
            getParams.sjjssjStartDate = moment()
              .subtract(6, "months")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 一年
          case 5:
            getParams.sjjssjStartDate = moment()
              .subtract(1, "years")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 自定义
          case 6:
            const [start, end] = this.acceptanceDateList;
            if (start && end) {
              getParams.sjjssjStartDate = moment(start.getTime()).format('YYYYMMDD000000');
              getParams.sjjssjEndDate = moment(end.getTime()).format('YYYYMMDD000000');
            }
            break;
          // 默认 全部
          default:
            break;
        }
        getUpdateDetail1({ getParams }).then((res) => {
          if (res.data && res.data.length) {
            this.maintenanceData = res.data;
          } else {
            this.maintenanceData = [];
          }
          if (first) {
            this.isFinish++;
          }
          if (first && !this.maintenanceData.length) {
            this.isMaintenanceShow = false;
          }
        });
      } else {
        console.error("缺少设备编号!");
      }
    },
    // 查询维修数据
    getRepairData(first) {
      if (this.informationData.assetnum) {
        let getParams = {
          assetnum: this.informationData.assetnum,
          plazaId: this.plazaId,
          onlyMainAsset: true, //仅查询重要维修/维保
          ismodel: this.isParts, //是否更换配件
        };
        //查询关键字(重要事项记录)
        if (this.$refs.repair && this.$refs.repair.keyword) {
          getParams.keyword = `${this.$refs.repair.keyword}:matters`;
        }
        //填报日期
        switch (this.fillinDate) {
          // 15天
          case 1:
            getParams.reportdateStartDate = moment()
              .subtract(15, "days")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 30天
          case 2:
            getParams.reportdateStartDate = moment()
              .subtract(30, "days")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 3个月
          case 3:
            getParams.reportdateStartDate = moment()
              .subtract(3, "months")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 6个月
          case 4:
            getParams.reportdateStartDate = moment()
              .subtract(6, "months")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 一年
          case 5:
            getParams.reportdateStartDate = moment()
              .subtract(1, "years")
              .format("YYYYMMDD000000");
            getParams.reportdateEndDate = moment().format("YYYYMMDD000000");
            break;
          // 自定义
          case 6:
            const [start, end] = this.fillinDateList;
            if (start && end) {
              getParams.reportdateStartDate = moment(start.getTime()).format('YYYYMMDD000000');
              getParams.reportdateEndDate = moment(end.getTime()).format('YYYYMMDD000000');
            }
            break;
          // 默认 全部
          default:
            break;
        }
        //验收日期
        switch (this.acceptanceDate) {
          // 15天
          case 1:
            getParams.sjjssjStartDate = moment()
              .subtract(15, "days")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 30天
          case 2:
            getParams.sjjssjStartDate = moment()
              .subtract(30, "days")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 3个月
          case 3:
            getParams.sjjssjStartDate = moment()
              .subtract(3, "months")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 6个月
          case 4:
            getParams.sjjssjStartDate = moment()
              .subtract(6, "months")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 一年
          case 5:
            getParams.sjjssjStartDate = moment()
              .subtract(1, "years")
              .format("YYYYMMDD000000");
            getParams.sjjssjEndDate = moment().format("YYYYMMDD000000");
            break;
          // 自定义
          case 6:
            const [start, end] = this.acceptanceDateList;
            if (start && end) {
              getParams.sjjssjStartDate = moment(start.getTime()).format('YYYYMMDD000000');
              getParams.sjjssjEndDate = moment(end.getTime()).format('YYYYMMDD000000');
            }
            break;
          // 默认 全部
          default:
            break;
        }
        getUpdateDetail4({ getParams }).then((res) => {
          if (res.data && res.data.length) {
            this.repairData = res.data;
          } else {
            this.repairData = [];
          }
          if (first) {
            this.isFinish++;
          }
          if (first && !this.repairData.length) {
            this.isRepairShow = false;
          }
        });
      } else {
        console.error("缺少设备编号!");
      }
    },
    // 修改是否更换配件
    isChangeParts(data) {
      console.log(data);
      this.isParts = data.value;
      this.sfghpjList.map((item) => {
        item.active = "";
        if (item.value === data.value) {
          item.active = "active";
        }
      });
    },
    // 修改填报日期
    changeFillinDate(data) {
      console.log(data);
      this.fillinDate = data.value;
      this.fillinList.map((item) => {
        item.active = "";
        if (item.value === data.value) {
          item.active = "active";
        }
      });
      if (data.text === '自定义') {
        this.showFillinDate = true;
      }
    },
    // 修改验收日期
    changeAcceptanceDate(data) {
      console.log(data);
      this.acceptanceDate = data.value;
      this.acceptanceList.map((item) => {
        item.active = "";
        if (item.value === data.value) {
          item.active = "active";
        }
      });
      if (data.text === '自定义') {
        this.showAcceptanceDate = true;
      }
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 自定义填报日期
    onConfirmFillinDate(date) {
      this.fillinDateList = date;
      const [start, end] = date;
      this.showFillinDate = false;
      this.fillinDateText = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    // 自定义验收日期
    onConfirmAcceptanceDate(date) {
      this.acceptanceDateList = date;
      const [start, end] = date;
      this.showAcceptanceDate = false;
      this.acceptanceDateText = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    /**
     * 重置
     */
    reset() {
      this.sfghpjList.map((item, index) => {
        item.active = "";
        if (index === 0) {
          item.active = "active";
          this.isParts = item.value;
        }
      });
      this.fillinList.map((item, index) => {
        item.active = "";
        if (index === 0) {
          item.active = "active";
          this.fillinDate = item.value;
        }
      });
      this.acceptanceList.map((item, index) => {
        item.active = "";
        if (index === 0) {
          item.active = "active";
          this.acceptanceDate = item.value;
        }
      });
      this.$refs.fillinDate.reset();
      this.$refs.acceptanceDate.reset();
      this.fillinDateText = "";
      this.acceptanceDateText = "";
      this.fillinDateList = [];
      this.acceptanceDateList = [];
      this.getData();
      this.showPopup = false;
    },
    /**
     * 弹窗确认
     */
    confirm() {
      this.getData();
      this.showPopup = false;
    },
  },
  watch: {
    "$route.query.assetid": {
      handler(assetid) {
        if (assetid) {
          this.getInformationData();
        }
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>
<style lang='less' scoped>
.asset-detail {
  width: 100%;
  height: 100%;
  .asset-information {
    height: calc(100% - 46px);
    background: #f5f6f7;
    overflow-y: auto;
  }
  .other-tabs {
    height: calc(100% - 46px);
    /deep/ .van-tab__text {
      font-size: 16px;
    }

    /deep/ .van-tabs__wrap {
      height: 45px;
      border-bottom: 1px solid #eaeaea;
      .van-tabs__nav--line {
        box-sizing: content-box;
        height: 100%;
        width: 80%;
        margin: 0 auto;
      }
    }
    /deep/ .van-tabs__content {
      height: calc(100% - 45px);
      .van-tab__pane {
        background: #f5f6f7;
        height: 100%;
        overflow-y: auto;
      }
    }
  }

  // 筛选弹窗
  .m-popup-container {
    width: 80%;
    height: 100%;
    padding: 10px 15px;
    .m-popup {
      width: 100%;
      height: calc(100% - 80px);
      display: flex;
      flex-direction: column;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        margin-bottom: 15px;
      }
      // 专业
      .system {
        width: 100%;
        height: auto;
         .system-btn-container {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            flex-flow: wrap;
             // 专业系统按钮
            .system-btn {
                width: calc(50% - 4px) !important;
                min-width: calc(50% - 4px) !important;
                max-width: calc(50% - 4px) !important;
                height: 32px;
                margin-bottom: 8px;
                box-sizing: border-box;
                .m-btn {
                    width: 100%;
                    height: 32px !important;
                    text-align: center;
                    background: #eff0f1;
                    border-radius: 2px;
                }
            }
            .system-btn:not(:nth-child(2n)) {
                margin-right: 8px;
            }
        }
        .active {
          background-color: #025baa !important;
          color: #fff;
        }
      }
      // 电井类型
      .sbss {
        display: flex;
        flex-direction: column;
        overflow: auto;
        .title {
          width: 100%;
          height: 25px;
        }
        .system-btn-container {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            flex-flow: wrap;
            .system-btn {
                width: calc(33.333% - 5.34px) !important;
                min-width: calc(33.333% - 5.34px) !important;
                max-width: calc(33.333% - 5.34px) !important;
                height: 32px;
                margin-bottom: 8px;
                box-sizing: border-box;
                .m-btn {
                    width: 100%;
                    height: 32px !important;
                    text-align: center;
                    background: #eff0f1;
                    border-radius: 2px;
                    padding: 0 !important;
                }
            }
            .system-btn:not(:nth-child(3n)) {
                margin-right: 8px;
            }
            .self-btn {
                width: 100% !important;
                min-width: 100% !important;
                max-width: 100% !important;
                height: 50px;
                box-sizing: border-box;
                padding: 0;
                margin-right: 0;
                .m-btn {
                    width: 100%;
                    height: 32px !important;
                    text-align: center;
                    background: #eff0f1;
                    border-radius: 2px;
                    padding: 0 !important;
                }
            }
        }
        .active {
          background-color: #025baa !important;
          color: #fff;
        }
        .load-more {
          width: 80px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          margin: 0 auto;
          color: #025baa;
          background: #e5eef6;
        }
      }
      .divider {
        border-bottom: 1px solid #e6e6e6;
        margin: 20px 0;
      }
     .footer {
        position: absolute;
        bottom: 30px;
        right: 0;
        width: 100%;
        height: 35px;
        display: flex;
        justify-content: space-between;
        padding: 0 15px;
        .van-button {
            width: calc(50% - 7px) !important;
            min-width: calc(50% - 7px) !important;
            max-width: calc(50% - 7px) !important;
            height: 100%;
        }
        .van-button:first-child {
            margin-right: 14px;
        }
      }
    }
  }
}
</style>