<template>
  <q-dialog v-model="persistent" persistent content-class="bg-grey-1" transition-show="scale" transition-hide="scale">
    <q-card style="width: 800px;max-width:800px;">
      <q-card-section>
        <div class="text-h6">{{(saveObj&&saveObj.Id>0)?"修改OKR规则模板":"新增OKR规则模板"}}</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.RuleName" ref="RuleName"
              class="col-6 q-pr-lg q-pb-lg" label="规则名称" :rules="[val => !!val || '请填写规则名称']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.DataBase" ref="DataBase"
              class="col-6 q-pb-lg" label="关联数据库" :rules="[val => !!val || '请填写关联数据库']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Table" ref="Table"
              class="col-6 q-pr-lg q-pb-lg" label="关联表" :rules="[val => !!val || '请填写关联表']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Field" ref="Field"
              class="col-6 q-pb-lg" label="关联字段" :rules="[val => !!val || '请填写关联字段']"/>
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Identity" ref="Identity"
              class="col-6 q-pr-lg q-pb-lg" label="身份字段" :rules="[val => !!val || '请填身份字段']" />
          </div>
          <div class="col-6">
            <q-select filled stack-label option-value="Id" option-label="Name" v-model="msg.Way" ref="Way"
              :options="EnumList" label="关机数据计算方式" :dense="false" :rules="[val => !!val || '请选择关机数据计算方式']" class="col-6 q-pb-lg" emit-value map-options />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Time" ref="Time"
              class="col-6 q-pr-lg q-pb-lg" label="操作周期字段" :rules="[val => !!val || '请填写操作周期字段']" />
          </div>
          <div class="col-6">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.State" ref="State"
              class="col-6 q-pb-lg" label="状态字段" :rules="[val => !!val || '请输入状态字段']" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-12">
            <q-input filled stack-label maxlength="20" :dense="false" v-model="msg.Remark" ref="Remark"
              class="col-6 q-pb-lg" label="规则备注" />
          </div>
        </div>
        <div class="row wrap">
          <div class="col-6">
            <q-toggle size="md" label="是否启用" color="primary" :false-value="2" :true-value="1" v-model="msg.Enable" />
          </div>
        </div>
      </q-card-section>
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeRuleForm" />
        <q-btn label="保存" color="accent q-px-md" style="font-weight:400 !important" @click="saveRule" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
  import {
    SetOKRRuleInfo,
    GetRuleTypeEnumList
  } from '../../api/okr/index'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        msg: {
          Id: 0,
          RuleName: "", //规则名称
          DataBase: '', //数据库
          Table: '', //表名
          Field: '', //统计字段
          Way: '', //方式
          State: '', //状态字段
          Identity: '', //身份字段
          Time: '', //操作时间
          Remark: '', //备注
          Enable: 1, //是否启用
        },
        persistent: true,
        EnumList: [], //枚举数据
      }
    },
    computed: {},
    created() {},
    mounted() {
      if (this.saveObj && this.saveObj.Id > 0) {
        this.msg.Id = this.saveObj.Id;
        this.msg.RuleName = this.saveObj.RuleName;
        this.msg.DataBase = this.saveObj.DataBase;
        this.msg.Table = this.saveObj.Table;
        this.msg.Field = this.saveObj.Field;
        this.msg.Way = this.saveObj.Way;
        this.msg.State = this.saveObj.State;
        this.msg.Identity = this.saveObj.Identity;
        this.msg.Time = this.saveObj.Time;
        this.msg.Remark = this.saveObj.Remark;
        this.msg.Enable = this.saveObj.Enable;
      }
      this.getRuleTypeEnumList();
    },
    methods: {
      //保存信息
      saveRule() {
        this.$refs.RuleName.validate();
        this.$refs.DataBase.validate();
        this.$refs.Table.validate();
        this.$refs.Field.validate();
        this.$refs.State.validate();
        this.$refs.Identity.validate();
        this.$refs.Time.validate();
        this.$refs.Way.validate();
        if (!this.$refs.RuleName.hasError &&
          !this.$refs.DataBase.hasError &&
          !this.$refs.Table.hasError &&
          !this.$refs.Field.hasError &&
          !this.$refs.State.hasError &&
          !this.$refs.Identity.hasError &&
          !this.$refs.Time.hasError&&
          !this.$refs.Way.hasError) {
          SetOKRRuleInfo(this.msg).then(res => {
            if (res.Code == 1) {
              this.$emit('success');
              this.closeRuleForm();
            }
          })
        }
      },
      //获取规则方式枚举
      getRuleTypeEnumList() {
        GetRuleTypeEnumList({}).then(res => {
          if (res.Code == 1) {
            this.EnumList = res.Data;
          }
        })
      },
      //关闭窗口
      closeRuleForm() {
        this.$emit('close');
        this.persistent = false
      }
    },
  }

</script>
