<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>
    <div class="asset-information">
      <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">
            <div class='equipment' v-for='(item,index) in dataList' :key='index'>
              <p class='title'>{{item.jlsx}}</p>
              <div class='equipment-item'>
                <div class='label'>内容：</div>
                <div class='value'>{{item.content || '--'}}</div>
              </div>
              <div class='equipment-item'>
                <div class='label'>资料存放位置：</div>
                <div class='value'>{{item.zlwfwz || '--'}}</div>
              </div>
              <div class='assetnum-attribution'>
                <div class='assetnum'>
                  <div class='label'>数量：</div>
                  <div class='value'>{{item.sl?`${item.sl}个`:'--'}}</div>
                </div>
                <div class='attribution'>
                  <div class='label'>金额：</div>
                  <div class='value'>{{item.zfje?`${item.zfje}万元`:'--'}}</div>
                </div>
              </div>
              <div class='equipment-item'>
                <div class='label'>处理日期：</div>
                <div class='value'>{{item.handledate | formatDate}}</div>
              </div>
              <div class='equipment-item'>
                <div class='label'>记录日期：</div>
                <div class='value'>{{item.createdate | formatDate}}</div>
              </div>
              <div class='floor-status'>
                <div class='floor'>
                  <div class='label'>
                    <i class='iconfont wanda-dingwei1' style='color:#C3C7CB;'></i>
                    <span>位置：</span>
                  </div>
                  <div class='value'>{{item.description || '--'}}</div>
                </div>
                <!-- <div class='status run' v-if='item.sb_status === "运行"'>运行</div>
                <div class='status wx' v-else-if='item.sb_status === "维修"'>维修</div>
                <div class='status wb' v-else-if='item.sb_status === "维保"'>维保</div> -->
              </div>
              <div class='divider'></div>
            </div>
          </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" :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==='自定义' && handleDate)?'('+handleDate+')':''}` }}</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==='自定义' && createDate)?'('+createDate+')':''}` }}</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>
    <van-calendar ref="handleDate" color="#025baa" v-model="showHandleDate" :min-date="minDate" type="range"
      @confirm="onConfirmHandleDate" />
    <van-calendar ref="createDate" color="#025baa" v-model="showCreateDate" :min-date="minDate" type="range"
      @confirm="onConfirmCreateDate" />
  </div>
</template>
<script>
/**
 * 其他事项
 */
