<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <el-form-item label="任务名称">
        <el-input size="small" v-model="queryParams.name" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" plain @click="getList">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="success" plain @click="addTask()">创建任务</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column align="center" prop="tTaskId" label="任务id"></el-table-column>
        <el-table-column align="center" prop="tTaskName" label="名称"></el-table-column>
        <el-table-column align="center" prop="tTaskStatus" label="状态"></el-table-column>
        <el-table-column align="center" prop="tCreateTime" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="tCronExpression" label="定时任务"></el-table-column>
        <el-table-column align="center" prop="tRunInfo" label="运行信息" width="100">
          <template slot-scope="{row}">
            <el-button @click="viewInfo(row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         fixed="right"
                         label="操作" width="200"
        >
          <template slot-scope="{row}">
            <el-button @click="handleClick(row)" type="primary" plain size="mini">编辑</el-button>
            <el-button @click="handleClick(row)" type="danger" plain size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <el-dialog
      :title="isEdit?'修改任务':'创建任务'"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose" :close-on-click-modal="false">
      <div>
        <el-form ref="ruleForm" :rules="rules" :model="formData" class="demo-form-inline" label-width="130px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="任务名称" prop="tTaskName" label-width="100px">
                <el-input v-model="formData.tTaskName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="定时任务" prop="tCronExpression" label-width="100px">
                <el-input v-model="formData.tCronExpression"></el-input>
              </el-form-item>
            </el-col>
          </el-row>


        </el-form>
        <div class="mode-table">
          <div class="flex model-table-tr">
            <span class="pa-0 td td0"></span>
            <span class="pa-0 td td1 font-bold">是否开启</span>
            <span class="pa-0 td2 font-bold">参数</span>
          </div>
          <!--    数据获取        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">数据获取</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.dataAcquisition.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                   <el-form ref="ruleForm" :rules="dataAcquisitionRules" :model="formData.dataAcquisition.value"
                            class="demo-form-inline"
                            label-width="130px">
                      <el-form-item label="查询语句" prop="query_sql">
                        <el-input v-model="formData.dataAcquisition.value['query_sql']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                      <el-form-item label="mongo库" prop="mongodb_database">
                        <el-input v-model="formData.dataAcquisition.value['mongodb_database']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                     <el-form-item label="写入的mongo表" prop="mongodb_write_table">
                        <el-input v-model="formData.dataAcquisition.value['mongodb_write_table']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                     <el-form-item label="查询的mysql库" prop="mysql_database">
                        <el-input v-model="formData.dataAcquisition.value['mysql_database']" size="mini"
                                  :disabled="!formData.dataAcquisition.enable" type="textarea"
                                  :autosize="{ minRows: 1 }"></el-input>
                      </el-form-item>
                   </el-form>
                </div>
              </span>
          </div>
          <!--    数据处理        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">数据处理</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.dataCleaning.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <data-clean-form ref="dataCleaning" :form-data="formData.dataCleaning"
                                   @child-event="getDataCleaning"></data-clean-form>
                </div>
              </span>
          </div>

          <!--    模型        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">
              <el-select v-model="formData.model.name" placeholder="请选择" size="small"
                         style="width: 100%">
                <el-option
                  v-for="item in modelName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.model.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false" disabled>关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <model-form ref="model" :form-data="formData.model" @child-event="getModel"></model-form>
                </div>
              </span>
          </div>

          <!--    后处理        -->
          <div class="flex model-table-tr">
            <span class="pa-0 td td0">后处理</span>
            <span class="pa-0 td td1">
                 <el-radio-group v-model="formData.processing.enable" size="mini">
                  <el-radio-button :label="true">开启</el-radio-button>
                  <el-radio-button :label="false">关闭</el-radio-button>
                </el-radio-group>
              </span>
            <span class="pa-0 td2">
                <div class="form-table-item">
                  <processing-form ref="processing" :form-data="formData.processing"
                                   @child-event="getProcessing"></processing-form>
                </div>
              </span>
          </div>


        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="saveTask">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="运行信息"
      :visible.sync="dialogInfoVisible"
      width="30%"
    >
      <div>
        {{ info }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogInfoVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dataCleanForm from './dataCleanForm.vue'
import modelForm from './modelForm.vue'
import processingForm from './processingForm.vue'

export default {
  components: {modelForm, dataCleanForm, processingForm},
  data() {
    return {
      loading: false,
      tableData: [],
      formData: {
        dataAcquisition: {name: '数据获取', enable: true, value: {}},
        dataCleaning: {name: '数据处理', enable: true, value: {}},
        powerRationing: {name: '限电清洗', enable: true, value: {}},
        model: {name: '模型', enable: true, value: {}},
        modelTest: {name: '模型测试', enable: true, value: {}},
        processing: {name: '后处理', enable: true, value: {}},
        report: {name: '分析报告', enable: true, value: {}},
      },
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
      isEdit: false,
      dialogVisible: false,
      dialogInfoVisible: false,
      info: '',
      rules: {
        tTaskName: [
          {required: true, message: '请填写任务名称', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请填写任务名称', trigger: 'blur'}
        ],

      },
      dataAcquisitionRules: {
        query_sql: [
          {required: true, message: '请填写查询语句', trigger: 'blur'}
        ],
        mongodb_database: [
          {required: true, message: '请填写mongo库', trigger: 'blur'}
        ],
        mongodb_write_table: [
          {required: true, message: '请填写写入的mongo表', trigger: 'blur'}
        ],
        mysql_database: [
          {required: true, message: '请填写查询的mysql库', trigger: 'blur'}
        ],
      },
      powerRationingName: [
        {label: '限电清洗-光伏', value: '限电清洗-光伏'},
        {label: '限电清洗-风电', value: '限电清洗-风电'}
      ],
      modelName: [
        {label: '光伏物理模型', value: '光伏物理模型'},
        {label: '风电物理模型', value: '风电物理模型'},
        {label: 'Holtwinters模型', value: 'Holtwinters模型'},
        {label: 'LSTM', value: 'LSTM'},
        {label: '机器学习模型', value: '机器学习模型'}
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      this.tableData = [
        {
          tTaskId: '1',
          tTaskName: 'T00001',
          tTaskStatus: '0',
          tCreateTime: '',
          tCronExpression: '',
          tAnalysisReport: '',
          tRunInfo: '1111'
        },
        {
          tTaskId: '2',
          tTaskName: 'T00002',
          tTaskStatus: '1',
          tCreateTime: '',
          tCronExpression: '',
          tAnalysisReport: '',
          tRunInfo: '1111'
        }
      ]
      this.total = this.tableData.length
      this.loading = false
    },
    // 新增
    addTask() {

      this.isEdit = false
      this.dialogVisible = true
      this.formData = {
        tTaskId: '',
        tTaskName: '',
        tCronExpression: '',
        dataAcquisition: {name: '数据获取', enable: true, value: {}},
        dataCleaning: {name: '数据处理', enable: true, value: {}},
        model: {name: '光伏物理模型', enable: true, value: {}},
        processing: {name: '后处理', enable: true, value: {}},
      }
      this.$nextTick(() => {
        this.$refs.ruleForm.clearValidate()
      })
    },
    // 编辑
    handleClick() {
      this.isEdit = true
      this.dialogVisible = true
    },
    //保存
    saveTask() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          alert('submit!');
          await this.$refs.dataCleaning.saveTask()
          if (JSON.stringify(this.formData.dataCleaning.value) === '{}') {
            return false
          }
          await this.$refs.model.saveTask()
          if (JSON.stringify(this.formData.model.value) === '{}') {
            return false
          }
          await this.$refs.processing.saveTask()
          if (JSON.stringify(this.formData.processing.value) === '{}') {
            return false
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      // this.dialogVisible = false
    },
    // 数据处理数据
    getDataCleaning(val) {
      this.formData.dataCleaning.value = val
    },
    getModel(val) {
      this.formData.model.value = val
    },

    getProcessing(val) {
      this.formData.processing.value = val
    },

    handleClose() {
      this.$refs.ruleForm.resetFields()
      this.formData = {
        tTaskId: '',
        tTaskName: '',
        tCronExpression: '',
        dataAcquisition: {name: '数据获取', enable: true, value: {}},
        dataCleaning: {name: '数据处理', enable: true, value: {}},
        model: {name: '光伏物理模型', enable: true, value: {}},
        processing: {name: '后处理', enable: true, value: {}},
      }
      this.dialogVisible = false
    },

    // 运行信息
    viewInfo(row) {
      this.info = row.tRunInfo
      this.dialogInfoVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.form-table-item {
  max-height: 30vh;
  overflow-y: auto;

  ::v-deep .el-form-item {
    margin-bottom: 15px;
  }
}

.td0 {
  width: 200px;
}

.td1 {
  width: 150px;
}

.td2 {
  width: calc(100% - 350px);
}

.mode-table .model-table-tr:last-child {
  border-bottom: 1px solid #ebeef5;
}

.model-table-tr {
  width: 100%;
  text-align: center;
  border: 1px solid #ebeef5;
  border-bottom: none;
  line-height: 30px;

  .td {
    border-right: 1px solid #ebeef5;
    display: grid;
    place-items: center;
  }

  .pa-0 {
    padding: 0 .5vw;

  }
}

</style>
