<template>
  <section class="exhibition-crux">
    <p class="title">
      <span class="iconfont icon-juxing"></span>
      {{exhibitionCrux.title}}
      <span class="icon-shezhi iconfont setting" @click="setting"></span></p>
    <div>
      <div v-if="exhibitionCrux.cruxArray.length">
        <div class="crux-list" v-for="(item,index) in exhibitionCrux.cruxArray" :key="index">{{item.name}}：

        <el-popover
          v-if="item.Path == 'equipQRCode' || item.Path == 'roomQRCode' || item.Path == 'shaftQRCode'"
          placement="top"
          width="360"
          trigger="hover">
          <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
          <div style="overflow:hidden;">
            <div style="float:left;width: 60%">
              <img
                style="width:200px;height:200px;"
                :src="'/image-service/common/file_get/'+ item.value +'?systemId=dataPlatform'"
                alt="二维码"
              >
            </div>
            <div style="float:right;width: 40%;margin-top: 30px">
              <span>{{item.value}}</span>
            </div>
          </div>
          <div style="text-align: center; margin: 0">
            <el-button type="text" size="mini" @click="handleCopy(item.value)">复制</el-button>
          </div>
          <el-button slot="reference" type="text">{{item.value ? '有' :'-'}}</el-button>
        </el-popover>
        <el-popover
          v-else-if="Array.isArray(item.value) && item.dataType== 'ATTACHMENT'"
          placement="right"
          width="250"
          trigger="hover">
          <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
          <div v-for="(pic,index) in item.value">
            <div>图纸名称：{{ pic.name }}
              <el-button size="mini" style="" type="text" @click="downloadFile(pic.key)">下载</el-button>
            </div>
          </div>
          <el-button slot="reference" type="text">{{item.value? '有':'-'}}</el-button>
        </el-popover>

          <el-popover
          v-else-if="item.value && item.value.length && `${item.InfoPointName}：${item.value}`.length>21"
          placement="top"
          width="160"
          trigger="hover">
          <p style="border-bottom: 1px solid #eee;padding:2px 0 4px 0;'">{{item.InfoPointName}}</p>
          <p>{{item.value}}</p>
          <div style="text-align: center; margin: 0">
            <el-button type="text" size="mini" @click="handleCopy(item.value)">复制</el-button>
          </div>
          <el-button slot="reference" type="text">{{handleName(item.InfoPointName, item.value)}}</el-button>
        </el-popover>
        <span v-else>{{item.value}}</span>
        </div>
      </div>
    </div>
    <cruxDialog
      ref="setting"
      :crux="exhibitionCrux.allMessage"
      :type="type"
      @cruxSuccess="cruxSuccess"

    />
  </section>
</template>

<script>
import cruxDialog from "./cruxDialog";

export default {
    name: "exhibition-crux",
    props: ['exhibitionCrux','type'],
    components: {cruxDialog},
    data() {
      return {
        list: []
      }
    },
    methods: {
      downloadFile(key) {
        window.open("/image-service/common/file_get/" + key + "?systemId=dataPlatform")
      },
      setting() {
        this.$refs.setting.dialogOpen()
      },
      cruxSuccess() {
        this.$emit('cruxSuccess')
      },
      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 value = val;
        if (Array.isArray(value)) {
          value = JSON.stringify(val)
        }
        let text = `${infoPoint}：${value}`;
        return text.length > 21 ? value.substring(0, 21-`${infoPoint}：`.length) + '...' : value;
      }
    }
  }
</script>

<style lang="less" scoped>
  .exhibition-crux {
    padding: 10px 0;
    /deep/ .el-button--text {
      color: #555 !important;
      font-size: 14px;
    }
    .title {
      /*border-left: 8px solid black;*/
      margin: 0 20px 0 10px;
      font-weight: 600;
      /*text-indent: 10px;*/
      display: block;
      overflow: hidden;

      .setting {
        float: right;
      }

    }
      .crux-list {
        display: inline-block;
        width: 315px;
        margin-left: 20px;
        vertical-align: text-top;
      }
  }
</style>
