<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-select v-model="formData.noticeName" placeholder="通知名称">
            <el-option
                    v-for="item in noticenames"
                    :key="item.noticename"
                    :label="item.noticename"
                    :value="item.noticeclass">
            </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 align="center"/>
        <el-table-column prop="noticename" label="通知名称" show-overflow-tooltip align="center"/>
        <el-table-column prop="noticeclass" label="通知类路径" show-overflow-tooltip align="center"/>
        <el-table-column prop="messagecontent" label="通知内容" width="150px" align="center">
          <template slot-scope="{row}">
            <el-button icon="el-icon-document" class="blue" @click="handlerView(row.messagecontent)">
              查看通知内容
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="sendtime" label="发送时间" :formatter="formatterDateTime" show-overflow-tooltip align="center"/>
        <el-table-column prop="messagecontent" label="通知人员详细信息" width="150px" align="center">
          <template slot-scope="{row}">
            <el-button icon="el-icon-user" class="blue" @click="handlerInfo(row.uuid)">
              查看通知详情
            </el-button>
          </template>
        </el-table-column>
      </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-input v-model="view.data.summary" type="textarea" :rows="8" readonly></el-input>
      </el-form>
    </el-dialog>

    <el-dialog close-on-press-escape title="通知详细" :visible.sync="info.visible" width="50%" append-to-body>
      <Panel title="通知详细">
        <el-table border :data="info.datarows" element-loading-spinner="el-icon-loading"
                  v-loading="info.isLoading" ref="table"
                  element-loading-text="数据加载中" height="calc(100vh - 580px)">
          <el-table-column prop="userid" label="通知人员名称"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="noticetype" label="通知方式"  show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag v-if="scope.row.noticetype==='1'">邮箱</el-tag>
              <el-tag v-if="scope.row.noticetype==='2'">电话</el-tag>
              <el-tag v-if="scope.row.noticetype==='3'">短信</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="通知地址"  show-overflow-tooltip></el-table-column>
          <el-table-column prop="noticestatus" label="状态"  show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.noticestatus==='1'">尚未送达</el-tag>
              <el-tag type="success" v-if="scope.row.noticestatus==='2'">通知成功</el-tag>
              <el-tag type="danger" v-if="scope.row.noticestatus==='0'">通知失败</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="sendtime" label="通知时间" :formatter="formatterDateTime"
                           show-overflow-tooltip></el-table-column>
        </el-table>
        <el-pagination background :page-size.sync="info.data.pageSize" :current-page.sync="info.data.pageNum"
                       :total="info.data.totalPages"/>
      </Panel>
    </el-dialog>
  </div>

</template>

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

  export default {
    name: "LogsNotice",
    data() {
      return {
        LogsNoticeLogApi: BaseApi('/logs/LogsNoticeLog'),
        view: {
          visible: false,
          loading: false,
          type: '',
          data: {summary: ''}
        },
        info:{
          visible: false,
          loading: false,
          isLoading:false,
          data:[],
        },
        noticenames:[]
      };
    },
    mounted() {
      this.getNoticeCodes();
    },
    methods: {
      handlerView(message) {
        try {
          this.view.data = {};
          this.view.loading = true;
          this.view.visible = true;
          this.view.data.summary = message;
        } catch (e) {
          this.view.data = {};
        } finally {
          this.view.loading = false;
        }
      },
      handlerInfo(uuid){
        this.LogsNoticeLogApi.doGet(uuid).then(resp=>{
          this.info.visible = true;
          this.info.data = resp;
          this.info.datarows = resp.datarows;
        })
      },
      // 获取系统通知主题集合
      async getNoticeCodes(){
        await NoticeApi.getNoticeCodes().then(resp=>{
          this.noticenames = resp.noticeNameList;
        });
      },
    }
  };
</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>