<template>
  <div class="asset-detail">
    <van-nav-bar
      title="主要设备清单"
      @click-left="backPage"
      @click-right="handleRightClick"
    >
      <template #left>
        <van-icon name="arrow-left" size="18" color="#333333" />
      </template>
      <template #right>
        <i class="iconfont wanda-scan"></i>
      </template>
    </van-nav-bar>
    <van-tabs
      v-if="tabData && tabData.length > 1"
      v-model="active"
      class="other-tabs"
      color="#025BAA"
      @change="changeTab"
      title-active-color="#025BAA"
      :line-width="60"
    >
      <van-tab v-for="item in tabData" :title="item.label" :name="item.param.tab_code" :key="item.param.tab_code"> </van-tab>
    </van-tabs>
    <div class="asset-information" :class="tabData && tabData.length > 1?'asset-tab':'asset-no-tab'">
      <div class="equipment-page">
        <!-- 搜索框 -->
        <div class="equipment-search-container">
          <van-search
            class="equipment-search"
            v-model="keyword"
            placeholder="请输入设备名称"
            @search="getData"
          />
        </div>
        <div class="equipment-list" v-if="dataList.length">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell v-for="(data, index) in dataList" :key="index" @click="handleClickToDetail(data)">
              <template>
                <h2 class="info-title">
                  {{ `${data.type_name} （${data.sl}）` }}
                  <span v-if="data.is_exception" class="info-card wx">维修</span>
                  <span v-else-if="data.is_detecting" class="info-card wb">维保</span>
                </h2>
                <div class="cell">
                  <span class="left">{{ "型\u3000\u3000号：" }}</span>
                  <span class="right">{{ data.sbxh || "--" }}</span>
                </div>
                <div class="cell">
                  <span class="left">{{ "品\u3000\u3000牌：" }}</span>
                  <span class="right">{{ data.brand || "--" }}</span>
                </div>
                <div class="cell">
                  <span class="left">{{ "生产厂商：" }}</span>
                  <span class="right">{{ data.manufacturer || "--" }}</span>
                </div>
                <div class="cell">
                  <span class="left"><i class="iconfont wanda-dingwei" style="font-size: 14px;color: #C3C7CB;"></i> {{ "楼 层：" }}</span>
                  <span class="right">{{ data.floorcode || "--" }}</span>
                </div>
                <div style="padding-bottom:4px;"></div>
              </template>
            </van-cell>
          </van-list>
        </div>
        <!-- 无数据 -->
        <van-empty
          class="m-empty"
          v-if="!dataList.length"
          description="暂无数据"
        >
          <template #image>
            <img
              class="no-data"
              src="../../assets/images/search_null.png"
              alt
            />
          </template>
        </van-empty>
      </div>
    </div>

    <!-- 点击头部筛选,出现的右侧弹窗 -->
    <van-popup class="m-popup-container" v-model="showPopup" position="right">
      <div class="m-popup">
        <!-- 楼层 -->
        <div class="sbss">
          <h1 class="title">楼层</h1>
          <div class="system-btn-container">
            <div class="system-btn" v-for="(item, index) in floorList" :key="index">
              <van-button class="m-btn" :class="item.active" @click="changeFloor(item)">{{ item.code }}</van-button>
            </div>
          </div>
        </div>
        <!-- <div class="divider"></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>
  </div>
</template>
<script>
/**
 * 主要设备清单
 */
import Vue from "vue";
import { mapGetters } from "vuex";
import { NavBar, Tab, Tabs, Popup, Button, Toast, List, Cell } from "vant";
import RepairMaintenance from "@/components/equipmentFacilities/RepairMaintenance.vue";
import { queryStatistics } from "@/api/equipmentList.js";
import { tabCodeArr } from "@/utils/components.js"
import moment from "moment";
Vue.use(NavBar)
  .use(Tab)
  .use(Tabs)
  .use(Popup)
  .use(Button)
  .use(Toast)
  .use(List)
  .use(Cell);
