<template>
  <div v-if="isShow">
    <a-modal
      centered
      class="carInfoDetail-modal"
      :footer="null"
      :maskClosable="false"
      v-model="isShow"
      @cancle="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.brand_name || '--' }}</a-descriptions-item>
          <a-descriptions-item label="车型：">{{ infoData&&infoData.model_name || '--' }}</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.sub_name || '--' }}</a-descriptions-item>
          <a-descriptions-item label="年款：">{{ infoData&&infoData.year || '--' }}</a-descriptions-item>
          <a-descriptions-item label="车型图：">
            <div v-if="infoData&&infoData.images.length>0">
              <img :src="infoData.images[0] || defImg" width="30" height="30" class="imageUrl" @click="inited(infoData.images)" />
            </div>
            <span v-else>--</span>
          </a-descriptions-item>
          <a-descriptions-item label="车系：">{{ infoData&&infoData.series_name || '--' }}</a-descriptions-item>
        </a-descriptions>
        <div class="head-info-con" v-if="infoData&&infoData.params">
          <p class="head-info-title">配置信息</p>
          <a-divider style="margin: 12px 0;" />
        </div>
        <a-descriptions bordered :column="2" size="small" v-if="infoData&&infoData.params" class="head-info-main">
          <a-descriptions-item v-for="item in infoData.params" :label="item.type_name+'：'">{{ item.value || '--' }}</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>
