<template>
<div class="log_collapse_container">
  <a-collapse :bordered="false" accordion v-if="logData.length>0">
    <a-collapse-panel
      v-for="(item, index) in logData"
      :key="index"
      :disabled="!item.content"
      :show-arrow="!!item.content"
    >
      <template #header>
        <div class="time" v-html="item.time"></div>
        <div class="title" v-html="item.title"></div>
      </template>
      <template v-if="item.type=='SQL'">
        <div class="log_collapse_sql">
          <gl-sql-editor
            v-model="item.content"
            readOnly
            :start-paras="true"
          />
        </div>
      </template>
      <template v-else-if="item.type=='JSON'">
        <template slot="extra">
          <a-button type="primary" size="small" @click.stop="copyLog(item.content)">复制</a-button>
        </template>
        <div class="log_collapse_content">
          <jsonView :data="JSON.parse(item.content)"></jsonView>
        </div>
      </template>
      <p v-else class="log_collapse_content" v-html="item.content"></p>
    </a-collapse-panel>
  </a-collapse>
  <p v-else>日志为空</p>
</div>
</template>

<script>
const glSqlEditor = require("@/components/glSqlEditor").default;
import jsonView from "vue-json-views";
export default {
  components: {
    glSqlEditor,
    jsonView
  },
  props: {
    data: [Array]
  },
  watch: {
    data() {
      this.logData = this.data;
    }
  },
  data() {
    return {
      logData: []
    };
  },
  created() {},
  methods: {
    /**
     * @Author: y_zp
     * @description: 复制日志JSON
     */
    copyLog(val) {
      this.$copyClipboard(val);
    }
  }
};
</script>
<style lang="less" scoped>
.log_collapse_container {
  .log_collapse_sql {
    height: 240px;
  }
  .log_collapse_content {
    max-height: 240px;
    white-space: pre-wrap;
    overflow: hidden;
    overflow-y: scroll;
  }
  /deep/.ant-collapse {
    .ant-collapse-header {
      display: flex;
    }
    .ant-collapse-item-disabled .ant-collapse-header {
      color: rgba(0, 0, 0, 0.85);
      cursor: auto;
    }
  }
}
</style>
<style lang="less">
.log_collapse_container {
  .time {
    margin-right: 12px;
  }
  .title {
    flex: 1;
    margin-right: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .color_red {
    color: red;
  }
  .color_green {
    color: #29DF7E
  }
  .color_warn {
    color: #f3af24;
  }
  .font_bold {
    font-weight: bold;
  }
  .font_s {
    font-size: 12px;
  }
  .font_m {
    font-size: 14px;
  }
  .font_l {
    font-size: 16px;
  }
  .font_xl {
    font-size: 18px;
  }
}
</style>