<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-descriptions :bordered="true" v-if="dataInfo">
                <a-descriptions-item v-for="(item, index) in fieldArr"
                                     v-if="item.display === 'v'"
                                     :key="index"
                                     :label="item.name"
                                     :span="item.span">
                    {{ dataInfo[item.alias] }}
                </a-descriptions-item>
            </a-descriptions>
        </div>
    </div>
</template>

<script>
import bus from "../../../utils/bus"

export default {
    name: "detail",
    data() {
        return {
            templateId: "",
            uid: "",
            title: "数据详情",
            form: {},
            rules: {},
            setting: {},
            barMenu: [],
            operation: [],
            fieldArr: [],
            dataInfo: null,
            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 += '详情'
            this.$store.commit('changeTabTitle', title)
        },
        getDetail(){
            let param = {
                template_id: this.templateId,
                uid: this.uid
            }
            this.api.post('data_item', param).then(result => {
                 this.dataInfo = result.result

            })
        },
        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.getDetail();
            })
        },
        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>
