
<template>
  <div style="z-index: 999" v-if='value&&data.length>0' class='detail' :style="leftStyle" v-drag='`.detail .ant-card-head`'>
    <a-card  :title='title' >
      <a-icon slot='extra' class='panelClose' type='close' @click="$emit('input',false)"/>
      <a-descriptions bordered :column='2'>
        <a-descriptions-item v-for='(item,index) in data' :key='item.field' :label='item.field'>
          {{ item.val }}
        </a-descriptions-item>

        <a-descriptions-item :label=image>
          <!--            <img v-for='(item,index) in this.images' alt="无图片" style="width: 100%" :src="item"/>-->
<!--          <view-images  isMultiple v-model="this.images" :disabled='uploadDisabled'></view-images>-->
          <ImagesView :image-list="images"></ImagesView>

        </a-descriptions-item>
      </a-descriptions>
    </a-card>
  </div>
</template>

<script>
import ViewImages from "@comp/jeecg/ViewImages";
import ImagesView from "@comp/jeecg/ImagesView";
export default {
  name: 'QueryInfo',
  components: {ViewImages,ImagesView},
  props: {
    value: {
      type: Boolean,
      default: false,
      required: true
    },
    title: {
      type: String,
      default: "详情"
    }
  },
  data() {
    return {
      data: [],
      image: '照片',
      images: [],
      leftStyle: '',
      previewVisible: false,
      uploadDisabled: false
    };
  },
  methods: {
    handleCancel() {
      this.close();
      this.previewVisible = false;
    },
    loadDetail(attributes) {
      this.images = []
      let width = document.getElementById('basic-map').offsetWidth - 355;
      this.leftStyle = `left:${width * 0.9}px`;
      this.leftStyle = `right:1 rem`;
      if (attributes) {
        this.data = [];
        for (let key in attributes) {
          let item = {};
          if(key != "IMAGE"){
            item.field = key;
            item.val = attributes[key];
            this.data.push(item);
          }
        }
      }
      if (attributes.IMAGE != null) {
        var StringImage = attributes.IMAGE;
        var img;
        var result="";
        if (StringImage.includes(",")) {

          img = StringImage.split(",")
          for (let i = 0; i < img.length; i++) {
             result = "/tdzcxx/images/"+img[i]
            //result="http://localhost:8080/jeecg-boot/sys/common/statics/"+img[i]
            this.images.push(result)
          }
        } else if (StringImage != null) {
          result = "/tdzcxx/images/"+ StringImage
          //result="http://localhost:8080/jeecg-boot/sys/common/statics/"+StringImage
          this.images.push(result)
        }
      }


    }
  }
};
</script>

<style>
.detail {
  display: flex;
  position: fixed;
  top: 210px;
  right: 40%;
}

.detail .ant-card-body {
  padding: 4px;
  width: 900px;
  max-height: 600px;
  overflow-y: auto;
/*  box-shadow: 0 0 5px #357ee5;*/
}
.detail .ant-card-head {
  background-color:rgba(24, 129, 253, 0.78);
  color:white;
}
.detail .ant-descriptions-bordered .ant-descriptions-item-label, .ant-descriptions-bordered .ant-descriptions-item-content {
  padding: 9px 18px;
}
</style>
`
