<template>
    <div>
        <Button type="tertiary" theme="borderless" @click="show = true">{{ type === 'edit'? '编辑' : type === 'addSub' ? '新增子项':'新增'}}</Button>
        <Modal
            v-model:visible="show"
            width="640px"
            @ok="handleOk"
            :maskClosable="false"
            @cancel="handleCancel"
        >
            <Form
                :labelPosition="'top'"
                :initValues="form"
                :getFormApi="bindFormApi"
                ref="formRef"
            >
                <Form.Input
                    field="name"
                    label="名称"
                    :rules="[{ required: true, message: '请填写名称' }]"
                    placeholder="请输入名称"
                />
            </Form>
        </Modal>
    </div>
</template>

<script>
import { Modal, Button, Form, Toast, Notification } from '@kousum/semi-ui-vue'

export default {
    components: {
        Modal,
        Button,
        Form,
        'Form.Input': Form.Input
    },
    props: {
        type: {
            type: String,
            default: 'new'
        },
        info:{
          type: Object,
          default:null
        }
    },
    data() {
        return {
            show: false,
            form: {
               id:'',
               name: '',
               sort: 1,
            },
            formApi: null
        }
    },
    watch: {
        info: {
            handler(val) {
                if (val) {
                   this.form = { ...val }
                   this.$nextTick(() => {
                        if (this.formApi) {
                             if (this.type === 'addSub'){
                                this.formApi.setValues({ parentId: val.id })
                             } else if (this.type === 'edit'){
                                this.formApi.setValues(val)
                             }
                        }
                   })
                }
            },
            immediate: true
        }
    },
    methods: {
        bindFormApi(api) {
            this.formApi = api
        },
        handleCancel() {
             // Optional
        },
        handleOk() {
            return new Promise((resolve, reject) => {
                this.formApi.validate().then(values => {
                     const formData = { ...this.form, ...values }
                     
                     if (this.form.id !== "" && this.type !== 'new'){
                          this.$api.sys.clientUpdate(formData).then(res => {
                            if (res.code === 200) {
                              Toast.success(res.msg)
                              this.$emit('ok')
                              resolve()
                            } else {
                              Notification.error({ content: res.msg })
                              reject()
                            }
                          }).catch(() => reject())
                     } else {
                          this.$api.sys.clientSave(formData).then(res => {
                            if (res.code === 200) {
                              Toast.success(res.msg)
                              this.$emit('ok')
                              resolve()
                            } else {
                              Notification.error({ content: res.msg })
                              reject()
                            }
                          }).catch(() => reject())
                     }
                }).catch(errors => {
                    reject()
                })
            })
        },
        submit(done) {
             // legacy
        }
    }
}
</script>

<style lang="scss" scoped></style>
