<template>
  <el-card>
    <el-steps :active="active"
              finish-status="success">
      <el-step title="基本信息配置" />
      <el-step title="同步源端配置" />
      <el-step title="目标端配置" />
      <el-step title="映射转换配置" />
      <el-step title="配置确认提交" />
    </el-steps>

    <el-form :model="createform"
             status-icon
             :rules="rules"
             ref="createform">

      <div v-show="active == 1">
        <el-form-item label="名称"
                      label-width="240px"
                      :required=true
                      prop="name"
                      style="width:65%">
          <el-input v-model="createform.name"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述"
                      label-width="240px"
                      prop="description"
                      style="width:65%">
          <el-input v-model="createform.description"
                    type="textarea"
                    :rows="3"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="调度方式"
                      label-width="240px"
                      :required=true
                      prop="scheduleMode"
                      style="width:65%">
          <el-select v-model="createform.scheduleMode">
            <el-option label="手动调度"
                       value="MANUAL"></el-option>
            <el-option label="系统调度"
                       value="SYSTEM_SCHEDULED"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行周期"
                      label-width="240px"
                      style="width:65%"
                      v-if="createform.scheduleMode=='SYSTEM_SCHEDULED'">
          <el-tooltip placement="top">
            <div slot="content">
              执行周期为CRON表达式，即可以选择以下内置的周期，也可以自行输入或粘贴合法的CRON表达式(最小间隔时间为2分钟)。
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select v-model="createform.cronExpression"
                     filterable
                     allow-create>
            <el-option label="每5分钟执行1次"
                       value="0 0/5 * * * ? *"></el-option>
            <el-option label="每30分钟执行1次"
                       value="0 0/30 * * * ? *"></el-option>
            <el-option label="每1小时执行1次"
                       value="0 0 0/1 * * ? *"></el-option>
            <el-option label="每2小时执行1次"
                       value="0 0 0/2 * * ? *"></el-option>
            <el-option label="每8小时执行1次"
                       value="0 0 0/8 * * ? *"></el-option>
            <el-option label="每12小时执行1次"
                       value="0 0 0/12 * * ? *"></el-option>
            <el-option label="每日0时执行1次"
                       value="0 0 0 1/1 * ? *"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-show="active == 2">
        <el-form-item label="源端数据源"
                      label-width="240px"
                      :required=true
                      prop="sourceConnectionId"
                      style="width:65%">
          <el-select v-model="createform.sourceConnectionId"
                     @change="selectChangedSourceConnection"
                     placeholder="请选择">
            <el-option v-for="(item,index) in connectionNameList"
                       :key="index"
                       :label="`[${item.id}]${item.name}`"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源端模式名"
                      label-width="240px"
                      :required=true
                      prop="sourceSchema"
                      style="width:65%">
          <el-select v-model="createform.sourceSchema"
                     filterable
                     @change="selectCreateChangedSourceSchema"
                     placeholder="请选择">
            <el-option v-for="(item,index) in sourceConnectionSchemas"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="源端表类型"
                      label-width="240px"
                      :required=true
                      prop="tableType"
                      style="width:65%">
          <el-select placeholder="请选择表类型"
                     @change="selectCreateChangedTableType"
                     v-model="createform.tableType">
            <el-option label="物理表"
                       value="TABLE"></el-option>
            <el-option label="视图表"
                       value="VIEW"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="配置方式"
                      label-width="240px"
                      :required=true
                      prop="includeOrExclude"
                      style="width:65%">
          <el-select placeholder="请选择配置方式"
                     v-model="createform.includeOrExclude">
            <el-option label="包含表"
                       value="INCLUDE"></el-option>
            <el-option label="排除表"
                       value="EXCLUDE"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表名配置"
                      label-width="240px"
                      :required=false
                      prop="sourceTables"
                      style="width:65%">
          <el-tooltip placement="top">
            <div slot="content">
              当为包含表时，选择所要精确包含的表名，如果不选则代表选择所有；当为排除表时，选择索要精确排除的表名。
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select placeholder="请选择表名"
                     multiple
                     filterable
                     v-model="createform.sourceTables">
            <el-option v-for="(item,index) in sourceSchemaTables"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-show="active == 3">
        <el-form-item label="目的端数据源"
                      label-width="240px"
                      :required=true
                      prop="targetConnectionId"
                      style="width:65%">
          <el-select v-model="createform.targetConnectionId"
                     @change="selectChangedTargetConnection"
                     placeholder="请选择">
            <el-option v-for="(item,index) in connectionNameList"
                       :key="index"
                       :label="`[${item.id}]${item.name}`"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的端模式名"
                      label-width="240px"
                      :required=true
                      prop="targetSchema"
                      style="width:65%">
          <el-select v-model="createform.targetSchema"
                     filterable
                     placeholder="请选择">
            <el-option v-for="(item,index) in targetConnectionSchemas"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动同步模式"
                      label-width="240px"
                      :required=true
                      prop="autoSyncMode"
                      style="width:65%">
          <span slot="label">
            <span style="color: red"><strong>自动同步模式</strong> </span>
          </span>
          <el-tooltip placement="top">
            <div slot="content">
              <p>如果只同步数据内容，则需要目标端需要存在符合映射规则的物理表，可在执行任务前手动建好；</p>
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select v-model="createform.autoSyncMode">
            <el-option label='目标端建表并同步数据'
                       :value=2></el-option>
            <el-option label='目标端只创建物理表'
                       :value=1></el-option>
            <el-option label='目标端只同步表里数据'
                       :value=0></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建表字段自增"
                      label-width="240px"
                      :required=true
                      v-if=" createform.autoSyncMode!==0 "
                      prop="targetAutoIncrement"
                      style="width:65%">
          <el-tooltip placement="top">
            <div slot="content">
              创建表时是否自动支持字段的自增；只有使用自动建表才会生效，不过前提需要两端的数据库表支持自增字段，默认为false。
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select v-model="createform.targetAutoIncrement">
            <el-option label='是'
                       :value=true></el-option>
            <el-option label='否'
                       :value=false></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据批次大小"
                      label-width="240px"
                      :required=true
                      v-if=" createform.autoSyncMode!==1 "
                      prop="batchSize"
                      style="width:65%">
          <el-tooltip placement="top">
            <div slot="content">
              数据同步时单个批次处理的行记录总数，该值越到越占用内存空间。建议：小字段表设置为10000或20000，大字段表设置为1000
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select v-model="createform.batchSize">
            <el-option label=1000
                       :value=1000></el-option>
            <el-option label=5000
                       :value=5000></el-option>
            <el-option label=10000
                       :value=10000></el-option>
            <el-option label=20000
                       :value=20000></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表名大小写转换"
                      label-width="240px"
                      :required=true
                      v-if=" createform.autoSyncMode!==0 "
                      prop="tableNameCase"
                      style="width:45%">
          <el-tooltip placement="top">
            <div slot="content">
              表名大小写转换说明：先使用下面的表名映射，然后再使用这里的大小写转换，对支持大小写敏感的数据库类型有效。
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select v-model="createform.tableNameCase">
            <el-option label='无转换'
                       value='NONE'></el-option>
            <el-option label='转大写'
                       value='UPPER'></el-option>
            <el-option label='转小写'
                       value='LOWER'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="列名大小写转换"
                      label-width="240px"
                      :required=true
                      v-if=" createform.autoSyncMode!==0 "
                      prop="columnNameCase"
                      style="width:45%">
          <el-tooltip placement="top">
            <div slot="content">
              列名大小写转换说明：先使用下面的列名映射，然后再使用这里的大小写转换，对支持大小写敏感的数据库类型有效。
            </div>
            <i class="el-icon-question"></i>
          </el-tooltip>
          <el-select v-model="createform.columnNameCase">
            <el-option label='无转换'
                       value='NONE'></el-option>
            <el-option label='转大写'
                       value='UPPER'></el-option>
            <el-option label='转小写'
                       value='LOWER'></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div v-show="active == 4">
        <div class="tip-content">
          <p>说明：(1) 当表名映射规则记录为空时，代表目标表名与源表名的名称相同;</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            (2) 当字段名映射规则记录为空时，代表目标表的字段名与源表名的字段名相同</p>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            (3) 在字段名映射规则中，如果目标字段名为空（未填写），则代表剔除该字段（不能是主键）的同步</p>
        </div>
        <el-button type="success"
                   @click="addTableNameMapperListRow()"
                   round>添加表名映射</el-button>
        <el-button type="warning"
                   @click="previewTableNameMapList()"
                   round>预览表名映射</el-button>
        <el-table :data="createform.tableNameMapper"
                  size="mini"
                  border
                  height="200"
                  style="width:90%;margin-top: 15px;">
          <template slot="empty">
            <span>请点击"添加表名映射"按钮添加表名映射关系记录</span>
          </template>
          <el-table-column label="表名匹配的正则名"
                           width="320">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fromPattern"
                        type="string"> </el-input>
            </template>
          </el-table-column>
          <el-table-column label="替换的目标值"
                           width="320">
            <template slot-scope="scope">
              <el-input v-model="scope.row.toValue"
                        type="string"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="220">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="danger"
                         @click="deleteTableNameMapperListItem(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="success"
                   @click="addColumnNameMapperListRow()"
                   round>添加字段名映射</el-button>
        <el-button type="warning"
                   @click="previewColumnNameMapList()"
                   round>预览字段名映射</el-button>
        <el-table :data="createform.columnNameMapper"
                  size="mini"
                  border
                  height="200"
                  style="width:90%;margin-top: 15px;">
          <template slot="empty">
            <span>请点击"添加字段名映射"按钮添加字段名映射关系记录</span>
          </template>
          <el-table-column label="字段名匹配的正则名"
                           width="320">
            <template slot-scope="scope">
              <el-input v-model="scope.row.fromPattern"
                        type="string"> </el-input>
            </template>
          </el-table-column>
          <el-table-column label="替换的目标值"
                           width="320">
            <template slot-scope="scope">
              <el-input v-model="scope.row.toValue"
                        type="string"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="220">
            <template slot-scope="scope">
              <el-button size="mini"
                         type="danger"
                         @click="deleteColumnNameMapperListItem(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="active == 5">
        <el-descriptions size="small"
                         :column="1"
                         label-class-name="el-descriptions-item-label-class"
                         border>
          <el-descriptions-item label="任务名称">{{createform.name}}</el-descriptions-item>
          <el-descriptions-item label="任务描述">{{createform.description}}</el-descriptions-item>
          <el-descriptions-item label="调度方式">
            <span v-if="createform.scheduleMode == 'MANUAL'">
              手动执行
            </span>
            <span v-if="createform.scheduleMode == 'SYSTEM_SCHEDULED'">
              系统调度
            </span>
          </el-descriptions-item>
          <el-descriptions-item v-if="createform.scheduleMode == 'SYSTEM_SCHEDULED'"
                                label="CRON表达式">{{createform.cronExpression}}</el-descriptions-item>
          <el-descriptions-item label="源端数据源">[{{createform.sourceConnectionId}}]{{sourceConnection.name}}</el-descriptions-item>
          <el-descriptions-item label="源端schema">{{createform.sourceSchema}}</el-descriptions-item>
          <el-descriptions-item label="源端表类型">{{createform.tableType}}</el-descriptions-item>
          <el-descriptions-item label="源端表选择方式">
            <span v-if="createform.includeOrExclude == 'INCLUDE'">
              包含表
            </span>
            <span v-if="createform.includeOrExclude == 'EXCLUDE'">
              排除表
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="源端表名列表">
            <span v-show="createform.includeOrExclude == 'INCLUDE' && (!createform.sourceTables || createform.sourceTables.length==0)"><b>所有物理表</b></span>
            <p v-for="item in createform.sourceTables"
               v-bind:key="item">{{item}}</p>
          </el-descriptions-item>
          <el-descriptions-item label="目地端数据源">[{{createform.targetConnectionId}}]{{targetConnection.name}}</el-descriptions-item>
          <el-descriptions-item label="目地端schema">{{createform.targetSchema}}</el-descriptions-item>
          <el-descriptions-item label="自动同步模式">
            <span v-if="createform.autoSyncMode == 2">
              目标端建表并同步数据
            </span>
            <span v-if="createform.autoSyncMode == 1">
              目标端只创建物理表
            </span>
            <span v-if="createform.autoSyncMode == 0">
              目标端只同步表里数据
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="建表字段自增"
                                v-if=" createform.autoSyncMode!==0 ">{{createform.targetAutoIncrement}}</el-descriptions-item>
          <el-descriptions-item label="数据批次大小"
                                v-if=" createform.autoSyncMode!==1 ">{{createform.batchSize}}</el-descriptions-item>
          <el-descriptions-item label="表名大小写转换"
                                v-if=" createform.autoSyncMode!==0 ">
            <span v-if="createform.tableNameCase == 'NONE'">
              无转换
            </span>
            <span v-if="createform.tableNameCase == 'UPPER'">
              转大写
            </span>
            <span v-if="createform.tableNameCase == 'LOWER'">
              转小写
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="列名大小写转换"
                                v-if=" createform.autoSyncMode!==0 ">
            <span v-if="createform.columnNameCase == 'NONE'">
              无转换
            </span>
            <span v-if="createform.columnNameCase == 'UPPER'">
              转大写
            </span>
            <span v-if="createform.columnNameCase == 'LOWER'">
              转小写
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="表名映射规则">
            <span v-show="createform.tableNameMapper.length==0">[映射关系为空]</span>
            <table v-if="createform.tableNameMapper.length>0"
                   class="name-mapper-table">
              <tr>
                <th>表名匹配的正则名</th>
                <th>替换的目标值</th>
              </tr>
              <tr v-for='(item,index) in createform.tableNameMapper'
                  :key="index">
                <td>{{item['fromPattern']}}</td>
                <td>{{item['toValue']}}</td>
              </tr>
            </table>
          </el-descriptions-item>
          <el-descriptions-item label="字段名映射规则">
            <span v-show="createform.columnNameMapper.length==0">[映射关系为空]</span>
            <table v-if="createform.columnNameMapper.length>0"
                   class="name-mapper-table">
              <tr>
                <th>字段名匹配的正则名</th>
                <th>替换的目标值</th>
              </tr>
              <tr v-for='(item,index) in createform.columnNameMapper'
                  :key="index">
                <td>{{item['fromPattern']}}</td>
                <td>{{item['toValue']}}</td>
              </tr>
            </table>
          </el-descriptions-item>
        </el-descriptions>
      </div>

    </el-form>

    <el-button round
               v-if="active > 1"
               style="margin-top: 12px"
               @click="pre">
      上一步
    </el-button>
    <el-button round
               @click="next"
               v-if="active > 0 && active < 5">
      下一步
    </el-button>
    <el-button round
               @click="handleSave"
               v-if="active == 5">
      提交
    </el-button>

    <el-dialog v-if="active == 4"
               title="查看表名映射关系"
               :visible.sync="tableNameMapperDialogVisible"
               :showClose="false"
               :before-close="handleClose">
      <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="tableNamesMapperData"
                size="mini"
                border>
        <el-table-column prop="originalName"
                         label="源端表名"
                         min-width="20%"></el-table-column>
        <el-table-column prop="targetName"
                         label="目标表名"
                         min-width="20%"></el-table-column>
      </el-table>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="tableNameMapperDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <el-dialog v-if="active == 4"
               title="查看字段映射关系"
               :visible.sync="columnNameMapperDialogVisible"
               :showClose="false"
               :before-close="handleClose">
      <el-select @change="queryPreviewColumnNameMapperList"
                 v-model="preiveTableName"
                 placeholder="请选择">
        <el-option v-for="(item,index) in preiveSeeTableNameList"
                   :key="index"
                   :label="item"
                   :value="item"></el-option>
      </el-select>
      <el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                :data="columnNamesMapperData"
                size="mini"
                border>
        <el-table-column prop="originalName"
                         label="原始字段名"
                         min-width="20%"></el-table-column>
        <el-table-column prop="targetName"
                         label="目标表字段名"
                         min-width="20%"></el-table-column>
      </el-table>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="columnNameMapperDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </el-card>
