<template>
    <div>
        <el-form :model="formData" :rules="rules" ref="form" label-width="120px" label-position="right" size="small"
                 style="max-width: 500px;">
            <el-form-item>
                <h2> ${model.remark}</h2>
            </el-form-item>

            #foreach($field in $model.fields)
                #if(${field.showInForm})
                    #if(${field.formType}=="singleLineText")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <el-input v-model="formData.${field.modelName}" :disabled="'${field.modelName}'==subColumn"></el-input>
            </el-form-item>
                    #end
                    #if(${field.formType}=="textarea")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <el-input type="textarea" v-model="formData.${field.modelName}" :disabled="'${field.modelName}'==subColumn"></el-input>
            </el-form-item>
                    #end
                    #if(${field.formType}=="number")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <el-input type="number" v-model="formData.${field.modelName}" :disabled="'${field.modelName}'==subColumn"></el-input>
            </el-form-item>
                    #end
                    #if(${field.formType}=="date")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <template>
                    <div class="block">
                        <el-date-picker
                                v-model="formData.${field.modelName}"
                                type="date"
                                value-format="timestamp"
                                placeholder="选择日期"
                                :disabled="'${field.modelName}'==subColumn">
                        </el-date-picker>
                    </div>
                </template>
            </el-form-item>
                    #end
                    #if(${field.formType}=="datetime")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <template>
                                <div class="block">
                                    <el-date-picker
                                            v-model="formData.${field.modelName}"
                                            type="datetime"
                                            value-format="timestamp"
                                            placeholder="选择日期"
                                            :disabled="'${field.modelName}'==subColumn">
                                    </el-date-picker>
                                </div>
                            </template>
                        </el-form-item>
                    #end
                    #if(${field.formType}=="select")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <template>
                    <el-select v-model="formData.${field.modelName}" clearable  placeholder="请选择" :disabled="'${field.modelName}'==subColumn">
                        <el-option
                                v-for="item in ${field.modelName}Options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
                    #end
                    #if(${field.formType}=="multiSelect")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <template>
                    <el-select v-model="formData.${field.modelName}" multiple clearable placeholder="请选择" :disabled="'${field.modelName}'==subColumn">
                        <el-option
                                v-for="item in ${field.modelName}Options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
                    #end
                    #if(${field.formType}=="singleImage")
             <el-form-item prop="${field.modelName}" label="${field.remark}">
                 <single-upload v-model="formData.${field.modelName}" :disabled="'${field.modelName}'==subColumn"></single-upload>
             </el-form-item>
                    #end
                    #if(${field.formType}=="multiImage")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <multi-upload v-model="formData.${field.modelName}" :disabled="'${field.modelName}'==subColumn"></multi-upload>
            </el-form-item>
                    #end
                    #if(${field.formType}=="fileUpload")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <el-upload
                        class="upload-demo"
                        action="../assets/uploadFile"
                        :on-change="handleChange"
                        :file-list="fileList3">
                    <el-button size="small" type="primary" :disabled="'${field.modelName}'==subColumn" >点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件 ，且不超过500kb</div>
                </el-upload>
            </el-form-item>
                    #end
                    #if(${field.formType}=="tree")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <el-tree
                        :props="props"
                        :load="loadNode"
                        lazy
                        show-checkbox
                        @check-change="handleCheckChange"
                        :disabled="'${field.modelName}'==subColumn">
                </el-tree>
            </el-form-item>
                    #end
                    #if(${field.formType}=="switch")
            <el-form-item prop="${field.modelName}" label="${field.remark}">
                <el-switch
                        v-model="formData.${field.modelName}"
                        :disabled="'${field.modelName}'==subColumn">
                </el-switch>
            </el-form-item>
                    #end
                    #if(${field.formType}=="richText")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <rich-text
                                    v-model="formData.${field.modelName}"
                                    :disabled="'${field.modelName}'==subColumn">
                            </rich-text>
                        </el-form-item>
                    #end
                    #if(${field.formType}=="loginName")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <el-input v-model="formData.${field.modelName}" disabled></el-input>
                        </el-form-item>
                    #end
                    #if(${field.formType}=="workNumber")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <el-input v-model="formData.${field.modelName}" disabled></el-input>
                        </el-form-item>
                    #end
                    #if(${field.formType}=="departId")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <el-input v-model="formData.${field.modelName}" disabled></el-input>
                        </el-form-item>
                    #end
                    #if(${field.formType}=="currentTime")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <el-input v-model="formData.${field.modelName}" disabled></el-input>
                        </el-form-item>
                    #end
                    #if(${field.formType}=="currentDate")
                        <el-form-item prop="${field.modelName}" label="${field.remark}">
                            <el-input v-model="formData.${field.modelName}" disabled></el-input>
                        </el-form-item>
                    #end
                #end
            #end
            <el-form-item>
                <el-button @click="onSave" :loading="${esc.d}store.state.fetchingData" type="primary">保存</el-button>
                <el-button @click="onDelete" v-if="formData.id" type="danger">删除</el-button>
                <el-button @click="${esc.d}router.go(-1)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import formValidator from '../formValidator'
