<!--
 * @Descripttion: 完善索引
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-11-10 13:46:15
 * @LastEditors: 无尘
 * @LastEditTime: 2020-11-10 15:04:20
-->
<!--  -->
<template>
  <el-dialog title="完善索引" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm" @submit.native.prevent>
        <el-form-item label="" prop="sqlIndex">
          <el-input class="w-440" type="textarea" rows="3" v-model="ruleForm.sqlIndex" maxlength="500" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toCancel">取消</el-button>
      <el-button type="primary" :loading="loadBtn" @click="submitForm('ruleForm')">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _debounce, emojiToStr } from '@/common/js/public';
import fetch from '@/api/dictionary';

const { addSqlIndex } = fetch;

import showMsg from '@/common/js/showmsg';
export default {
  name: '',
  components: {},
  props: {
    sqlId: {
      type: String
    }
  },
  data() {
    return {
      dialogVisible: true,
      loadBtn: false,
      ruleForm: {
        sqlId: '',
        sqlIndex: ''
      },
      rules: {
        sqlIndex: [ { required: true, message: '请输入', trigger: 'blur' } ]
      },
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    if (that.sqlId) {
      that.ruleForm.sqlId = that.sqlId;
    }
  },
  // methods
  methods: {
    /**
     * @description: 关闭弹窗
     * @author: 无尘
     */
    toCancel() {
      const that = this;
      that.$emit('closeText');
      that.$refs['ruleForm'].resetFields();
    },
    handleClose(done) {
      const that = this;
      that.$emit('closeText');
      that.$refs['ruleForm'].resetFields();
    },
    /**
     * @description: 保存
     * @param {String} formName
     * @author: 无尘
     */
    submitForm: _debounce(function(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        if (valid) {
          that.postSave();
        }
      });
    }, 300),
    postSave() {
      const that = this;
      that.loadBtn = true;
      const data = {
        sqlId: that.ruleForm.sqlId,
        sqlIndex: emojiToStr(that.ruleForm.sqlIndex),
      };
      addSqlIndex(data)
        .then(res => {
          that.loadBtn = false;
          if (res.code == '0000') {
            showMsg.showmsg('操作成功', 'success');
            that.$refs['ruleForm'].resetFields();
            that.$emit('submitText');
          }else {
            that.$message({
              message: res.message || '接口错误',
              type: 'warning'
            });
            that.$emit('submitText');
          }
        })
        .catch(error => {
          that.loadBtn = false;
        });
    }
  },
  watch: {}
};
</script>
<style lang='less' scoped>


</style>
