<template>
  <div class="table-form">
    <Form :model="model" :ref="action" :rules="rules" :label-width="labelWidth">
      <Row :gutter="10">
        <Col span="24">
          <Form-item label="任务名称" v-validate:name.required.maxInputLength="rules" prop="name">
            <Input
              type="textarea"
              :autosize="true"
              v-model="model.name"
              placeholder="请输入任务名称"
              :disabled="disabled"
            ></Input>
          </Form-item>

          <Form-item
            label="任务描述"
            prop="description"
            v-validate:description.required.maxInputLength="rules"
          >
            <Input
              v-model="model.description"
              type="textarea"
              :autosize="true"
              placeholder="请输入任务描述"
              :disabled="disabled"
            ></Input>
          </Form-item>
          <Form-item label="执行类型" prop="excuteType" v-validate:excuteType.required="rules">
            <Radio-group v-model="model.excuteType" vertical>
              <Radio label="immediate">
                <span>立即执行</span>
              </Radio>
              <Radio label="delay">
                <span>延时执行</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <Form-item label="调度时间" prop="cron" v-if="model.excuteType == 'delay'" v-validate:cron.required="rules">
            <Input v-model="model.cron" placeholder="请输入命令内容">
              <span slot="append" @click="cronClicked=!cronClicked">cron表达式生成器</span>
            </Input>
            <easy-cron
              v-model="model.cron"
              v-show="cronClicked"
              :hideSecond="true"
              :hideYear="true"
              :isSaWeek="true"
            ></easy-cron>
          </Form-item>
        </Col>
      </Row>

      <Row>
        <template>
          <Tabs name="taskTabs" v-model="currentTab" type="card">
            <TabPane tab="taskTabs" label="执行策略" name="policy">
              <!-- <Button type="primary" @click="selectPolicy">选择策略</Button> -->
              <select-policy
                ref="policys"
                :policyId="model.policyId"
                @closeModal="closeModal"
                @reFlowTable="reFlowTable"
              ></select-policy>
              <Col>
                <cs-dynamic-table ref="rules" :prop="csTable" :parent="this"></cs-dynamic-table>
              </Col>
            </TabPane>
            <TabPane tab="taskTabs" label="执行设备" name="device">
              <server-selector :resSelectList="resList" @handleChange="handleResChange"></server-selector>
            </TabPane>
            <!-- <TabPane tab="taskTabs" label="任务调度" name="任务调度">
              <Row :gutter="10">
                <Col span="6">
                  <Form-item label="调度执行" prop="flag">
                    <i-switch :disabled="true" v-model="cronFlag" />
                  </Form-item>
                </Col>
                <Col span="18" v-if="cronFlag">
                  <Form-item label="cron表达式" prop="cron">
                    <Input v-model="cron" placeholder="请输入命令内容">
                      <span slot="append" @click="cronClicked=!cronClicked">cron表达式生成器</span>
                    </Input>
                    <easy-cron
                      v-model="cron"
                      v-show="cronClicked"
                      :hideSecond="true"
                      :hideYear="true"
                      :isSaWeek="true"
                    ></easy-cron>
                  </Form-item>
                </Col>
              </Row>
            </TabPane>-->
          </Tabs>
        </template>
      </Row>
      <Row class="buttonDiv">
        <Button :loading="loading" @click="submitForm(action)" type="primary">确&nbsp;&nbsp;定</Button>
        <Button @click="cancel">关&nbsp;&nbsp;闭</Button>
      </Row>
    </Form>
  </div>
</template>
  
<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import ServerSelector from "../../index/cmdb/server-selector.vue";
import SelectPolicy from "./select-policy.vue";

@Component({
  components: { ServerSelector, SelectPolicy }
})
export default class TaskForm extends Vue {
  @Prop() private model!: any;
  @Prop(String) private action!: string;
  @Prop() private tableInfo!: any;
  @Prop() private tableVm!: any;
  @Prop() private obj!: any;

  private cronClicked: boolean = false;
  currentTab: string = "policy";
  loading: boolean = false;
  labelWidth: number = 120;
  rules: any = {};
  policy: any = {};
  policyId: any = {};
  ruleList: Array<any> = [];
  resList: Array<any> = [];
  modelFlag: boolean = false;
  cronFlag: boolean = true;
  cron: any = "* * * * *";
  excuteType: any = "";

