<template>
  <div
    class="cell-box"
    :style="boxStyle"
  >
    <div
      class="label"
      :style="{width: labelWidth, ...labelStyle}"
    >
      {{ label }}:
    </div>
    <div
      v-if="itemObj ? !showImgStatus && itemObj.propertyAlias !== 'ChangeParts' && itemObj.propertyAlias !== 'OfflineChangeParts' : true"
      class="value"
      :style="valueStyle"
    >
      {{ value === '[]' ? '' : value ? value : '无' }}
      <van-tag
        v-if="tagIsShow"
        class="tagClass"
        :type="tagType"
        size="medium"
      >{{ tagValue === '[]' ? '' : tagValue }}</van-tag>
    </div>
    <div
      v-if="showImgStatus"
      class="value"
      :style="valueStyle"
    >
      <div v-if="imgValue.length === 0">无</div>
      <div v-else>
        <div
          v-for="(info, index) in imgValue"
          :key="index"
        >
          <div
            v-if="isPhoto(info.FileName)"
            class="img_box"
          >
            <div @click="showImg(info)">
              <div class="img_box_show">
                <img :src="imgSrcPhone(info)">
              </div>
            </div>
          </div>
          <div
            v-if="!isPhoto(info.FileName)"
            class="file_box"
          >
            <div class="file_box_content">
              <div class="file_flex_left">
                <img :src="imgSrcPhone(info)">
              </div>
              <div class="file_flex_right">
                <div>
                  {{ info.FileName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="itemObj ? itemObj.propertyAlias === 'ChangeParts' || itemObj.propertyAlias === 'OfflineChangeParts' : false"
      class="value"
    >
      <van-button
        icon="search"
        size="small"
        type="primary"
        @click="showPopup = true"
      >查看</van-button>
    </div>
    <van-popup
      v-model="showPopup"
      position="bottom"
      :style="{
        height: (itemObj && itemObj.propertyAlias === 'ChangeParts' ?
          changePartList.length > 0 : offlineData.length > 0 ?
            '60%' : '170px'), padding: '10PX' }"
    >
      <no-data
        v-if="itemObj ? itemObj.propertyAlias === 'ChangeParts' ?
          changePartList.length <= 0 : offlineData.length <= 0 : false"
        height="150px"
        line-height="150px"
      />
      <div v-if="itemObj ? itemObj.propertyAlias === 'ChangeParts' : false">
        <div
          v-for="(info, index) in changePartList"
          :key="index"
          :class="index > 0 ? 'orderBox-content mt10' : 'orderBox-content'"
        >
          <div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换件记录号:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.prCode }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换上件条码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.upPartsSN }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换上件编码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.upMaterialNo }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换上件描述:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.upMaterialDesc }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换下件标识:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.downSPMarkName }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换下件条码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.downPartsSN }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换下件编码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.upMaterialNo }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换上件编码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.downMaterialNo }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换下件描述:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.downMaterialDesc }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >故障描述:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.faultDesc }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >特殊备注:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.specialNote }}</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="itemObj ? itemObj.propertyAlias === 'OfflineChangeParts' : false">
        <div
          v-for="(info, index) in offlineData"
          :key="index"
          :class="index > 0 ? 'orderBox-content mt10' : 'orderBox-content'"
        >
          <div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换上件条码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.upPartsSN }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >换下件条码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.downPartsSN }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >备件编码:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.sparePartSN }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >备件类别:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.sparePartType }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >备注:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.remark }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >创建人:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.createBy }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >创建时间:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.createTime }}</div>
            </div>
            <div class="cell-box">
              <div
                class="label"
                :style="{width: labelWidth}"
              >状态:</div>
              <div
                class="value"
                :style="valueStyle"
              >{{ info.crStatusName }}</div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
