<el-main>
  <!--面包屑-->
  <breadcrumb-component></breadcrumb-component>

  <el-container class="detail-container">

    <el-form label-width="200px" label-position="right" class="create-form-outline-full-screen"
             :model="taskForm" ref="taskForm">

      <el-form-item label="任务名称" prop="taskName" :rules="[{ required: true, message: '任务名称不能为空', trigger: 'blur'  },{ max: 30, message: '字数不能超过30', trigger: 'change' }]">
        <el-input class="normal-width " :disabled="readonly" v-model="taskForm.taskName" placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="周期" prop="periodType" :rules="[{ required: true, message: '周期不能为空', trigger: 'change'}]">
        <el-select class="normal-width " @change="$refs.taskForm.clearValidate(['hourPeriod','dayPeriod','monthPeriod','selfPeriod'])" :disabled="readonly" v-model="taskForm.periodType" placeholder="请选择">
          <el-option
            v-for="item in periodOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item v-if="taskForm.periodType=='3'" label="执行时间" prop="hourPeriod"
                    :rules="[{ required: true, message: '周期分钟数不能为空', trigger: 'blur'  }]">
        <!--<el-select class="normal-width " v-model="taskForm.hourPeriod" placeholder="请选择">-->
          <!--<el-option-->
            <!--v-for="item in minutes"-->
            <!--:key="item"-->
            <!--:label="item"-->
            <!--:value="item">-->
          <!--</el-option>-->
        <!--</el-select>-->
        <!--分-->
        <el-time-select :disabled="readonly" v-model="taskForm.hourPeriod" :picker-options="{start: '00:00',step: '00:01',end: '00:59'}"
                        class="normal-width" placeholder="选择分钟">
        </el-time-select>
      </el-form-item>

      <el-form-item v-if="taskForm.periodType=='2'" label="执行时间" prop="dayPeriod"
                    :rules="[{ required: true, message: '周期小时数不能为空', trigger: 'blur'  }]">
        <!--<el-select class="normal-width " v-model="taskForm.dayPeriod" placeholder="请选择">-->
        <!--<el-option-->
        <!--v-for="item in hours"-->
        <!--:key="item"-->
        <!--:label="item"-->
        <!--:value="item">-->
        <!--</el-option>-->

        <!--</el-select>时-->
        <el-time-select :disabled="readonly" v-model="taskForm.dayPeriod" :picker-options="{start: '00:00',step: '01:00',end: '23:00'}"
                        class="normal-width" placeholder="选择小时">
        </el-time-select>
      </el-form-item>


      <el-form-item v-if="taskForm.periodType=='1'" label="执行时间" prop="monthPeriod"
                    :rules="[{ required: true, message: '周期天数不能为空', trigger: 'blur'  }]">
          <el-select :disabled="readonly" class="normal-width " v-model="taskForm.monthPeriod" clearable>
            <span slot="prefix">日</span>
            <el-option
              v-for="item in days"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
      </el-form-item>

      <el-form-item v-if="taskForm.periodType=='0'" label="执行时间" prop="selfPeriod">
        <el-input :disabled="readonly" class="tiny-width" v-model="cron.month" maxlength="30"><span slot="suffix">月</span></el-input>
        <el-input :disabled="readonly" class="tiny-width" v-model="cron.day" maxlength="30"><span slot="suffix">日</span></el-input>
        <el-input :disabled="readonly" class="tiny-width" v-model="cron.hour" maxlength="30"><span slot="suffix">时</span></el-input>
        <el-input :disabled="readonly" class="tiny-width" v-model="cron.minute" maxlength="30"><span slot="suffix">分</span></el-input>
        <el-input :disabled="readonly" class="tiny-width" v-model="cron.second" maxlength="30"><span slot="suffix">秒</span></el-input>
      </el-form-item>

      <el-form-item label="调度偏移量" prop="scheduleOffset"
                    :rules="[{ required: true, message: '调度偏移量不能为空', trigger: 'blur'  }]">
        <el-input :disabled="readonly" class="normal-width " maxlength="30" v-model="taskForm.scheduleOffset" placeholder="请输入"></el-input>
        <div class="form-weak-alert normal-width">调度执行日期偏移值，如：-1表示前一月/前一天/前一小时/前一分钟</div>
      </el-form-item>

      <el-form-item label="源库" prop="sourceDatabaseId"
                    :rules="[{ required: true, message: '源库不能为空', trigger: 'change'}]">
        <el-select :disabled="readonly" class="normal-width " v-model="taskForm.sourceDatabaseId" placeholder="请选择"
                   @change="getSourceTableOptions" filterable>
          <el-option
            v-for="item in databaseOptions"
            :key="item.id"
            :label="item.resourceName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="源表" prop="sourceTableId"
                    :rules="[{ required: true, message: '源表不能为空', trigger: 'change'  }]">
        <el-select class="normal-width " :disabled="readonly?readonly:tableCheckSource" v-model="taskForm.sourceTableId"
                   placeholder="请选择" filterable>
          <el-option
            v-for="item in sourceTableOptions"
            :key="item.id"
            :label="item.tableName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="目标库" prop="targetDatabaseId"
                    :rules="[{ required: true, message: '目标库不能为空', trigger: 'change'}]">
        <el-select :disabled="readonly" class="normal-width " v-model="taskForm.targetDatabaseId" placeholder="请选择"
                   @change="getTargetTableOptions" filterable>
          <el-option
            v-for="item in targetDatabaseOptions"
            :key="item.id"
            :label="item.resourceName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="目标表" prop="targetTableId"
                    :rules="[{ required: true, message: '目标表不能为空', trigger: 'change'  }]">
        <el-select class="normal-width " :disabled="readonly?readonly:tableCheckTarget" v-model="taskForm.targetTableId"
                   placeholder="请选择" filterable>
          <el-option
            v-for="item in targetTableOptions"
            :key="item.id"
            :label="item.tableName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="extract" :disabled="buttonDisabled">数据抽取</el-button>
      </el-form-item>

      <el-form-item label="DML语句" prop="ddlSql" :rules="[{ required: true, message: 'DML不能为空', trigger: 'blur'},{ max: 2000, message: '字数不能超过2000', trigger: 'change' }]">
        <el-input :disabled="readonly" class="normal-width " type="textarea" :rows="8" v-model="taskForm.ddlSql" placeholder="请输入"></el-input>
        <div  class="form-weak-alert normal-width">假设，调度执行日期为2019-03，偏移量为-1，通配符为'#(yyyyMM)',通配符表示：当前执行日期+偏移量+通配增减周期数，'#(yyyyMM_1M)'表示减一个月，其中M大写，'_1M'为通配减周期数，