  private csTable: any = {
    formWidth: 60,
    parentVm: this,
    paginationByFront: true,
    dataPropFront: "data",
    showActions: false,
    dataFun: this.mockData,
    dataProp: "data.content",
    postMethod: true,
    pageableProp: {
      pageSize: "data.size",
      total: "data.totalElements",
      currentPage: "data.number"
    },
    showIndex: true,
    emptyModel: {},

    columns: [
      // {
      //   type: "selection",
      //   width: 60,
      //   align: "center"
      // },
      {
        key: "name",
        title: "规则名称",
        align: "center",
        ellipsis: true,
        tooltip: true
      },
      {
        key: "comparisonType",
        title: "成功条件",
        align: "center",
        ellipsis: true,
        tooltip: true
      },
      {
        key: "comparisonOperate",
        title: "逻辑",
        align: "center",
        ellipsis: true,
        tooltip: true
      },
      {
        key: "comparisonValue",
        title: "基准值",
        align: "center",
        ellipsis: true,
        tooltip: true
      }
    ]
  };

  created() {}

  data() {
    return {
      // define the default value
      value: null
      // define options
    };
  }

  addRule() {
    this.modelFlag = true;
  }
  closeModal() {
    this.modelFlag = false;
  }

  mounted() {
    console.log("?", this.policyId);
  }

  save() {
    if (this.ruleList.length <= 0) {
      this.$tools.message(
        "error",
        "请选择正确的策略,策略下需包含至少一个规则！"
      );
      this.loading = false;
      this.currentTab = "policy";
      return;
    }
    if (this.resList.length <= 0) {
      this.$tools.message("error", "请先选择待操作的服务器！");
      this.loading = false;
      this.currentTab = "device";
      return;
    }

    this.model.resources = this.resList;
    this.model.policyId = this.policy.syncId;
    // this.model.excuteType = "RECURRING_EXE_TYPE";
    //this.model.cron = this.cron;
    if (!this.model.status) {
      this.model.status = 0;
    }
    // this.model.excuteTime="";

    // var Url = this.model.excuteType == 'immediate' ? "/api/v1/audit/startNow" : '/api/v1/data/save/auditMission'
    this.getApiData(
      "post",
      this.$msPrefix.automation + '/api/v1/data/save/auditMission',
      this.model,
      res => {
        this.loading = !1;
        if (res.rtnCode == 0) {
          this.tableVm.getData();
          this.cancel();
          this.$tools.message(
            "success",
            (this.action == "update" ? "修改" : "新增") + "成功！"
          );
          (this.$globalFun() as any).getMethod("close");
        }
      },
      err => {
        this.loading = !1;
      }
    );
  }
  /*提交*/
  submitForm(action) {
    (this.$refs[action] as any).validate(valid => {
      if (valid) {
        if (!this.loading) {
          this.loading = !0;
          this.save();
        }
      } else {
        this.$tools.message("info", "请完善必填项!");
      }
    });
  }

  handleResChange(res) {
    this.resList = res;
  }

  mockData() {
    this.$nextTick(() => {
      (this.$refs.rules as any).afterGetData({ data: this.ruleList });
    });
  }

  selectPolicy() {
    this.modelFlag = true;
  }
  reFlowTable(items) {
    this.ruleList = [];

    this.policy = items.data;
    this.model.policyId = items.policyId;

    if (items.data.auditStrategyRules) {
      items.data.auditStrategyRules.forEach(element => {
        let rule = element.id.auditRule;
        this.ruleList.push(rule);
      });
    }

    this.csTable.paginationByFront = true;
    (this.$refs.rules as any).afterGetData({ data: this.ruleList });
  }

  @Emit("closeModal") close() {}
  cancel() {
    this.close();
    this.resList = [];
    (this.$refs[this.action] as any).resetFields();
  }

  get disabled() {
    return this.action == "detail";
  }
}
</script>
<style scoped>
 .ivu-radio-group-vertical .ivu-radio-wrapper{
   display: inline-block;
 }
</style>


