<template>
  <Dialog v-model="modelVisible" :title="data ? '修改' : '新增'">
    <div class='AddNEditDialog'>
      <Form :value="formData" class="form" ref="FormConfigRef" :formList="formList" column="1" labelWidth="120px" />
    </div>

    <template #footer>  this.checkRepeat();
      <Button style="background-color: rgba(0, 179, 204, .3);" @click.native="modelVisible = false, submitting = false">
        取消
      </Button>
      <Button @click.native="handleSubmit" :loading="submitting">
        确定
      </Button>
    </template>
  </Dialog>
</template>

<script>
import Dialog from "@screen/components/Dialog/index.vue";
import Button from "@screen/components/Buttons/Button.vue"
import Form from '@screen/components/FormConfig';

import request from "@/utils/request";
import { Message } from "element-ui";
import { addEditFormList } from "./../data"
import { stakeMarkToArray, findPathIdByTreeId } from "@screen/utils/index.js"

export default {
  name: 'AddNEditDialog',
  components: {
    Dialog,
    Button,
    Form
  },
  model: {
    prop: 'visible',
    event: "update:value"
  },
  props: {
    visible: Boolean,
    data: Object,
    dataAll: Array
  },
  data() {
    return {
      submitting: false,
      formData: {},
      formList: addEditFormList
    }
  },
  computed: {
    modelVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:value', val)
      }
    }
  },
  watch: {
    modelVisible: {
      immediate: true,
      handler(bool) {
        if (!bool) return;

        this.formData = !this.data ? {} : {
          ...this.data
        }
      }
    }
  },
  methods: {
    checkRepeat(word){
      let temp = _.find(this.data, { word: word });
      console.log(temp, 'ttttttttttt')
      if (temp) {
        this.$message.danger("该关键词已存在。")
        return false
      } else {
        return true;
      }
    },
    handleSubmit() {
      this.$refs.FormConfigRef.validate()
        .then((data) => {
          data.word = data.word.trim();
          
          if(!this.checkRepeat(data.word)){
            return ;
          }

          this.submitting = true;
          if (this.data) data.id = this.data.id;

          request({
            url: `/business/dcInfoBoardVocabulary`,
            method: this.data ? 'PUT' : 'POST',
            data
          })
            .then(result => {
              if (result.code != 200) return Message.error(`提交失败!`);

              Message.success(`提交成功!`);
              this.$emit("afterSubmit");

              this.modelVisible = false;

            })
            .catch((err) => {
              console.log("%c [ err ]-110-「DeviceControlDialog.vue」", "font-size:15px; background:#547bf2; color:#98bfff;", err);
              Message.error(`提交失败!`);
            })
            .finally(() => {
              this.submitting = false;
            })
        })
    }
  },
}
</script>

<style lang='scss' scoped>
.AddNEditDialog {
  width: 450px;
  display: flex;
  flex-direction: column;
  gap: 15px;

  .tips {
    font-size: 12px;
  }
}
</style>
