<template>
    <el-container id="method" class="text-general-color" v-loading="loading">
        <el-header :style="{height: headerHeight}">
            <el-row :style="{height: headerHeight}">
                <el-col :span="8">
                    <div :style="{height: headerHeight, 'line-height': headerHeight}" style="vertical-align: middle;">
                        <span>建模方法：&nbsp;</span>
                        <el-dropdown
                                placement="bottom-end"
                        >
                            <span class="el-dropdown-link">
                                <span class="text-linker-color" style="cursor: pointer;">{{activeMethod.name}}</span>
                                <i class="awsui-iconfont" style="font-size:12px;cursor: pointer;">&#58886;</i>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="min-width: 200px;max-height: 500px;overflow-y: auto;">
                                <template v-for="item in methodData">
                                    <el-dropdown-item v-if="item.type=='group'" :disabled=true style="font-size: 12px;color: #000;height: 80%;"><b>{{item.name}}</b></el-dropdown-item>
                                    <el-dropdown-item v-else @click.native="changeMethod(item.id, item.name)">{{item.name}}</el-dropdown-item>
                                </template>
                                <el-dropdown-item class="text-linker-color" divided @click.native="createMethod()"><i class="awsui-iconfont" style="font-size: 12px;">&#58915;</i>新增建模方法</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div :style="{height: headerHeight, 'line-height': headerHeight}" style="text-align: center;vertical-align: middle;">
                        <div :class="{'button-general-color': activeType == 'methodObject', 'text-color-white': activeType == 'methodObject'}"
                             style="display: inline-block;border-radius: 2px;padding: 0 15px;width: 70px;height: 28px;line-height: 28px;vertical-align: middle;cursor: pointer;"
                             @click="changeMethodType('methodObject')">
                            <span>建模对象</span>
                        </div>
                        <div :class="{'button-general-color': activeType == 'methodAttribute', 'text-color-white': activeType == 'methodAttribute'}"
                             style="display: inline-block;border-radius: 2px;margin: 0 20px;width: 70px;padding: 0 15px;height: 28px;line-height: 28px;vertical-align: middle;cursor: pointer;"
                             @click="changeMethodType('methodAttribute')">
                            <span>数据特性</span>
                        </div>
                        <div :class="{'button-general-color': activeType == 'methodLink', 'text-color-white': activeType == 'methodLink'}"
                             style="display: inline-block;border-radius: 2px;padding: 0 15px;width: 70px;height: 28px;line-height: 28px;vertical-align: middle;cursor: pointer;"
                             @click="changeMethodType('methodLink')">
                            <span>连线关系</span>
                        </div>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div v-if="activeType == 'methodObject'" :style="{height: headerHeight, 'line-height': headerHeight}" style="text-align: right;vertical-align: middle;">
                        <el-input
                                style="width: 300px;"
                                placeholder="请输入形状名称进行检索"
                                prefix-icon="el-icon-search"
                                v-model="searchInput"
                                @input="search()"
                                size="small"
                                clearable>
                        </el-input>
                    </div>
                    <div v-if="activeType == 'methodAttribute'" :style="{height: headerHeight, 'line-height': headerHeight}" style="vertical-align: middle;text-align: right;">
                        <el-dropdown
                                placement="bottom-start"
                                trigger="click"
                        >
                            <span class="el-dropdown-link">
                                <span class="text-general-color" style="cursor: pointer;">{{methodAttribute.value.name}}</span>
                                <i class="awsui-iconfont" style="font-size:12px;cursor: pointer;">&#58886;</i>
                            </span>
                            <el-dropdown-menu slot="dropdown" style="min-width: 120px;max-height: 500px;overflow-y: auto;">
                                <template v-for="item in methodAttribute.opts">
                                    <el-dropdown-item class="el-dropdown-row" @click.native="changeAttrScope(item)"><div style="height: 100%;width: 100%;font-size: 14px;">{{item.name}}</div></el-dropdown-item>
                                </template>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <MethodObject v-if="activeType== 'methodObject'" ref="methodObject" :parentHeaderHeight="headerHeight" :methodId="activeMethod.id" :methodName="activeMethod.name" :searchInput="searchInput"/>
            <MethodAttribute v-if="activeType== 'methodAttribute'" ref="methodObject" :parentHeaderHeight="headerHeight" :methodId="activeMethod.id" :methodName="activeMethod.name" :searchInput="searchInput" :methodDataType="methodAttribute.value.id"/>
            <MethodLink v-if="activeType== 'methodLink'" ref="methodLink" :parentHeaderHeight="headerHeight" :methodId="activeMethod.id" :methodName="activeMethod.name" :searchInput="searchInput"/>
        </el-main>
    </el-container>
</template>

<script>
    import MethodAttribute from "./MethodAttribute";
    import MethodLink from "./MethodLink";
    import MethodObject from "./MethodObject";
    import awsuiAxios from "../../awsuiAxios";
    export default {
        name: "Method",
        components: {MethodObject, MethodLink, MethodAttribute},
        data() {
            return {
                loading: true,
                headerHeight: '40px',
                activeMethod: {
                    id: '',
                    name: ''
                },
                methodData: [],
                activeType: '',
                searchInput: '',
                methodAttribute: {
                    value: {id: 'all', name: '全部'},
                    opts: [
                        {id: 'all', name: '全部'},
                        {id: 'file', name: '文件属性'},
                        {id: 'shape', name: '形状属性'}
                    ]

                }
            }
        },
        mounted() {
            this.initPage();
        },
        methods: {
            initPage() {// 初始化页面数据
                // 建模方法
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_data_query',
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.loading = false;
                    if (ro.result == 'ok') {
                        that.methodData = ro.data;
                        that.changeMethodType('methodObject');
                        for (let i = 0; i < that.methodData.length; i++) {
                            if (that.methodData[i].type != 'group') {
                                that.changeMethod(that.methodData[i].id, that.methodData[i].name);
                                break;
                            }
                        }
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.loading = false;
                })
            },
            changeMethod(methodId, name) {
                this.searchInput = '';
                this.activeMethod.id = methodId;
                this.activeMethod.name = name;
                const temp = this.activeType;
                this.activeType = '';
                this.methodAttribute.value = this.methodAttribute.opts[0];
                this.$nextTick(function(){
                   this.activeType =  temp;
                });
            },
            changeMethodType(type) {
                this.searchInput = '';
                this.methodAttribute.value = this.methodAttribute.opts[0];
                this.activeType = type;
            },
            search() {
                if (this.activeType == 'methodObject') {// 模型对象
                    this.$refs.methodObject.search(this.searchInput);
                } else if (this.activeType == 'methodAttribute') {// 数据属性
                    this.$refs.methodAttribute.search('');// 无搜索
                } else if (this.activeType == 'methodLink') {// 连线
                    this.$refs.methodLink.search('');// 无搜索
                }
            },
            changeAttrScope(item) {
                this.methodAttribute.value = item;
            },
            createMethod() {// 新建建模方法
                this.$message('敬请期待');
            }
        },
        computed: {
            listenTopMainHeight() {
                return this.$store.getters.getTopMainHeightFn;
            }
        },
        watch: {
            listenTopMainHeight: function (newd, old) {
                // this.tableHeight = (parseInt(newd)) - parseInt(this.headerHeight) + 'px';
            }
        }
    }
</script>

<style scoped>
    #method >>> .el-main {
        padding: 0px;
    }
    .text-color-white {
        color: #ffffff;
    }
    .el-dropdown-row {
        height: 46px;
        line-height: 46px;
    }
    .el-dropdown-row :hover {
        color: #4E7FF9 !important;
    }
</style>