<template>
  <app-dialog v-model="visible" :fullscreen="true" :hide-footer="true" :loading="loading" :title="title" append-to-body class="detail-dialog" width="800px">
    <el-tabs v-model="activeName" class="tabs flex-col  fullheight" @tab-click="handleClick">
      <el-tab-pane label="java程序采集" name="first">
        <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
          <div class=" bg-white h-100 flex-col  border-radius-5">
            <div class="mb-15 d-flex align-items-center">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addosd"> 新增</el-button>
              <el-button data-add- icon="el-icon-delete" size="mini" type="danger" @click="crea">删除</el-button>
              <app-filter ref="app-filter" :model="filters" class="ml-100 bg-white  border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
                <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="24" el-type="input" label="任务名称:">
                  <el-input v-model="filters.name" clearable placeholder="请输入名称" @keyup.enter.native="$refs['app-filter'].query" />
                </app-filter-item>
              </app-filter>
            </div>
            <app-table
              :column="columns"
              :pagination="pagination"
              :table-data="tableData"
              :table-loading="tableLoading"
              :total="total"
              @pagination-change="onPaginationChange"
              @row-dblclick="showDetail"
            >
              <template #deployed="scope">
                <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
                  {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </app-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Kettle采集" name="second">
        <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
          <div class=" bg-white h-100 flex-col  border-radius-5">
            <div class="mb-15 d-flex align-items-center">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addosd"> 新增</el-button>
              <el-button data-add- icon="el-icon-delete" size="mini" type="danger" @click="crea">删除</el-button>
              <app-filter ref="app-filter" :model="filters" class="ml-100 bg-white  border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
                <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="24" el-type="input" label="任务名称:">
                  <el-input v-model="filters.name" clearable placeholder="请输入名称" @keyup.enter.native="$refs['app-filter'].query" />
                </app-filter-item>
              </app-filter>
            </div>
            <app-table
              :column="columns"
              :pagination="pagination"
              :table-data="tableData"
              :table-loading="tableLoading"
              :total="total"
              @pagination-change="onPaginationChange"
              @row-dblclick="showDetail"
            >
              <template #deployed="scope">
                <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
                  {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </app-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="ETL配置采集" name="third">
        <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
          <div class="bg-white h-100 flex-col  border-radius-5">
            <div class="mb-15 d-flex align-items-center">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addosd"> 新增</el-button>
              <el-button data-add- icon="el-icon-delete" size="mini" type="danger" @click="crea">删除</el-button>
              <app-filter ref="app-filter" :model="filters" class="ml-100 bg-white  border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
                <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="24" el-type="input" label="任务名称:">
                  <el-input v-model="filters.name" clearable placeholder="请输入名称" @keyup.enter.native="$refs['app-filter'].query" />
                </app-filter-item>
              </app-filter>
            </div>
            <app-table
              :column="columns"
              :pagination="pagination"
              :table-data="tableData"
              :table-loading="tableLoading"
              :total="total"
              @pagination-change="onPaginationChange"
              @row-dblclick="showDetail"
            >
              <template #deployed="scope">
                <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
                  {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </app-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Sqoop脚本采集" name="four">
        <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
          <div class="bg-white h-100 flex-col  border-radius-5">
            <div class="mb-15 d-flex align-items-center">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addosd"> 新增</el-button>
              <el-button data-add- icon="el-icon-delete" size="mini" type="danger" @click="crea">删除</el-button>
              <app-filter ref="app-filter" :model="filters" class="ml-100 bg-white  border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
                <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="24" el-type="input" label="任务名称:">
                  <el-input v-model="filters.name" clearable placeholder="请输入名称" @keyup.enter.native="$refs['app-filter'].query" />
                </app-filter-item>
              </app-filter>
            </div>
            <app-table
              :column="columns"
              :pagination="pagination"
              :table-data="tableData"
              :table-loading="tableLoading"
              :total="total"
              @pagination-change="onPaginationChange"
              @row-dblclick="showDetail"
            >
              <template #deployed="scope">
                <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
                  {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </app-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Spark脚本采集" name="five">
        <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
          <div class="bg-white h-100 flex-col  border-radius-5">
            <div class="mb-15 d-flex align-items-center">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addosd"> 新增</el-button>
              <el-button data-add- icon="el-icon-delete" size="mini" type="danger" @click="crea">删除</el-button>
              <app-filter ref="app-filter" :model="filters" class="ml-100 bg-white  border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
                <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="24" el-type="input" label="任务名称:">
                  <el-input v-model="filters.name" clearable placeholder="请输入名称" @keyup.enter.native="$refs['app-filter'].query" />
                </app-filter-item>
              </app-filter>
            </div>
            <app-table
              :column="columns"
              :pagination="pagination"
              :table-data="tableData"
              :table-loading="tableLoading"
              :total="total"
              @pagination-change="onPaginationChange"
              @row-dblclick="showDetail"
            >
              <template #deployed="scope">
                <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
                  {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </app-table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="Api接口采集" name="six">
        <div class="flex-1 pa-11 bg-white flex-col mt-11 border-radius-5">
          <div class="bg-white h-100 flex-col  border-radius-5">
            <div class="mb-15 d-flex align-items-center">
              <el-button icon="el-icon-plus" size="mini" type="primary" @click="addosd"> 新增</el-button>
              <el-button data-add- icon="el-icon-delete" size="mini" type="danger" @click="crea">删除</el-button>
              <app-filter ref="app-filter" :model="filters" class="ml-100 bg-white  border-radius-5" label-width="90px" @query="onQuery" @reset="onReset">
                <app-filter-item :filter-config="{ operation: 'EQUAL' }" :span="24" el-type="input" label="任务名称:">
                  <el-input v-model="filters.name" clearable placeholder="请输入名称" @keyup.enter.native="$refs['app-filter'].query" />
                </app-filter-item>
              </app-filter>
            </div>
            <app-table
              :column="columns"
              :pagination="pagination"
              :table-data="tableData"
              :table-loading="tableLoading"
              :total="total"
              @pagination-change="onPaginationChange"
              @row-dblclick="showDetail"
            >
              <template #deployed="scope">
                <el-tag :type="scope.row['deployed'] === 1 ? '' : 'danger'">
                  {{ scope.row['deployed'] === 1 ? '已发布' : '未发布' }}
                </el-tag>
              </template>
            </app-table>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </app-dialog>
</template>

<script>
import tableMixin from '@/mixins/table.js'; // 列表mixins
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/tyDataManageQuery';
// import API from '@/api/business/dataServiceAPI';

export default {
  name: 'ServiceDialog',
  mixins: [dialogMixin, tableMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    const TABLE_CONFIG = {
      // 列表表头
      columns: [
        { label: '任务名称', prop: 'companyName', width: '180', align: 'center' },
        { label: '执行器', prop: 'name', width: '180', align: 'center' },
        { label: '任务调度类型', prop: 'code', width: '150', align: 'center' },
        { label: 'cron表达式', prop: 'sysName', width: '200', align: 'center' },
        { label: '任务分组', prop: 'sysCode', width: '120', align: 'center' },
        { label: '下次执行时间', prop: 'tableName', width: '140', align: 'center' },
        { label: '启动状态', prop: 'totalNum', width: '130', align: 'center' },
        { label: '数据变化时间', prop: 'countDate', align: 'center' },
        {
          dataType: 'option',
          label: '操作',
          width: '240px',
          align: 'center',
          fixed: 'right',
          operation: [
            {
              name: '立即执行',
              icon: 'el-icon-video-play',
              // showHide: (row) => {},
              clickFun: row => {
                this.currentRow = row;
                this.dialogTitle = `${row.name} - 数据信息`;
                this.dialogVisible = true;
              },
            },
          ],
        },
      ],
      tableData: [
        {
          id: '1',
          companyName: '用于文件管理新增和修改',
          name: '萨达撒',
          code: 'i24Jh2jN',
          sysName: 'STATUS',
          sysCode: '4114',
          tableName: '454',
          totalNum: '22',
          addNum: '45',
          updateNum: '1',
          delNum: 1,
          changeNum: '222',
          countDate: '233',
        },
        {
          id: '1',
          companyName: '用于文件管理新增和修改',
          name: '萨达撒',
          code: 'i24Jh2jN',
          sysName: 'STATUS',
          sysCode: '4114',
          tableName: '454',
          totalNum: '22',
          addNum: '45',
          updateNum: '1',
          delNum: 1,
          changeNum: '222',
          countDate: '233',
        },
      ],
    };

    return {
      ...TABLE_CONFIG,
      activeName: 'first',
    };
  },
  mounted() {},
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
      this.id = data.id;
      this.updateApiCallsData(data.id);
      this.apiCalls();
    },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    computed: {
      dataMethod() {
        return API.getHistroyByDay;
      },
    },
    // apiCalls() {
    //   const data = this.updateApiCallsData(this.id);
    //   // console.log('======', data);
    //   API.apiLog(data)
    //     .then(res => {
    //       console.log('cacacacssaa', res.rows);
    //       this.tableData = res.rows || [];
    //       if (res && res.rows && Array.isArray(res.rows)) {
    //         this.tableData = res.rows.map(item => {
    //           return {
    //             apiName: item.apiName,
    //             apiUrl: item.apiUrl,
    //             requestIp: item.requestIp,
    //             requestTime: item.requestTime,
    //             requestParams: item.requestParams,
    //             responseResult: item.responseResult,
    //             responseTimeLength: item.responseTimeLength,
    //             requestStatus: item.requestStatus,
    //           };
    //         });
    //       } else {
    //         console.error('接口返回数据格式不符合预期，无法正确渲染日志信息');
    //         this.tableData = [];
    //       }
    //     })
    //     .catch(error => {
    //       console.error('获取数据源失败', error);
    //     });
    // },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  padding-top: 24px;
  padding-left: 48px;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}
</style>