import { mapState } from 'vuex'
import { format } from 'date-fns'
import zh from 'date-fns/locale/zh_cn'

export default {
    created() {

        if (this.${esc.d}route.query.column) {
            this.subColumn = this.${esc.d}route.query.column.split(',')[1];
            this.subValue = this.${esc.d}route.query.column.split(',')[0];
        }

        if (this.${esc.d}route.query.id) {
            this.${esc.d}http.get({
                url: '/${display.uncapitalize($model.className)}/getOne',
                data: {
                    id: this.${esc.d}route.query.id
                }
            }).then(res => {
                if (res.success) {

                #foreach($field in $model.fields)
                    #if(${field.formType}=="multiSelect")

                        if(res.data.${field.modelName}){
                            res.data.${field.modelName} = res.data.${field.modelName}.split(',');
                        }else{
                            res.data.${field.modelName} = [];
                        }

                    #end
                    #if(${field.formType}=="currentTime")
                            res.data.${field.modelName} = format(new Date(), 'YYYY/MM/DD HH:mm', { locale: zh });

                    #end
                    #if(${field.formType}=="currentDate")
                            res.data.${field.modelName} = format(new Date(), 'YYYY/MM/DD', { locale: zh });

                    #end
                    #if(${field.formType}=="loginName")
                            res.data.${field.modelName} = this.userInfo.username;

                    #end
                    #if(${field.formType}=="workNumber")
                            res.data.${field.modelName} = this.userInfo.workNumber;

                    #end
                    #if(${field.formType}=="departId")
                            res.data.${field.modelName} = this.userInfo.departId;

                    #end
                #end

                this.formData = res.data;

                if (this.${esc.d}route.query.column) {
                    this.formData[this.subColumn] = this.subValue;
                }
            }
        })
        }else {
            if (this.${esc.d}route.query.column) {
                this.formData[this.subColumn] = this.subValue;
            }
        }

        #foreach($field in $model.fields)
            #if(${field.formType}=="select"||${field.formType}=="multiSelect")
                #if(${field.apiFlag}=="2")



                    this.${esc.d}http.get({
                        url:'${field.optionsMethod}'
                    }).then(res => {
                        if (res.success) {

                    if (res.data.length > 0) {
                        res.data.forEach(item => {
                            this.${field.modelName}Options.push({label: item.${field.optionsLabel}, value:item.${field.optionsValue}});
                    })
                    }
                }
                });
                #elseif(${field.apiFlag}=="3")
                    this.${esc.d}http.get({
                        url:'/commonQuery/all',
                        data: {
                            tableName: '${field.optionsMethod}',
                            databasetype: '${field.optionsDataBaseType}',
                            dataSourceCode: '${field.optionsDataSourceCode}',
                        }
                    }).then(res => {
                        if (res.success) {

                    if (res.data.length > 0) {
                        res.data.forEach(item => {
                            this.${field.modelName}Options.push({label: item.${field.optionsLabel}, value:item.${field.optionsValue}});
                    })
                    }
                }
                });
                #end
            #end
            #if(${field.formType}=="loginName")
                this.formData.${field.modelName} = this.userInfo.username;
            #end
            #if(${field.formType}=="workNumber")
                this.formData.${field.modelName} = this.userInfo.workNumber;
            #end
            #if(${field.formType}=="departId")
                this.formData.${field.modelName} = this.userInfo.departId;
            #end
        #end
    },
    data() {
        return {
            saving: false,
            formData: {
        #foreach($field in $model.fields)
            #if(${field.formType}=="loginName")
                ${field.modelName}:'',
            #end
            #if(${field.formType}=="workNumber")
                ${field.modelName}:'',
            #end
            #if(${field.formType}=="departId")
                ${field.modelName}:'',
            #end
            #if(${field.formType}=="currentTime")
                ${field.modelName}:format(new Date(), 'YYYY/MM/DD HH:mm', { locale: zh }),
            #end
            #if(${field.formType}=="currentDate")
                ${field.modelName}:format(new Date(), 'YYYY/MM/DD', { locale: zh }),
            #end
        #end
    },
        rules: {
            #foreach($field in $model.fields)
                #if(${field.required}||${field.validate})
                    ${field.modelName}:
                [
                    #if(${field.required})
                        {required: true, message: '请输入 $display.alt(${field.remark},${field.modelName})', trigger: 'blur'},
                    #end
                    #if(${field.validate})
                        #if(${field.maxLength}&&${field.minLength})
                            { min: ${field.minLength}, max: ${field.maxLength}, message: '长度在 ${field.minLength} 到 ${field.maxLength} 个字符', trigger: 'blur' },
                        #end
                        #if(${field.min}&&${field.max})
                            {
                                validator: (rule, value, callback) => {
                                if (value) {
                                    if (value <= ${field.max} && value >= ${field.min}) {
                                        callback();
                                    } else {
                                        callback(new Error('值在 ${field.min} 到 ${field.max} 之间'));
                                    }
                                }
                            }, trigger: 'blur'
                        },
                        #end
                        #if(${field.validatorType}=="phone")
                                formValidator.phone,
                        #end
                        #if(${field.validatorType}=="number")
                                formValidator.number,
                        #end
                        #if(${field.validatorType}=="url")
                                formValidator.url,
                        #end
                        #if(${field.validatorType}=="email")
                                formValidator.email,
                        #end
                        #if(${field.validatorType}=="idCard")
                                formValidator.idCard,
                        #end
                        #if(${field.validatorType}=="english")
                                formValidator.english,
                        #end
                    #end
                ],
                #end
            #end
        },
        #foreach($field in $model.fields)
            #if(${field.formType}=="select"||${field.formType}=="multiSelect")
                #if(${field.apiFlag}=="2"||${field.apiFlag}=="3")
                    ${field.modelName}Options:[],
                #else
                            ${field.modelName}Options:${field.optionsValue},
                #end
            #end
        #end
        subColumn: '',
                subValue: '',
    }
    },
    computed: {
            ...mapState(['userInfo']),
},
methods: {
    onSave() {
        this.${esc.d}refs.form.validate((valid) => {
            if (valid) {
                this.logicalValidate();
            } else {
                return false;
    }
    });
    },
    logicalValidate() {
        var data = JSON.parse(JSON.stringify(this.formData));

        var logicalData = {
        #foreach($field in $model.fields)
            #if(${field.logicalKey})
                ${field.modelName}:data.${field.modelName},
            #end
        #end
    }

        if (JSON.stringify(logicalData) == '{}') {
            this.submit();
        } else {
            this.${esc.d}http.get({
                url: '/${display.uncapitalize($model.className)}/getOne',
                data: logicalData
            }).then(res => {
                if (res.success) {

                var logicalFlag = true;

                if (res.data) {
                    if (this.formData.id) {
                        if (res.data.id != this.formData.id) {
                            logicalFlag = false;
                        }
                    } else {
                        logicalFlag = false;
                    }

                }

                if (logicalFlag) {
                    this.submit();
                } else {
                    this.${esc.d}message.warning('逻辑关键字:'+'#foreach($field in $model.fields)#if(${field.logicalKey})${field.remark},#end#end'+'验证失败')
                }


            } else {
                this.${esc.d}message.warning('逻辑关键字:'+'#foreach($field in $model.fields)#if(${field.logicalKey})${field.remark},#end#end'+'验证失败')
            }
        });
        }
    },
    submit() {
        var data = JSON.parse(JSON.stringify(this.formData));

        #foreach($field in $model.fields)
            #if(${field.formType}=="currentTime"||${field.formType}=="currentDate")
                if(data.${field.modelName}){
                    data.${field.modelName} = Date.parse(new Date(data.${field.modelName}));
                }

            #end
        #end

    this.${esc.d}http.post({
        url: this.formData.id ? '/${display.uncapitalize($model.className)}/update' : '/${display.uncapitalize($model.className)}/save',
        data: data
    }).then(res => {
        if (res.success) {
            this.${esc.d}message.success('成功');
            this.${esc.d}router.go(-1);
        } else {
            this.${esc.d}message.warning('失败')
        }
    });
    },
    onDelete() {
        this.${esc.d}alert('删除将无法恢复，确认要删除么？', '警告', { type: 'error' }).then(() => {
            return this.${esc.d}http.post({
                url: '/${display.uncapitalize($model.className)}/del',
                data: { id: this.formData.id }
            })
        }).then(() => {
            this.${esc.d}message.success('删除成功');
        this.${esc.d}router.go(-1);
    }).catch(action => {
            if (action === 'cancel') {
            this.${esc.d}message.info('删除取消');
        } else {
            this.${esc.d}message.error('删除失败');
        }
    })
    },
}
}
</script>
<style lang="less" scoped>
</style>
