<template>
    <el-container
            id="methodObject"
            v-loading="loading"
            :element-loading-text="loadingText">
        <el-header :style="{'padding': '0px 20px', height: headerHeight}">
            <div class="header-div">
                <div :style="{'background-color': icon.color}" class="icon-div-repository">
                    <i class="awsui-iconfont icon-dynamic-repository" v-html="icon.code"></i>
                </div>
                <div class="div-repository-title">
                    <span class="text-general-color">
                        {{methodName}}
                    </span>
                    <p class="text-second-color header-method-id">
                        <b>({{methodId}})</b>
                    </p>
                </div>
                <div class="header-method-attr-config-icon">
                    <el-tooltip content="文件属性配置" placement="bottom" :hide-after=2000>
                        <i style="cursor: pointer;" class="iconfont" @click="handleFileAttrConfig">&#xe632;</i>
                    </el-tooltip>
                </div>
            </div>
        </el-header>
        <el-main style="padding: 0px 20px;">
            <el-table
                    ref="table"
                    @row-click="clickTableRow"
                    highlight-current-row
                    :height="tableHeight"
                    :data="tableData"
                    size="small">
                <el-table-column
                        prop="no"
                        label="序号"
                        width="80"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="icon"
                        label="图标"
                        width="130">
                    <template slot-scope="scope">
                        <img :src="scope.row.icon">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID">
                </el-table-column>
                <el-table-column
                        prop="modelName"
                        label="所属模型"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="modelId"
                        label="模型ID"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="类型"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="operate"
                        label="操作"
                        align="center"
                        width="100">
                    <template slot-scope="scope">
                        <div class="operate-icon-display" style="text-align: center;height: 30px;line-height: 30px;">
                            <p class="text-second-color">
                                <el-tooltip v-if="scope.row.showShapeConfig" content="数据显示规则配置" placement="bottom" :hide-after=2000>
                                    <i style="display: inline-block;cursor: pointer;margin-right: 10px;" class="iconfont" @click="handleShapeAnchorConfig(scope.row.id)">&#xe61c;</i>
                                </el-tooltip>
                                <el-tooltip content="形状属性配置" placement="bottom" :hide-after=2000>
                                    <i style="display: inline-block;cursor: pointer;position: relative;font-size: 23px;top: 3px;" class="iconfont" @click="handleShapeAttrConfig(scope.row.id)">&#xe632;</i>
                                </el-tooltip>
                            </p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <awsui-sidebar
                :title=drawer.title
                :append-to-body=false
                :modal-append-to-body=false
                :destroy-on-close=true
                :modal=false
                :visible.sync="drawer.visible"
                :before-close="handleDrawerClose">
            <div v-loading="drawer.loading">
                <div id="drawerBody" style="overflow-y: auto;">
                    <!-- 扩展属性 -->
                    <div v-for="item in drawer.data" class="attr-row" @click="(item.isUse ? item.isUse = false : item.isUse = true)">
                        <span>{{item.name}}<span class="text-second-color" style="font-size=12px;">（{{item.id}}）</span></span>
                        <i v-if="item.isUse" class="awsui-iconfont" style="float: right;color: #4E7FF9;">&#xe639;</i>
                    </div>
                </div>
                <div class="drawer-footer" :style="{'background-color': '#F2F2F2', height: drawer.footerHeight}">
                    <div id="drawerFooter" style="float: right;position: relative;top: 9px;">
                        <awsui-button size="large" style="width: 80px;" class="button-general-color" type="primary" :disabled="drawer.buttonDisabled" @click="saveAttrConfig">保存</awsui-button>
                        <awsui-button size="large" style="width: 80px;" @click="closeDrawer">取消</awsui-button>
                    </div>
                </div>
            </div>
        </awsui-sidebar>
        <MethodShapeAnchorDlg
                ref="methodShapeAnchorDlg"
                :visible.sync="shapeAnchorConfig.visible"
                :type="shapeAnchorConfig.type"
                :methodId="shapeAnchorConfig.methodId"
                :shapeName="shapeAnchorConfig.shapeName"
                :wsId="shapeAnchorConfig.wsId"
                v-on:cancel="shapeAnchorConfig.visible = false"
                v-on:getResult="handleSaveShapeAnchorConfig"
                />
    </el-container>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import MethodShapeAnchorDlg from "./MethodShapeAnchorDlg";

    export default {
        name: "MethodObject",
        components: {MethodShapeAnchorDlg},
        props: {
            parentHeaderHeight: {
                type: String,
                default: '0px'
            },
            methodId: {
                type: String,
                default: ''
            },
            methodName: {
                type: String,
                default: ''
            },
            searchInput: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                loading: false,
                loadingText: "加载中",
                headerHeight: '45px',
                tableHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - 45 - parseInt(this.parentHeaderHeight)) + 'px',
                tableData: [],
                tableTempData: [],
                icon: {
                    code: '',
                    color: ''
                },
                drawer: {
                    title: '文件属性配置',
                    visible: false,
                    loading: false,
                    data: [],
                    type: 'file',// shape,file
                    shapeName: '',
                    footerHeight: '50px',
                    buttonDisabled: false
                },
                shapeAnchorConfig: {
                    visible: false,
                    type: 'commonShapeConfig',
                    methodId: '',
                    shapeName: '',
                    wsId: ''
                }
            }
        },
        mounted() {
            this.initData();
        },
        methods: {
            initData() {// 初始化数据查询
                const that = this;
                that.loadingText = '加载中';
                that.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_shape_definition_data_query',
                        methodId: that.methodId
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.loading = false;
                    if (ro.result == 'ok') {
                        for (let i = 0; i < ro.data.data.length; i++) {
                            ro.data.data[i].no = i + 1;
                            that.tableTempData.push(ro.data.data[i]);
                        }
                        that.icon = ro.data.icon;
                        that.search(that.searchInput);
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.loading = false;
                })
            },
            handleDataNo(data) {// 处理数据的序号
                for (let i = 0; i < data.length; i++) {
                    data[i].no = i+1;
                }
                return data;
            },
            search(searchInput) {
                if (searchInput && searchInput.trim() != '') {// 根据条件搜索
                    const data = [];
                    for (let i = 0; i < this.tableTempData.length; i++) {
                        if (this.tableTempData[i].name.indexOf(searchInput) > -1) {
                            data.push(this.tableTempData[i]);
                        }
                    }
                    this.tableData = this.handleDataNo(data);
                } else {// 显示全部
                    this.tableData = this.handleDataNo(this.tableTempData);
                }
            },
            clickTableRow(row, column, event) {
                this.$refs.table.setCurrentRow(row);
            },
            /**********文件/形状属性配置***********/
            handleShapeAttrConfig(shapeName) {// 形状属性配置
                const that = this;
                that.drawer.buttonDisabled = false;
                that.drawer.data = [];
                that.drawer.title = '形状属性配置';
                that.drawer.type = 'shape';
                that.drawer.shapeName = shapeName;
                that.drawer.visible = true;
                that.$nextTick(function(){
                    that.initDrawerBodyHeight();
                });
                that.drawer.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_shape_more_attr_config_query',
                        methodId: that.methodId,
                        shapeName: shapeName,
                        wsId: that.$store.getters.getWsIdFn
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.drawer.loading = false;
                    if (ro.result == 'ok') {
                        that.drawer.data = ro.data;
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.drawer.loading = false;
                })
            },
            handleFileAttrConfig() {
                const that = this;
                that.drawer.buttonDisabled = false;
                that.drawer.data = [];
                that.drawer.title = '文件属性配置';
                that.drawer.type = 'file';
                that.drawer.shapeName = '';
                that.drawer.visible = true;
                that.$nextTick(function(){
                    that.initDrawerBodyHeight();
                });
                that.drawer.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_file_more_attr_config_query',
                        methodId: that.methodId,
                        wsId: that.$store.getters.getWsIdFn
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.drawer.loading = false;
                    if (ro.result == 'ok') {
                        that.drawer.data = ro.data.moreAttr;
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.drawer.loading = false;
                })
            },
            saveAttrConfig() {// 保存更多配置
                const that = this;
                const type = that.drawer.type;
                if (that.drawer.data.length == 0) {
                    that.$message({message: '无相关属性进行保存',type: 'warning'});
                    return;
                }
                that.drawer.buttonDisabled = true;
                that.closeDrawer();
                that.loadingText = '正在更新资产库文件'
                that.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_more_attr_config_save',
                        attrData: JSON.stringify(that.drawer.data),
                        wsId: that.$store.getters.getWsIdFn,
                        type: that.drawer.type,
                        shapeName: that.drawer.shapeName,
                        methodId: that.methodId
                    }
                };
                // 查询数据
                awsuiAxios.post(params).then(function (ro) {
                    that.loading = false;
                    if(ro.result == 'ok') {
                        that.$message({message: '更新成功',type: 'success'});
                    } else {
                        that.$message.error(ro.msg);
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            closeDrawer() {// 关闭drawer
                this.drawer.visible = false;
            },
            handleDrawerClose(done) {
                done();
            },
            initDrawerBodyHeight() {
                if (document.getElementById("drawerBody") != null) {
                    document.getElementById("drawerBody").style.height =
                        parseInt(this.tableHeight) + parseInt(this.headerHeight) + parseInt(this.parentHeaderHeight) - 58 - parseInt(this.drawer.footerHeight) + 'px';// 68是drawer标题高度
                }
            },
            /********形状锚点配置*********/
            handleShapeAnchorConfig(shapeName) {
                this.shapeAnchorConfig.wsId = this.$store.getters.getWsIdFn;
                this.shapeAnchorConfig.methodId = this.methodId;
                this.shapeAnchorConfig.shapeName = shapeName;
                this.shapeAnchorConfig.visible = true;
            },
            handleSaveShapeAnchorConfig(result) {
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_shape_config_save',
                        wsId: result.wsId,
                        methodId: result.methodId,
                        shapeId: result.shapeId,
                        data: JSON.stringify(result.data)
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    if (ro.result == 'ok') {
                        that.shapeAnchorConfig.visible = false;
                        that.$message({showClose: true,message: '保存成功',type: 'success'});
                    }
                }).catch(error=>{
                    console.log(error);
                })
            }
        },
        computed: {
            listenTopMainHeight() {
                return this.$store.getters.getTopMainHeightFn;
            }
        },
        watch: {
            listenTopMainHeight: function (newd, old) {
                this.tableHeight = (parseInt(newd)) - parseInt(this.headerHeight) - parseInt(this.parentHeaderHeight) + 'px';
                this.initDrawerBodyHeight();
            }
        }
    }
</script>

<style scoped>
    #methodObject >>> .awsui-sidebar__header {
        margin-bottom: 0px;
        padding: 15px 20px 15px 20px;
        border-bottom: 1px solid #f2f2f2;
        font-size: 16px;
    }
    .icon-div-repository {
        border-radius: 50%;
        margin-left: 15px;
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        vertical-align: middle;
    }
    .icon-dynamic-repository {
        color: white;
        font-size: 16px;
        /*position: relative;*/
        /*top: -1px;*/
    }
    .div-repository-title {
        display: inline-block;
        position: relative;
        left: 10px;
        text-align: center;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
    }
    .attr-row {
        padding: 10px 20px;
        height: 35px;
        line-height: 35px;
        vertical-align: middle;
    }
    .attr-row:hover {
        background-color: #f2f2f2;
    }
    .header-div {
        width: 100%;
        height: 100%;
        background-color: #F5F7FA;
        line-height: 43px;
        vertical-align: middle;
    }
    .header-method-id {
        display:inline-block;
        font-size:12px;
        /*-webkit-transform: scale(0.9);*/
        position: relative;
        left: 0px;
    }
    .header-method-attr-config-icon {
        display:inline-block;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        position:relative;
        left:10px;
    }
</style>