<template>
    <layout :htmltitle="data.schema.title">
        <h1 style="font-size:1.5rem;margin:.5em 0;">{{data.schema.title}}详情页</h1>
        <slot></slot>
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body" v-if="hasPermission('Read')">
                        <div class="form-group row" v-for="(value,key,index) in data.schema.properties" v-if="showForDetails(key,value)">
                            <label class="col-sm-2 col-form-label" :for="key">{{value.title}}:</label>
                            <div class="col-sm-6 form-control" style="border-color:transparent;height:auto;min-height:calc(2.25rem + 2px);" :data-test="key">
                                <component :is="getComponent(key)" :title="value.title" :name="key" :value="data.model[key]" :data="data.data" v-if="data.model" />
                            </div>
                            <div class="col-sm-4">{{value.description}}</div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-10">
                                <router-link :to="{path:base+'index.html',query:{area:area,entity:entity}}" class="btn btn-default" v-if="hasPermission('Read')">返回</router-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </layout>
</template>
<script>
    export default {
        name: 'display',
        props: ['service', 'area', 'entity', 'model', 'id'],
        data: function () {
            return {
                data: {
                    schema: {
                        title: ''
                    },
                    model: {},
                    data: {}
                }
            }
        },
        computed: {
            path: function () {
                return '/' + this.service + '/' + this.area + '/' + this.model + '/';
            },
            url: function () {
                return this.path + 'Details?id=' + this.id;
            },
            name: function () {
                return this.data.schema ? this.data.schema.title : '';
            },
            title: function () {
                return this.name + '列表';
            },
            base: function () {
                return this.$route.path.substr(0, this.$route.path.lastIndexOf('/') + 1);
            }
        },
        mounted: function () {
            this.load();
        },
        methods: {
            load: function () {
                var vm = this;
                var url = this.baseUrl + this.url;
                axios.get(url).then(function (response) {
                    vm.data = response.data;
                    vm.$emit('load', vm.data.model);
                });
            },
            hasPermission: function (cmd) {
                var permission = cmd + '-' + this.entity;
                return Enumerable.from(store.state.permissions).any(o => o === permission);
            },
            getComponent: function (key) {
                var property = this.data.schema.properties[key];
                var template = 'display-' + (property.ui || property.format || property.type);
                return template;
            },
            showForDetails: function (key, value) {
                return key !== 'id' && this.getComponent(key) !== 'display-array';
            }
        }
    }
</script>
