<template>
  <app-dialog v-model="visible" :loading="loading" fullscreen :title="title" append-to-body class="detail-dialog" @cancel="onCancel" @confirm="onConfirm">
    <el-form ref="form" :model="form" label-width="120px" class="form-wrapper" :rules="rules">
      <el-row :gutter="15">
        <app-filter-item :span="12" label="算法任务名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入算法任务名称" />
        </app-filter-item>
      </el-row>
      <el-row :gutter="15">
        <app-filter-item :span="12" label="算法任务编码" prop="code">
          <el-input v-model="form.code" v-pinyin="form.name" placeholder="请输入算法任务编码" />
        </app-filter-item>
      </el-row>
      <el-row :gutter="15">
        <app-filter-item :span="24" label="算法推理理论" prop="memo">
          <div class="edit_container">
            <quill-editor v-model="form.memo" ref="myQuillEditor" :options="editorOption"> </quill-editor>
          </div>
        </app-filter-item>
      </el-row>
    </el-form>
  </app-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialog.js';
import API from '@/api/business/arithmeticTask.js';
import { quillEditor } from 'vue-quill-editor'; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  name: 'DetailDialog',
  components: { quillEditor },
  mixins: [dialogMixin],
  props: {
    selectedRows: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      editorOption: {
        // 改变提示文字内容
        placeholder: '请输入内容......',
      },
      form: {
        name: '',
        code: '',
        deployedStatus: '1',
        memo: '',
      },
      rules: {
        name: [{ required: true, message: '算法任务名称不能为空' }],
        code: [{ required: true, message: '算法任务编码不能为空' }],
        memo: [{ required: true, message: '算法理论描述不能为空' }],
      },
      loading: false,
    };
  },
  mounted() {},
  methods: {
    /**
     * @description: dialog每次显示时触发的init方法
     * @param {*} data 传入data
     * @return {*}
     */
    initData(data) {
      const orgForm = this.$options.data().form;
      this.form = { ...orgForm, ...data };
      this.$nextTick(() => {
        this.$refs.form.clearValidate();
      });
    },
    onCancel() {
      this.visible = false;
    },

    onConfirm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          const submitAPI = this.form.id ? API.editInference : API.addInference;

          this.loading = true;
          try {
            const res = await submitAPI(this.form);

            if (res.state) {
              this.$message.success('保存成功');
              this.onCancel();
              this.$emit('confirm');
            } else {
              this.$message.error(res.message || '保存失败');
            }
          } catch (error) {
            this.$message.error(error || '保存失败');
          } finally {
            this.loading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  padding: 20px;
}

::v-deep {
  .quill-editor {
    height: 60vh !important;
  }
}
</style>