'#(yyyyMM_-1M)'表示加一个月，'_-1M'为通配加周期数，负负得正；如：'#(yyyyMM)'表示201902，即201903-1，'#(yyyyMM_1M)'表示201901，即201903-1-1，'#(yyyyMM_-1M)'表示201902，即201903-1+1
注：通配符为标准日期格式，yyyyMMddHHmmss，增减周期数必须大写，如：-1M，_-1D</div>
        <div  class="textarea-count normal-width">{{taskForm.ddlSql.length}}/2000</div>

      </el-form-item>
      <!--<el-form-item>-->
        <!--<el-popover-->
          <!--placement="top-start"-->
          <!--width="400"-->
          <!--trigger="hover"-->
          <!--class="form-weak-alert normal-width"-->
          <!--content="假设，调度执行日期为2019-03，偏移量为-1，通配符为'#(yyyyMM)' 通配符表示：当前执行日期+偏移量+通配增减周期数 '#(yyyyMM_1M)'表示减一个月,'_1M'为通配减周期数，-->
        <!--'#(yyyyMM_-1M)'表示加一个月 '_-1M'为通配加周期数，负负得正；如：'#(yyyyMM)'表示201902，即201903-1，-->
        <!--'#(yyyyMM_1M)'表示201901，即201903-1-1，'#(yyyyMM_-1M)'表示201902，即201903-1+1，-->
        <!--同理，'#(yyyy-MM)'表示2019-02，以此类推">-->
          <!--<span slot="reference" >注释：假设，调度执行日期为...</span>-->
        <!--</el-popover>-->
      <!--</el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="add" v-show="dialogState==0" :disabled="buttonDisabled">确定</el-button>
        <el-button type="primary" @click="update" v-show="dialogState==2" :disabled="buttonDisabled">确定</el-button>
        <el-button @click="goBack">取消并返回</el-button>
      </el-form-item>

    </el-form>
  </el-container>

  <el-dialog :visible.sync="showDialog" title="生成脚本" width="60%">
    <el-form label-width="70px" label-position="right" :model="scriptForm" ref="scriptForm">
      <el-form-item label="DML语句">
        <el-input maxlength="2000" :rows="8" :disabled="true" type="textarea" v-model="scriptForm.ddlSql"
                  placeholder="请输入"></el-input>
      </el-form-item>

      <el-form-item label="字段选择">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                  @selection-change="selectChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="columnName" label="名称"></el-table-column>
          <el-table-column prop="columnCode" label="编码"></el-table-column>
          <el-table-column prop="columnTypeName" label="类型"></el-table-column>
          <el-table-column prop="columnComment" label="描述"></el-table-column>
        </el-table>
      </el-form-item>


    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="addDDL">确定</el-button>
    </div>
  </el-dialog>
</el-main>










