<template>
  <a-modal
    centered
    class="warrantyInfo-modal"
    :footer="null"
    :maskClosable="false"
    title="质保信息"
    v-model="isShow"
    @cancel="isShow=false"
    :width="600">
    <a-spin :spinning="spinning" tip="Loading...">
      <div v-if="detailsData">
        <div class="infoList">
          <div class="infoTopList">
            <div class="uniqueStyle">
              <div>轮胎名称：</div>
              <a-tooltip placement="topLeft">
                <template slot="title">
                  <span>{{ detailsData.productName || '--' }}</span>
                </template>
                <div class="text-overflow">{{ detailsData.productName || '--' }}</div>
              </a-tooltip>
            </div>
            <a-descriptions :column="1">
              <a-descriptions-item label="产品编码">
                {{ productCode || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="轮胎唯一码">
                {{ detailsData.traceCode || '--' }}
              </a-descriptions-item>
              <a-descriptions-item label="质保时间" v-if="detailsData.warrantyStartDate">
                {{ detailsData.warrantyStartDate }}{{ detailsData.warrantyEndDate?'至'+detailsData.warrantyEndDate:'' }}
              </a-descriptions-item>
              <a-descriptions-item label="质保时间" v-else>
                --
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="imgBox" v-if="detailsData&&detailsData.productMsg">
            <img
              style="margin-bottom:6px;object-fit: cover;border:1px dashed #ccc;"
              :src="detailsData.productMsg"
              alt="图片走丢啦"
              width="86"
              height="55"
              align="middle"
              @click="viewLargeImg"/>
            <div style="text-align:right;">
              <img
                v-if="detailsData.state ==='END'"
                src="@/assets/img/outOfDateImg.png"
                alt=""
                width="50"
                height="50" />
              <img v-if="detailsData.state ==='RUN'" src="@/assets/img/ongoing.png" alt="" width="50" height="50" />
            </div>
          </div>
        </div>
        <div class="infoList">
          <a-descriptions title="门店信息" :column="1">
            <a-descriptions-item label="门店名称">
              {{ detailsData.storeName|| '--' }}
            </a-descriptions-item>
            <a-descriptions-item label="姓名">
              {{ detailsData.storeManager ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="电话">
              {{ detailsData.storeMobile ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="汽配经销商">
              {{ detailsData.dealerName ||'--' }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="infoList">
          <a-descriptions title="车辆信息" :column="1">
            <a-descriptions-item label="车辆品牌">
              {{ detailsData.carBrand ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="车型">
              {{ detailsData.carModel ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="里程数">
              {{ detailsData.mileage ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="车牌号">
              {{ detailsData.vehicleNumber ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="客户姓名">
              {{ detailsData.customName ||'--' }}
            </a-descriptions-item>
            <a-descriptions-item label="手机号码">
              {{ detailsData.customMobile ||'--' }}
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="btn-cont">
        <a-button id="warrantyInfo-back" @click="isShow = false">关闭</a-button>
      </div>
    </a-spin>
    <!-- 查看图片 -->
    <a-modal v-model="openImgModal" :title="null" :footer="null" :width="600" centered>
      <div class="viewImg" v-if="detailsData&&detailsData.productMsg">
        <img
          :src="detailsData.productMsg"
          alt="图片走丢啦"
          width="100%"
          height="100%"
          align="middle"/>
      </div>
    </a-modal>
  </a-modal>
</template>

<script>
import { getWarrantyInfo } from '@/api/reportData'
export default {
  name: 'ProductPricingAuditModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemSn: {
      type: String,
      default: ''
    },
    productCode: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      detailsData: null, //  详情数据
      openImgModal: false
    }
  },
  methods: {
    //  获取详情
    getDetail () {
      getWarrantyInfo({ id: this.itemSn }).then(res => {
        if (res.status == 200) {
          this.detailsData = res.data
        } else {
          this.detailsData = null
        }
      })
    },
    // 查看图片
    viewLargeImg () {
      this.openImgModal = true
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less">
  .warrantyInfo-modal{
    .ant-modal-body {
      padding: 30px 40px 24px;
    }
    .infoList {
      margin-bottom:26px;
      .uniqueStyle{
        display:flex;
        algin-items:center;
        margin-bottom:5px;
        div:last-child{
          width:78%;
        }
      }
      .ant-descriptions-title{
        margin-bottom:10px !important;
      }
      .ant-descriptions-row > th, .ant-descriptions-row > td{
        padding-bottom: 5px !important;
      }
      .infoTopList{
        max-width:70%;
        position: relative;
       .ant-descriptions-row{
          font-weight: bold;
        }
        .ant-descriptions-row .ant-descriptions-item > span{
          font-weight: bold;
        }
      }
      .imgBox{
        position:absolute;
        top:0;
        left:71%;
      }
    }

    .btn-cont {
      text-align: center;
      margin: 35px 0 20px;
    }
  }
</style>
