<template>
  <app-dialog
    v-model="visible"
    :hide-footer="disabled"
    :loading="loading"
    :title="title"
    append-to-body
    class="detail-dialog"
    width="60%"
    @cancel="onCancel"
    @confirm="onConfirm"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-divider content-position="left"><i class="el-icon-document" style="color: rgb(24, 144, 255)" /><span
        class="divider-top">采集任务</span></el-divider>
      <div class="form-content">
        <el-row :gutter="20" type="flex">
          <app-filter-item :span="12" label="任务名称" prop="jobName">
            <el-input v-model="form.jobName" :disabled="disabled" clearable placeholder="请输入" />
          </app-filter-item>
          <app-filter-item :span="12" label="任务类别" prop="jobType">
            <el-radio-group v-model="form.jobType" :disabled="disabled">
              <el-radio-button v-for="item in jobTypes" :key="item.value" :label="item.value">
                {{ item.name }}
              </el-radio-button>
            </el-radio-group>
          </app-filter-item>
        </el-row>
        <el-row :gutter="20" type="flex">
          <app-filter-item :span="12" label="数据资源表" prop="dataResourcesName">
            <el-input v-model="form.dataResourcesName" :disabled="disabled" placeholder="请输入" read-only
                      @focus="handleTable">
              <i slot="suffix" class="el-input__icon el-icon-search" />
            </el-input>
          </app-filter-item>
        </el-row>
        <el-row :gutter="20" type="flex">
          <app-filter-item :span="24" label="执行参数配置" prop="jobParam">
            <el-input v-model="form.jobParam" :disabled="disabled" placeholder="请输入" read-only @focus="handleParam">
              <i slot="suffix" class="el-input__icon el-icon-setting" />
            </el-input>
          </app-filter-item>
        </el-row>
        <el-row v-if="form.jobType === 1" :gutter="20" type="flex">
          <app-filter-item :span="24" label="Cron表达式" prop="jobCron">
            <el-input v-model="form.jobCron" :disabled="disabled" :rows="2" clearable placeholder="请输入"
                      type="textarea" />
          </app-filter-item>
        </el-row>

        <el-row :gutter="20" type="flex">
          <app-filter-item :span="24" label="任务描述" prop="jobContent">
            <el-input v-model="form.jobContent" :disabled="disabled" :rows="2" clearable placeholder="请输入"
                      type="textarea" />
          </app-filter-item>
        </el-row>
      </div>
      <el-divider content-position="left"><i class="el-icon-document" style="color: rgb(24, 144, 255)" /><span
        class="divider-top">ETL配置</span></el-divider>
      <div class="form-content">
        <!-- <el-row :gutter="20" type="flex">
          <app-filter-item :span="12" label="服务器地址" prop="remoteIp">

          </app-filter-item>
          <app-filter-item :span="12" label="账号" prop="remoteName">
            <el-input v-model="form.remoteName" :disabled="disabled" clearable placeholder="请输入账号"></el-input>
          </app-filter-item>
        </el-row> -->
      </div>
    </el-form>
    <param-dialog v-model="paramsDialogVisible" :data="dialogData" @confirm="onConfirmJson" />
    <table-select-dialog v-model="tableDialogVisible" :data="taskData" @change="onConfirmTable" />
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js'
import {getDictionaryByCode} from '@/utils/dictionary.js'
import paramDialog from './paramDialog.vue'
import tableSelectDialog from './tableSelectDialog.vue'
import API from '@/api/business/schedulerDW'
import codeEditor from '@/components/codeEditor/index.vue'

