<template>
  <div class="fullheight">
    <ht-table
      @load="loadData"
      :data="data"
      :pageResult="pageResult"
      quick-search-props="subject,procInstId,procDefKey,taskName"
      ref="htTable"
      :default-sorter="[{direction: 'DESC', property: 'call_time_'}]"
      :show-export="false"
      :show-custom-column="false"
    >
      <!-- <template v-slot:toolbar>
        <el-button-group>
          <ht-delete-button
            :url="deleteUrl"
            :htTable="$refs.htTable"
            @after-delete="afterDelete"
            >删除</ht-delete-button
          >
        </el-button-group>
      </template> -->

      <template>
        <ht-table-column type="index" width="50" align="center" label="序号" />
        <ht-table-column
          prop="url"
          label="调用接口"
          :sortable="true"
          :show-overflow-tooltip="true"
        >
          <template v-slot="data">
            <el-link type="primary" title="查看明细" @click="openDetail(data)">
              {{ data.row.url }}
            </el-link>
          </template>
        </ht-table-column>
        <ht-table-column
          prop="desc"
          label="接口描述"
          :show-overflow-tooltip="true"
        >
          <!-- <template v-slot="{row}">
            <el-tag
              v-show="row.isSuccess==s.value"
              :type="s.type"
              v-for="s in statusArray"
              :key="s.value"
            >{{s.text}}</el-tag>
          </template> -->
        </ht-table-column>
         <ht-table-column
          prop="callTime"
          width="150"
          label="调用时间"
          :show-overflow-tooltip="true"
        />
        <ht-table-column
          prop="eventType"
          label="事件类型"
          width="120"
          :show-overflow-tooltip="true"
        >
        <!-- <template v-slot="data">
          {{data.row}}
        </template> -->
        </ht-table-column>
        <ht-table-column
          prop="response"
          label="调用结果"
         
          :show-overflow-tooltip="true"
        ></ht-table-column>
        <ht-table-column prop="isSuccess" label="是否调用成功" width="120">
          <template v-slot="data">
            <!-- {{data.row.isSuccess}} -->
            <el-tag type="success" v-if="data.row.isSuccess == '1'"
              >成功</el-tag
            >
            <el-tag type="danger" v-else>失败</el-tag>
          </template>
        </ht-table-column>
        <!-- <ht-table-column prop="response" label="调用结果" width="100">
          <template v-slot="data">
            {{data.row.response.massage}}
          </template>
        </ht-table-column> -->
    
        <!-- <ht-table-column prop="header" width="120" label="请求头">
          <template v-slot='data'>
            {{data.headers}}
          </template>
        </ht-table-column> -->
        <!-- <ht-table-column prop="params" label="请求参数">
          <template v-slot='data'>

          </template>
        </ht-table-column> -->
      </template>
    </ht-table>

    <ht-sidebar-dialog
      width="30%"
      title="接口事件明细"
      :visible="dialogVisible"
      :before-close="handleClose"
    >
    <el-button
        style="float: right;z-index: 15000;position: relative;"
        @click="dialogVisible = false"
        type="danger"
        icon="el-icon-refresh-left"
        >返回</el-button
      >
      <el-form v-model="curData" data-vv-scope="editForm">
        <el-form-item label="调用地址：" prop="name">{{
          curData.url
        }}</el-form-item>
        <el-form-item label="接口描述：" prop="name">
          {{ curData.desc }}
        </el-form-item>
        <el-form-item label="是否成功：" prop="receivers">
          {{ curData.isSuccess == '0' ? '失败' : '成功' }}
        </el-form-item>
        <el-form-item label="调用时间：" prop="content">
          {{ curData.callTime == '' ? '-' : curData.callTime}}
        </el-form-item>
        <el-form-item label="请求头：" prop="content">
          {{ curData.header == '' ? '-' : curData.header }}
        </el-form-item>
         <el-form-item label="调用结果：">
          <textarea
            :disabled="true"
            cols="55"
            rows="35"
            style="font-size:14px"
            >{{ curData.response }}</textarea
          >
        </el-form-item>
        <el-form-item label="请求参数：">
          <textarea
            :disabled="true"
            cols="55"
            rows="35"
            style="font-size:14px"
            >{{ curData.params }}</textarea
          >
        </el-form-item>
      </el-form>
    </ht-sidebar-dialog>
  </div>
</template>
<script>
import req from '@/request.js'
export default {
  components: {},
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      data: [],
      pageResult: {
        page: 1,
        pageSize: 50,
        total: 0
      },
      curData: {},
      dialogVisible: false,
      statusArray: [
        {text: '失败', value: 0, type: 'danger'},
        {text: '成功', value: 1, type: 'success'}
      ],
      typeArray: [
        {text: '任务创建', value: 'taskCreate'},
        {text: '任务完成', value: 'taskComplete'},
        {text: '流程发起', value: 'startEvent'},
        {text: '流程结束', value: 'endEvent'}
      ]
    }
  },
  computed: {
    deleteUrl: function() {
      return window.context.bpmRunTime + '/logs/messageLog/v1/removes'
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
    },
    // openDetail(row) {
    //   this.curRow = row;
    //   this.dialogVisible = true;
    // },
    openDetail(data) {
      //console.log(data)
      this.curData = data.row
      //console.log(this.curData, 'data')
      this.dialogVisible = true
    },
    loadData(param, cb) {
      req
        .post(window.context.bpmRunTime + '/logs/bpmCallLog/v1/query', param)
        .then(data => {
          console.log(data, 'data')
          let response = data.data
          this.data = response.rows
          this.pageResult = {
            page: response.page,
            pageSize: response.pageSize,
            total: response.total
          }
        })
        .finally(() => cb())
    },
    afterDelete() {
      this.$refs.htTable.load()
    },
    reinvoke(id) {
      let this_ = this
      req
        .post(
          window.context.bpmRunTime + '/runtime/bpmCallLog/v1/reinvoke/' + id
        )
        .then(function(response) {
          let data = response.data
          if (data.state) {
            this_.$message.success(data.message)
            this_.$refs.htTable.load(true)
          } else {
            this_.$message.fail(data.message)
          }
        })
    },
    signSuccess(id) {
      let this_ = this
      req
        .post(
          window.context.bpmRunTime + '/runtime/bpmCallLog/v1/signSuccess/' + id
        )
        .then(function(response) {
          let data = response.data
          if (data.state) {
            this_.$message.success(data.message)
            this_.$refs.htTable.load(true)
          } else {
            this_.$message.fail(data.message)
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
.aside-width {
  width: $--aside-width !important;
}

div >>> .el-form-item--small {
  margin-bottom: 10px;
}
/* 设置滚动条的样式 */
/deep/ ::-webkit-scrollbar {
  width: 8px;
  background-color: #fff;
}

/* 滚动槽 */
/deep/ ::-webkit-scrollbar-track {
  border-radius: 8px;
}

/* 滚动条滑块 */
/deep/ ::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #eee;
}
</style>
