<template>
  <div class="serviceTopology">
    <div class="serviceTopology_head flex">
      <div class="status flex-wrap">
        <div class="manageTitle">服务拓扑</div>
        <div class="status0"><span class="icon"></span>正常</div>
        <div class="status1"><span class="icon"></span>异常</div>
      </div>
      <div class="btn">
        <el-button size="small" @click="handleLook" plain type="primary">查看日志</el-button>
      </div>
    </div>
    <div class="serviceTopology_cont">
      <div class="title">当前服务：{{title}}</div>
      <!-- <sankeyChart /> -->
      <OrgTree :dataList="dataList" :renderContent="renderContent" />
    </div>
    <Dialog :flag="logVisible" width="1200px">
      <div class="logDialog">
        <div class="title">查看日志</div>
        <div class="interfaceLog content">
          <div class="interfaceLog_head flex">
            <div class="logTitle">当前服务：{{title}}</div>
            <div class="interfaceLog_head_time flex-wrap">
              <div class="interfaceLog_head_time_start">
                <el-date-picker v-model="timeStart" value-format="yyyy-MM-dd HH:mm:ss" size="small" @change="timeStartChange" type="datetime" placeholder="选择开始日期时间" default-time="00:00:00">
                </el-date-picker>
              </div>
              <div class="interfaceLog_head_time_end">
                <el-date-picker v-model="timeEnd" value-format="yyyy-MM-dd HH:mm:ss" size="small" @change="timeEndChange" type="datetime" placeholder="选择结束日期时间" default-time="00:00:00">
                </el-date-picker>
              </div>
              <!-- <div class="">
                <el-input placeholder="请选择日期" suffix-icon="el-icon-search" size="small" v-model="input1">
                </el-input>
              </div> -->
            </div>
          </div>
          <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="interfaceLog_content flex-wrap">
            <el-table :data="tableData" class="table" height="500px" border style="width: 100%">
              <el-table-column prop="logType" label="日志类型">
              </el-table-column>
              <el-table-column prop="logTime" label="发生时间">
              </el-table-column>
              <el-table-column label="发生位置">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" :content="scope.row.logPositionID" placement="top">
                    <div class="logPositionID">{{scope.row.logPositionID}}</div>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="resultDetails" label="成败详情">
              </el-table-column>
              <el-table-column label="成败代码">
                <template slot-scope="scope">
                  <span :class="scope.row.resultCode == '成功' ? 'success' : 'error'">{{scope.row.resultCode}}</span>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div class="interfaceLog_content_progress">
              <el-timeline>
                <el-timeline-item v-for="(item,index) in preDatas" :key="index">
                  <div class="list">
                    <div class="list_status"></div>
                    <div class="list_title flex">
                      <span class="l_title">{{item.title}}</span>
                      <span v-if="item.status == 1" class="l_status l_success">成功</span>
                      <span v-else class="l_status l_error">失败</span>
                    </div>
                    <div class="list_code">{{item.code}}</div>
                    <div class="list_time">{{item.time}}</div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div> -->
          </div>
        </div>
        <div class="foot">
          <el-button size="medium" @click="handleOk" type="primary" class="r25 r26">提交</el-button>
          <el-button size="medium" class="r26" @click="logVisible = false">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search"
