<!--
 * @Author: wlo_o
 * @Date: 2022-02-11 16:57:11
 * @LastEditors: Jone
 * @LastEditTime: 2022-07-04 15:22:53
 * @FilePath: /frontend/lib/components/MdSetDialog.vue
 * @Description: 创建子集
 *
 * Copyright (c) 2022 by 青岛百洋智能科技股份有限公司, All Rights Reserved.
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="stateVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="handleDialogClose"
    width="90%"
    class="oecp-md-set-dialog"
  >
    <md-set-form
      :parentId="parentId"
      :showSubset="false"
      :showCategory="false"
      :showSaveBtn="false"
      :type="type"
      ref="form"
    />
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="handleDialogClose">取 消</el-button>
      <el-button
        type="primary"
        @click="handleDialogOk"
        class="addBtn"
        :loading="loading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import OptionsMixin from '../mixins/OptionsMixin'

export default {
  mixins: [OptionsMixin],
  props: {
    visible: { type: Boolean, default: false },
    title: { type: String, default: '' },
    parentId: { type: String, default: '' },
    type: { type: [String, null], default: null },
  },
  watch: {
    visible(val) {
      this.stateVisible = val
      val && this.$refs.form && this.$refs.form.clearData()
    },
  },
  data() {
    return {
      loading: false,
      stateVisible: this.visible,
    }
  },
  methods: {
    handleDialogOk() {
      let that = this
      // 只有是dialog的时候才不去更新id
      this.$refs.form.handleSave('dialog').then(function () {
        that.$refs.form && that.$refs.form.clearData()
        that.$emit('success')
        that.$emit('close')
      })
    },
    handleDialogClose() {
      this.$emit('close')
    },
  },
}
</script>
<style scoped>
.addBtn {
  background: #2468f2;
  border-color: #2468f2;
  padding: 0 20px;
}
.addBtn:hover {
  background: #2469f2d6;
  border-color: #2469f2d6;
}
</style>
