<template>
  <div class="schedule_module_container">
    <slot></slot>
    <a-form-model ref="formList" layout="vertical" :model="formList" :rules="rules">
      <a-collapse v-model="activeKey" :bordered="false" expand-icon-position="right">
        <a-collapse-panel key="1">
          <div slot="header" class="header">
            <win-title>集成调度信息</win-title>
            <span
              v-if="formList.jobInfoId"
              class="status_txt"
              :class="formList.triggerStatus== '0' ? 'off' : ''">
              {{ formList.triggerStatus== '0' ? "下线" : "上线" }}
            </span>
          </div>
          <template v-if="type=='inteSchedule'">
            <a-form-model-item label="调度模型">
              <a-select
                placeholder="请选择调度模型"
                show-search
                :filter-option="false"
                v-model="modelInfo.tableCode"
                @change="changeModel"
                :options="modelList"
                @search="searchModel"
              ></a-select>
            </a-form-model-item>
            <a-form-model-item label="调度指标">
              <template
                v-if="
                  modelInfo.indicatorList &&
                  modelInfo.indicatorList.length
                "
              >
                <a-popover title="调度指标列表" placement="rightTop">
                  <template slot="content">
                    <a-descriptions size="small" bordered :column="1">
                      <a-descriptions-item
                        :label="item.indicatorName"
                        :key="item.indicatorCode"
                        v-for="item in modelInfo.indicatorList || []"
                      >
                        {{ item.indicatorCode }}
                      </a-descriptions-item>
                    </a-descriptions>
                  </template>
                  <div class="a_txt">
                    {{
                      (modelInfo.indicatorList || [])
                        .map((item) => item.indicatorName)
                        .join("、")
                    }}
                  </div>
                </a-popover>
              </template>
              <template v-else>--</template>
            </a-form-model-item>
            <a-form-model-item label="目标库">
              <div
                class="a_txt"
                :title="`${
                  modelInfo.datasourceName ||
                  modelInfo.datasourceId
                }.${modelInfo.schemaName}`"
              >
                {{
                  modelInfo.datasourceName ||
                  modelInfo.datasourceId ||
                  "--"
                }}.{{ modelInfo.schemaName || "--" }}
              </div>
            </a-form-model-item>
          </template>
          <a-form-model-item>
            <template slot="label"
              ><span class="ant-form-item-required">流程名称</span></template
            >
            <a-input
              placeholder="请输入流程名称"
              v-model="jobDetail.jobName"
            ></a-input>
          </a-form-model-item>
          <a-form-model-item label="流程简介">
            <a-textarea
              :placeholder="$t('请输入流程简介')"
              :auto-size="{ minRows: 2, maxRows: 4 }"
              v-model="jobDetail.jobDesc"
            />
          </a-form-model-item>

          <!-- 调度信息 -->
          <a-form-model-item :label="$t('任务名称')" prop="jobDesc">
            <a-input :placeholder="$t('请输入任务名称')" v-model="formList.jobDesc" />
          </a-form-model-item>
          <a-form-model-item :label="$t('调度类型')" prop="scheduleType">
            <a-select
              :placeholder="$t('请选择调度类型')"
              v-model="formList.scheduleType"
              :options="scheduleList"
              @change="changeScheduleType"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            v-if="formList.scheduleType == 'CRON'"
            :label="$t('调度周期')"
            prop="scheduleCronConf"
            class="cron"
            ref="scheduleCronForm"
          >
            <schedule-cron
              :data="formList.scheduleCronConf"
              @change="changeScheduleConf"
            >
              <div class="schedule_conf">
                <a-tooltip>
                  <template slot="title">{{ formList.sConf }}</template>
                  <p class="schedule_txt">{{ formList.sConf }}</p>
                </a-tooltip>
                <a-button :loading="scheduleLoading" icon="form"></a-button>
              </div>
            </schedule-cron>
          </a-form-model-item>
          <a-form-model-item :label="$t('集群')" prop="clusterId">
            <a-select
              class="middle"
              :placeholder="$t('请选择集群')"
              v-model="formList.clusterId"
              :options="clusterList"
            >
            </a-select>
          </a-form-model-item>
        </a-collapse-panel>
        <a-collapse-panel key="2">
          <div slot="header" class="header">
            <win-title>高级设置</win-title>
          </div>
          <a-form-model-item :label="$t('执行器类型')" prop="jobGroup">
            <a-select
              :placeholder="$t('请选择执行器类型')"
              show-search
              :default-active-first-option="false"
              option-filter-prop="children"
              v-model="formList.jobGroup"
              @search="searchJobGroup"
              @change="changeJobGroup"
              :options="jobGroupList"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('执行器')" prop="executorHandler">
            <a-select
              :placeholder="$t('请选择执行器')"
              v-model="formList.executorHandler"
              :options="jobHandlerList"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item
            v-if="formList.jobType == 'transfer' && formList.scheduleType == 'MANUAL'"
            :label="$t('作业模式')"
            prop="operatingMode"
          >
            <a-select
              :placeholder="$t('请选择')"
              v-model="formList.operatingMode"
              :options="operModeList"
            >
            </a-select>
          </a-form-model-item>

          <a-form-model-item :label="$t('路由策略')" prop="executorRouteStrategy">
            <a-select
              :placeholder="$t('请选择路由策略')"
              v-model="formList.executorRouteStrategy"
              :options="routeList"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('过期策略')" prop="misfireStrategy">
            <a-select
              :placeholder="$t('请选择过期策略')"
              v-model="formList.misfireStrategy"
              :options="misfireList"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('阻塞策略')" prop="executorBlockStrategy">
            <a-select
              :placeholder="$t('请选择阻塞处理策略')"
              v-model="formList.executorBlockStrategy"
              :options="executorBlockList"
            >
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label="$t('重试次数')" prop="executorFailRetryCount">
            <a-input
              :placeholder="$t('请输入内容')"
              v-model="formList.executorFailRetryCount"
            />
          </a-form-model-item>
        </a-collapse-panel>
      </a-collapse>
    </a-form-model>
  </div>
</template>

<script type="text/javascript" src="./service.js"></script>
<style lang="less" scoped>
.schedule_module_container {
  height: 100%;
  padding: 6px 0;
  /deep/.ant-form {
    .ant-form-item {
      .ant-form-item-label {
        padding: 0;
        height: 24px;
        justify-content: flex-start;
      }
    }
  }
  /deep/.ant-collapse-borderless {
    background: #ffffff;
    .ant-collapse-header {
      padding: 8px 0 8px 4px;
    }
    .ant-collapse-content-box {
      padding: 0;
    }
  }
  /deep/.ant-form-item.cron {
    .schedule_conf {
      display: flex;
    }
    .schedule_txt {
      flex: 1;
      cursor: pointer;
      color: #2d5afa;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 26px;
    }
    .ant-btn {
      margin-left: 10px;
      margin-top: 4px;
      color: #7e89a4;
      width: 22px;
      height: 22px;
    }
  }
  .status_txt {
    float: right;
    margin-right: 38px;
    position: relative;
    color: #00AB44;
    font-size: 13px;
    &::before {
      content: '';
      position: absolute;
      top: 10px;
      left: -10px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #00AB44;
    }
  }
  .status_txt.off {
    color: #ec0000;
    &::before {
      background: #ec0000;
    }
  }
}
</style>
