

<template>
  <div class='equipment-page'>
    <!-- 搜索框 -->
    <div class='equipment-search-container'>
      <van-search class='equipment-search' v-model='keyword' placeholder='请输入事项类型' @search='onSearch' />
      <!-- TODO: 空状态 自定义图标 -->
      <!-- <template #action>
                <div class='search' @click='onSearch'>搜索</div>
                </template>-->
      <!-- </van-search> -->
    </div>
    <!-- 维保列表 -->
    <div class='equipment-list' v-if='list.length'>
      <!-- 维保 -->
      <div class='info-box' v-for="(data, index) in list" :key="data.workorderid || data.wonum + index" @click="handleClickDetail(data)">
        <div class="info-box-border">
          <h2 class="info-title">{{data.sbmc || '--'}}</h2>
          <div class='cell'>
            <span class='left'>设备内码：</span>
            <span class='right'>{{data.assetnum || '--'}}</span>
          </div>
          <div class='cell'>
            <span class='left'>事项类型：</span>
            <span class='right'>{{data.matters || '--'}}</span>
          </div>
          <div class='cell'>
            <span class='left'>{{'费\u3000\u3000用：'}}</span>
            <span class='right'>{{data.cost | formatCost}}</span>
          </div>
          <div class='cell'>
            <span class='left'>填报时间：</span>
            <span class='right'>{{data.reportdate | formatDate}}</span>
          </div>
          <div class='cell'>
            <span class='left'>验收时间：</span>
            <span class='right'>{{data.sjjssj | formatDate}}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 无数据 -->
    <van-empty class='m-empty' v-if='!list.length' description='暂无数据'>
      <template #image>
        <img class='no-data' src='../../assets/images/search_null.png' alt />
      </template>
    </van-empty>
  </div>
</template>
<script>
/**
 * 设备页面(正常/或者维修或维保)
 * 点击设备卡片,跳转到改页面
 *
 */
import Vue from 'vue'
import { Search, Popup, Button, Empty } from 'vant'
Vue.use(Search).use(Popup).use(Button).use(Empty)
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  props: {
    type: {
      type: String,
      default: 'maintenance', //默认维保
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      keyword: '',
    }
  },
  computed: {
    ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  },
  components: {},
  created() {

  },
  beforeMount() { },
  mounted() { },
  filters: {
    formatDate(value) {
      if (!value) return '--'
      return moment(value).format('YYYY-MM-DD HH:MM')
    },
    formatCost(value) {
      if (!value) return '--'
      return `${value} 万元`
    },
  },
  methods: {
    /**
     * 搜索
     */
    onSearch() {
      this.$emit("onSearch", this.keyword)
    },
    // 跳转详情页
    handleClickDetail(data) {
      data.type = this.type;
      this.$router.push({name: "MaintenanceRecordDetail", params: data});
    },
  },
}
</script>
<style lang='less' scoped>
.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: 80%;
      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-box {
      width: 100%;
      overflow: auto;
      padding: 0 16px;
      background-color: #ffffff;
      .info-box-border {
        padding: 16px 0;
        border-bottom: 1px solid #e6e6e6;
        .info-title {
          font-size: 16px;
          color: #333333;
        }
        .cell {
          width: 100%;
          min-height: 20px;
          margin-top: 8px;
          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;
      }
    }
  }
}
</style>