<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="full-height">
    <CurdPanel title-search-form="通知日志"
               title-data-table="通知列表"
               :doQuery="LogsNoticeLogApi.doQuery"
               :doGet="LogsNoticeLogApi.doGet"
               :allowAdd="false"
               :allowEdit="false"
               :allowDelete="false"
               :allowRefresh="false"
               :queryFormLabelPosition="'top'"
               close-on-save
               fullHeight
               autoLoad>


      <!-- 查询条件区域 -->
      <template v-slot:search-form="{formData}">
        <el-form-item label="记录时间" prop="sendtime">
          <el-date-picker v-model="formData.sendtime" type="datetimerange" range-separator="至" start-placeholder="开始时间"
                          end-placeholder="结束时间" value-format="timestamp">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="服务器地址">
          <el-input v-model="formData.serverIp"></el-input>
        </el-form-item>
        <el-form-item label="服务器名称">
          <el-input v-model="formData.serverName"></el-input>
        </el-form-item>
        <el-form-item label="消息类型">
          <el-select v-model="formData.messageType" placeholder="请选择消息类型">
            <el-option label="邮件" value="邮件"></el-option>
            <el-option label="短信" value="短信"></el-option>
            <el-option label="电话" value="电话"></el-option>
          </el-select>
        </el-form-item>
      </template>

      <!-- 表格列区域 -->
      <template slot="table-columns">
        <el-table-column type="index" label="#"/>
        <el-table-column prop="serverip" label="服务器地址" show-overflow-tooltip/>
        <el-table-column prop="servername" label="服务器名称" show-overflow-tooltip/>
        <el-table-column prop="messagetype" label="消息类型" show-overflow-tooltip/>
        <el-table-column prop="messagecontent" label="消息内容">
          <template slot-scope="{row}">
            <el-button class="blue" @click="handlerView(row.messagecontent, row.messagetype)">
              {{ JSON.parse(row.messagecontent).type }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="sendtime" label="发送时间" :formatter="formatterDateTime" show-overflow-tooltip/>
      </template>


    </CurdPanel>

    <el-dialog close-on-press-escape title="消息内容" :visible.sync="view.visible" width="50%" append-to-body>
      <el-form label-position="top" inline class="demo-table-expand">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="消息标题:">
              <el-input v-model="view.data.title" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="消息类型:">
              <el-input v-model="view.data.type" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="消息内容:">
          <span v-if="view.data.summary.includes('<div>')" v-html="view.data.summary"></span>
          <el-input v-else v-model="view.data.summary" type="textarea" :rows="4" readonly></el-input>
        </el-form-item>

        <el-form-item label="通知目标:">
          <div class="el-input">
            <el-row :gutter="10">
              <el-col :span="8" v-for="item in view.data.target" :key="item">
                {{ item }}
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>

    </el-dialog>
  </div>

</template>

<script>
  import BaseApi from '@/api/base/BaseApi';

  export default {
    name: "LogsNotice",
    data() {
      return {
        LogsNoticeLogApi: BaseApi('/logs/LogsNoticeLog'),
        view: {
          visible: false,
          loading: false,
          type: '',
          data: {summary: ''}
        }
      };
    },
    methods: {
      handlerView(message, type) {
        try {
          this.view.data = {};
          this.view.loading = true;
          this.view.visible = true;
          this.view.type = type;
          this.view.data = JSON.parse(message);
        } catch (e) {
          this.view.data = {};
        } finally {
          this.view.loading = false;
        }
      }
    }
  };
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 70px;
    color: #99a9bf;
    float: left !important;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 100%;
  }
</style>