export default {
  name: 'etlDialog',
  components: {paramDialog, tableSelectDialog, codeEditor},
  mixins: [dialogMixin],
  props: {
    mode: {
      type: Number
    }
  },
  data() {
    return {
      form: {
        jobName: '',
        tableId: '',
        dataResourcesName: '',
        jobStatus: 'NONE',
        jobTaskMode: 4,
        jobTaskType: 3,
        jobType: 1,
        jobParam: '',
        remoteIp: '',
        remoteName: '',
        remotePwd: '',
        jobMode: 'local',
        command: '',
        shellFile: []
      },
      rules: {
        jobName: [{required: true, message: '任务名称不能为空'}],
        dataResourcesName: [{required: true, message: '数据资源表不能为空'}],
        // jobParam: [{ required: true, message: '执行参数配置不能为空' }],
        jobClass: [{required: true, message: '执行类路径不能为空'}],
        jobCron: [{required: true, message: 'Cron表达式不能为空'}],
        sourceTempTable: [{required: true, message: '源头数据库中间表名不能为空'}]
      },
      jobTypes: [
        {
          value: 1,
          name: '定时任务'
        },
        {
          value: 2,
          name: '非定时任务'
        }
      ],
      loading: false,
      paramsDialogVisible: false,
      dialogData: {},
      tableDialogVisible: false,
      taskData: {},
      resourceList: [],
      disabled: false,
      uploadUrl: ''
    }
  },
  mounted() {
  },
  methods: {
    getDictionaryByCode,
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    async initData(data) {
      const orgForm = this.$options.data().form

      if (data?.id) {
        var param = new FormData()
        param.append('id', data.id)
        const {
          schedulerEtl: {...etlShell},
          ...jobData
        } = await API.getSchedulerJob(param)
        this.form = {
          remoteIp,
          remoteName,
          remotePwd,
          command,
          schedulerEtl: {...etlShell},
          ...jobData
        }
      } else {
        this.form = {...orgForm}
      }
      this.form.jobTaskMode = this.mode
      this.disabled = this.form.jobStatus === 'NORMAL'
      console.log(this.form)
      this.$nextTick(() => {
        this.$refs.form && this.$refs.form.clearValidate()
      })
    },
    // 参数配置
    handleParam() {
      if (this.disabled) {
        return
      }
      this.paramsDialogVisible = true
      this.dialogData = {data: this.form.jobParam}
    },
    onConfirmJson(data) {
      this.form.jobParam = data
    },
    // 选择table
    handleTable() {
      if (this.disabled) {
        return
      }
      this.tableDialogVisible = true
      this.taskData = {data: this.form.tableId}
    },
    onConfirmTable(data) {
      this.form.tableId = data.id || ''
      this.form.dataResourcesName = data.name || ''
    },
    handleCheckClass() {
      if (this.form.jobClass) {
        API.validClass(this.form.jobClass)
          .then((res) => {
            if (res.state) {
              this.$message.success('验证成功！')
            }
          })
          .catch((err) => {
            this.$message.warning(err || '验证失败！')
          })
      } else {
        this.$message.warning('请输入执行类路径')
      }
    },
    onCancel() {
      this.visible = false
      this.loading = false
      this.$refs.form.resetFields()
    },
    validateAtLeastOneField(rule, value, callback) {
      if (this.form.shellFile.length > 0 || this.form.command) {
        callback()
      } else {
        callback(new Error('shell命令和shell脚本文件至少填写一个！'))
      }
    },
    onConfirm() {
      this.loading = true
      this.$refs.form.validate(async (valid, object) => {
        if (valid) {
          try {
            let APIMethod
            if (this.form?.id) {
              APIMethod = API.editSchedulerJob
            } else {
              APIMethod = API.addSchedulerJob
            }
            var param = new FormData()

            const {schedulerEtl, ...rest} = this.form
            const jobJson = {schedulerEtl: {...schedulerShell}, ...rest}

            param.append('jobJson', JSON.stringify(jobJson))

            this.$message.success((this.form?.id ? '编辑' : '新增') + '数据任务成功')
            this.visible = false
            // const { state, message } = await APIMethod(param);
            // if (state) {
            //   this.$message.success((this.form?.id ? '编辑' : '新增') + '数据任务成功');
            //   this.$emit('confirm');
            //   this.visible = false;
            // }
          } catch (err) {
            this.$message.warning(err || '操作失败')
          } finally {
            this.loading = false
          }
        } else {
          this.$message.warning(`有${Object.keys(object).length}个字段未通过校验，请正确填写表单。`)
          this.loading = false
        }
      })
    },
    beforeUpload(file) {
      const isRightType = file.name.endsWith('.sh')
      if (!isRightType) {
        this.$message.error(`只能上传.sh文件`)
        return false
      }
    },
    changeUpload(file, fileList) {
      this.$set(this.form, 'shellFile', fileList)
    },
    handleRemove(file, fileList) {
      this.$set(this.form, 'shellFile', fileList)
    },
    handleExceed() {
      this.$message.error(`只能上传1个文件`)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-content {
  width: 96%;
  margin: 0 auto;
}
</style>
