<template>
<div class="exhibition-baseInformation">
  <section v-for="(val,key,i) in exhibitionBaseInformation.information">
    <h4 class="base">{{key || '信息'}}</h4>
    <div class="infoPoint-item" v-for="(value,keys,index) in val.paths">
      <span> {{value.InfoPointName}}：</span>
      <el-popover
        v-if="value.Path == 'EquipQRCode' || value.Path == 'RoomQRCode' || value.Path == 'ShaftQRCode'"
        placement="top"
        width="360"
        trigger="hover">
        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
        <div style="overflow:hidden;">
          <div style="float:left;width: 60%">
            <img
              v-if="value.Value"
              style="width:200px;height:200px;"
              :src="'/image-service/common/file_get/'+ value.Value +'?systemId=dataPlatform'"
              alt="二维码"
            >
            <span v-else>数据暂无</span>
          </div>
          <div style="float:right;width: 40%;margin-top: 30px">
            <span>{{value.Value}}</span>
          </div>
        </div>
        <div style="text-align: center; margin: 0">
          <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
        </div>
        <el-button slot="reference" type="text">{{value.Value ? '有' :'-'}}</el-button>
      </el-popover>
      <el-popover
        v-else-if="Array.isArray(value.Value) && value.InputMode== 'F2'"
        placement="top"
        width="250"
        trigger="hover">
        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
        <div v-for="(pic,index) in value.Value">
          <div>图纸名称：{{pic.Name}}
              <el-button style="" type="text" size="mini" @click="downloadFile(pic.Key)">下载</el-button>
          </div>
        </div>
        <el-button slot="reference" type="text">{{value.Value? '有':'-'}}</el-button>
      </el-popover>
      <el-popover
        v-else-if="Array.isArray(value.Value) && value.InputMode=='N2'"
        placement="top"
        width="600"
        trigger="hover">
        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
        <p style="height: 300px;overflow: auto">{{value.Value}}</p>
        <div style="text-align: center; margin: 0">
          <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
        </div>
        <el-button slot="reference" type="text">{{value.Value ? '有' :'-'}}</el-button>
      </el-popover>
      <el-popover
        v-else-if="value.Value && value.Value.length && `${value.InfoPointName}：${value.Value}`.length>23"
        placement="top"
        width="160"
        trigger="hover">
        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
        <p>{{value.Value}}</p>
        <div style="text-align: center; margin: 0">
          <el-button type="text" size="mini" @click="handleCopy(value.Value)">复制</el-button>
        </div>
        <el-button slot="reference" type="text">{{handleName(value.InfoPointName, value.Value)}}</el-button>
      </el-popover>
      <span v-else>{{value.Value}}</span>
    </div>
  </section>
</div>
</template>

<script>
  export default {
    name: "exhibition-baseInformation",
    props: ['exhibitionBaseInformation'],
    data() {
      return {}
    },
    methods: {
      downloadFile(key) {
        window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")

      },
      handleCopy(data) {
        let oInput = document.createElement('input')
        oInput.value = data
        document.body.appendChild(oInput)
        oInput.select()
        document.execCommand('Copy')
        this.$message.success('复制成功')
        oInput.remove()
      },
      handleName(infoPoint, val) {
        let text = `${infoPoint}：${val}`
        return text.length > 23 ? val.substring(0, 23-`${infoPoint}：`.length) + '...' : val
      }
    }
  }
</script>

<style scoped lang="less">
  .exhibition-baseInformation {
    section {
      /*border: 1px solid #eeeeee;*/
      /*margin: 10px;*/

      .base {
        margin: 10px;
        font-weight: 600;
        text-indent: 10px;
        border-bottom: 1px dashed #eee;
      }

      /deep/ .el-button--text {
        color: #555 !important;
        font-size: 14px;
      }
    }

    .ml-10 {
      margin-left: 10px;
      text-indent: 10px;
    }

    .infoPoint-item {
      width: 350px;
      display: inline-block;
      margin-left: 20px;
    }
  }
</style>
