<template>
  <div class="plan">
    <Panel collapse title="经办详细" @opened="handleLoad">
      <el-table :data="[{}]" border style="width: 100%" v-loading="loading">
        <el-table-column label="创建人" align="center">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" width="300" v-if="basicInfo.haveCrUser">
              <span style="color: #99a9bf; margin-right: 10px">最后登录时间:</span>
              {{formatterDateTime(null, null, crUserInfo.laseLogDate)}}
              <br>
              <span style="color: #99a9bf; margin-right: 10px;">最后登录地址:</span>
              {{ crUserInfo.laseLogIp|| '-' }}
              <el-button slot="reference">{{basicInfo.crUserName}}</el-button>
            </el-popover>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template>{{basicInfo.crTime ? formatterDateTime(null, null, basicInfo.crTime) : '-'}}</template>
        </el-table-column>
        <el-table-column label="最后操作人" align="center">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" width="300" v-if="basicInfo.haveOpUser">
              <span style="color: #99a9bf; margin-right: 10px">最后登录时间:</span>
              {{formatterDateTime(null, null, opUserInfo.laseLogDate)}}
              <br>
              <span style="color: #99a9bf; margin-right: 10px;">最后登录地址:</span>
              {{ opUserInfo.laseLogIp|| '-' }}
              <el-button slot="reference">{{basicInfo.opUserName}}</el-button>
            </el-popover>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="最后操作时间" align="center">
          <template>{{basicInfo.opTime ? formatterDateTime(null, null, basicInfo.opTime) : '-'}}</template>
        </el-table-column>
      </el-table>

      <Panel title="操作历史" style="margin-left: 0; margin-right: 0;">
        <template slot="buttons">
          <!--<el-button class="blue" icon="el-icon-fa-list">字段</el-button>-->
          <el-popover placement="bottom" trigger="click" width="100">
            <el-checkbox v-model="columns.svrip">服务器IP</el-checkbox>
            <br>
            <el-checkbox v-model="columns.svrname">服务器名称</el-checkbox>
            <br>
            <el-checkbox v-model="columns.actdefn">操作定义</el-checkbox>
            <br>
            <el-checkbox v-model="columns.acttype">协议类型</el-checkbox>
            <br>
            <el-checkbox v-model="columns.reqip">请求者IP</el-checkbox>
            <br>
            <el-checkbox v-model="columns.devtype">请求终端类型</el-checkbox>
            <br>
            <el-button slot="reference" icon="el-icon-fa-list" class="blue">字段</el-button>
          </el-popover>
          <el-button class="blue" icon="el-icon-fa-search" @click="handleLoad" style="margin-left: 3px;">查询</el-button>
        </template>
        <el-table :data="pageTable.data" style="width: 100%" v-loading="pageTable.isLoading" border ref="table">
          <el-table-column type="expand" align="center">
            <template slot-scope="props">
              <el-form label-position="left" class="table-expand">
                <el-form-item label="操作用户"><span>{{ props.row.username }}</span></el-form-item>
                <el-form-item label="操作开始时间"><span>{{ formatterDateTime(null, null, props.row.actsta) }}</span>
                </el-form-item>
                <el-form-item label="操作结束时间"><span>{{ formatterDateTime(null, null, props.row.actend) }}</span>
                </el-form-item>
                <el-form-item label="请求者 IP"><span>{{ props.row.reqip }}</span></el-form-item>
                <el-form-item label="服务器 IP"><span>{{ props.row.svrip }}</span></el-form-item>
                <el-form-item label="服务器名称"><span>{{ props.row.svrname }}</span></el-form-item>
                <el-form-item label="协议类型"><span>{{ foemarActtype(null, null, props.row.acttype) }}</span></el-form-item>
                <el-form-item label="操作定义"><span>{{ props.row.actdefn }}</span></el-form-item>
                <el-form-item label="操作类型"><span>{{ foemarOptype(null, null, props.row.optype) }}</span></el-form-item>
                <el-form-item label="处理代码"><span>{{ props.row.respcode }}</span></el-form-item>
                <el-form-item label="请求终端类型"><span>{{ props.row.devtype }}</span></el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="svrip" align="center" label="服务器IP" show-overflow-tooltip v-if="columns.svrip"/>
          <el-table-column prop="svrname" align="center" label="服务器名称" show-overflow-tooltip v-if="columns.svrname"/>
          <el-table-column prop="username" align="center" label="操作用户"/>
          <el-table-column prop="actsta" align="center" label="操作时间" :formatter="formatterDateTime" show-overflow-tooltip/>
          <el-table-column prop="optype" align="center" label="操作类型" :formatter="foemarOptype" show-overflow-tooltip/>
          <el-table-column prop="actdefn" align="center" label="操作定义" v-if="columns.actdefn"/>
          <el-table-column prop="acttype" align="center" label="协议类型" :formatter="foemarActtype" show-overflow-tooltip
                           v-if="columns.acttype"/>
          <el-table-column prop="reqip" align="center" label="请求者IP" show-overflow-tooltip v-if="columns.reqip"/>
          <el-table-column prop="devtype" align="center" label="请求终端类型" show-overflow-tooltip v-if="columns.devtype"/>
        </el-table>
        <export-ctrl class="pull-left" @export="pageTable.handleExport($event, $refs.table)"/>
        <el-pagination background :page-size.sync="pageTable.size" :current-page.sync="pageTable.curr" :total="pageTable.total"/>
      </Panel>
    </Panel>
  </div>
