<template>
  <div class="fullheight historyDataConfig">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本配置" name="1" disabled>
        <el-card class="box-card">
          <el-form v-form data-vv-scope="appModelForm">
            <ht-form-item label="归档至数据源" label-width="180px">
              <ht-select
                clearable
                :options="dataSourcesInBean"
                :props="{key: 'alias', value: 'name'}"
                v-model="configFormData.dataKey"
                style="width:220px;"
              />
            </ht-form-item>
            <ht-form-item label="定时任务同步" label-width="180px">
              <el-button type="primary" @click="runTime">立即执行</el-button>
            </ht-form-item>
            <ht-form-item label-width="180px">
              自动执行
              <ht-switch
                v-model="configFormData.autorun"
                active-value="1"
                inactive-value="0"
                @change="changeStatus"
              >
              </ht-switch>
            </ht-form-item>
            <ht-form-item
              label-width="180px"
              v-if="configFormData.autorun == 1"
            >
              <el-checkbox-group v-model="chkWeekList" @change="changeStatus">
                <el-checkbox-button
                  v-for="item in chkWeek"
                  :key="item.key"
                  :label="item.key"
                >
                  {{ item.value }}
                </el-checkbox-button>
              </el-checkbox-group>

            </ht-form-item>
            <ht-form-item
              label-width="180px"
              v-if="configFormData.autorun == 1"
            >
              <el-time-picker
                v-model="dayTime"
                placeholder="选择时间"
                value-format="HH:mm:ss"
                @change="changeStatus"
              ></el-time-picker>
            </ht-form-item>
            <ht-form-item label="已归档数据处理" label-width="180px">
              <el-radio-group @input="beforeInputEvent" :value="configFormData.deleteData">
                <el-radio label="1">清空</el-radio>
                <el-radio label="2">不清空</el-radio>
              </el-radio-group>
            </ht-form-item>
            <!-- <ht-form-item label="单次同步数据数量" label-width="180px">
              <el-radio-group v-model="configFormData.limit">
                <el-radio label="2">不限制</el-radio>
                <el-radio label="1">限制</el-radio>
              </el-radio-group>
              <span>
                <ht-input
                  :disabled="configFormData.limit == 2"
                  v-model="configFormData.limitNumber"
                  placeholder="请输入"
                  style="margin:0 10px;width:90px;"
                ></ht-input
                >条</span
              >
            </ht-form-item>-->
            <ht-form-item label="同步时间" label-width="180px">
              <template slot="label">
                <el-tooltip content="当同步时间选择“五个月之前”时，若在6月5日14:13:00时执行归档，则所有“审批结束”且“结束时间”在 2023-01-05 14:13:00以前的数据都要归档。（归档时间 减去 同步时间）">
                  <i class="icon-question" />
                </el-tooltip>
                <span>同步时间</span>
              </template>
              <el-select
                v-model="configFormData.beforeMonth"
                ref="related"
                placeholder="请选择"
                @change="changeStatus"
              >
                <el-option
                  v-for="item in beforeMonthList"
                  :key="item.name"
                  :label="item.comment"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </ht-form-item>
          </el-form>
        </el-card>
      </el-collapse-item>
      <el-collapse-item title="扩展功能" name="2">
        <template slot="title">
          <i
            class="icons"
            :class="
              activeNames.includes('2')
                ? 'el-icon-caret-bottom'
                : 'el-icon-caret-right'
            "
          ></i>
          扩展功能
        </template>
        <ht-table
          @load="loadData"
          @row-click="rowClick"
          :data="data"
          :page-result="pageBean"
          :selection="true"
          :default-sorter="[{direction: 'ASC', property: 'UPDATE_TIME_'}]"
          ref="htTable"
          :show-export="false"
          :show-custom-column="false"
          :border="false"
          @selection-change="mainSelectionChange"
        >
          <!-- <template v-slot:toolbar>
            <el-button
              size="small"
              @click="handleOpen()"
              icon="el-icon-plus"
              type="primary"
              >添加</el-button
            >
            <el-button
                type="danger"
                style="margin-left:10px;"
                icon="el-icon-delete"
                :disabled="isDisabled"
                @click="deleteSelect"
            >删除</el-button>
          </template>-->
          <template>
            <el-table-column type="expand">
              <template v-slot="{row}">
                <el-table
                  :data="row.sonList"
                  border
                  @selection-change="sonSelectionChange"
                >
                  <el-table-column type="expand" v-if="row.sonList.length > 0">
                    <template v-slot="{row}">
                      <el-table
                        :data="row.sonList"
                        border
                        @selection-change="sonSelectionChange"
                      >
                        <el-table-column
                          type="selection"
                          width="150"
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="tableName"
                          label="表名"
                          width="200"
                          show-overflow-tooltip
                        >
                          <template slot-scope="scope">
                            <div>子表名称：{{ scope.row.tableName }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="field"
                          label="关联字段"
                          width="300"
                        >
                          <template slot-scope="scope">
                            <div slot="reference" class="table-text">
                              关联字段：主表: {{ scope.row.parentField }}
                              <span style="margin-left: 5px"
                                >子表：{{ scope.row.field }}
                              </span>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="dml"
                          label="条件"
                          width="200"
                          show-overflow-tooltip
                        >
                          <template slot-scope="scope">
                            <el-popover
                              placement="top-start"
                              width="500"
                              trigger="hover"
                              :content="scope.row.dml"
                            >
                              <div slot="reference" class="table-text">
                                查询条件：{{ scope.row.dml }}
                              </div>
                            </el-popover>
                          </template>
                        </el-table-column>
                        <el-table-column prop="ddl" label="表SQL">
                          <template slot-scope="scope">
                            <div>
                              <el-popover
                                placement="top-start"
                                width="500"
                                trigger="hover"
                                :content="scope.row.ddl"
                              >
                                <div slot="reference" class="table-text">
                                  表SQL语句：{{ scope.row.ddl }}
                                </div>
                              </el-popover>
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="start"
                          label="状态"
                          width="100"
                          show-overflow-tooltip
                        >
                          <template slot-scope="scope">
                            <div v-if="scope.row.start == '1'">
                              状态：<span style="color: rgb(81, 180, 58)"
                                >启用</span
                              >
                            </div>
                            <div v-if="scope.row.start == '0'">
                              状态：<span style="color: rgb(205, 191, 191)"
                                >禁用</span
                              >
                            </div>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="order"
                          label="排序"
                          width="100"
                          show-overflow-tooltip
                        >
                          <template slot-scope="scope">
                            <div>排序:{{ scope.row.order }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column label="操作" align="left" width="180">
                          <template v-slot="{row, index}">
                            <el-button
                              @click="typeOpinion(row, index, 0)"
                              size="small"
                              type="text"
                              >禁用</el-button
                            >
                            <el-button
                              @click="typeOpinion(row, index, 1)"
                              size="small"
                              type="text"
                              >启用</el-button
                            >
                            <el-button
                              @click="sonModifyOpinion(row, index)"
                              size="small"
                              type="text"
                              >编辑</el-button
                            >
                            <el-button
                              size="small"
                              type="text"
                              @click="handleDetele(row, index)"
                              >删除</el-button
                            >
                          </template>
                        </el-table-column>
                      </el-table>
                    </template>
                  </el-table-column>
                  <el-table-column type="selection" width="150" align="center">
                  </el-table-column>
                  <el-table-column
                    prop="tableName"
                    label="表名"
                    width="200"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <div>子表名称：{{ scope.row.tableName }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="field" label="关联字段" width="300">
                    <template slot-scope="scope">
                      <div slot="reference" class="table-text">
                        关联字段：主表: {{ scope.row.parentField }}
                        <span style="margin-left: 5px"
                          >子表：{{ scope.row.field }}
                        </span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="dml"
                    label="条件"
                    width="200"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <el-popover
                        placement="top-start"
                        width="500"
                        trigger="hover"
                        :content="scope.row.dml"
                      >
                        <div slot="reference" class="table-text">
                          查询条件：{{ scope.row.dml }}
                        </div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column prop="ddl" label="表SQL">
                    <template slot-scope="scope">
                      <div>
                        <el-popover
                          placement="top-start"
                          width="500"
                          trigger="hover"
                          :content="scope.row.ddl"
                        >
                          <div slot="reference" class="table-text">
                            表SQL语句：{{ scope.row.ddl }}
                          </div>
                        </el-popover>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="start"
                    label="状态"
                    width="100"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <div v-if="scope.row.start == '1'">
                        状态：<span style="color: rgb(81, 180, 58)">启用</span>
                      </div>
                      <div v-if="scope.row.start == '0'">
                        状态：<span style="color: rgb(205, 191, 191)"
                          >禁用</span
                        >
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="order"
                    label="排序"
                    width="100"
                    show-overflow-tooltip
                  >
                    <template slot-scope="scope">
                      <div>排序:{{ scope.row.order }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" align="left" width="180">
                    <template v-slot="{row, index}">
                      <!-- <el-button
                          @click="addsonOpinion(row, index)"
                          size="small"
                          type="text"
                      >添加</el-button
                      >-->
                      <el-button
                        @click="typeOpinion(row, index, 0)"
                        size="small"
                        type="text"
                        >禁用</el-button
                      >
                      <el-button
                        @click="typeOpinion(row, index, 1)"
                        size="small"
                        type="text"
                        >启用</el-button
                      >
                      <el-button
                        @click="sonModifyOpinion(row, index)"
                        size="small"
                        type="text"
                        >编辑</el-button
                      >
                      <!-- <el-button
                        size="small"
                        type="text"
                        @click="handleDetele(row, index)"
                        >删除</el-button
                      >-->
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>

            <ht-table-column
              prop="tableName"
              label="表名"
              width="200"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div>主表名称：{{ scope.row.tableName }}</div>
              </template>
            </ht-table-column>
            <ht-table-column prop="timeKey" label="时间条件字段">
              <template v-slot="{row}">
                <div slot="reference" class="table-text">
                  时间条件字段：{{ row.timeKey }}
                </div>
              </template>
            </ht-table-column>
            <ht-table-column prop="dml" label="查询条件">
              <template v-slot="{row}">
                <div>
                  <el-popover
                    placement="top-start"
                    width="500"
                    trigger="hover"
                    :content="row.dml"
                  >
                    <div slot="reference" class="table-text">
                      查询条件：{{ row.dml }}
                    </div>
                  </el-popover>
                </div>
              </template>
            </ht-table-column>
            <ht-table-column prop="ddl" label="表SQL" width="250">
              <template v-slot="{row}">
                <div>
                  <el-popover
                    placement="top-start"
                    width="500"
                    trigger="hover"
                    :content="row.ddl"
                  >
                    <div slot="reference" class="table-text">
                      表SQL语句：{{ row.ddl }}
                    </div>
                  </el-popover>
                </div>
              </template>
            </ht-table-column>
            <el-table-column
              prop="start"
              label="状态"
              width="100"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="scope.row.start == '1'">
                  状态：<span style="color: rgb(81, 180, 58)">启用</span>
                </div>
                <div v-if="scope.row.start == '0'">
                  状态：<span style="color: rgb(205, 191, 191)">禁用</span>
                </div>
              </template>
            </el-table-column>
            <ht-table-column width="80" align="center" label="排序">
              <template v-slot="{row, index}">
                <div>排序：{{ row.order }}</div>
              </template>
            </ht-table-column>
            <ht-table-column label="操作" align="left" width="240">
              <template v-slot="{row, index}">
                <el-button
                  @click="typeOpinion(row, index, 0)"
                  size="small"
                  type="text"
                  >禁用</el-button
                >
                <el-button
                  @click="typeOpinion(row, index, 1)"
                  size="small"
                  type="text"
                  >启用</el-button
                >
                <!-- <el-button
                  @click="addsonOpinion(row, index)"
                  size="small"
                  type="text"
                  >添加</el-button
                >-->
                <el-button
                  @click="modifyOpinion(row, index)"
                  size="small"
                  type="text"
                  >编辑</el-button
                >
                <!-- <el-button
                  size="small"
                  type="text"
                  @click="handleDetele(row, index)"
                  >删除</el-button
                >-->
              </template>
            </ht-table-column>
          </template>
        </ht-table>
      </el-collapse-item>
    </el-collapse>
    <div class="history-footer-wrap">
      <el-button type="primary" @click="saveConfigData">保存配置</el-button>
    </div>
    <el-dialog
      width="600px"
      :title="title"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      append-to-body
    >
      <el-form
        :model="formData"
        data-vv-scope="approvalForm"
        label-position="left"
      >
        <el-row>
          <el-col>
            <ht-form-item label="主表名称" label-width="120px">
              <ht-input
                disabled
                style="width: 380px"
                clearable
                v-model="formData.tableName"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="查询条件" label-width="120px">
              <ht-input
                style="width: 380px"
                type="textarea"
                clearable
                :rows="3"
                v-model="formData.dml"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="时间条件字段" label-width="120px">
              <ht-input
                disabled
                style="width: 380px"
                type="text"
                clearable
                :rows="3"
                v-model="formData.timeKey"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <div ref="fullTextarea" class="textarea-wrap" :class="{'isFullScreen':isFullScreen}">
        <el-row>
          <el-col>
            <ht-form-item  label="表SQL语句" label-width="120px">
              <ht-input
                style="min-width: 380px"
                type="textarea"
                disabled
                clearable
                :rows="5"
                v-model="formData.ddl"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label-width="120px">
              <el-button v-if="!isFullScreen" @click="checkSql('1', true)" type="primary" plain
                >验证SQL</el-button
              >
              <el-button @click="toggleFullScreen">{{ isFullScreen ? '退出全屏' : '进入全屏' }}</el-button>
            </ht-form-item>
          </el-col>
        </el-row>
        </div>
        <el-row>
          <el-col>
            <ht-form-item label="排序" label-width="120px">
              <!--内容说明 info -->
              <ht-input
                style="width: 380px"
                type="text"
                clearable
                :rows="3"
                v-model="formData.order"
                :validate="{required: true}"
              ></ht-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="状态" label-width="120px">
              <el-radio v-model="formData.start" label="1">启用</el-radio>
              <el-radio v-model="formData.start" label="0">禁用</el-radio>
            </ht-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <ht-submit-button
          :url="saveUrl()"
          :model="formData"
          :is-submit="isSubmit"
          scope-name="approvalForm"
          @before-save-data="beforeSaveData()"
          @after-save-data="afterSaveData()"
          >确认</ht-submit-button
        >
      </div>
    </el-dialog>
    <el-dialog
      width="31%"
      :title="sonTitle"
      :visible.sync="sonDialogVisible"
      :before-close="sonHandleClose"
      append-to-body
    >
      <el-form
        :model="sonFormData"
        data-vv-scope="approvalForm2"
        label-position="left"
      >
        <el-row>
          <el-col>
            <ht-form-item label="子表名称" label-width="120px">
              <ht-input
                disabled
                style="width: 380px"
                clearable
                v-model="sonFormData.tableName"
                placeholder="请输入"
                :validate="{required: true}"
              />
            </ht-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <ht-form-item label="查询条件" label-width="120px">
              <ht-input
                style="width: 380px"
                type="textarea"
                clearable
                v-model="sonFormData.dml"
                placeholder="请输入"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="关联字段" label-width="120px">
              <div class="Associated">
                <div>
                  <span>主表</span>
                  <ht-input
                    disabled
                    style="width: 140px"
                    clearable
                    v-model="sonFormData.parentField"
                    placeholder="请输入"
                    :validate="{required: true}"
                  />
                </div>
                <div>
                  <span>子表</span>
                  <ht-input
                    disabled
                    style="width: 140px"
                    clearable
                    v-model="sonFormData.field"
                    placeholder="请输入"
                    :validate="{required: true}"
                  />
                </div>
              </div>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label-width="120px">
              <el-button @click="checkSql('2', true)" type="primary" plain
              >验证SQL</el-button
              >
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="表SQL语句" label-width="120px">
              <ht-input
                style="width: 380px"
                type="textarea"
                disabled
                clearable
                :rows="5"
                v-model="sonFormData.ddl"
                placeholder="请输入"
              />
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="排序" label-width="120px">
              <!--内容说明 info -->
              <ht-input
                style="width: 380px"
                clearable
                v-model="sonFormData.order"
              ></ht-input>
            </ht-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <ht-form-item label="状态" label-width="120px">
              <el-radio v-model="sonFormData.start" label="1">启用</el-radio>
              <el-radio v-model="sonFormData.start" label="0">禁用</el-radio>
            </ht-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sonHandleClose">取 消</el-button>
        <ht-submit-button
          :url="saveUrl()"
          :model="sonFormData"
          :is-submit="isSubmit"
          scope-name="approvalForm2"
          @before-save-data="sonBeforeSaveData()"
          @after-save-data="sonAfterSaveData()"
          >确认</ht-submit-button
        >
      </div>
    </el-dialog>
    <!--执行定时计划  -->
    <ht-load-data
      :url="executeJobUrl"
      requestMethod="post"
      context="portal"
      @after-load-data="afterExecuteJob"
    ></ht-load-data>
  </div>
</template>

<script>
import portal from '@/api/portal.js'
import flow from '@/api/flow.js'
import req from '@/request.js'
import screenfull from 'screenfull'

const weekOptions = [
  {key: 'MON', value: '星期一'},
  {key: 'TUE', value: '星期二'},
  {key: 'WED', value: '星期三'},
  {key: 'THU', value: '星期四'},
  {key: 'FRI', value: '星期五'},
  {key: 'SAT', value: '星期六'},
  {key: 'son', value: '星期天'},
]
export default {
  name: 'HistoryDataConfig',
  props: {},
  data() {
    return {
      activeNames: ['1', '2'],
      configFormData: {
        autorun: '', //是否自动执行
        autorunConfig: '', //自动执行配置
        dataKey: '', //数据源key
        deleteData: '1',

        limit: '',
        limitNumber: '',
        pkVal: '',
        tenantId: '',

        chkWeek: '',
      },
      dayTime: '',
      curNameFields: [],
      radio1: '',
      chkWeek: weekOptions,
      chkWeekList: [],
      dataSourcesInBean: [],

      isSubmit: false,
      title: '',
      sonTitle: '',
      dialogVisible: false,
      sonDialogVisible: false,
      pa: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      formData: {},
      sonFormData: {},
      pageBean: {
        page: 1,
        pageSize: 20,
        total: 0,
      },
      data: [],
      postList: [],
      roleList: [],
      departmentList: [],
      isDisabled: true, //按钮的禁用
      mainSelectedList: [],
      sonSelectedList: [],
      executeJobUrl: '',
      beforeMonthList: [
        {
          comment: '全部',
          name: '0',
        },
        {
          comment: '一月前',
          name: '1',
        },
        {
          comment: '二月前',
          name: '2',
        },
        {
          comment: '三月前',
          name: '3',
        },
        {
          comment: '四月前',
          name: '4',
        },
        {
          comment: '五月前',
          name: '5',
        },
        {
          comment: '六月前',
          name: '6',
        },
        {
          comment: '七月前',
          name: '7',
        },
        {
          comment: '八月前',
          name: '8',
        },
        {
          comment: '九月前',
          name: '9',
        },
        {
          comment: '十月前',
          name: '10',
        },
      ],
      isFullScreen:false,
      isChange:false,
    }
  },
  watch: {
    chkWeekList: {
      handler(val) {
        let temp = val.filter((item) => item);
        this.configFormData.chkWeek = temp.join(',')
      },
    },

    // 监听选中下
    mainSelectedList: {
      handler(val) {
        this.isDisabled =
          val.length < 1 && this.sonSelectedList.length < 1 ? true : false
      },
      deep: true,
    },

    sonSelectedList: {
      handler(val) {
        this.isDisabled =
          val.length < 1 && this.mainSelectedList.length < 1 ? true : false
      },
      deep: true,
    },
  },
  created() {
    this.getSysDataSource()
    this.getCocumentationConfig(1)
  },
  methods: {
    toggleFullScreen() {//全屏
      const myElement = this.$refs.fullTextarea;
      if (!screenfull.isEnabled) {
        this.$message({
          message: '不支持全屏',
          type: 'warning'
        })
        return false
      }
      if (screenfull.isFullscreen) {
          screenfull.exit();
        } else {
          screenfull.request(myElement);
        }
      screenfull.on("change", () => {
        if (screenfull.isFullscreen) {
          this.isFullScreen = true
        } else {
          this.isFullScreen = false
        }
      })
    },
    // 获取基本配置数据
    getCocumentationConfig(id) {
      flow.getCocumentationConfigById(id).then((res) => {
        if (res && res.data) {
          this.configFormData = res.data
          let timeInterval = JSON.parse(
            this.configFormData.autorunConfig
          ).timeInterval.split('|')
          this.chkWeekList = timeInterval[0].split(',')
          this.dayTime = timeInterval[1]
        }
      })
    },
    //获取数据源池
    getSysDataSource() {
      const pageBean = {
        page: 1,
        pageSize: -1,
      }
      const param = {
        pageBean,
        querys: [
          {
            group: 'filter',
            operation: 'EQUAL',
            relation: 'AND',
            property: 'connectionType',
            value: 'dataSource',
          },
        ],
      }
      portal.getConnectManageList(param)
          .then(resp => {
            let response = resp.data
            this.dataSourcesInBean = response.rows
          })
    },
    loadData(param, cb) {
      if (!param) {
        this.pageBean.total = 0
        param = {pageBean: ''}
        param.pageBean = this.pageBean
      }
      flow
        .getDocumentationTable(param)
        .then((resp) => {
          let all = resp.data.rows
          let idMap = new Map()
          all.forEach((i) => {
            idMap.set(i.id, i)
          })
          all.forEach((i) => {
            let parent = idMap.get(i.parentId)
            if (parent) {
              let sub = parent['sonList']
              if (!sub) {
                sub = []
              }
              sub.push(i)
              sub.sort((m, n) => {
                return m.order - n.order
              })
              parent['sonList'] = sub
            }
          })
          this.data = all.filter((item) => item.parentId === '0')
          this.pageBean = {
            page: resp.data.page,
            pageSize: resp.data.pageSize,
            total: resp.data.total,
          }
        })
        .finally(() => cb())
    },
    saveUrl() {
      return window.context.bpmRunTime + '/documentationTable/v1/save'
    },
    checkSql(type, message) {
      let data = {}
      if (type === '1') {
        data = this.formData
      } else if (type === '2') {
        data = this.sonFormData
      }
      flow.documentationTableCheckSql(data).then((resp) => {
        if (resp && resp.data && resp.data.state) {
          this.isSubmit = true
          console.log(this.isSubmit)
          if (message) {
            this.$message.success(resp.data.message)
          }
        }
      })
    },
    beforeSaveData() {
      if (!this.isSubmit) {
        this.$message.warning('请先校验sql')
      }
    },
    afterSaveData() {
      this.dialogVisible = false
      this.isSubmit = false
      this.formData = {}
      this.$refs.htTable.load()
    },
    sonAfterSaveData() {
      this.sonDialogVisible = false
      this.isSubmit = false
      this.sonFormData = {}
      this.$refs.htTable.load()
    },
    sonBeforeSaveData() {
      if (!this.isSubmit) {
        this.$message.warning('请先校验sql')
      }
    },
    saveConfigData() {
      if (this.configFormData.autorun == '1'){
        if(!this.configFormData.chkWeek){
          this.$message.warning('请先选择日期')
          return
        }
        if(!this.dayTime){
          this.$message.warning('请先选择时间')
          return
        }
      }
      this.configFormData['autorunConfig'] = JSON.stringify({
        type: 4,
        timeInterval: `${this.configFormData.chkWeek}|${this.dayTime}`,
      })
      let dataList = _.cloneDeep(this.configFormData)
  delete dataList.chkWeek
      flow
        .saveAndUpdateDocumentationConfig(this.dataList)
        .then((resp) => {
          if (resp && resp.data && resp.data.state) {
            this.isChange = false
            this.$message.success(resp.data.message)
          }
        })
    },
    //1启用 2禁用
    typeOpinion(row, index, type) {
      row['start'] = type
      flow.documentationUpdateStatus(row)
    },
    addsonOpinion(row, index) {
      this.sonTitle = '添加子表'
      this.sonFormData = {}
      this.sonFormData['parentId'] = row.id
      this.sonDialogVisible = true
    },

    sonModifyOpinion(row, index) {
      this.sonTitle = '编辑子表'
      this.sonFormData = row
      this.sonDialogVisible = true
    },
    modifyOpinion(row, index) {
      this.title = '修改'
      this.formData = row
      this.dialogVisible = true
    },
    handleDetele(row) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.doRemove(row.id)
        })
        .catch(() => {})
    },
    doRemove(id) {
      flow.documentationTableDelete(id).then((resp) => {
        if (resp && resp.data && resp.data.state) {
          this.message.success(resp.data.message)
          this.$refs.htTable.load()
        }
      })
    },
    afterExecuteJob(rep) {
      if (rep && rep.state) {
        this.$message.success(rep.message)
      } else {
        this.$message.error(rep.message || '执行失败')
      }
      this.executeJobUrl = ''
    },
    rowClick(row, column, event) {
      this.$refs.htTable.$refs.htTable.toggleRowSelection(row)
    },
    runTime() {
      if (this.isChange) {
        this.$confirm(
          '配置已有变更，是否保存后执行',
          '注意',
          {
            confirmButtonText: '否',
            cancelButtonText: '是',
            customClass: 'col-msg__box',
            type: 'warning',
            closeOnClickModal: false
          }
        ).then(() => {
          this.executeJobUrl = '/job/scheduler/v1/executeJob?jobName=' + '数据归档定时任务'
        })
          .catch(() => {
            if (this.configFormData.autorun == '1') {
              if (!this.configFormData.chkWeek) {
                this.$message.warning('请先选择日期')
                return
              }
              if(!this.dayTime){
                this.$message.warning('请先选择时间')
                return
              }
            }
            this.configFormData['autorunConfig'] = JSON.stringify({
              type: 4,
              timeInterval: `${this.configFormData.chkWeek}|${this.dayTime}`,
            })

            flow
              .saveAndUpdateDocumentationConfig(this.configFormData)
              .then((resp) => {
                if (resp && resp.data && resp.data.state) {
                  this.isChange = false
                  this.executeJobUrl = '/job/scheduler/v1/executeJob?jobName=' + '数据归档定时任务'
                }
              })
          })
      }else{
        this.executeJobUrl = '/job/scheduler/v1/executeJob?jobName=' + '数据归档定时任务'
      }

    },

    //获取部门
    getDepartmentList() {
      flow.getDepartmentList().then((resp) => {
        this.departmentList = resp.data.rows
      })
    },
    //获取岗位
    getPostList() {
      flow.getPostList().then((resp) => {
        this.postList = resp.data.rows
      })
    },
    //获取角色
    getRoleList() {
      flow.getRoleList().then((resp) => {
        this.roleList = resp.data.rows
      })
    },
    handleOpen(param, row) {
      this.title = '添加'
      // if (row) {
      //   flow.getApproval(row.id).then(resp => {
      //     this.formData = resp.data
      //   })
      // }
      this.dialogVisible = true
      // this.getPostList()
      // this.getRoleList()
      // this.getDepartmentList()
    },
    handleClose() {
      this.dialogVisible = false
      this.formData = {
        id: '',
        tableName: '',
        targetTableName: '',
        ddl: '',
        dml: '',
        info: '',
      }
    },
    sonHandleClose() {
      this.sonDialogVisible = false
      this.sonFormData = {}
    },
    formDeleteUrl() {
      return `${window.context.bpmRunTime}/documentationTable/v1/delete`
    },
    deleteSelect() {
      let str = ''
      this.mainSelectedList.forEach((i) => {
        str += i['id'] + ','
      })
      this.sonSelectedList.forEach((i) => {
        str += i['id'] + ','
      })
      //去掉最后一个逗号(如果不需要去掉，就不用写)
      if (str.length > 0) {
        str = str.substr(0, str.length - 1)
        flow.documentationTableDeleteByIds(str).then((resp) => {
          if (resp && resp.data && resp.data.state) {
            this.message.success(resp.data.message)
            this.$refs.htTable.load()
          } else {
            this.message.error(resp.data.message)
          }
        })
      }
    },
    sonSelectionChange(selection) {
      this.sonSelectedList = selection
    },
    mainSelectionChange(selection) {
      this.mainSelectedList = selection
    },
    beforeInputEvent(val){
      if(val == 1){
        this.$confirm(
          '使用清空模式时，在备份数据时会把当前数据库数据清空',
          '注意',
          {
            confirmButtonText: '取消',
            cancelButtonText: '确定',
            customClass: 'col-msg__box',
            type: 'warning',
            closeOnClickModal: false
          }
        ).then(() => {})
        .catch(() => {
            this.configFormData.deleteData = val
            this.isChange =true
          })
      }else{
        this.configFormData.deleteData = val
        this.isChange =true
      }
    },
    changeStatus(){
      this.isChange =true
    }
  },
}
</script>
<style lang="scss" scoped>
@mixin base-scrollbar {
  &::-webkit-scrollbar {
    width: 13px;
    height: 13px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 7px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-track:hover {
    background-color: #f8fafc;
  }
}
.historyDataConfig {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
  box-sizing: border-box;
  @include base-scrollbar;
  .history-footer-wrap {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .table-text {
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
::v-deep {
  .el-collapse {
    border: 0px;
  }
  .el-collapse-item__content {
    padding: 10px 26px;
    box-sizing: border-box;
    border: 0px;
  }
  .el-collapse-item__wrap {
    border: 0px;
  }
  .el-collapse-item__header {
    .el-icon-arrow-right {
      display: none;
    }
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    font-weight: bold;
    padding: 0 24px;
    border: 0px;
    background-color: #f9f9f9;
    position: relative;
    .icons {
      font-size: 18px;
      position: absolute;
      left: 5px;
    }
  }
  .box-card {
    margin-bottom: 16px;
    box-shadow: none;
    // border: 1px solid #ebebeb;
    border: 0px;
    border-radius: 0;
  }
}

::v-deep .ht-table-panel {
  position: relative;
  .toolbar-container {
    position: absolute;
    left: 0;
    top: 0;
  }
  .toolbar-panel {
    position: absolute;
    right: 0;
    top: 0;
  }
  .el-table {
    margin-top: 50px;
    border: none;
    border-spacing: 0 10px;
    height: auto !important;
    max-height: none !important;
  }
  .el-table__body-wrapper {
    height: auto !important;
    max-height: none !important;
  }

  .el-table::before,
  .el-table::after {
    background: #fff;
  }
  .el-table__header-wrapper {
    display: none;
  }
  .el-table__body {
    border-spacing: 0 10px;
  }
  .el-table__row {
    background-color: rgb(249, 249, 249);

    .el-table__cell {
      border: none;
    }
  }
  .el-table__expanded-cell {
    .el-table {
      margin-top: 0;
    }
    .el-table__body {
      border-spacing: 0;
    }
    .el-table__row {
      background-color: #fff;
    }
  }
}
.Associated {
  display: flex;
  justify-content: space-between;
  span {
    margin-right: 3px;
  }
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
.textarea-wrap{
  background:#fff;
  ::v-deep .el-textarea__inner{
    // height:150px;
  }
  &.isFullScreen{
    padding:24px;
    .el-form-item,.inputs.ht-form-inputs__inline{width:100%;}
    ::v-deep .el-textarea__inner{
      height: calc(100vh - 200px);
    }
  }
}
</style>
