<template xmlns:a-col="http://www.w3.org/1999/html">
    <div class="page-container">
        <div class="page-header">
            <a-row type="flex" justify="center" align="middle">
                <a-col :span="18">
                    <span class="page-title">{{ title }}</span>
                </a-col>
                <a-col :span="6">
                    <div class="flex-wrap page-tool">
                        <div class="page-tool-item"
                             v-for="(item, index) in barMenu"
                             :key="index"
                             v-if="item.display === 'v'">
                            <a-button type="primary" @click="buttonClick(item.id)">
                                {{ item.name }}
                            </a-button>
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="page-body">
            <a-form-model :model="form" :rules="rules" ref="form">
                <a-row :gutter="[50, 10]">
                    <a-col :span="item.span" v-for="(item, index) in fieldArr" :key="index">
                        <component :is="'mix' + item.formtype"
                                   :attr="item"
                                   v-if="item.display !== 'd'"
                                   v-model="form[item.alias]">
                        </component>
                    </a-col>
                </a-row>
            </a-form-model>
        </div>
    </div>
</template>

<script>
import bus from "../../../utils/bus"
import mixText from "../../components/mix-text"
import mixTextarea from "../../components/mix-textarea"
import mixBox from "../../components/mix-box"
import mixDatetime from "../../components/mix-datetime"
import mixFile from "../../components/mix-file"
import mixImage from "../../components/mix-image"
import mixLinkage from "../../components/mix-linkage"
import mixNumber from "../../components/mix-number"

export default {
    name: "update",
    components: {
        mixText,
        mixTextarea,
        mixBox,
        mixDatetime,
        mixFile,
        mixImage,
        mixLinkage,
        mixNumber
    },
    data() {
        return {
            templateId: "",
            uid: "",
            title: "编辑数据",
            form: {},
            rules: {},
            setting: {},
            barMenu: [],
            operation: [],
            fieldArr: [],
            table: null
        }
    },
    created() {
        let query = this.$route.query;
        let params = this.$route.params;
        this.templateId = query.template_id;
        this.uid = params.uid;
        if (!this.templateId) {
            this.$message.error("视图模板不存在，请到菜单管理关联视图模板");
        }
        this.getTemplateInfo();
    },
    //被 keep-alive 缓存的组件激活时调用。
    activated() {
        this.getTemplateInfo()
    },
    methods: {
        changeTabTitle(title){
            title = title.replace('表', '')
            title = '编辑' + title
            this.$store.commit('changeTabTitle', title)
        },
        getDetail(){
            let param = {
                template_id: this.templateId,
                uid: this.uid
            }
            this.api.post('data_item', param).then(result => {
                let item = result.result
                for(let index in this.form){
                   if (item[index] === undefined || item[index] === 'undefined'){
                       continue
                   }
                   this.form[index] = item[index]
                }
            })
        },
        getTemplateInfo() {
            let param = {template_id: this.templateId}
            this.api.post('template_info', param).then(result => {
                this.barMenu = result.result.barMenu
                this.operation = result.result.operation
                this.setting = result.result.setting
                this.fieldArr = result.result.fieldsArr
                this.table = result.result.table
                this.changeTabTitle(this.table.name)
                this.getRule(this.fieldArr)
                this.getDetail();
            })
        },
        getRule(fieldArr) {
            fieldArr.forEach(v => {
                this.$set(this.form, v.alias, v.value)
                let rules = [];
                if (!v.setting.is_allow_null) {
                    //不能为空
                    rules.push({
                        required: true,
                        message: "该选项必填",
                        trigger: "blur"
                    })
                }
                if (v.setting.reg){
                    rules.push({
                        required: true,
                        pattern: v.setting.reg,
                        message: v.setting.reg_tip
                    })
                }

                this.$set(this.rules, v.alias, rules)
            })
        },
        buttonClick(id) {
            if (id === 'sys_edit') {
                this.update();
            } else if (id === 'sys_close') {
                this.back();
            } else {
                this.$message.error('不支持的操作');
            }
        },
        update() {
            this.$refs['form'].validate(valid => {
                if (valid){
                    let data = {...this.form}
                    data.uid = this.uid
                    data.template_id = this.templateId
                    this.api.post('data_update', data).then(result => {
                        this.$message.success('编辑成功');
                        this.back()
                    })
                }
            })
        },
        back(){
            bus.$emit('refresh', this.table.uid)
            history.back();
        }

    }
}
</script>

<style scoped>

</style>
