<template>
  <div class="es-from" v-loading="loading">
    <el-form
      ref="dynamicValidateForm"
      :label-position="labelPosition"
      :model="newData"
      :label-width="labelWidth"
      class="demo-dynamic"
    >
      <el-form-item
        prop="sort"
        label="排序号"
        :rules="[{ required: true, message: `请输入排序号`, trigger: 'blur' }]"
      >
        <el-input
          v-model="newData.sort"
          :placeholder="`请输入入排序号`"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="content"
        label="内容"
        :rules="[{ required: true, message: `请输入内容`, trigger: 'blur' }]"
      >
        <el-input
          v-model="newData.content"
          type="textarea"
          :rows="3"
          :placeholder="`请输入内容`"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item> -->
      <!-- </el-form-item> -->
    </el-form>
    <div style="text-align: right">
      <el-button
        v-show="showSubBtn"
        type="primary"
        size="small"
        @click="submitForm('dynamicValidateForm')"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { addCommonOpion, editCommonOpion } from 'eoss-ui/src/config/api';
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'ideas',
  componentName: 'ideas',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    formItemList: {
      type: Array,
      default: () => []
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    showSubBtn: {
      type: Boolean,
      default: true
    },
    labelPosition: {
      type: String,
      default: 'left'
    }
  },
  data() {
    return {
      formList: [],
      loading: false,
      newData: {},
      index: 0
    };
  },
  mounted() {
    this.data.id ? this.add(this.data.id) : this.add();
  },
  methods: {
    add(id) {
      this.loading = true;
      util
        .ajax({
          url: id ? editCommonOpion : addCommonOpion,
          params: { id }
        })
        .then((res) => {
          const { status, message, data } = res;
          if (status == 'success') {
            this.newData = data.bean;
          } else {
            this.$message.error(message || '系统错误，请联系管理员！');
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
          if (err.message && err.message !== 'canceled') {
            this.$message.error(err.message);
          }
        });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('subMit', { addVisible: false, data: this.newData });
          this.$emit('sub-mit', { addVisible: false, data: this.newData });
        } else {
          return false;
        }
      });
    }
  }
};
</script>
