<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="right"
        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%" v-if="value.Value">
            <img
              style="width:200px;height:200px;"
              :src="'/image-service/common/file_get/'+ value.Value +'?systemId=dataPlatform'"
              alt="二维码"
            >
          </div>
          <div v-else style="width: 100%;text-align: center;padding-top: 10px">数据暂无</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"
            v-if="value.Value &&value.InputMode != 'F2'&& value.InputMode!='N2' "
            @click="handleCopy(value.Value)">复制
          </el-button>
        </div>
<!--        <el-button slot="reference" type="text">{{value.Value ? '有' :'-'}}</el-button>-->
        <el-button slot="reference" type="text">有</el-button>
      </el-popover>
      <span  v-else-if="Array.isArray(value.Value) && value.InputMode== 'F2' ">
        <el-popover
          v-if="value.Value.length "
          placement="right"
          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>-->
              <a
                style="cursor: pointer;color: #409eff"
                :href="`/image-service/common/file_get/${pic.Key}?systemId=dataPlatform`"
                :download="pic.Name"
              >下载</a>
            </div>
          </div>
<!--          <el-button slot="reference" type="text">{{value.Value.length >0 ? '有':'-'}}</el-button>-->
          <el-button slot="reference" type="text">有</el-button>
        </el-popover>
        <span v-else>-</span>
      </span>

      <el-popover
        v-else-if="Array.isArray(value.Value) && value.InputMode=='N2'"
        placement="right"
        width="400"
        trigger="hover">
        <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{value.InfoPointName}}</p>
        <p style="height: 250px;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.length >0  ? '有' :'-'}}</el-button>-->
        <el-button slot="reference" type="text">有</el-button>
      </el-popover>
      <el-popover
        v-else-if="value.Value && value.Value.length  && `${value.InfoPointName}：${value.Value}`.length>21 "
        placement="right"
        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')
        if(typeof data != 'string') {
          data = JSON.stringify(data)
        }
        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 > 21 ? val.substring(0, 21-`${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: 315px;
      display: inline-block;
      margin-left: 20px;
      vertical-align: text-top;
    }
  }
</style>
