<template>
  <a-modal
    centered
    class="vinRecord-modal"
    :footer="null"
    :maskClosable="false"
    title="VIN详情"
    v-model="isShow"
    @cancel="isShow=false"
    width="60%">
    <!-- 详情 -->
    <div v-if="itemData">
      <a-descriptions :column="2" size="default">
        <a-descriptions-item label="扫描时间">{{ itemData.scanTime || '--' }}</a-descriptions-item>
        <a-descriptions-item label="VIN">{{ itemData.vinCode || '--' }}</a-descriptions-item>
        <a-descriptions-item label="车型" :span="1">{{ itemData.carType || '--' }}</a-descriptions-item>
      </a-descriptions>
    </div>
    <!-- 表格 -->
    <div class="table-body" v-if="itemData">
      <table>
        <tr>
          <th width="10%">产品分类</th>
          <th width="10%">产品编码</th>
          <th width="50%">产品名称</th>
          <th width="10%">原厂编码</th>
          <th width="10%">当前是否铺货</th>
          <th width="10%">当前可用库存数量</th>
        </tr>
        <!-- 空调滤清器 -->
        <tr v-for="(item,index) in itemData.airConditionerFilter" :key="item.productSn">
          <td v-if="index==0" colSpan="1" :rowSpan="itemData.airConditionerFilter.length">空调滤清器</td>
          <td>{{ item.productCode|| '--' }}</td>
          <td>{{ item.productName|| '--' }}</td>
          <td>{{ item.origCode || '--' }}</td>
          <td>{{ item.isShelfProduct|| '--' }}</td>
          <td>{{ (item.qty||item.qty==0) ? item.qty :'--' }}</td>
        </tr>
        <!-- 空气滤清器 -->
        <tr v-for="(item,index) in itemData.airFilterFlag" :key="item.productSn">
          <td v-if="index==0" colSpan="1" :rowSpan="itemData.airFilterFlag.length">空气滤清器</td>
          <td>{{ item.productCode|| '--' }}</td>
          <td>{{ item.productName|| '--' }}</td>
          <td>{{ item.origCode || '--' }}</td>
          <td>{{ item.isShelfProduct|| '--' }}</td>
          <td>{{ (item.qty||item.qty==0) ? item.qty :'--' }}</td>
        </tr>
        <!-- 机油滤清器 -->
        <tr v-for="(item,index) in itemData.engineOilFilterFlag" :key="item.productSn">
          <td v-if="index==0" colSpan="1" :rowSpan="itemData.engineOilFilterFlag.length">机油滤清器</td>
          <td>{{ item.productCode|| '--' }}</td>
          <td>{{ item.productName|| '--' }}</td>
          <td>{{ item.origCode || '--' }}</td>
          <td>{{ item.isShelfProduct|| '--' }}</td>
          <td>{{ (item.qty||item.qty==0) ? item.qty : '--' }}</td>
        </tr>
      </table>
    </div>
    <div class="btn-cont"><a-button id="vinRecord-modal-back" @click="isShow = false">关闭</a-button></div>
  </a-modal>
</template>

<script>
export default {
  name: 'DetailModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemData: {
      type: Object,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      isShow: this.openModal//  是否打开弹框
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
      // else {
      //   this.getDetailList()
      // }
    }
  }
}
</script>

<style lang="less">
  .vinRecord-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    .table-body{
      table{
        th,td{
          text-align: center;
          padding: 5px;
          border:1px solid #ddd;
        }
        th{
          background:#f8f8f8;
        }
      }
    }
  }
</style>
