<template>
    <div>
        <el-page-header
            style="background-color: #fff; padding: 10px; margin-bottom: 20px;"
            @back="$router.push(backUrl)"
            :content="title"
        >
        </el-page-header>

        <div style="background-color: #fff; padding: 20px;">
            <el-form ref="form" :model="info" label-width="80px" style="width: 600px; margin: 0 auto;" v-loading="loading">
                <el-form-item
                    v-for="(item, index) in config"
                    :key="index"
                    :label="item.label" 
                    :prop="item.prop" 
                    :error="serverError[item.prop]"
                >
                    <el-input 
                        v-if="item.component === 'input'"
                        v-model="form[item.prop]"
                        :placeholder="`请输入${item.label}`"
                        :disabled="item.disabled"
                    >
                    </el-input>
                    <el-select
                        v-else-if="item.component === 'select'"
                        v-model="form[item.prop]"
                        :placeholder="`请输入${item.label}`"
                        :multiple="item.multiple"
                        :disabled="item.disabled"
                    >
                        <el-option
                            v-for="item in item.options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>

                    <my-tree
                        v-else-if="item.component === 'tree'"
                        v-model="form[item.prop]"
                        :data="item.data"
                    ></my-tree>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

</template>

<script>
import axios from 'axios'
import MyTree from './MyTree'

export default {
    components: {
        MyTree
    },
    props: {
        title: String,
        backUrl: String,
        submitUrl: String,
        detailUrl: String,
        config: Array
    },
    mounted () {
        if (!this.detailUrl) return false
        this.loading = true
        axios.get(`${this.detailUrl}/${this.$route.query.id}`).then(response => {
            const data = response.data.data
            for (let k in data) {
                if (Object.prototype.hasOwnProperty.call(this.form, k)) {
                    this.form[k] = data[k]
                }
            }
            this.loading = false
        }, () => {
            this.loading = false
        })
    },
    watch: {
        config: {
            handler (newVal) {
                if (newVal && newVal instanceof Array && newVal.length > 0) {
                    newVal.forEach(item => {
                        this.form[item.prop] = item.component == 'tree' ? [] : ''
                        this.serverError[item.prop] = ''
                        this.rules[item.prop] = item.rules
                    })
                }
            },
            deep: true
        }
    },
    data () {
        let form = {}
        let serverError = {}
        let rules = {}
        if (this.config) {
            if (this.config && this.config instanceof Array && this.config.length > 0) {
                this.config.forEach(item => {
                    form[item.prop] = ''
                    serverError[item.prop] = ''
                    rules[item.prop] = item.rules
                })
            }
        }
        return {
            loading: false,
            form,
            serverError,
            rules
        }
    },
    methods: {
        resetForm() {
            this.$confirm('此操作将重置表单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$refs.form.resetFields()
            }).catch(() => {       
            })
        },
        onSubmit () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true
                    const url = this.detailUrl ? `${this.submitUrl}/${this.$route.query.id}` : this.submitUrl
                    const method = this.detailUrl ? 'put' : 'post'
                    axios.request({
                        method,
                        url,
                        data: this.form
                    })
                    .then(() => {
                        this.loading = false
                        this.$router.push(this.backUrl)
                    })
                    .catch(errors => {
                        const response = errors.response
                        if (response.status === 422) {
                            errors = response.data.errors
                            for (let k in errors) {
                                if (errors[k] instanceof Array && errors[k].length > 0) {
                                    this.serverError[k] = errors[k].join('，')
                                }
                            }
                        }
                        this.loading = false
                    })
                }
            });
        },
        checkChange () {
            console.log(this.$refs.tree)
            console.log(this.$refs.tree.getCheckedKeys())
            console.log(this.$refs.tree.getCheckedKeys())
        }
    }
}
</script>