// PJD202009011078
import { ImagePreview } from 'vant'
import { downloadUrl } from './../../api'
import { isPhoto } from './../../utils'
import { getCRList } from './../../api/ChangeParts'
import { getOfflineChangeParts } from './../../api/OfflineChangeParts'
// import { downLoadImg } from '@/utils/downLoadImg'
export default {
  components: {
    // upload
  },
  props: {
    itemObj: {
      default: () => { },
      type: Object
    },
    label: {
      default: '', // 标题
      type: String
    },
    value: {
      default: '',
      type: [String, Number]
    },
    labelWidth: {
      default: '100px',
      type: String
    },
    tagIsShow: {
      default: false,
      type: Boolean
    },
    tagType: {
      default: 'primary',
      type: String
    },
    labelStyle: {
      default: () => { },
      type: Object
    },
    valueStyle: {
      default: () => { },
      type: Object
    },
    boxStyle: {
      default: () => { },
      type: Object
    },
    tagValue: {
      default: '',
      type: String
    }
  },
  data () {
    return {
      img: 'https://img.yzcdn.cn/vant/apple-1.jpg',
      showImgStatus: false,
      showPopup: false,
      changePartList: [],
      offlineData: [],
      imgsrc: '',
      imgValue: {},
      fileImg: ''
    }
  },
  mounted () {
  },
  created () {
    const itemObj = this.itemObj || ''
    // 图片属性
    if (itemObj) {
      if (itemObj.propertyType === 'business' && itemObj.propertyAlias === 'UploadAttachments' || itemObj.propertyAlias === 'Attachment') {
        this.imgValue = JSON.parse(this.value)
        if (JSON.parse(this.value).length > 0) {
          this.showImgStatus = true
        } else {
          this.$set(this, 'showImgStatus', false)
        }
      } else if (itemObj.propertyType === 'business' && itemObj.propertyAlias === 'ChangeParts') {
        this.getCRdetail()
      } else if (itemObj.propertyType === 'business' && itemObj.propertyAlias === 'OfflineChangeParts') {
        this.getOfflinelist()
      }
    }
  },
  methods: {
    isPhoto: isPhoto,
    // 预览图
    imgSrcPhone (path) {
      if (isPhoto(path.FileName)) {
        return `${downloadUrl}?path=${path.FilePath}&token=${this.$store.state.app.token}`
      } else {
        return ''
      }
    },
    showImg (info) {
      ImagePreview([`${this.imgSrcPhone(info)}`])
    },
    getOfflinelist () {
      getOfflineChangeParts({
        pageSize: 100,
        soid: this.$route.params.id
      }).then(res => {
        this.offlineData = res.rows
      })
    },
    getCRdetail () {
      getCRList({
        soid: this.$route.params.id,
        pageSize: 100
      }).then(res => {
        this.changePartList = res.rows.filter(item => {
          return item.crStatusName !== '已失效'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .cell-box {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 5px 10px;
    font-size: 15px;
    background: #F8F8F8;
  }
  .label {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    min-width: 60px;
    font-size: 15px;
    box-sizing: border-box;
    margin-right: 5px;
    color: #9E9E9E;
    text-align: right;
    word-wrap: break-word;
  }
  .value {
    font-size: 15px;
    flex: 1;
    color: #000000;
    position: relative;
  }
  .tagClass {
    height: 20px;
    line-height: 20px;
    top: 0;
    right: 0;
    position: absolute;
  }
  .img_box {
    display: flex;
    flex-wrap:wrap;
    .img_box_show {
      width: 50px;
      height: 50px;
      margin: 0 5px 5px 0;
      border: 3px solid #eeeeee;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .file_box {
    width: 100%;
    .file_box_content {
      height: 40px;
      margin-bottom: 5px;
      background: #ffffff;
      display: flex;
      line-height: 40px;
      .file_flex_left {
        width: 40px;
        padding: 5px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .file_flex_right {
        flex: 1;
        div {
          width:180px;
          display:block;
          min-width: 0;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
</style>
