<!--
 * @Author: gtz
 * @Date: 2022-07-28 10:22:30
 * @LastEditors: gtz
 * @LastEditTime: 2022-08-03 13:52:32
 * @Description: file content
 * @FilePath: \hf-pda\src\pages\eqInspection\components\eqItem.vue
-->
<template>
  <div class="eqItem">
    <div class="eqItem-header">
      <div class="eqItem-title">
        <short-line />
        {{ injectData.equipmentName }}
      </div>
      <div class="eqItem-user">
        {{ injectData.inspectionWorker }}
      </div>
    </div>
    <div class="eqItem-main">
      <div class="eqItem-main-left">
        <div class="eqItem-main-left-item">
          添加时间：
          <span>{{ injectData.createTime ? moment(injectData.createTime).format('YYYY-MM-DD HH:mm:ss') : '暂无' }}</span>
        </div>
        <div class="eqItem-main-left-item">
          巡检时间：
          <span>{{ injectData.inspectionStartTime ? moment(injectData.inspectionStartTime).format('YYYY-MM-DD HH:mm:ss') : '暂无' }}</span>
        </div>
      </div>
      <div class="eqItem-main-right" @click="toDetail">
        <div class="eqItem-main-right-box">
          <div style="opacity: .5;">查看详情</div>
          <div>
            <van-icon class-prefix="iconfont" name="jiantou" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import shortLine from '@/components/shortLine.vue'

export default {
  name: 'eqItem',
  components: { shortLine },
  props: {
    injectData: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      moment
    }
  },
  methods: {
    toDetail () {
      this.$router.push({
        name: 'eqInspectionEdit',
        query: {
          id: this.injectData.id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.eqItem {
  width: calc(100% - .75rem);
  padding: .125rem .375rem;
  border-radius: .25rem;
  height: 2.125rem;
  background: #fff;
  box-shadow: .02rem .02rem .1rem rgba($color: #000000, $alpha: .2);
  margin: .125rem 0;
  .eqItem-header {
    line-height: .875rem;
    display: flex;
    font-size: .34375rem;
    .eqItem-title {
      font-weight: bold;
      max-width: 2.75rem;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .eqItem-user {
      padding-left: .5rem;
      flex: 1;
      text-align: right;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
  }
  .eqItem-main {
    display: flex;
    .eqItem-main-left {
      flex: 1;
      padding-right: .1rem;
      .eqItem-main-left-item {
        line-height: .59375rem;
        font-size: .3125rem;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        span {
          opacity: .5;
        }
      }
    }
    .eqItem-main-right {
      font-size: .3125rem;
      width: 1.6rem;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      .eqItem-main-right-box {
        padding-bottom: .1rem;
        .iconfont {
          font-size: 0.17rem;
          color: #4271FF;
        }
      }
    }
  }
}
</style>
