

<template>
  <div class='update-record-detail'>
    <van-nav-bar :title="`重要${detailData.type === 'maintenance'?'维修':'维保'}详情`" left-arrow @click-left='backPage' />
    <div class='info'>
      <!-- 维保 -->
      <div class='container-1'>
        <div class='cell'>
            <span class='left'>设备名称：</span>
            <span class='right'>{{detailData.sbmc || '--'}}</span>
          </div>
          <div class='cell'>
            <span class='left'>设备内码：</span>
            <span class='right'>{{detailData.assetnum || '--'}}</span>
          </div>
          <div class='cell'>
            <span class='left'>事项类型：</span>
            <span class='right'>{{detailData.matters || '--'}}</span>
          </div>
          <div class='cell'>
            <span class='left'>事项描述：</span>
            <span class='right'>{{detailData.description || '--'}}</span>
          </div>
          <div class='cell'>
            <span class='left'>填报时间：</span>
            <span class='right'>{{detailData.reportdate | formatDate}}</span>
          </div>
          <div class='cell'>
            <span class='left'>验收时间：</span>
            <span class='right'>{{detailData.sjjssj | formatDate}}</span>
          </div>
        <ul class='card' v-if="detailData.ismodel">
          <li class='title'>更换配件</li>
          <li class='name-model'>配件型号：{{detailData.model||'--'}}</li>
          <li class='cost'>费用出处：{{detailData.source ||'--'}}</li>
          <li class='num-amount'>
            <span>数量: {{detailData.sl || '--'}}个</span>
            <span>金额: {{detailData.cost ||'--'}}万元</span>
          </li>
        </ul>
        <div class='bottom'>
          <div class='photo' @click='showPhoto'>现场照片: {{imgList.length || '--'}}张</div>
          <div v-if="detailData.type === 'maintenance'" class='task-No' @click='showTaskInfo'>工单编号: {{detailData.wonum || '--'}}</div>
          <div v-else class='task-No' @click='showTaskInfo'>任务编号: {{detailData.wb_gzglid || '--'}}</div>
        </div>
      </div>
    </div>
    <!-- 现场照片预览 -->
    <ImagePreview class='update-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgList' />

    <!-- 任务信息 -->
    <div class='task-info-container' v-show='showTask'>
      <van-nav-bar :title="`${detailData.type === 'maintenance'?'工单':'任务'}信息`" left-arrow @click-left='showTask = false' />
      <ul class='task-info'>
        <li>
          <span class='name'>{{detailData.type === 'maintenance'?'工单':'任务'}}编号:</span>
          <span class='data'>{{detailData.wonum || detailData.wb_gzglid || '--'}}</span>
        </li>
        <li>
          <span class='name'>{{detailData.type === 'maintenance'?'工单':'任务'}}状态:</span>
          <span class='data'>{{detailData.status || '--'}}</span>
        </li>
        <li>
          <span class='name'>{{detailData.type === 'maintenance'?'工单':'任务'}}描述:</span>
          <span class='data'>{{detailData.description || '--'}}</span>
        </li>
        <li>
          <span class='name'>填报人:</span>
          <span class='data'>{{detailData.reportedby || '--'}}</span>
        </li>
        <li>
          <span class='name'>联系电话:</span>
          <span class='data'>{{detailData.contact || '--'}}</span>
        </li>
        <li>
          <span class='name'>填报时间:</span>
          <span class='data'>{{detailData.reportdate | formatDate}}</span>
        </li>
        <li>
          <span class='name'>验收时间:</span>
          <span class='data'>{{detailData.sjjssj | formatDate}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
/**
 * 说明书更新记录详情页面
 */
import Vue from 'vue'
import { NavBar } from 'vant'
Vue.use(NavBar)
import ImagePreview from '@/components/ImagePreview'
import moment from 'moment'
export default {
  name: 'MaintenanceRecordDetail',
  props: {},
  components: { ImagePreview },
  filters: {
    formatDate(value) {
      if (!value) return '--'
      return moment(value).format('YYYY-MM-DD HH:MM')
    },
  },
  data() {
    return {
      detailData: {},
      showTask: false, //是否展示工单/任务信息 页面
      showImgPreview: false, //是否展示图片预览
      imgList: [], //图片数组
      imgKey: `img${new Date().getTime()}`,
    }
  },
  computed: {

  },
  created() {
    this.getData()
  },
  methods: {
    /**
     * 查询页面需要的详情信息
     */
    getData() {
      this.detailData = this.$route.params;
      // 图片处理
      this.imgList = []
      if (this.detailData?.glsmsImage?.length) {
        this.detailData.glsmsImage.map((item) => {
          this.imgList.push(item.url)
        })
      }
    },
    // 返回上一个页面(项目概况)
    backPage() {
      this.$router.go(-1)
    },
    // 点击任务编号,显示任务信息
    showTaskInfo() {
      let data = this.data
      console.log(data)
      // 维保有任务编号, 或者维修有工单编号, 显示
      if (this.type === 1) {
        this.taskText = '任务'
        // 维保
        this.taskData = {
          No: data.wb_gzglid || '--', //任务编号
          status: data.status || '--', //状态
          description: data.description || '--', //描述
          reporter: data.reportedby || '--', //填报人
          phone: data.contact || '--', //联系电话
          reportDate: data.reportdate ? moment(data.reportdate).format('YYYY-MM-DD') : '--', //填报时间
          acceptanceDate: data.sjjssj ? moment(data.sjjssj).format('YYYY-MM-DD') : '--', //验收时间
        }
      } else if (this.type === 4) {
        this.taskText = '工单'
        // 维修
        this.taskData = {
          No: data.wonum || '--', //工单编号
          status: data.status || '--', //状态
          description: data.description || '--', //描述
          reporter: data.reportedby || '--', //填报人
          phone: data.contact || '--', //联系电话
          reportDate: data.reportdate ? moment(data.reportdate).format('YYYY-MM-DD') : '--', //填报时间
          acceptanceDate: data.sjjssj ? moment(data.sjjssj).format('YYYY-MM-DD') : '--', //验收时间
        }
      }
      if (this.detailData.wb_gzglid || this.detailData.wonum) {
        this.showTask = true
      }
    },
    // 显示图片预览弹窗
    showPhoto() {
      this.imgKey = `img${new Date().getTime()}`
      this.$nextTick(() => {
        if (this.imgList?.length) {
          this.showImgPreview = true
        }
      })
    },
  },
}
</script>
<style lang='less' scoped>
.update-record-detail {
  width: 100%;
  height: 100%;
  // 下拉菜单
  /deep/.van-dropdown-menu__item {
    justify-content: flex-start !important;
    padding-left: 8px;
  }
  // 主体内容
  .info {
    width: 100%;
    height: calc(100% - 50px);
    // padding: 15px;
    overflow: auto;
    .container-1 {
      padding: 16px;
      background-color: #fff;
    }
    // 维修/维保
    .container-1 {
      .cell {
          width: 100%;
          min-height: 20px;
          margin-bottom: 8px;
          display: flex;
          .left {
            width: 75px;
            color: #666;
            font-size: 14px;
          }
          .right {
            flex: 1;
            color: #333;
            font-size: 14px;
          }
        }
      .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;
      }
    }
  }
  // 全屏的任务信息
  .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>