<template>
<a-drawer
  :visible="visible"
  :destroy-on-close="true"
  width="100%"
  height="50%"
  :get-container="false"
  :wrap-style="{ position: 'absolute' }"
  :closable="false"
  placement="bottom"
  class="integration_schedule_dubug"
>
  <a-tabs size="small">
    <a-tab-pane
      key="1"
      :tab="$t('调试参数')"
    >
      <a-row :gutter="[6, 16]">
        <a-col
          :span="4"
          class="a_label"
          >{{ $t('测试量级') }}：</a-col
        >
        <a-col :span="12">
          <a-select
            :disabled="running"
            v-model="debuggerProcess.limit"
          >
            <a-select-option :value="100">{{ $t('100条') }}</a-select-option>
            <a-select-option :value="1000">{{ $t('1000条') }}</a-select-option>
            <a-select-option :value="10000">{{ $t('10000条') }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row :gutter="[6, 6]">
        <a-col
          :span="4"
          class="a_label"
          >{{ $t('集群类别') }}：</a-col
        >
        <a-col :span="12">
          <a-select
            allowClear
            :disabled="running"
            v-model="debuggerProcess.clusterType"
            @change="changeClusterType"
            :placeholder="$t('请选择集群类别')"
          >
            <a-select-option :value="1">{{ $t('中心端') }}</a-select-option>
            <a-select-option :value="2">{{ $t('前置机') }}</a-select-option>
            <a-select-option :value="3">{{ $t('院端') }}</a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <a-row :gutter="[6, 6]">
        <a-col
          :span="4"
          class="a_label"
          >{{ $t('集群名称') }}：</a-col
        >
        <a-col :span="12">
          <a-select
            :disabled="running"
            v-model="debuggerProcess.clusterId"
            :options="debugClusters"
            :placeholder="$t('请选择集群名称')"
          >
          </a-select>
        </a-col>
      </a-row>
    </a-tab-pane>
    <a-tab-pane
      key="2"
      :tab="$t('调试记录')"
    >
      <div class="log_body">
        <vxe-table
          :row-config="{ isHover: true }"
          stripe
          :show-header="false"
          height="auto"
          :data="logList"
        >
          <vxe-column :title="$t('输出内容')">
            <template #default="{ row }">
              <span class="log_time">{{
                row.time.toCustomize('yyyy-MM-dd hh:mm:ss')
              }}</span>
              <p :class="['log_message', row.type]">
                {{ row.message }}
              </p>
            </template>
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description">{{ $t('暂无调试记录') }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
    </a-tab-pane>
    <a-tab-pane
      key="3"
      :tab="$t('调试结果')"
    >
      <div class="log_body">
        <vxe-table
          :row-config="{ isHover: true }"
          stripe
          height="auto"
          :data="debugSummarys"
        >
          <vxe-column
            :title="$t('任务名称')"
            field="stepName"
          >
          </vxe-column>
          <vxe-column
            :title="$t('类型')"
            field="stepType"
          >
            <template #default="{ row }">
              {{ row.stepType == 'TRANSFER' ? $t('转换') : $t('作业') }}
            </template>
          </vxe-column>
          <vxe-column
            :title="$t('状态')"
            field="nodeState"
          >
          </vxe-column>
          <vxe-column
            :title="$t('影响条数')"
            field="record.insertedCount"
          >
          </vxe-column>

          <vxe-column
            :title="$t('耗时')"
            field="duration"
          >
            <template #default="{ row }">
              <template v-if="row.duration > -1"> {{ row.duration }}ms </template>
              <template v-else>--</template>
            </template>
          </vxe-column>

          <vxe-column
            :title="$t('开始时间')"
            field="startTime"
          >
          </vxe-column>

          <vxe-column
            :title="$t('结束时间')"
            field="endTime"
          >
          </vxe-column>
          <template #empty>
            <a-empty
              :image-style="{
                height: '50px',
              }"
            >
              <span slot="description">{{ $t('暂无调试记录') }}</span>
            </a-empty>
          </template>
        </vxe-table>
      </div>
    </a-tab-pane>
    <template slot="tabBarExtraContent">
      <a-space :size="12">
        <a-button-group>
          <a-button @click="reductionTest">{{ $t('停止') }}</a-button>
          <a-button
            type="primary"
            @click="runTest"
            :loading="running"
            >{{ $t('调试') }}</a-button
          >
        </a-button-group>
        <a-button
          icon="close"
          @click="clearTest"
        />
      </a-space>
    </template>
  </a-tabs>
</a-drawer>
</template>

<script type="text/javascript" src="./service.js"></script>

<style lang="less" scoped>
.integration_schedule_dubug {
  /deep/.ant-drawer .ant-drawer-content .ant-drawer-body {
    height: 100%;
    background: #fff;
    .ant-tabs {
      height: 100%;
    }
    .ant-tabs-bar {
      background: #fff;
      border-bottom: 1px solid #e8e8e8;
      .ant-tabs-tab {
        background: #fff;
      }
      .ant-tabs-ink-bar {
        display: block !important;
      }
    }
    .ant-tabs-content {
      height: calc(100% - 66px);
    }
  }
  .a_label {
    text-align: right;
  }
  .log_body {
    height: 100%;
  }
}
</style>