<template>
  <div v-loading="loading" elemeur-loading-text="正在读取数据...">
    <!--<el-tabs type="card" v-model="activeName">-->
    <!--  <el-tab-pane label="基本信息" name="first">-->
        <el-form :model="taskData" ref="form" :rules="rules" label-position='top'>
          <el-row>
            <el-col :span='8'>
              <el-form-item label="任务名称" prop="jobName">
                <el-input :readonly="jobData.onlyRead" v-model="taskData.jobName"/>
              </el-form-item>
            </el-col>
            <el-col :span='8'>
              <el-form-item label="描述" prop="description">
                <el-input :readonly="jobData.onlyRead" v-model="taskData.description"/>
              </el-form-item>
            </el-col>
            <el-col :span='8'>
              <el-form-item label="优先级" prop="jobPrio">
                <el-input-number :disabled="jobData.onlyRead" v-model="taskData.jobPrio"/>
              </el-form-item>
            </el-col>
            <el-col :span='8'>
              <el-form-item label="执行类" prop="jobClassName">
                <el-popover placement="top" style="position: absolute">
                  <p v-html="currDescription ? currDescription : '无'"/>
                  <el-button slot="reference" type="text" style="float: right;position: absolute;left: 55px;top: -20px;">
                    <i class="el-icon-warning"/>
                  </el-button>
                </el-popover>
                <el-select :disabled="jobData.onlyRead" v-model="taskData.jobClassName">
                  <el-option v-for="item in jobClasss" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span='8'>
              <el-form-item label="Cron表达式" prop="cronExpression">
                <cron-tab :readonly="jobData.onlyRead" v-model="taskData.cronExpression"/>
              </el-form-item>
            </el-col>
            <el-col :span='8' v-if='!jobData.onlyRead'>
              <el-form-item label="是否立即执行" prop="isRun">
                <el-radio-group v-model="taskData.isRun">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span='24'>
              <el-form-item label="执行配置" prop="jobConfig">
                <el-popover placement="top" style="position: absolute">
                  <p v-html="currConfig ? currConfig : '无'"/>
                  <el-button slot="reference" type="text" style="float: right;position: absolute;left: 55px;top: -20px;">
                    <i class="el-icon-warning"/>
                  </el-button>
                </el-popover>
                <el-input :readonly="jobData.onlyRead" v-model="taskData.jobConfig" type="textarea" rows="4"/>
              </el-form-item>
            </el-col>
            <!-- <el-col :span='24'>
              <el-form-item label="执行策略" prop="triggerMisfire">
                <el-select :disabled="jobData.onlyRead" v-sys-code="'triggerMisfire'" v-model="taskData.triggerMisfire">
                  <el-option v-for="item in sysCode.triggerMisfire" :key="item.key" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col> -->

            <el-col :span='24' v-if='jobData.onlyRead&&taskData.exceInfo'>
              <el-form-item label="异常信息" prop="exceInfo">
                <el-input type="textarea" :autosize='{ minRows: 2, maxRows: 6 }' readonly v-model="taskData.exceInfo"/>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-if='jobData.onlyRead'>
            <el-col :span='12'>
              <el-form-item label="下一次执行时间" prop="nextFireTime">
                {{formatterDateTime(null, null, taskData.nextFireTime)}}
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="上一次执行时间" prop="prevFireTime">
                {{formatterDateTime(null, null, taskData.prevFireTime)}}
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="触发器状态" prop="triggerState">
                {{triggerState(taskData.triggerState)}}
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="触发器生效时间" prop="startTime">
                {{formatterDateTime(null, null, taskData.startTime)}}
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="触发器失效时间" prop="endTime">
                {{formatterDateTime(null, null, taskData.endTime) || '-'}}
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="触发器时区" prop="timeZoneId">
                {{taskData.timeZoneId}}
              </el-form-item>
            </el-col>
            <el-col :span='12'>
              <el-form-item label="目前执行次数">
                {{jobRunNum}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!--<HandleHistory class="margin-top-1 margin-bottom-1" :uuid="taskData.uuid" :cr-user-uuid="taskData.crUserUuid"-->
        <!--               :op-user-uuid="taskData.opUserUuid" :cr-time="taskData.crTime"-->
        <!--               :op-time="taskData.opTime" mode="plan"/>-->
      <!--</el-tab-pane>-->

      <!-- <el-tab-pane v-if="jobData.job" label="执行历史" name="second">
        <el-radio-group size="small" class="margin-bottom-1" v-model="queryform.logLevel" @change="logLevelChang">
          <el-radio-button label="1">系统级日志</el-radio-button>
          <el-radio-button label="2">自定义日志</el-radio-button>
        </el-radio-group>
        <PageTable :auto-load="false" hideTitle ref="dataTableHis" @load-data="dataTableLoad" :data="table.data" highlight-current-row stripe border>
          <el-table-column prop="pcip" label="执行者IP" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="pcname" label="执行者名称" width="130" show-overflow-tooltip></el-table-column>
          <el-table-column prop="jobname" label="Job名称" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column prop="recotime" label="执行时间" width="135" show-overflow-tooltip>
            <template slot-scope='scope'>{{scope.row.recotime|date('%Y-%m-%d %T')}}</template>
          </el-table-column>
          <el-table-column prop="exceinfo" label="执行信息" show-overflow-tooltip></el-table-column>
        </PageTable>
      </el-tab-pane> -->
    <!--</el-tabs>-->


    <OptionHistory :data="taskData" v-if="taskData.uuid"/>
  </div>
</template>
<script>
    import CronTab from "@/common/CronTab";
    import TaskMgrApi from "@/api/base/sysm/TaskMgrApi";
    import HandleHistory from "@/common/HandleHistory";
    import OptionHistory from "@/common/OptionHistory.vue";

    let defaultData = {
        jobName: null,
        jobPrio: 5,
        description: null,
        triggerMisfire: "1",
        jobClassName: null,
        cronExpression: null,
        oldJobName: null,
        exceInfo: null,
        isRun: "0",
        jobConfig: ""
    };

    export default {
        components: {CronTab, HandleHistory, OptionHistory},
        props: {
            jobData: {
                job: {
                    type: Object | null,
                    default: null
                },
                onlyRead: {
                    type: Boolean | null,
                    default: null
                }
            }
        },
        data() {
            return {
                queryform: {
                    logLevel: "1"
                },
                table: {
                    data: []
                },
                activeName: "first",
                jobClasss: [],
                currConfig: '',      // 当前选择任务的配置
                currDescription: '', // 当前选择任务的说明
                //job运行次数
                jobRunNum: 0,
                taskData: Object.assign({}, defaultData),
                loading: false,
                rules: {
                    jobName: [
                        {required: true, message: "请输入任务名称", trigger: "change"}
                    ],
                    description: [
                        {required: true, message: "请输入任务描述", trigger: "change"}
                    ],
                    jobClassName: [
                        {required: true, message: "请输入执行类", trigger: "change"}
                    ],
                    cronExpression: [
                        {required: true, message: "请选择Cron表达式", trigger: "change"}
                    ]
                }
            };
        },
        mounted() {
            if (this.jobData.job) {
                this.loadForm(this.jobData);
            } else {
                this.taskData = Object.assign({}, defaultData);
            }
            this.loadJobSelect();
        },
        watch: {
            jobData(val) {
                if (val.job) {
                    this.loadForm(val);
                } else {
                    this.taskData = Object.assign({}, defaultData);
                    this.resetForm();
                }
                this.loadJobSelect();
            },
            "taskData.jobClassName"(n, o) {
                if (n) this.handleChangeJobClasesName(n);
            }

        },
        methods: {
            logLevelChang(val) {
                this.$nextTick(() => {
                    this.$refs.dataTableHis.load({
                        logLevel: val,
                        jobName: this.jobData.job.jobname
                    });
                });
            },
            loadJobSelect() {
                TaskMgrApi.getJobClasss().then(resp => {
                    this.jobClasss = resp.JobClasss;
                });
            },
            //初始页面加载数据
            loadForm(val) {
                this.loading = true;

                try {
                    //手动拉取该JOB的详情信息
                    TaskMgrApi.loadJobInfo({jobName: val.job.jobname}).then(resp => {
                        //对象的key不同所以进行手动复制，噩梦啊
                        this.taskData.uuid = this.jobData.job.uuid;
                        this.taskData.crUserUuid = this.jobData.job.cruseruuid;
                        this.taskData.opUserUuid = this.jobData.job.opuseruuid;
                        this.taskData.crTime = this.jobData.job.crtime;
                        this.taskData.opTime = this.jobData.job.optime;
                        this.taskData.exceInfo = this.jobData.job.exceinfo;
                        this.taskData.jobPrio = this.jobData.job.jobprio;
                        this.taskData.triggerMisfire = this.jobData.job.triggermisfire;
                        this.taskData.jobConfig = this.jobData.job.jobconfig;
                        console.log(resp);
                        this.taskData.jobName = resp.datarows[0].jobname;
                        this.taskData.description = resp.datarows[0].description;
                        let jn = resp.datarows[0].jobclassname.split(".");
                        let className = jn[jn.length - 1];
                        let after = className.substr(0, 1).toLowerCase();
                        let befor = className.substr(1, className.length - 1);
                        this.taskData.jobClassName = after + befor;
                        this.taskData.triggerName = resp.datarows[0].triggername;
                        this.taskData.triggerGroup = resp.datarows[0].triggergroup;
                        this.taskData.nextFireTime = resp.datarows[0].nextfiretime;
                        this.taskData.prevFireTime = resp.datarows[0].prevfiretime;
                        this.taskData.triggerState = resp.datarows[0].triggerstate;
                        this.taskData.startTime = resp.datarows[0].starttime;
                        this.taskData.endTime = resp.datarows[0].endtime;
                        this.taskData.cronExpression = resp.datarows[0].cronexpression;
                        this.taskData.timeZoneId = resp.datarows[0].timezoneid;
                        this.taskData.oldJobName = resp.datarows[0].jobname;
                        //-----------------------------------
                    });
                } finally {
                    this.loading = false;
                }
                //手动拉取该JOB的运行历史
                this.dataTableLoad(
                    Object.assign(this.queryform, {jobName: val.job.jobname})
                );
            },
            // 提交表单数据
            async submitForm() {
                await this.$refs.form.validate();
                try {
                    this.loading = true;
                    if (this.jobData.job) {
                        await TaskMgrApi.updataJob(this.taskData);
                        this.$emit("closeDia");
                    } else {
                        await TaskMgrApi.addJob(this.taskData);
                        this.$emit("closeDia");
                    }
                } finally {
                    this.loading = false;
                }
            },
            //重置表单
            resetForm() {
                this.$refs.form.resetFields();
                this.activeName = "first";
                this.queryform.logLevel = "1";
            },
            //表格加载
            dataTableLoad(params) {
                TaskMgrApi.loadJobRunHis(params).then(
                    respData => (this.jobRunNum = respData.datarows.length)
                ); // 本地也记录一下数据 (提供给表示显示的数据)
            },
            triggerState(cellValue) {
                let label = "unknow";
                switch (cellValue) {
                    case "WAITING":
                        label = "等待";
                        break;
                    case "PAUSED":
                        label = "暂停";
                        break;
                    case "ACQUIRED":
                        label = "正常执行";
                        break;
                    case "BLOCKED":
                        label = "阻塞";
                        break;
                    case "ERROR":
                        label = "错误";
                        break;
                }
                return label;
            },
            handleChangeJobClasesName(value) {
                this.currConfig = this.jobClasss.filter(v => v.value === value)[0].config;
                this.currDescription = this.jobClasss.filter(v => v.value === value)[0].description;
            }
        }
    };
</script>
<style lang="scss">
  .taskmgredit {
    & th {
      background: #ecf0f4 !important;
    }
  }

  .taskmgreditR {
    & .el-form-item {
      margin: 4px 0px;
    }
  }
</style>