</template>
<script>
  import UserAPI from "../api/base/usrm/UserAPI";
  import {PageTable} from '@/libs';
  import ajax from "@/libs/Ajax";

  export default {
    props: {
      data: Object,
      log: {type: Boolean, default: false},
      lower: {type: Boolean, default: false},
      // autoLoad: {type: Boolean, default: true}
    },
    components: {PageTable},
    data() {
      return {
        pageTable: new PageTable({
          autoLoad: false,
          doLoad: params => ajax.get(`/logs/LogsOperData/queryDataOperationHistory`, {params}),
          param: {bizUuid: this.bizUuid},
          log: false
        }),
        columns: {
          svrip: false,
          svrname: false,
          actdefn: false,
          acttype: false,
          reqip: false,
          devtype: false
        },
        basicInfo: {
          haveCrUser: true,
          crUserName: '',
          crTime: 0,
          haveOpUser: true,
          opUserName: '',
          opTime: 0
        },
        crUserInfo: {},
        opUserInfo: {},
        loading: false
      }
    },
    watch: {},
    mounted() {
      // this.$nextTick(() => {
      //     if (this.autoLoad) this.load();
      // })
    },
    methods: {
      async load() {

        try {
          this.loading = true;
          if (this.log) {
            console.log("data:", this.data);
          }
          let col = ['crUserUuid', 'crUserName', 'crTime', 'opUserUuid', 'opUserName', 'opTime'];

          if (this.lower) {
            col = col.map(v => v.toLowerCase());
          }

          let [crUserUuid, crUserName, crTime, opUserUuid, opUserName, opTime] = col;
          this.basicInfo.crUserName = this.data[crUserName];
          this.basicInfo.crTime = this.data[crTime];
          this.basicInfo.haveCrUser = false;
          if (this.data[crUserUuid]) {
            this.crUserInfo = await UserAPI.getUserInfo(this.data[crUserUuid]);
            if (this.crUserInfo && this.crUserInfo.userName) {
              this.basicInfo.crUserName = this.crUserInfo.userName;
              this.basicInfo.haveCrUser = true;
            }
          }

          this.basicInfo.opUserName = this.data[opUserName];
          this.basicInfo.opTime = this.data[opTime];
          this.basicInfo.haveOpUser = false;
          if (this.data[opUserUuid]) {
            this.opUserInfo = await UserAPI.getUserInfo(this.data[opUserUuid]);
            if (this.opUserInfo && this.opUserInfo.userName) {
              this.basicInfo.opUserName = this.opUserInfo.userName;
              this.basicInfo.haveOpUser = true;
            }
          }
        } finally {
          this.loading = false;
        }
      },
      handleLoad() {
        this.load();
        if (this.data && this.data.uuid) {
          this.pageTable.param.bizUuid = this.data.uuid;
          this.pageTable.handleLoad();
        }
        // else {
        //     this.pageTable.param.bizUuid = this.bizUuid;
        //     this.pageTable.handleLoad();
        // }
      },
      foemarActtype(row, column, value) {
        return value === '1' ? "HTTP" : "-";
      },
      foemarOptype(row, column, cellValue) {
        let label = "unknow";
        switch (cellValue) {
          case "01":
            label = "新增";
            break;
          case "02":
            label = "修改";
            break;
          case "03":
            label = "删除";
            break;
        }
        return label;
      },
    }
  }
</script>
<style lang="scss">
  .plan {

    margin-top: 0;

    .basic-info td {
      margin: 0 auto;
      text-align: center;
    }

    .table-expand {
      font-size: 0;

      label {
        width: 90px;
        color: #99a9bf;
      }

      .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 100%;
      }
    }

  }

  .info-table th {
    padding: 2px 10px;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    font-weight: 400;
    color: rgb(32, 32, 32);
  }

  .info-table td {
    padding: 2px 10px;
    font-weight: normal;
  }
</style>