<template>
  <section class="exhibition-crux">
    <p class="title">{{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.InfoPointName}}：

        <el-popover
          v-if="item.value && item.value.length && item.value.length>12 && item.Path=='EquipQRCode'"
          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="item.value && item.value.length && item.value.length>12"
          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.value)}}</el-button>
        </el-popover>
        <span v-else>{{item.value}}</span>
        </div>
      </div>
      <div style="text-align: center" v-else>暂无数据</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: {
      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(val) {
        return val.length > 12 ? val.substring(0, 12) + '...' : val
      }
    }
  }
</script>

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

      .setting {
        float: right;
      }

    }
      .crux-list {
        display: inline-block;
        width: 25%;
        margin-left: 28px;
      }
  }
</style>
