<template>
  <a-drawer
    title="日志详情"
    placement="right"
    :width="isMobile ? screenWidth : screenWidth * 0.85"
    :visible="visible"
    @close="onClose"
  >
    <a-spin :spinning="loadLogDetails">
      <a-page-header
        :title="details.f_log_type + ': '+details.f_error_title"
      >
        <div class="row">
          <div class="content">
            <a-descriptions size="small" :column="isMobile ? 1 : 2">
              <a-descriptions-item label="日志编号">{{ details.id }}</a-descriptions-item>
              <a-descriptions-item label="所属服务">{{ details.f_service }}</a-descriptions-item>
              <a-descriptions-item label="网络路径">{{ details.f_web_url }}</a-descriptions-item>
              <a-descriptions-item label="源路径">{{ details.f_src }}</a-descriptions-item>
              <a-descriptions-item label="简述">
                {{ details.f_error_title }}
              </a-descriptions-item>
              <a-descriptions-item label="发生次数">
                {{ details.f_times }}
              </a-descriptions-item>
              <a-descriptions-item label="首次发生时间">
                {{ format(details.f_first_update_time,'yyyy-MM-dd hh:mm:ss') }}
              </a-descriptions-item>
              <a-descriptions-item label="最后发生时间">
                {{ format(details.f_last_update_time,'yyyy-MM-dd hh:mm:ss') }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
          <div class="extra">
            <a-row class="status-list">
              <a-col :xs="12" :sm="24">
                <div class="text">类型</div>
                <div class="heading">
                  <x-badge badge-key="logTypeMap" :value="details.f_log_type" :is-external-text="true"/>
                </div>
              </a-col>
            </a-row>
            <p></p>
            <a-row class="status-list">
              <a-col :xs="12" :sm="24">
                <div class="text">状态</div>
                <div class="heading">
                  <a-dropdown :trigger="['click']">
                    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                      <a-icon style="margin-right: 4px;" :type="details.f_status | statusIconFilter" :style="details.f_status | statusIconStyleFilter"/>
                      <span style="color:rgba(0, 0, 0, 0.85);">{{ details.f_status }}</span>
                      <a-icon type="edit" style="font-size: 14px;color:#999;cursor: pointer;"/>
                    </a>
                    <a-menu slot="overlay" style="margin-top: 10px;width: 200px;">
                      <a-menu-item style="padding: 10px 15px;">
                        <a @click="updateLogStatus('待办的')">
                          <a-icon :type="'待办的' | statusIconFilter" :style="'待办的' | statusIconStyleFilter"/>
                          待办的
                        </a>
                      </a-menu-item>
                      <a-menu-item style="padding: 10px 15px;">
                        <a @click="updateLogStatus('进行中')">
                          <a-icon :type="'进行中' | statusIconFilter" :style="'进行中' | statusIconStyleFilter"/>
                          进行中
                        </a>
                      </a-menu-item>
                      <a-menu-item style="padding: 10px 15px;">
                        <a @click="updateLogStatus('已完成')">
                          <a-icon :type="'已完成' | statusIconFilter" :style="'已完成' | statusIconStyleFilter"/>
                          已完成
                        </a>
                      </a-menu-item>
                      <a-menu-item style="padding: 10px 15px;">
                        <a @click="updateLogStatus('已关闭')">
                          <a-icon :type="'已关闭' | statusIconFilter" :style="'已关闭' | statusIconStyleFilter"/>
                          已关闭
                        </a>
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>

        <!-- actions -->
        <template #extra>
          <a-button-group style="margin-right: 4px;">
            <a-button type="dashed" @click="initView" :loading="loadLogDetails">刷新</a-button>
          </a-button-group>
        </template>

        <!-- 操作 -->
        <a-card :bordered="false" title="处理情况">
          <a-timeline :reverse="true">
            <a-timeline-item color="#666">
              <a-icon slot="dot" type="plus-square" style="font-size: 16px;" />
              异常检测模块 捕获到了异常事件
              <span style="padding-left: 5px;font-size: 12px;color:#8c92a4;">{{ format(details.f_first_update_time,'yyyy-MM-dd hh:mm:ss') }}</span>
            </a-timeline-item>
            <a-timeline-item color="red">
              <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
              异常检测模块 已确认最后发生时间
              <span style="padding-left: 5px;font-size: 12px;color:#8c92a4;">{{ format(details.f_last_update_time,'yyyy-MM-dd hh:mm:ss') }}</span>
            </a-timeline-item>
            <a-timeline-item :key="index" v-for="(item, index) in eventList">
              <a-icon slot="dot" :type="item.f_info | eventIconFilter" :style="item.f_info | eventIconStyleFilter"/>
              {{ item.f_china_name }} {{ item.f_info }}
              <span style="padding-left: 5px;font-size: 12px;color:#8c92a4;">{{ format(item.f_input_date,'yyyy-MM-dd hh:mm:ss') }}</span>
            </a-timeline-item>
          </a-timeline>
        </a-card>
        <a-card
          style="margin-top: 24px"
          :bordered="false"
          :tabList="operationTabList"
          :activeTabKey="operationActiveTabKey"
          @tabChange="(key) => {this.operationActiveTabKey = key}"
        >
          <div v-if="operationActiveTabKey === '1'">
            <a-descriptions layout="vertical" bordered>
              <a-descriptions-item label="日志内容"><p style="margin: 0;white-space: pre;" v-html="details.f_error_msg === '' ? '--' : toText(details.f_error_msg)"></p></a-descriptions-item>
            </a-descriptions>
          </div>
          <div v-else-if="operationActiveTabKey === '2'" class="no-data"><a-icon type="frown-o"/>暂无数据</div>
        </a-card>
      </a-page-header>
    </a-spin>
  </a-drawer>
</template>

<script>
import { formatDate } from '@vue2-client/utils/util'
import { LogDetailsViewApi, post } from '@vue2-client/services/api'
import { mapState } from 'vuex'
import XBadge from '@vue2-client/base-client/components/common/XBadge'

const statusIconMap = {
  待办的: {
    icon: 'info-circle',
    style: 'color: #fe7300;'
  },
  进行中: {
    icon: 'clock-circle',
    style: 'color: #2d81d7;'
  },
  已完成: {
    icon: 'check-circle',
    style: 'color:#4baf50;'
  },
  已关闭: {
    icon: 'issues-close',
    style: 'color:#ec0019;'
  }
}

const eventIconMap = {
  开始处理事件: {
    icon: 'forward',
    style: 'color: #fe7300;'
  },
  '将事件状态修改为 代办的': {
    icon: 'edit',
    style: 'color: #2d81d7;'
  },
  '将事件状态修改为 已关闭': {
    icon: 'issues-close',
    style: 'color:#ec0019;'
  },
  已完成对事件的处理: {
    icon: 'check-circle',
    style: 'color:#4baf50;'
  }
}

export default {
  name: 'LogDetailsView',
  components: {
    XBadge
  },
  data () {
    return {
      // 日志ID
      id: 0,
      // 日志详情加载,
      loadLogDetails: true,
      // 页面宽度
      screenWidth: document.documentElement.clientWidth,
      // 日志详情
      details: {
        id: 0,
        f_service: '',
        f_src: '',
        f_web_url: '',
        f_log_type: '',
        f_error_title: '',
        f_times: '',
        f_first_update_time: '',
        f_last_update_time: '',
        f_status: '待办的',
        f_error_msg: ''
      },
      // 处理情况数组
      eventList: [],
      // 处理情况描述
      remark: '',
      operationTabList: [
        {
          key: '1',
          tab: '基本信息'
        }
      ],
      operationActiveTabKey: '1'
    }
  },
  mounted () {
    this.initView()
  },
  filters: {
    statusIconFilter (type) {
      return statusIconMap[type].icon
    },
    statusIconStyleFilter (type) {
      return statusIconMap[type].style
    },
    eventIconFilter (type) {
      return eventIconMap[type].icon
    },
    eventIconStyleFilter (type) {
      return eventIconMap[type].style
    }
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['isMobile'])
  },
  props: {
    logid: {
      type: String || Number,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 初始化组件
    initView () {
      this.getLog(this.logid)
    },
    onClose () {
      this.$emit('update:visible', false)
    },
    // 获取日志详情信息
    getLog (logId) {
      this.loadLogDetails = true
      return post(LogDetailsViewApi.getLogDetails, {
        id: logId
      })
        .then(res => {
          this.details = res
          this.getRecord()
          this.loadLogDetails = false
        }, err => {
          this.loadLogDetails = false
          console.warn(err)
        })
    },
    getRecord () {
      return post(LogDetailsViewApi.getLogRecordList, {
        pageNo: 1,
        pageSize: 500,
        dataId: this.logid,
        type: '异常处理'
      })
        .then(res => {
          this.eventList = res.data.reverse()
        })
    },
    updateLogStatus (status) {
      if (this.loadLogDetails) {
        return
      }
      const _this = this
      return post(LogDetailsViewApi.updateLogStatusData, {
        id: _this.logid,
        status: status,
        username: _this.currUser.name
      }).then(res => {
        _this.getLog(_this.logid)
        if (res.nums === 1) {
          _this.$message.success('操作成功')
        } else {
          _this.$message.error('操作失败')
        }
      })
    },
    format (date, format) {
      return formatDate(date, format)
    },
    toText (text) {
      return text
        .replace(/<-/g, '<span style="color: red;font-weight: bold;"><-</span>')
        .replace(/Caused by:/g, '<span style="color: red;font-weight: bold;">Caused by:</span>')
    }
  },
  watch: {
    'visible' (val) {
      if (val) {
        this.initView()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.detail-layout {
  margin-left: 44px;
}
.text {
  color: rgba(0, 0, 0, .45);
}

.heading {
  color: rgba(0, 0, 0, .85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, .25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }
  .text {

  }
  .status-list {
    text-align: left;
  }
}

.row {
  display: flex;

  .content {
    -webkit-box-flex: 1;
    flex: auto;
    -ms-flex: auto;
  }

  .extra {
    flex: 0 1 auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    min-width: 242px;
    margin-left: 88px;
    text-align: right;
  }
}
</style>
