<template>
  <div v-if="isShow">
    <a-modal
      centered
      class="carInfoDetail-modal"
      :footer="null"
      :maskClosable="false"
      v-model="isShow"
      @cancel="isShow=false"
      :width="800">
      <div>
        <div class="head-info-con">
          <p class="head-info-title">车型信息</p>
          <a-divider style="margin: 12px 0;" />
        </div>
        <a-descriptions bordered :column="2" size="small" class="head-info-main">
          <!-- <a-descriptions-item label="车型信息：">{{ infoData&&infoData.text || '--' }}</a-descriptions-item> -->
          <a-descriptions-item label="品牌：">{{ infoData&&infoData.brandName || '--' }}</a-descriptions-item>
          <a-descriptions-item label="车型：">{{ infoData&&infoData.modelName || '--' }}</a-descriptions-item>
          <a-descriptions-item label="品牌LOGO：">
            <img :src="infoData&&infoData.icon?infoData.icon:defImg" width="30" height="30" style="border-radius: 50%;" />
          </a-descriptions-item>
          <a-descriptions-item label="排量：">{{ infoData&&infoData.displacement || '--' }}</a-descriptions-item>
          <a-descriptions-item label="年款：">{{ infoData&&infoData.modelYear || '--' }}</a-descriptions-item>
          <a-descriptions-item label="配置信息：">{{ infoData&&infoData.confLevel || '--' }}</a-descriptions-item>
        </a-descriptions>
        <div class="btn-cont"><a-button id="carInfoDetail-modal-back" @click="isShow = false">返回</a-button></div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import defImg from '@/assets/def_img@2x.png' // 默认图片
export default {
  name: 'CarInfoDetailModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    infoData: { // 基本信息
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      defImg
    }
  },
  methods: {
    // 预览图片
    inited (viewer) {
      if (viewer) {
        const imageUrl = []
        viewer.map(item => {
          imageUrl.push(item)
        })
        this.$viewerApi({
          images: imageUrl
        })
      }
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="less">
  .carInfoDetail-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .ant-descriptions-item-label.ant-descriptions-item-colon{
      width: 117px;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    .head-info-con{
      .head-info-title{
        font-size: 16px;
        margin: 0;
      }
    }
    .head-info-main{
      margin-bottom: 20px;
    }
    .imageUrl{
      cursor: pointer;
    }
  }
</style>
