<template>
  <el-dialog id="addTaskDialog"
             title="添加任务"
             :visible="visible"
             width="550px"
             center
             :destroy-on-close="true"
             :show-close="false"
  >
    <div class="dialogForm">
      <el-form :model="form" :label-width="formLabelWidth">
        <el-form-item label="任务名">
          <el-input v-model="form.name" size="small" autocomplete="off" :style="{width:formInputWidth}"></el-input>
        </el-form-item>
        <el-form-item label="分组名">
          <el-input v-model="form.clusterName" size="small" autocomplete="off"
                    :style="{width:formInputWidth}"></el-input>
        </el-form-item>
        <el-form-item label="包含关键词" v-if="needKeyWords">
          <el-input
              v-model="form.includeKeyWord" size="small"
              autocomplete="off"
              :style="{width:formInputWidth}"
          ></el-input>
        </el-form-item>
        <el-form-item label="不含关键词" v-if="needKeyWords">
          <el-input
              v-model="form.excludeKeyWord" size="small"
              autocomplete="off"
              :style="{width:formInputWidth}"
          ></el-input>
        </el-form-item>
        <el-form-item label="载体类型">
          <el-radio v-model="form.carrierType" label="0">新闻站点</el-radio>
          <el-radio v-model="form.carrierType" label="1">社交媒体</el-radio>
          <el-radio v-model="form.carrierType" label="2">定向站点</el-radio>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio v-model="form.enableFlag" label="1">启用</el-radio>
          <el-radio v-model="form.enableFlag" label="0">不启用</el-radio>
        </el-form-item>
        <el-form-item label="执行频率">
          <el-input v-model="form.cron" autocomplete="off" :style="{width:formInputWidth}"
                    v-if="!showCronList"></el-input>
          <el-select
              v-model="form.cron" size="small"
              placeholder="请选择"
              collapse-tags
              :style="{width:formInputWidth}"
              @change="cronChange"
              v-if="showCronList"
          >
            <el-option
                v-for="item in cronList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分组类型" v-if="form.carrierType === '0'">
          <el-select
              v-model="form.clusterType" size="small"
              placeholder="请选择"
              collapse-tags
              :style="{width:formInputWidth}"
          >
            <el-option
                v-for="item in clusterType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目" v-if="form.carrierType === '0'">
          <el-select
              v-model="form.systemFlag" size="mini"
              placeholder="请选择"
              :style="{width:formInputWidth}"
          >
            <el-option
                v-for="item in this.systemFlagOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="节点">
          <el-select
              v-model="form.server" size="small"
              @change="onNodeChange"
              placeholder="请选择"
              collapse-tags
              :style="{width:formInputWidth}"
          >
            <el-option
                v-for="item in nodes"
                :key="item.nodeIp"
                :label="item.nodeName"
                :value="item.nodeIp"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="引擎">
          <el-select
              v-model="form.project" size="small"
              @change="onProjectChange"
              placeholder="请选择"
              collapse-tags
              :style="{width:formInputWidth}"
          >
            <el-option
                v-for="item in project"
                :key="item.projectName"
                :label="item.projectName"
                :value="item.projectName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行单元">
          <el-select
              v-model="form.spider" size="small"
              placeholder="请选择"
              collapse-tags
              :style="{width:formInputWidth}"
          >
            <el-option v-for="item in spider" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
          <el-button size="small" type="success" @click="save">保存</el-button>
          <el-button style="margin-left: 10px;" size="small" type="primary" @click="btn_close">关闭</el-button>
    </span>
  </el-dialog>
</template>
<script>
import Vue from "vue";
import {mapState} from "vuex";

const projectApi = require("../../js/api/projectApi");
import {Select, Option, Input, Button, Dialog, Form, FormItem, Checkbox, CheckboxGroup, Radio} from "element-ui";
import metaDictApi from "../../js/api/metaDictApi";

Vue.use(Select);
Vue.use(Option);
Vue.use(Input);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Radio);
export default {
  name: 'addTaskDialog',
  model: {
    prop: 'form',
    event: 'save'
  },
  props: ['form', 'dialogVisible'],
  data() {
    return {
      formLabelWidth: "120px",
      formInputWidth: "320px",
      project: [],
      spider: [],
      systemFlagOptions: [],
      showCronList: true,
      clusterType: [{label: '普通', value: "0"}, {label: '紧急', value: "1"}],
      cronList: [{label: '1分钟/次', value: '0 0/1 * * * ? *'}, {
        label: '2分钟/次',
        value: '0 0/2 * * * ? *'
      }, {label: '5分钟/次', value: '0 0/5 * * * ? *'}, {label: '30分钟/次', value: '0 0/30 * * * ? *'}, {
        label: '1小时/次',
        value: '0 0 0/1 * * ? *'
      }, {label: '6小时/次', value: '0 0 0/6 * * ? *'}, {label: '自定义', value: '-1'}]
    }
  },
  mounted: function () {
    if (this.systemFlagOptions.length === 0) {
      metaDictApi.queryByTableName('crawl_rules', (response) => {
        if (response.data.code === 200) {
          this.systemFlagOptions = this.buildDictTree(response.data.content, 'systemFlag');
        }
      })
    }
  },
  computed: {
    visible: {
      set: function (val) {
        return this.dialogVisible = val;
      },
      get: function () {
        return this.dialogVisible;
      }
    },
    needKeyWords: function () {
      return this.form.carrierType === 0 || this.form.carrierType === 1;
    },
    ...mapState({
      nodes: (state) => state.node.nodes,
    }),
  },
  methods: {
    save() {
      this.form.save = true;
      console.log(this.form.server);
      this.form.taskType = "1";
      this.form.nodeIds = this.setNodeIds(this.form.server);
      this.form.carrierType = this.form.carrierType.toString();
      this.$emit("save", this.form);
      this.$emit("close");
    },
    setNodeIds(nodeIp) {
      for (let i = 0; i < this.nodes.length; ++i) {
        console.log(this.nodes[i].nodeIp);
        if (this.nodes[i].nodeIp === nodeIp) {
          return this.nodes[i].id;
        }
      }
    },
    btn_close() {
      this.$emit("close");
      this.showCronList = true;
    },
    onNodeChange(val) {
      projectApi.default.getProjectsByNodeServer(val, (response) => {
        this.project = response.data.content;
      });
    },
    onProjectChange(val) {
      projectApi.default.getSpidersOfProject(
          this.form.server,
          val,
          (response) => {
            this.spider = response.data.content;
          }
      );
    },
    cronChange(val) {
      if (val === '-1') {
        this.showCronList = false;
        this.form.cron = '';
      }
    },
    buildDictTree(data, columnString) {
      let siteOptions = [];
      let nodeList = [];
      data.forEach(e => {
        if (e.columnName === columnString)
          nodeList.push({value: e.dictCode, label: e.dictValue, children: undefined, parentDictCode: e.parentDictCode});
      })
      nodeList.forEach(e1 => {
        if (e1.parentDictCode !== undefined) {
          nodeList.forEach(e2 => {
            if (e1.parentDictCode === e2.value) {
              if (e2.children === undefined) {
                e2.children = []
              }
              e2.children.push(e1);
            }
          })
        } else {
          siteOptions.push(e1);
        }
      })
      return siteOptions;
    }
  }
}
</script>
<style scoped>
.el-table {
  min-height: 618px;
}

.el-table .cell, .el-table th > .cell {
  text-align: center;
}

.el-form-item {
  margin-bottom: 10px;
}
</style>

<style>
#addTaskDialog .el-dialog__body {
  padding-bottom: 0px !important;
}
</style>