<template>
  <div>
    <add-page-layout>
      <div slot="Header-Content">
        <!-- <img :src="title=='新增'?addImg:title=='修改'?updImg:detailImg"> -->
        <!-- <svg></svg> -->
        <span>{{ title }}</span>
        <i class="el-icon-close close" @click="$router.go(-1)" />
      </div>
      <div slot="Form-Content">
        <el-row style="width:92%; margin:15px auto 0px 6px;">
          <template v-if="tabledata.length">
            <el-col v-for="(item,index) in this.tabledata" :key="index" :span="12">
              <el-col :span="8" class="name border" :title="item.name">{{ item.name }}</el-col>
              <el-col :span="16" class="border">
                <template v-if="item.showTooltip">
                  <el-tooltip effect="dark" placement="top" :content="item.value" :popper-options="{}">
                    <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ item.value }}</div>
                  </el-tooltip>
                </template>
                <span v-else :title="item.value">{{ item.value }}</span>
              </el-col>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="12">
              <el-col :span="8" class="name border"></el-col>
              <el-col :span="16" class="border valueCol"></el-col>
            </el-col>
          </template>
        </el-row>
        <el-row v-if="descriptionObj!= null" style="width:92%; margin:0px auto 10px 6px;">
          <el-col :span="4" class="name" style="border: 1px solid #cdd9e3;padding:0 12px 0;min-height:40px;max-height:110px;line-height:110px;font-size:12px;font-weight: 500;" :title="descriptionObj.name">{{ descriptionObj.name }}</el-col>
          <el-col :span="20" style="border: 1px solid #cdd9e3;">
            <el-input v-model="descriptionObj.value" type="textarea" :rows="5" readonly />
          </el-col>
        </el-row>
      </div>

      <div slot="Footer-Content">
        <el-button class="btnLine" @click="$router.go(-1)" v-text="'关闭'" />
      </div>
    </add-page-layout>
  </div>
</template>
<style scoped>
.name {
  background: #f4fafb;
  border:1px solid #cad9ea;
}
.border{
  border: 1px solid #cdd9e3;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  font-size:12px;
  padding:0 12px 0;
}
</style>
<script>
import { getFieldList } from '../api/log-retrival-manage'

export default {
  data() {
    return {
      title: '详细信息',
      indexId: null,
      keyWordsList: [], // 关键字字段列表
      detailInfo: null,
      tabledata: [],
      descriptionObj: null
    }
  },
  computed: {},
  mounted() {
    this.indexId = this.$route.query.indexId
    this.detailInfo = JSON.parse(decodeURIComponent(this.$route.query.detailInfo))
    this.getKeyFieldsData()
  },
  created() {},
  methods: {
    getTextWidth(str, fontSize) {
      let width = 0;
      let ele = document.createElement("div");
      ele.style.position = "absolute";
      ele.style.whiteSpace = "nowrap";
      ele.style.fontSize = fontSize;
      ele.style.opacity = 0;
      ele.innerText = JSON.stringify(str);
      document.body.append(ele);
      width = ele.getBoundingClientRect().width;
      document.body.removeChild(ele);
      return width;
    },
    // 判断奇数偶数
    checkNum(num) {
      let flag
      if (num % 2 == 0) {
        flag = true
      } else {
        flag = false
      }
      return flag
    },
    // 获取关键字字段
    convertData(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.detailInfo[data[i].fieldNote]
        res.push({
          name: data[i].fieldName,
          key: data[i].fieldNote,
          value: geoCoord == undefined ? '' : geoCoord
        })
      }
      return res
    },
    getKeyFieldsData() {
      getFieldList(this.indexId).then(resp => {
        if (resp.data.returnCode == '0') {
          this.keyWordsList = resp.data.data
          const list = this.convertData(this.keyWordsList)
          this.tabledata = list.filter(item => {
            return item.value != null && item.value != undefined && item.value != '' && item.key != 'description'
          })
          let colWidth = document.querySelector('.valueCol').offsetWidth
          this.tabledata.forEach(el => {
            el.showTooltip = this.getTextWidth(el.value, '12px') > colWidth
          })
          this.descriptionObj = list.find(item => {
            return item.key == 'description'
          })
        }
      }, error => {
        this.$message.error('关键字字段列表获取失败！')
      })
    }
  }
}
</script>
<style scoped>

</style>