// import sankeyChart from './components/sankeyChart.vue'
import Dialog from '@/layout/components/Dialog'
import { Query } from "@/api/dataIntegration"
import { parseTime } from "@/utils/index"
import OrgTree from './components/orgTree.vue'
import { translateDataToTreeAllTree } from '@/utils/validate'
//默认节点
const defaultImg = require('@/assets/topplogy/ic_pulll_default.png')
//默认节点-错误
const defaultImgError = require('@/assets/topplogy/ic_pull_error.png')
//默认节点-选中
const defaultImgCheck = require('@/assets/topplogy/ic_pulll_check.png')
//kafka节点
const kafkaImg = require('@/assets/topplogy/ic_Kafka_default.png')
//kafka节点-错误
const kafkaImgError = require('@/assets/topplogy/ic_Kafka_error.png')
//kafka节点-选中
const kafkaImgCheck = require('@/assets/topplogy/ic_Kafka_check.png')
export default {
  name: 'serviceTopology',
  components: { Dialog, Search, OrgTree },
  created () {
    const { serviceID, serviceName } = this.$route.params
    const capName = sessionStorage.getItem('serviceTopology-serviceName')
    const id = sessionStorage.getItem('serviceTopology-serviceID')
    if (serviceID || serviceName) {
      sessionStorage.setItem('serviceTopology-serviceID', serviceID)
      sessionStorage.setItem('serviceTopology-serviceName', serviceName)
      this.title = serviceName
      this.id = serviceID
    } else {
      this.title = capName
      this.id = id
    }
    for (let i = 0; i < 6; i++) {
      this.treeDatas.push(this.id)
    }
    this.getTreeData()
  },
  data () {
    return {
      logVisible: false,
      timeStart: parseTime(new Date(), "{y}-{m}-{d} 00:00:00"),
      timeEnd: parseTime(
        new Date().getTime() + 24 * 60 * 60 * 1000,
        "{y}-{m}-{d} 00:00:00"
      ),
      tableData: [],
      preDatas: [],
      input1: "",
      title: "",
      id: "",
      loading: false,
      treeDatas: [],
      dataList: {}
    }
  },
  methods: {
    async getQuery () {
      try {
        this.loading = true
        const { code, returnData } = await Query({
          id: DATACONTENT_ID.sysServiceTopTableId,
          dataContent: JSON.stringify([this.id, this.timeStart, this.timeEnd])
        })
        if (code == 0) {
          const { listValues } = returnData
          this.tableData = listValues
          this.loading = false
        } else {
          this.$message.error('网络错误')
          this.loading = false
        }
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },
    handleLook () {
      this.logVisible = true
      this.getQuery()
    },
    timeStartChange (val) {
      if (val >= this.timeEnd) {
        this.timeStart = ''
        this.$message.error('开始时间不能大于结束时间，请重新选择')
      }
    },
    timeEndChange (val) {
      if (val <= this.timeEnd) {
        this.timeEnd = ''
        this.$message.error('结束时间不能小于开始时间，请重新选择')
      }
    },
    handleOk () {
      this.getQuery()
    },
    async getTreeData () {
      const { code, returnData } = await Query({
        id: DATACONTENT_ID.sysServiceTopId,
        dataContent: this.treeDatas
      })
      if (code == 0) {
        const obj = translateDataToTreeAllTree(returnData.listValues, 'upid', 'id')
        this.dataList = obj[0]
      } else {
        this.$message.error('')
      }
    },
    renderContent (h, data) {
      return (
        <div class="renderContent">
          <div class="status">
            <img v-show={data.type == 'service' && data.runState == 0} src={defaultImg} alt={data.sname} />
            <img v-show={data.type == 'service' && data.runState == 1} src={defaultImgCheck} alt={data.sname} />
            <img v-show={data.type == 'service' && data.runState == 2} src={defaultImgError} alt={data.sname} />
            <img v-show={data.type == 'output' && data.runState == 0} src={kafkaImg} alt={data.sname} />
            <img v-show={data.type == 'output' && data.runState == 1} src={kafkaImgCheck} alt={data.sname} />
            <img v-show={data.type == 'output' && data.runState == 2} src={kafkaImgError} alt={data.sname} />
          </div>
          <el-tooltip class="item" effect="dark" content={data.sname} placement="top">
            <div class="name">{data.sname}</div>
          </el-tooltip>
        </div>
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.serviceTopology {
  &_head {
    line-height: 32px;
    .status {
      font-size: 14px;
      .icon {
        width: 14px;
        height: 14px;
        background: #041741;
        border-radius: 2px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        position: relative;
        top: -2px;
      }
      .status0 {
        margin-right: 28px;
        position: relative;
        top: 5px;
      }
      .status1 {
        position: relative;
        top: 5px;
        .icon {
          background-color: #e32d2d;
        }
      }
    }
  }
  &_cont {
    margin-top: 24px;
    padding: 35px;
    background-color: #fff;
    height: calc(100vh - 190px);
    .title {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
      margin-bottom: 70px;
    }
  }
}
.interfaceLog {
  padding: 8px 32px 12px 8px;
  .logTitle {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #303133;
  }
  .mr10 {
    margin-right: 10px;
  }
  ::v-deep .interfaceLog_head_time {
    .el-input--prefix .el-input__inner {
      padding-left: 50px;
    }
  }
  .interfaceLog_head_btn {
    ::v-deep .btn {
      margin-right: 0;
    }
  }
  .interfaceLog_head_time_end {
    margin-left: 16px;
  }
  .interfaceLog_content {
    margin-top: 24px;
    ::v-deep .table {
      color: #101116;
      thead {
        color: #101116;
      }
      .success {
        color: #33bf47;
      }
      .error {
        color: #df4545;
      }
      .logPositionID {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    &_progress {
      width: 248px;
      background: #fafcff;
      margin-left: 16px;
      padding: 13px 32px;
      overflow: hidden;
      border: 1px solid #ebeef5;
      ::v-deep .el-timeline {
        padding: 0;
        .el-timeline-item {
          position: relative;
          &::after {
            position: absolute;
            content: "";
            height: 1px;
            width: calc(100% + 4px);
            background-color: #ebeef5;
            left: 28px;
            bottom: 20px;
          }
          &:last-child {
            &::after {
              height: 0;
            }
          }
        }
        .el-timeline-item__node--normal {
          z-index: 2;
          background-color: #fff;
          width: 10px;
          height: 10px;
          left: 0px;
          top: 2px;
        }
        .el-timeline-item__tail {
          border-left: 0px solid #dfe3ea;
          left: 3px;
        }
        .el-timeline-item:last-child .el-timeline-item__tail {
          height: 1000%;
          display: block;
        }
        .list {
          &_status {
            position: absolute;
            width: 20px;
            height: 20px;
            background: #2d67e3;
            left: -5px;
            border-radius: 50%;
            z-index: 1;
          }
          &_title,
          &_code {
            margin-bottom: 7px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #101116;
            .l_status {
              font-size: 12px;
              font-weight: 500;
            }
            .l_success {
              color: #33bf47;
            }
            .l_error {
              color: #e32d2d;
            }
          }
          &_time {
            font-size: 12px;
            font-family: Helvetica;
            font-weight: 400;
            color: #afb4bf;
          }
        }
      }
    }
  }
}
</style>