<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 v-if="active == 1 || active == 2">
        <i class='iconfont wanda-scan'></i>
      </template>
    </van-nav-bar>

    <van-tabs v-model='active' class='other-tabs' color='#025BAA' @change='changeTab' title-active-color='#025BAA'
      :line-width='60'>
      <van-tab title='设备信息'>
        <Information />
      </van-tab>
      <van-tab title='重要维保'>
        <RepairMaintenance ref="maintenance" type="maintenance" :list="maintenanceData" @onSearch="getData" />
      </van-tab>
      <van-tab 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' v-for='(item,index) in fillinList' :key='index'>
              <van-button class='m-btn' :class='item.active' @click='changeFillinDate(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' v-for='(item,index) in acceptanceList' :key='index'>
              <van-button class='m-btn' :class='item.active' @click='changeAcceptanceDate(item)'>{{item.text}}</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>
  </div>
</template>
<script>
/**
 * 设备详情
 */
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { NavBar, Tab, Tabs, Popup, Button } from 'vant'
import Information from "@/components/assetDetail/Information.vue"
import RepairMaintenance from "@/components/assetDetail/RepairMaintenance.vue"
Vue.use(NavBar).use(Tab).use(Tabs).use(Popup).use(Button)
export default {
  name: 'AssetDetail',
  props: {},
  components: { Information, RepairMaintenance },
  computed: {
    ...mapGetters(['plazaId', 'fmapID', 'haveFengMap', 'bunkObj', 'floorsArr', 'categoryId']),
  },
  data() {
    return {
      active: 0,
      showPopup: false,
      maintenanceData: [
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845366, "glsmsImage": [{ "url": "http://gcgl.wanda.cn/MANAGEINS/2020072518004348646401068094B1辅助用房.png" }] },
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845367 },
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845368 },
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845369 },
      ],
      repairData: [
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845356 },
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845357 },
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845358 },
        { "ismodel": 1, "cost": "3.61", "reportdate": 1595337252000, "description": "维修更换梯级链条", "source": "维保费", "gname": "f1", "sbmc": "自动扶梯-E7", "smsxt": "1006", "workorderid": 5106343, "sjjssj": 1595337479000, "matters": "≥500元的配件更换（重点：扶手带、电机、主传动链条、梯级、控制版、轿厢门、限速器、钢丝绳）", "assetnum": "8976", "sl": 2, "siteid": "1000423", "model": "维修更换梯级链条", "wb_gzglid": 2845359, "glsmsImage": [{ "url": "http://gcgl.wanda.cn/MANAGEINS/2020072518004348646401068094B1辅助用房.png" }] },
      ],
      sfghpjList: [
        { text: '是', value: true, active: 'active' },
        { text: '否', smsxt: false, active: '' },
      ],
      fillinList: [
        { text: '全部', value: '', active: 'active' },
        { text: '7天', value: '1001', active: '' },
        { text: '15天', value: '1002', active: '' },
        { text: '30天', value: '1003', active: '' },
        { text: '6个月', value: '1004', active: '' },
        { text: '1年', value: '1005', active: '' }
      ],
      acceptanceList: [
        { text: '全部', value: '', active: 'active' },
        { text: '7天', value: '1001', active: '' },
        { text: '15天', value: '1002', active: '' },
        { text: '30天', value: '1003', active: '' },
        { text: '6个月', value: '1004', active: '' },
        { text: '1年', value: '1005', active: '' }
      ],
      isParts: true,
      fillinDate: '',
      acceptanceDate: ''
    }
  },
  props: {},
  beforeMount() { },
  mounted() {

  },
  methods: {
    backPage() {
      this.$router.go(-1)
    },
    /**
     * 点击右侧筛选
     */
    handleRightClick() {
      this.showPopup = true
    },
    changeTab(active) {
      console.log(this.active)
    },
    // 查询设备信息/维修/维保数据
    getData() {
      let data = {}
      if (this.active === 0) {//设备信息
        this.getInformationData();
      } else if (this.active === 1) {//维保
        this.getMaintenanceData();
      } else if (this.active === 2) {//维修
        this.getRepairData();
      }
    },
    // 查询设备信息数据
    getInformationData() {
      console.log("查询设备信息数据")
    },
    // 查询维保数据
    getMaintenanceData() {
      console.log("查询维保数据")
    },
    // 查询维修数据
    getRepairData() {
      console.log("查询维修数据")
    },
    // 修改是否更换配件
    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'
        }
      })
    },
    // 修改验收日期
    changeAcceptanceDate(data) {
      console.log(data)
      this.acceptanceDate = data.value;
      this.acceptanceList.map((item) => {
        item.active = ''
        if (item.value === data.value) {
          item.active = 'active'
        }
      })
    },
    /**
     * 重置
     */
    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.getData();
      this.showPopup = false;
    },
    /**
     * 弹窗确认
     */
    confirm() {
      this.getData();
      this.showPopup = false;
    },
  },
  watch: {

  },
}
</script>
<style lang='less' scoped>
.asset-detail {
  width: 100%;
  height: 100%;
  .other-tabs {
    height: calc(100% - 46px);
    /deep/ .van-tab__text {
      font-size: 16px;
    }
    /deep/ .van-tabs__wrap {
      height: 45px;
    }
    /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: 55px 20px 10px 20px;
    .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: 50% !important;
            min-width: 50% !important;
            max-width: 50% !important;
            height: 40px;
            box-sizing: border-box;
            padding: 10px 10px 10px 0;
            .m-btn {
              width: 100%;
              height: 32px !important;
              text-align: center;
              background: #eff0f1;
              border-radius: 2px;
            }
          }
        }
        .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: 33% !important;
            min-width: 33% !important;
            max-width: 33% !important;
            height: 50px;
            box-sizing: border-box;
            padding: 5px 10px 5px 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-around;
        .van-button {
          width: 40%;
          height: 100%;
          max-width: 40%;
          min-width: 40%;
        }
      }
    }
  }
}
</style>