

<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='container-1' v-for="data in list" :key="data.wb_gzglid">
        <div class='date'>
          <div class='report-date'>
            <span>填报日期：</span>
            <span>{{data.reportdate | formatDate}}</span>
          </div>
          <div class='acceptance-date'>
            <span>验收日期：</span>
            <span>{{data.sjjssj | formatDate}}</span>
          </div>
        </div>
        <div class='detail'>{{data.matters || '--'}}</div>
        <ul class='card'>
          <!-- <li class='title'>更换配件</li> -->
          <li class='title'>{{data.description || '--'}}</li>
          <li class='name-model'>配件名称型号：{{data.model||'--'}}</li>
          <!-- <li class='cost'>费用出处：重点设备维修保养资金</li> -->
          <li class='cost'>费用出处：{{data.source ||'--'}}</li>
          <li class='num-amount'>
            <span>数量: {{data.sl || '--'}}个</span>
            <span>金额: {{data.cost ||'--'}}万元</span>
          </li>
        </ul>
        <div class='bottom'>
          <div class='photo' @click='showPhoto(data)'>现场照片: {{data.glsmsImage?data.glsmsImage.length:'--'}}张</div>
          <div class='task-No' @click='showTaskInfo(data)'>任务编号: {{data.wb_gzglid || '--'}}</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>

    <!-- 现场照片预览 -->
    <ImagePreview class='update-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />

    <!-- 任务信息 -->
    <div class='task-info-container' v-show='showTask'>
      <van-nav-bar :title='taskText+"信息"' left-arrow @click-left='showTask = false' />
      <ul class='task-info'>
        <li>
          <span class='name'>{{taskText}}编号:</span>
          <span class='data'>{{taskData.No}}</span>
        </li>
        <li>
          <span class='name'>{{taskText}}状态:</span>
          <span class='data'>{{taskData.status}}</span>
        </li>
        <li>
          <span class='name'>{{taskText}}描述:</span>
          <span class='data'>{{taskData.description}}</span>
        </li>
        <li>
          <span class='name'>填报人:</span>
          <span class='data'>{{taskData.reporter}}</span>
        </li>
        <li>
          <span class='name'>联系电话:</span>
          <span class='data'>{{taskData.phone}}</span>
        </li>
        <li>
          <span class='name'>填报时间:</span>
          <span class='data'>{{taskData.reportDate | formatDate}}</span>
        </li>
        <li>
          <span class='name'>验收时间:</span>
          <span class='data'>{{taskData.acceptanceDate | formatDate}}</span>
        </li>
      </ul>
    </div>
  </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 ImagePreview from '@/components/ImagePreview'
import moment from 'moment'
export default {
  name: 'RepairMaintenance',
  props: {
    type: {
      type: String,
      default: 'maintenance', //默认维保
    },
    list: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      keyword: '',
      showTask: false, //是否展示工单/任务信息 页面
      showImgPreview: false, //是否展示图片预览
      imgList: [], //图片数组
      imgKey: `img${new Date().getTime()}`,
      taskText: '', //工单,任务信息 页面title
      taskData: {
        No: '--',
        status: '--',
        description: '--',
        reporter: '--',
        phone: '--',
        reportDate: '--',
        acceptanceDate: '--',
      },
    }
  },
  computed: {
    ...mapGetters(['plazaId', 'smsxt', 'categoryId']),
  },
  components: { ImagePreview },
  created() {

  },
  beforeMount() { },
  mounted() { },
  filters: {
    formatDate(value) {
      if (!value) return '--'
      return moment(value).format('YYYY-MM-DD')
    }
  },
  methods: {
    /**
     * 搜索
     */
    onSearch() {
      this.$emit("onSearch", this.keyword)
    },
    // 点击任务编号,显示任务信息
    showTaskInfo(data) {
      if (this.type === "maintenance") {
        this.taskText = '任务'
      } else {
        this.taskText = '工单'
      }
      // 维保
      this.taskData = {
        No: data.wb_gzglid || '--', //任务编号
        status: data.status || '--', //状态
        description: data.description || '--', //描述
        reporter: data.reportedby || '--', //填报人
        phone: data.phone || '--', //联系电话    // TODO: 联系电话
        reportDate: data.reportdate, //填报时间
        acceptanceDate: data.sjjssj, //验收时间
      }
      if (data.wb_gzglid || data.wonum) {
        this.showTask = true
      }
    },
    // 显示图片预览弹窗
    showPhoto(data) {
      // 图片处理
      this.imgList = []
      if (data?.glsmsImage?.length) {
        data.glsmsImage.map((item) => {
          this.imgList.push(item.url)
        })
      }
      this.imgKey = `img${new Date().getTime()}`
      this.$nextTick(() => {
        if (this.imgList?.length) {
          this.showImgPreview = true
        }
      })
    },
  },
}
</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;
    .container-1 {
      padding: 15px;
      margin-bottom: 10px;
      background-color: #fff;
    }
    // 维修/维保
    .container-1 {
      .date {
        width: 100%;
        height: 17px;
        display: flex;
        justify-content: space-between;
        margin: 5px 0 10px 0;
        font-size: 12px;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
      }
      .detail {
        width: 100%;
        height: auto;
        margin: 10px 0;
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
      }
      .card {
        width: 100%;
        height: auto;
        padding: 8px 16px;
        background: #eff0f1;
        border-radius: 4px;
        color: #666666;
        font-size: 14px;
        .title {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: #333333;
          line-height: 20px;
          margin-bottom: 8px;
        }
        .name-model,
        .cost,
        .num-amount {
          margin-top: 4px;
        }
        .num-amount {
          display: flex;
          justify-content: space-between;
        }
      }
      .bottom {
        width: 100%;
        height: 17px;
        display: flex;
        justify-content: space-between;
        margin: 5px 0 10px 0;
        color: #025baa;
        line-height: 17px;
        font-size: 14px;
        font-weight: 400;
        color: #025baa;
        margin-top: 20px;
      }
    }
  }
  // 空状态
  .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;
      }
    }
  }
  // 全屏的任务信息
  .task-info-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    .task-info {
      width: 100%;
      padding: 15px;
      li {
        display: flex;
        justify-content: flex-start;
        line-height: 20px;
        font-size: 14px;
        margin-bottom: 12px;
        .name {
          color: #666666;
          width: 70px;
          height: auto;
        }
        .data {
          flex: 1;
          height: auto;
          color: #333333;
        }
      }
    }
  }
}
</style>