import Vue from "vue";
import { mapGetters } from "vuex";
import { NavBar, Tab, Tabs, Popup, Button, Toast, List, Cell, Calendar } from "vant";
import RepairMaintenance from "@/components/equipmentFacilities/RepairMaintenance.vue";
import { getUpdateDetail5 } from "@/api/overview";
import moment from "moment";
Vue.use(NavBar).use(Tab).use(Tabs).use(Popup).use(Button).use(Toast).use(List).use(Cell).use(Calendar);
export default {
  name: "OtherMatters",
  props: {},
  components: { RepairMaintenance },
  computed: {
    ...mapGetters(["plazaId", "smsxt", "floorsArr"]),
  },
  filters: {
    formatDate(value) {
      if (!value) return '--'
      return moment(value).format('YYYY-MM-DD HH:MM')
    },
  },
  data() {
    return {
      showPopup: false,
      dataList: [],
      keyword: "",
      loading: false,
      finished: false,
      page: 1, //当前页码
      size: 10, //每页条数
      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),
      fillinDate: 0,
      acceptanceDate: 0,
      showHandleDate: false,
      showCreateDate: false,
      handleDate: "",
      createDate: "",
      handleDateList: [],
      createDateList: [],
    };
  },
  props: {},
  beforeMount() { },
  created() { },
  mounted() {
    this.getData();
  },
  methods: {
    backPage() {
      if (this.$route.query.first) {
        this.$router.push({ path: "/" });
      } else {
        this.$router.go(-1);
      }
    },
    /**
     * 点击右侧筛选
     */
    handleRightClick() {
      this.showPopup = true;
    },
    // 处理getParams参数
    handleGetParams() {
      let getParams = {
        plazaId: this.plazaId,
        smsxt: this.smsxt,
        page: this.page,
        size: this.size,
      }
      // 查询关键字(记录事项位置内容)
      if (this.keyword) {
        getParams.keyword = `${this.keyword}:jlsx,location,content`;
      }
      //处理日期
      switch (this.fillinDate) {
        // 15天
        case 1:
          getParams.handledateStartDate = moment().subtract(15, "days").format("YYYYMMDD000000");
          getParams.handledateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 30天
        case 2:
          getParams.handledateStartDate = moment().subtract(30, "days").format("YYYYMMDD000000");
          getParams.handledateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 3个月
        case 3:
          getParams.handledateStartDate = moment().subtract(3, "months").format("YYYYMMDD000000");
          getParams.handledateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 6个月
        case 4:
          getParams.handledateStartDate = moment().subtract(3, "months").format("YYYYMMDD000000");
          getParams.handledateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 一年
        case 5:
          getParams.handledateStartDate = moment().subtract(1, "years").format("YYYYMMDD000000");
          getParams.handledateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 自定义
        case 6:
          const [start, end] = this.handleDateList;
          if (start && end) {
            getParams.handledateStartDate = moment(start.getTime()).format('YYYYMMDD000000');
            getParams.handledateEndDate = moment(end.getTime()).format('YYYYMMDD000000');
          }
          break;
        // 默认 全部
        default:
          break;
      }
      //记录日期
      switch (this.acceptanceDate) {
        // 15天
        case 1:
          getParams.createdateStartDate = moment().subtract(15, "days").format("YYYYMMDD000000");
          getParams.createdateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 30天
        case 2:
          getParams.createdateStartDate = moment().subtract(30, "days").format("YYYYMMDD000000");
          getParams.createdateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 3个月
        case 3:
          getParams.createdateStartDate = moment().subtract(3, "months").format("YYYYMMDD000000");
          getParams.createdateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 6个月
        case 4:
          getParams.createdateStartDate = moment().subtract(6, "months").format("YYYYMMDD000000");
          getParams.createdateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 一年
        case 5:
          getParams.createdateStartDate = moment().subtract(1, "years").format("YYYYMMDD000000");
          getParams.createdateEndDate = moment().format("YYYYMMDD000000");
          break;
        // 一年
        case 6:
          const [start, end] = this.createDateList;
          if (start && end) {
            getParams.createdateStartDate = moment(start.getTime()).format('YYYYMMDD000000');
            getParams.createdateEndDate = moment(end.getTime()).format('YYYYMMDD000000');
          }
          break;
        // 默认 全部
        default:
          break;
      }
      return getParams
    },
    // 查询主要设备清单
    getData() {
      this.page = 1;
      this.dataList = [];
      this.finished = false;
      let getParams = this.handleGetParams();
      getUpdateDetail5({ getParams }).then((res) => {
        if (res.result == "success" && res.data) {
          this.dataList = res.data;
        }
        // 数据全部加载完成
        if (this.dataList.length >= res.count) {
          this.finished = true;
        }
      });
    },
    onLoad() {
      // 异步更新数据
      this.page++;
      let getParams = this.handleGetParams();
      getUpdateDetail5({ getParams }).then((res) => {
        if (res.result == "success" && res.data) {
          this.dataList = this.dataList.concat(res.data);
        }

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

        // 数据全部加载完成
        if (this.dataList.length >= res.count) {
          this.finished = true;
        }
      });
    },
    // 修改处理日期
    changeFillinDate(data) {
      this.fillinDate = data.value;
      this.fillinList.map((item) => {
        item.active = "";
        if (item.value === data.value) {
          item.active = "active";
        }
      });
      if (data.text === '自定义') {
        this.showHandleDate = true;
      }
    },
    // 修改记录日期
    changeAcceptanceDate(data) {
      this.acceptanceDate = data.value;
      this.acceptanceList.map((item) => {
        item.active = "";
        if (item.value === data.value) {
          item.active = "active";
        }
      });
      if (data.text === '自定义') {
        this.showCreateDate = true;
      }
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    // 自定义处理日期
    onConfirmHandleDate(date) {
      this.handleDateList = date;
      const [start, end] = date;
      this.showHandleDate = false;
      this.handleDate = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    // 自定义记录日期
    onConfirmCreateDate(date) {
      this.createDateList = date;
      const [start, end] = date;
      this.showCreateDate = false;
      this.createDate = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    /**
     * 重置
     */
    reset() {
      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.handleDate.reset();
      this.$refs.createDate.reset();
      this.handleDate = "";
      this.createDate = "";
      this.createDateList = [];
      this.handleDateList = [];
      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% - 46px);
    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;
        background-color: #ffffff;
        .equipment {
          width: 100%;
          position: relative;
          padding: 16px 10px 0;
          .title {
            // height: 44px;
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            margin-bottom: 12px;
          }
          .assetnum-attribution {
            margin-bottom: 8px;
            display: flex;
            width: 100%;
            height: 20px;
            line-height: 20px;
            justify-content: space-between;
            .assetnum,
            .attribution {
              display: flex;
            }
          }
          .equipment-item {
            display: flex;
            margin-bottom: 8px;
            width: 100%;
            line-height: 20px;
          }
          .floor-status {
            margin: 12px 0 16px;
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 20px;
            line-height: 20px;
            .floor {
              display: flex;
              height: 20px;
              line-height: 20px;
              .label {
                display: flex;
                align-items: center;
                span {
                  display: inline-block;
                  margin-left: 5px;
                }
              }
            }
            .status {
              background: #d9f5d6;
              width: 44px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              font-size: 14px;
              font-weight: 400;
            }
            .run {
              background: #d9f5d6;
              color: #237b19;
            }
            // 维修
            .wx {
              background: #fbeceb;
              color: #d83931;
            }
            // 维保
            .wb {
              background: #e6f3fc;
              color: #0481e1;
            }
          }
          .label {
            color: #666;
            font-size: 14px;
          }
          .value {
            flex: 1;
            color: #333;
            font-size: 14px;
          }
          // 底部1px边框
          .divider {
            width: 100%;
            height: 1px;
            margin: 0 auto;
            background: #e6e6e6;
          }
        }
      }
      // 空状态
      .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;
          }
        }
      }
    }
  }

  .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;
            }
            .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;
        }
      }
      // 电井类型
      .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>