</template>

<script>
export default {

  data () {
    return {
      cronPopover: false,
      createform: {
        name: "",
        description: "",
        scheduleMode: "MANUAL",
        cronExpression: "",
        sourceConnectionId: '请选择',
        sourceSchema: "",
        tableType: "TABLE",
        includeOrExclude: "",
        sourceTables: [],
        tableNameMapper: [],
        columnNameMapper: [],
        tableNameCase: 'NONE',
        columnNameCase: 'NONE',
        targetConnectionId: '请选择',
        targetDropTable: true,
        targetOnlyCreate: false,
        targetAutoIncrement: false,
        autoSyncMode: 2,
        targetSchema: "",
        batchSize: 5000
      },
      rules: {
        name: [
          {
            required: true,
            message: "任务名称不能为空",
            trigger: "blur"
          }
        ],
        scheduleMode: [
          {
            required: true,
            type: 'string',
            message: "调度方式必须选择",
            trigger: "change"
          }
        ],
        sourceConnectionId: [
          {
            required: true,
            type: 'integer',
            message: "必选选择一个来源端",
            trigger: "change"
          }
        ],
        sourceSchema: [
          {
            required: true,
            type: 'string',
            message: "必选选择一个Schema名",
            trigger: "change"
          }
        ],
        tableType: [
          {
            required: true,
            type: 'string',
            message: "表类型必须选择",
            trigger: "change"
          }
        ],
        includeOrExclude: [
          {
            required: true,
            type: 'string',
            message: "配置方式必须选择",
            trigger: "change"
          }
        ],
        sourceTables: [
          {
            required: false,
            type: 'array',
            message: "必选选择一个Table名",
            trigger: "change"
          }
        ],
        targetConnectionId: [
          {
            required: true,
            type: 'integer',
            message: "必选选择一个目的端",
            trigger: "change"
          }
        ],
        targetSchema: [
          {
            required: true,
            type: 'string',
            message: "必选选择一个Schema名",
            trigger: "change"
          }
        ],
        batchSize: [
          {
            required: true,
            type: 'integer',
            message: "必选选择一个批大小",
            trigger: "change"
          }
        ]
      },
      active: 1,
      sourceConnection: {},
      targetConnection: {},
      sourceConnectionSchemas: [],
      sourceSchemaTables: [],
      targetConnectionSchemas: [],
      tableNameMapperDialogVisible: false,
      columnNameMapperDialogVisible: false,
      tableNamesMapperData: [],
      columnNamesMapperData: [],
      preiveSeeTableNameList: [],
      preiveTableName: "",
    }
  },
  methods: {
    handleClose (done) {
    },
    next () {
      if (this.active++ > 4) this.active = 5
    },
    pre () {
      if (this.active-- < 2) this.active = 1
    },
    loadConnections: function () {
      this.connectionNameList = [];
      this.$http({
        method: "GET",
        url: "/dbswitch/admin/api/v1/connection/list/name"
      }).then(
        res => {
          if (0 === res.data.code) {
            this.connectionNameList = res.data.data;
          } else {
            if (res.data.message) {
              alert("加载任务列表失败:" + res.data.message);
              this.connectionNameList = [];
            }
          }
        },
        function () {
          console.log("failed");
        }
      );
    },
    changeCreateCronExpression: function (value) {
      this.createform.cronExpression = value;
    },
    selectChangedSourceConnection: function (value) {
      this.sourceConnection = this.connectionNameList.find(
        (item) => {
          return item.id === value;
        });

      this.sourceConnectionSchemas = [];
      this.$http.get(
        "/dbswitch/admin/api/v1/connection/schemas/get/" + value
      ).then(res => {
        if (0 === res.data.code) {
          this.sourceConnectionSchemas = res.data.data;
        } else {
          this.$message.error("查询来源端数据库的Schema失败," + res.data.message);
          this.sourceConnectionSchemas = [];
        }
      });
    },
    selectCreateChangedSourceSchema: function (value) {
      this.sourceSchemaTables = [];
      if ('TABLE' === this.createform.tableType) {
        this.$http.get(
          "/dbswitch/admin/api/v1/connection/tables/get/" + this.createform.sourceConnectionId + "?schema=" + value
        ).then(res => {
          if (0 === res.data.code) {
            this.sourceSchemaTables = res.data.data;
          } else {
            this.$message.error("查询来源端数据库在指定Schema下的物理表列表失败," + res.data.message);
            this.sourceSchemaTables = [];
          }
        });
      } else {
        this.$http.get(
          "/dbswitch/admin/api/v1/connection/views/get/" + this.createform.sourceConnectionId + "?schema=" + value
        ).then(res => {
          if (0 === res.data.code) {
            this.sourceSchemaTables = res.data.data;
          } else {
            this.$message.error("查询来源端数据库在指定Schema下的视图表列表失败," + res.data.message);
            this.sourceSchemaTables = [];
          }
        });
      }
    },
    selectCreateChangedTableType: function (value) {
      this.sourceSchemaTables = [];
      if ('TABLE' === value) {
        this.$http.get(
          "/dbswitch/admin/api/v1/connection/tables/get/" + this.createform.sourceConnectionId + "?schema=" + this.createform.sourceSchema
        ).then(res => {
          if (0 === res.data.code) {
            this.sourceSchemaTables = res.data.data;
          } else {
            this.$message.error("查询来源端数据库在指定Schema下的物理表列表失败," + res.data.message);
            this.sourceSchemaTables = [];
          }
        });
      } else {
        this.$http.get(
          "/dbswitch/admin/api/v1/connection/views/get/" + this.createform.sourceConnectionId + "?schema=" + this.createform.sourceSchema
        ).then(res => {
          if (0 === res.data.code) {
            this.sourceSchemaTables = res.data.data;
          } else {
            this.$message.error("查询来源端数据库在指定Schema下的视图表列表失败," + res.data.message);
            this.sourceSchemaTables = [];
          }
        });
      }
    },
    selectChangedTargetConnection: function (value) {
      this.targetConnection = this.connectionNameList.find(
        (item) => {
          return item.id === value;
        });

      this.targetConnectionSchemas = [];
      this.$http.get(
        "/dbswitch/admin/api/v1/connection/schemas/get/" + value
      ).then(res => {
        if (0 === res.data.code) {
          this.targetConnectionSchemas = res.data.data;
        } else {
          this.$message.error("查询目的端数据库的Schema失败," + res.data.message);
          this.targetConnectionSchemas = [];
        }
      });
    },
    addTableNameMapperListRow: function () {
      this.createform.tableNameMapper.push({ "fromPattern": "", "toValue": "" });
    },
    deleteTableNameMapperListItem: function (index) {
      this.createform.tableNameMapper.splice(index, 1);
    },
    previewTableNameMapList: function () {
      if (!this.createform.sourceConnectionId || this.createform.sourceConnectionId < 0
        || !this.createform.sourceSchema || this.createform.sourceSchema.length == 0) {
        alert("请选择【源端数据源】和【源端模式名】！");
        return;
      }

      this.$http({
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        url: "/dbswitch/admin/api/v1/mapper/preview/table",
        data: JSON.stringify({
          id: this.createform.sourceConnectionId,
          schemaName: this.createform.sourceSchema,
          isInclude: this.createform.includeOrExclude == 'INCLUDE',
          tableNames: this.createform.sourceTables,
          nameMapper: this.createform.tableNameMapper,
          tableNameCase: this.createform.tableNameCase
        })
      }).then(res => {
        if (0 === res.data.code) {
          this.tableNamesMapperData = res.data.data;
          this.tableNameMapperDialogVisible = true;
        } else {
          this.tableNamesMapperData = [];
          if (res.data.message) {
            alert(res.data.message);
          }
        }
      });

    },
    addColumnNameMapperListRow: function () {
      this.createform.columnNameMapper.push({ "fromPattern": "", "toValue": "" });
    },
    deleteColumnNameMapperListItem: function (index) {
      this.createform.columnNameMapper.splice(index, 1);
    },
    previewColumnNameMapList: function () {
      if (!this.createform.sourceConnectionId || this.createform.sourceConnectionId <= 0
        || !this.createform.sourceSchema || this.createform.sourceSchema.length == 0) {
        alert("请选择【源端数据源】和【源端模式名】！");
        return;
      }

      if (!this.createform.includeOrExclude) {
        alert("请选择源端表选择的【配置方式】！");
        return;
      }


      if (this.createform.includeOrExclude == "INCLUDE") {
        if (this.createform.sourceTables.length == 0) {
          this.preiveSeeTableNameList = this.sourceSchemaTables;
        } else {
          this.preiveSeeTableNameList = this.createform.sourceTables;
        }
      } else {
        if (this.createform.sourceTables.length == 0) {
          alert("请选择排除表的【表名配置】！");
          return;
        }

        // 排除表，求差集
        this.preiveSeeTableNameList = JSON.parse(JSON.stringify(this.sourceSchemaTables));
        for (var i = 0; i < this.createform.sourceTables.length; ++i) {
          var one = this.createform.sourceTables[i];
          this.preiveSeeTableNameList.some((item, index) => {
            if (item == one) {
              this.preiveSeeTableNameList.splice(index, 1)
              return true;
            }
          })
        }
      }
      //console.log(this.preiveSeeTableNameList)
      this.preiveTableName = "";
      this.columnNamesMapperData = [];
      this.columnNameMapperDialogVisible = true;
    },
    queryPreviewColumnNameMapperList: function () {
      if (!this.preiveSeeTableNameList || this.preiveSeeTableNameList.length == 0) {
        alert("请在源端配置【表名配置】！");
        return;
      }

      if (!this.preiveTableName || this.preiveTableName.length == 0) {
        alert("请选择一个表名！");
        return;
      }

      this.$http({
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        url: "/dbswitch/admin/api/v1/mapper/preview/column",
        data: JSON.stringify({
          id: this.createform.sourceConnectionId,
          schemaName: this.createform.sourceSchema,
          isInclude: this.createform.includeOrExclude == 'INCLUDE',
          tableName: this.preiveTableName,
          nameMapper: this.createform.columnNameMapper,
          columnNameCase: this.createform.columnNameCase
        })
      }).then(res => {
        if (0 === res.data.code) {
          this.columnNamesMapperData = res.data.data;
        } else {
          if (res.data.message) {
            alert(res.data.message);
          }
        }
      });

    },
    handleSave: function () {
      if (0 === this.createform.autoSyncMode) {
        this.createform.targetDropTable = false;
        this.createform.targetOnlyCreate = false;
      } else if (1 === this.createform.autoSyncMode) {
        this.createform.targetDropTable = true;
        this.createform.targetOnlyCreate = true;
      } else {
        this.createform.targetDropTable = true;
        this.createform.targetOnlyCreate = false;
      }
      this.$refs['createform'].validate(valid => {
        if (valid) {
          this.$http({
            method: "POST",
            headers: {
              'Content-Type': 'application/json'
            },
            url: "/dbswitch/admin/api/v1/assignment/create",
            data: JSON.stringify({
              name: this.createform.name,
              description: this.createform.description,
              scheduleMode: this.createform.scheduleMode,
              cronExpression: this.createform.cronExpression,
              config: {
                sourceConnectionId: this.createform.sourceConnectionId,
                sourceSchema: this.createform.sourceSchema,
                tableType: this.createform.tableType,
                includeOrExclude: this.createform.includeOrExclude,
                sourceTables: this.createform.sourceTables,
                targetConnectionId: this.createform.targetConnectionId,
                targetSchema: this.createform.targetSchema,
                tableNameMapper: this.createform.tableNameMapper,
                columnNameMapper: this.createform.columnNameMapper,
                tableNameCase: this.createform.tableNameCase,
                columnNameCase: this.createform.columnNameCase,
                targetDropTable: this.createform.targetDropTable,
                targetOnlyCreate: this.createform.targetOnlyCreate,
                targetAutoIncrement: this.createform.targetAutoIncrement,
                batchSize: this.createform.batchSize
              }
            })
          }).then(res => {
            if (0 === res.data.code) {
              this.$message("添加任务成功");
              this.$router.push('/task/assignment')
            } else {
              if (res.data.message) {
                alert(res.data.message);
              }
            }
          });
        } else {
          alert("请点击【上一步】检查输入");
        }
      });
    }
  },
  created () {
    this.loadConnections();
  },
}
</script>

<style scoped>
.el-card {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.tip-content {
  font-size: 12px;
}

.name-mapper-table,
.name-mapper-table table tr th,
.name-mapper-table table tr td {
  border-collapse: collapse;
  border: 1px solid #e0dddd;
  width: 100%;
}

.el-descriptions__body
  .el-descriptions__table
  .el-descriptions-row
  .el-descriptions-item__label {
  min-width: 20px;
  max-width: 60px;
}
</style>