export default {
  name: "MainEquipment",
  props: {},
  components: { RepairMaintenance },
  computed: {
    ...mapGetters(["plazaId", "smsxt", "floorsArr"]),
    tabData() {
      let arr = tabCodeArr[this.smsxt]
      if (arr && arr.length === 1) {
        this.tab_code = arr[0].tab_code;
      } else if (arr && arr.length > 1) {
        this.tab_code = arr[0].param.tab_code;
      } else {
        this.tab_code = "";
      }
      return arr
    }
  },
  data() {
    return {
      active: 0,
      tab_code: "",
      showPopup: false,
      dataList: [],
      keyword: "",
      floorId: "",
      floorList: [],
      loading: false,
      finished: false,
      fillinDate: 0,
      page: 1, //当前页码
      size: 10, //每页条数
    };
  },
  props: {},
  beforeMount() {},
  created() {
    // 设置 筛选抽屉中的 楼层
    let floorList = [{ code: '全部', gcname: '全部', gcode: '全部', gname: '', seq: null, active: 'active' }]
    this.floorsArr.map(({ code, gcname, gcode, gname, seq }) => {
        floorList.push({ code, gcname, gcode, gname, seq, active: '' })
    })
    this.floorList = floorList;
    this.getData();
  },
  activated() {
    if (this.$route.params.isInit) {
      this.initData();
    }
  },
  methods: {
    backPage() {
      if (this.$route.query.first) {
        this.$router.push({ path: "/" });
      } else {
        this.$router.go(-1);
      }
    },
    // 初始化
    initData() {
      this.active = 0;
      this.keyword = "";
      this.floorList.map((item, index) => {
          item.active = ''
          if (index === 0) {
              item.active = 'active';
              this.floorId = "";
          }
      })
      this.getData();
    },
    // 切换tab
    changeTab(active) {
      this.tab_code = active;
      this.getData();
    },
    /**
     * 点击右侧筛选
     */
    handleRightClick() {
      this.showPopup = true;
    },
    // 查询主要设备清单
    getData() {
      this.page = 1;
      this.dataList = [];
      this.finished = false;
      let data = {
          plazaId: this.plazaId,
          onlyMainAsset: true,
          page: this.page,
          size: this.size,
          orderBy: 'is_exception,0;is_detecting,0;',
        },
        postParams = {};
      // tab_code
      if (this.tab_code) {
        postParams.tab_code = this.tab_code
      }
      // 查询关键字(设备名称)
      if (this.keyword) {
        data.keyword = `${this.keyword}:type_name`;
      }
      // 选择楼层
      if (this.floorId) {
        postParams.gname = this.floorId;
      }
      queryStatistics({ data, postParams }).then((res) => {
        if (res.data.result == "success" && res.data.data) {
          this.dataList = res.data.data;
        }
        // 数据全部加载完成
        if (this.dataList.length >= res.data.count) {
          this.finished = true;
        }
      });
    },
    onLoad() {
      // 异步更新数据
      this.page++;
      let data = {
          plazaId: this.plazaId,
          onlyMainAsset: true,
          page: this.page,
          size: this.size,
          orderBy: 'is_exception,0;is_detecting,0;',
        },
        postParams = {};
      // tab_code
      if (this.tab_code) {
        postParams.tab_code = this.tab_code
      }
      //查询关键字(设备名称)
      if (this.keyword) {
        data.keyword = `${this.keyword}:type_name`;
      }
      // 选择楼层
      if (this.floorId) {
        postParams.gname = this.floorId;
      }
      queryStatistics({ data, postParams }).then((res) => {
        if (res.data.result == "success" && res.data.data) {
          this.dataList = this.dataList.concat(res.data.data);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.dataList.length >= res.data.count) {
          this.finished = true;
        }
      });
    },
    // 点击卡片跳转
    handleClickToDetail(data) {
      this.$router.push({ name: "MainEquipmentDetail", params: { ...data, initPage: true }});
    },
    // 修改楼层
    changeFloor(data) {
      this.floorId = data.gname;
      this.floorList.map((item) => {
          item.active = ''
          if (item.gname === data.gname) {
              item.active = 'active'
          }
      })
    },
    /**
     * 重置
     */
    reset() {
      this.floorList.map((item, index) => {
          item.active = ''
          if (index === 0) {
              item.active = 'active';
              this.floorId = "";
          }
      })
      this.getData();
      this.showPopup = false;
    },
    /**
     * 弹窗确认
     */
    confirm() {
      this.getData();
      this.showPopup = false;
    },
  }
};
</script>
<style lang='less' scoped>
.asset-detail {
  width: 100%;
  height: 100%;

  .asset-information {
    height: calc(100% - 90px);
    background: #f5f6f7;
    overflow-y: auto;
    .equipment-page {
      width: 100%;
      height: 100%;
      background-color: #f5f6f7;
      // 搜索
      .equipment-search-container {
        width: 100%;
        height: 55px;
        // background-color: #fff;
        text-align: center;
        .equipment-search {
          width: 100%;
          padding-left: 15px;
          padding-right: 15px;
          margin: 0 auto;
          background: none;
        }
        .van-search__content {
          background: #fff;
          border-radius: 50px;
        }
      }
      // 主要维保
      .equipment-list {
        width: 100%;
        min-height: 1px;
        max-height: calc(100% - 55px);
        overflow: auto;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        .info-title {
          font-size: 16px;
          margin-top: 2px;
          color: #333333;
          .info-card {
            float: right;
            padding: 0 8px;
            font-size: 14px;
            font-weight: normal;
          }
          .wx {
            color:  rgba(216, 57, 49, 1);
            background-color: rgba(216, 57, 49, 0.09);
          }
          .wb {
            color: rgba(4, 129, 225, 1);
            background-color: rgba(4, 129, 225, 0.09);
          }
        }
        .cell {
          width: 100%;
          min-height: 20px;
          margin-top: 4px;
          display: flex;
          .left {
            width: 75px;
            color: #666;
            font-size: 14px;
          }
          .right {
            flex: 1;
            color: #333;
            font-size: 14px;
          }
        }
      }
      // 空状态
      .m-empty {
        // position: fixed;
        // top: 0;
        // left: 0;
        // width: 100%;
        // height: 100%;
        display: flex;
        align-items: center;
        /deep/ .van-empty__image {
          display: flex;
          justify-content: center;
          align-items: flex-end;
          img {
            width: auto;
            height: auto;
          }
        }
      }
    }
  }
  .asset-tab {
    height: calc(100% - 90px);
  }
  .asset-no-tab {
    height: calc(100% - 46px);
  }

  .other-tabs {
    /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: 90%;
        margin: 0 auto;
      }
    }
  }

  // 筛选弹窗
  .m-popup-container {
    width: 80%;
    height: 100%;
    padding: 10px 15px;
    .m-popup {
      width: 100%;
      height: calc(100% - 81px);
      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(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;
            }
        }
        .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;
            }
        }
        .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>