<template>
    <awsui-layout id="methodAttribute" :style="{height: mainHeight}">
        <awsui-aside class="attr-aside" width="280px">
            <div style="height: 60px;line-height: 60px;text-align: center;">
                <awsui-button style="width: 130px;" :disabled="createBtnDisabled" :class="{'button-general-color': !createBtnDisabled}" type="primary" @click="createAttrDefine">新建属性</awsui-button>
            </div>
            <div>
                <div style="border-bottom: 1px solid #F0F0F0;"></div>
            </div>
            <div :style="{'overflow': 'auto', 'height': treeHeight}">
                <el-tree
                        ref="tree"
                        v-loading="tree.loading"
                        :element-loading-text="tree.loadingText"
                        :data="tree.data"
                        :props="tree.props"
                        :highlight-current=true
                        :expand-on-click-node=false
                        @node-click="handleNodeClick"
                        node-key="id"
                        :default-expanded-keys="tree.defaultExpandedKeys">
                    <span slot-scope="{node, data}">
                      <i class="awsui-iconfont tree-content-icon tree-content-icon-padding" :style="{'color': data.iconColor}" v-html="node.data.iconCode"></i>
                      <span>{{node.label}}</span>
                      <span v-if="methodDataType != 'all' && data.type == 'attr'"><i class="awsui-iconfont" :style="{'margin-left': '3px','font-size':'13px','color': data.isUse ? '#00CC00' : '#DDDDDD'}">&#xe6d5;</i></span>
                    </span>'
                </el-tree>
            </div>
        </awsui-aside>
        <awsui-main style="height: 100%;position: relative;">
            <div v-if="methodDataType == 'all'" :key="key1">
                <el-table
                        :height="(parseInt(mainHeight) - 20 + 'px')"
                        :data="tableData"
                        v-loading="loading"
                        :element-loading-text="loadingText"
                        :row-style="{height:'50px'}"
                        :cell-style="{padding:'0px'}"
                        @cell-click="updateAttrDefine"
                        style="width: 100%">
                    <el-table-column
                            prop="no"
                            label="序号"
                            width="80"
                            align="center"/>
                    <el-table-column
                            prop="title"
                            label="属性名称"
                            width="180"/>
                    <el-table-column
                            prop="key"
                            label="属性代码"
                            width="180"/>
                    <el-table-column
                            prop="typeName"
                            label="属性类型"
                            width="180"/>
                    <el-table-column
                            prop="refName"
                            label="关联内容"
                            width="180"/>
                    <el-table-column
                            prop="groupPathName"
                            label="所属目录"
                            width="160"/>
                    <el-table-column
                            prop="value"
                            label="默认值"
                            width="120"/>
                    <el-table-column
                            prop="scopeName"
                            label="作用范围"
                            min-width="180"/>
                    <el-table-column
                            prop="readonly"
                            label="是否只读"
                            width="80"
                            align="center">
                        <template slot-scope="scope">
                            <awsui-switch
                                    v-model="scope.row.readonly"
                                    active-color="#4E7FF9"
                                    inactive-color="#E2E2E2"
                                    :disabled="scope.row.type == 'relation' || scope.row.type == 'awsorg'"
                                    @change="handleChangeReadonlyAndValid(scope.row.id, scope.row.title, scope.row.readonly,scope.row.isRequired, scope.row.isValid)">
                            </awsui-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="readonly"
                        label="是否必填"
                        width="80"
                        align="center">
                      <template slot-scope="scope">
                        <awsui-switch
                            v-model="scope.row.isRequired"
                            active-color="#4E7FF9"
                            inactive-color="#E2E2E2"
                            @change="handleChangeReadonlyAndValid(scope.row.id, scope.row.title, scope.row.readonly,scope.row.isRequired, scope.row.isValid)">
                        </awsui-switch>
                      </template>
                    </el-table-column>
                    <el-table-column
                            prop="isValid"
                            label="是否有效"
                            width="80"
                            align="center">
                        <template slot-scope="scope">
                            <awsui-switch
                                    v-model="scope.row.isValid"
                                    active-color="#4E7FF9"
                                    inactive-color="#E2E2E2"
                                    @change="handleChangeReadonlyAndValid(scope.row.id, scope.row.title, scope.row.readonly,scope.row.isRequired, scope.row.isValid)">
                            </awsui-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="operation"
                    label="操作"
                    width="50">
                    <template slot-scope="scope">
                        <div class="operate-icon-display">
                            <i class="el-icon-delete" style="cursor: pointer;" @click.stop="removeAttr(scope.row.id, scope.row.title)"></i>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="methodDataType == 'file'" class="attr" :key="key2">
                <el-table
                        row-key="id"
                        :height="(parseInt(mainHeight) - 20 + 'px')"
                        v-loading="loading"
                        :element-loading-text="loadingText"
                        :data="tableData"
                        :row-style="{height:'50px'}"
                        :cell-style="{padding:'0px'}"
                        @cell-mouse-enter="handleAttrMouseEnter"
                        @cell-mouse-leave="handleAttrMouseLeave"
                        style="width: 100%">
                    <el-table-column
                            prop="move"
                            label=""
                            align="center"
                            width="20">
                        <template slot-scope="scope">
                            <div class="operate-icon-display">
                                <p class="text-second-color">
                                    <i style="display: inline-block;cursor: pointer;" class="awsui-iconfont">&#xe785;</i>
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="no"
                            label="排序"
                            width="80"
                            align="center"/>
                    <el-table-column
                            prop="key"
                            label="属性代码"
                            width="180"/>
                    <el-table-column
                            prop="title"
                            label="属性名称(默认)"
                            width="180"/>
                    <el-table-column
                            prop="newTitle"
                            label="属性名称"
                            width="180">
                        <template slot-scope="scope">
                            <awsui-input v-if="scope.row.isUpdate" class="input-update-attr-name" v-model="scope.row.newTitle" @input="updateAttrDbInfo(scope.row.id, scope.row.newTitle, scope.row.sort)" placeholder="请输入新的属性名称"></awsui-input>
                            <span v-else>{{scope.row.newTitle}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="typeName"
                            label="属性类型"
                            width="180"/>
                    <el-table-column
                            prop="refName"
                            label="关联内容"
                            width="180"/>
                    <el-table-column
                            prop="value"
                            label="默认值"
                            width="150"/>
                    <el-table-column
                            prop="readonly"
                            label="只读"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.readonly ? "是" : "否"}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="groupPathName"
                            label="所属目录"
                            width="160"/>
                    <el-table-column
                            prop="scopeName"
                            label="作用范围"
                            min-width="200"/>
                    <el-table-column v-if="methodId=='process.bpmn2'"
                                     prop="bpmFileShow"
                                     label="审批显示"
                                     width="100"
                                     align="center">
                        <template slot-scope="scope">
                            <awsui-switch
                                    v-model="scope.row.bpmFileShow"
                                    active-color="#4E7FF9"
                                    inactive-color="#E2E2E2"
                                    @change="handleChangeBpmShow(scope.row.id, scope.row.title, scope.row.bpmFileShow, 'bpmFileShow')">
                            </awsui-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div v-if="methodDataType == 'shape'" class="attr" :key="key3">
                <el-table
                        row-key="id"
                        :height="(parseInt(mainHeight) - 20 + 'px')"
                        v-loading="loading"
                        :element-loading-text="loadingText"
                        :data="tableData"
                        :row-style="{height:'50px'}"
                        :cell-style="{padding:'0px'}"
                        @cell-mouse-enter="handleAttrMouseEnter"
                        @cell-mouse-leave="handleAttrMouseLeave"
                        style="width: 100%">
                    <el-table-column
                            prop="move"
                            label=""
                            align="center"
                            width="20">
                        <template slot-scope="scope">
                            <div class="operate-icon-display">
                                <p class="text-second-color">
                                    <i style="display: inline-block;cursor: pointer;" class="awsui-iconfont">&#xe785;</i>
                                </p>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="no"
                            label="排序"
                            width="80"
                            align="center"/>
                    <el-table-column
                            prop="key"
                            label="属性代码"
                            width="180"/>
                    <el-table-column
                            prop="title"
                            label="属性名称(默认)"
                            width="180"/>
                    <el-table-column
                            prop="newTitle"
                            label="属性名称"
                            width="180">
                        <template slot-scope="scope">
                            <awsui-input v-if="scope.row.isUpdate" class="input-update-attr-name" v-model="scope.row.newTitle" @input="updateAttrDbInfo(scope.row.id, scope.row.newTitle, scope.row.sort)" placeholder="请输入新的属性名称"></awsui-input>
                            <span v-else>{{scope.row.newTitle}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="typeName"
                            label="属性类型"
                            width="180"/>
                    <el-table-column
                            prop="refName"
                            label="关联内容"
                            width="180"/>
                    <el-table-column
                            prop="value"
                            label="默认值"
                            width="120"/>
                    <el-table-column
                            prop="readonly"
                            label="只读"
                            width="100"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.readonly ? "是" : "否"}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="groupPathName"
                            label="所属目录"
                            width="160"/>
                    <el-table-column
                            prop="scopeName"
                            label="作用范围"
                            min-width="200"/>
                    <el-table-column v-if="methodId=='process.bpmn2'"
                                     prop="bpmShapeShow"
                                     label="审批显示"
                                     width="100"
                                     align="center">
                        <template slot-scope="scope">
                            <awsui-switch
                                    v-model="scope.row.bpmShapeShow"
                                    active-color="#4E7FF9"
                                    inactive-color="#E2E2E2"
                                    @change="handleChangeBpmShow(scope.row.id, scope.row.title, scope.row.bpmShapeShow, 'bpmShapeShow')">
                            </awsui-switch>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </awsui-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;margin: 20px 0 20px 20px;padding-left: 10px">
                    <awsui-form ref="attrForm" :model="attrForm" label-position="top" :rules="rules" style= "margin-right: 20px;">
                        <awsui-form-item label="属性代码" prop="key">
                            <awsui-input v-model="attrForm.key" :disabled="!attrForm.isCreate" placeholder="请输入属性代码，由数字、字母、下划线组成"></awsui-input>
                        </awsui-form-item>
                        <awsui-form-item label="属性名称" prop="title">
                            <awsui-input v-model="attrForm.title" placeholder="请输入属性名称"></awsui-input>
                        </awsui-form-item>
                        <awsui-form-item label="所属目录">
                            <awsui-select v-model="attrForm.groupPath" :options="attrForm.groupOpts"></awsui-select>
                        </awsui-form-item>
                        <awsui-form-item label="类型">
                            <awsui-select v-model="attrForm.type" :disabled="!attrForm.isCreate" :options="attrForm.typeOpts" @change="changeAttrType"></awsui-select>
                        </awsui-form-item>
                        <!-- table限制 -->
                        <template v-if="attrForm.type=='table'">
                          <awsui-form-item  label="表格列名1" >
                            <awsui-input v-model="attrForm.tableRef.firstColumn" placeholder="请输入列名1"></awsui-input>
                          </awsui-form-item>
                          <awsui-form-item label="表格列名2">
                            <awsui-input v-model="attrForm.tableRef.secondColumn" placeholder="请输入列名2"></awsui-input>
                          </awsui-form-item>
                        </template>
                        <awsui-form-item label="属性描述" prop="desc">
                          <awsui-input v-model="attrForm.desc" placeholder="请输入属性描述"></awsui-input>
                        </awsui-form-item>
                        <!-- relation限制 -->
                        <template v-if="attrForm.type=='relation'">
                            <awsui-form-item label="关联的建模方法">
                                <awsui-select v-model="attrForm.relationRef.method" :options="attrForm.relationMethodScopeOpts" placeholder="请选择建模分类或建模方法"></awsui-select>
                            </awsui-form-item>
                            <awsui-form-item label="关联范围">
                                <awsui-select v-model="attrForm.relationRef.type" :options="attrForm.relationTypeOpts" placeholder="请选择关联范围"></awsui-select>
                            </awsui-form-item>
                            <awsui-form-item label="是否多选">
                                <awsui-select v-model="attrForm.relationRef.multiple" :options="attrForm.multipleOpts" placeholder="请选择关联范围"></awsui-select>
                            </awsui-form-item>
                        </template>
                        <!-- awsorg限制 -->
                        <template v-if="attrForm.type=='awsorg'">
                            <awsui-form-item label="BPM组织架构范围选择">
                                <awsui-select v-model="attrForm.awsorgRef.scope" multiple :options="attrForm.awsorgScopeOpts" multiple placeholder="请选择组织架构范围"></awsui-select>
                            </awsui-form-item>
                            <awsui-form-item label="是否多选">
                                <awsui-select v-model="attrForm.awsorgRef.multiple" :options="attrForm.multipleOpts" placeholder="请选择关联范围"></awsui-select>
                            </awsui-form-item>
                        </template>
                        <!-- select限制 -->
                        <template v-if="attrForm.type=='select'">
                            <awsui-form-item label="选择范围">
                                <awsui-input v-model="attrForm.ref" placeholder="请输入选择范围，例如选项1,选项2,选项3"></awsui-input>
                            </awsui-form-item>
                        </template>
                        <!-- select_m限制 -->
                        <template v-if="attrForm.type=='select_m'">
                            <awsui-form-item label="选择范围">
                                <awsui-input v-model="attrForm.ref" placeholder="请输入选择范围，例如选项1,选项2,选项3"></awsui-input>
                            </awsui-form-item>
                        </template>
                        <template v-if="attrForm.type=='string' || attrForm.type=='textarea'">
                            <awsui-form-item label="默认值" prop="value">
                                <awsui-input v-model="attrForm.value" placeholder="请输入属性默认值"></awsui-input>
                            </awsui-form-item>
                        </template>
                        <awsui-form-item label="">
                            <div
                                 class="div-button-small"
                                 :style="{'border-right': '0px','cursor':readOnlyCursor ? 'not-allowed':'', 'background-color': attrForm.readonly ? '#eef5fe' : '', 'color': attrForm.readonly ? '#4E7FF9' : ''}"
                                 @click="(!readOnlyCursor) && changeReadOnly()"
                            >

                                <span>只读</span>
                            </div>
                            <div
                                class="div-button-small"
                                :style="{'border-right': '0px','background-color': attrForm.isRequired ? '#eef5fe' : '', 'color': attrForm.isRequired ? '#4E7FF9' : ''}"
                                @click="attrForm.isRequired = attrForm.isRequired ? false : true">
                              <span>必填</span>
                            </div>
                            <div
                                 class="div-button-small"
                                 :style="{'background-color': attrForm.isValid ? '#eef5fe' : '', 'color': attrForm.isValid ? '#4E7FF9' : ''}"
                                 @click="attrForm.isValid = attrForm.isValid ? false : true">
                                <span>有效</span>
                            </div>
                        </awsui-form-item>
                        <awsui-form-item label="作用范围">
                            <div
                                 class="div-button"
                                 :style="{'border-right': '0px', 'background-color': attrForm.fileScope ? '#eef5fe' : '', 'color': attrForm.fileScope ? '#4E7FF9' : ''}"
                                 @click="attrForm.fileScope = attrForm.fileScope ? false : true">
                                <span>文件属性</span>
                            </div>
                            <div
                                 class="div-button"
                                 :style="{'background-color': attrForm.shapeScope ? '#eef5fe' : '', 'color': attrForm.shapeScope ? '#4E7FF9' : ''}"
                                 @click="attrForm.shapeScope = attrForm.shapeScope ? false : true">
                                <span>形状属性</span>
                            </div>
                        </awsui-form-item>
                        <awsui-form-item v-if="attrForm.shapeScope" label="形状选择">
                            <awsui-select v-model="attrForm.shapeScopeValue" placeholder="空值则等同于全选" clearable multiple :options="attrForm.shapeOpts"></awsui-select>
                        </awsui-form-item>
                    </awsui-form>
                </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="saveDrawerData">保存</awsui-button>
                        <awsui-button size="large" style="width: 80px;" @click="closeDrawer">取消</awsui-button>
                    </div>
                </div>
            </div>
        </awsui-sidebar>
    </awsui-layout>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import Sortable from 'sortablejs';
    export default {
        name: "MethodAttribute",
        components: {Sortable},
        props: {
            parentHeaderHeight: {
                type: String,
                default: '0px'
            },
            methodId: {
                type: String,
                default: ''
            },
            methodName: {
                type: String,
                default: ''
            },
            searchInput: {
                type: String,
                default: ''
            },
            methodDataType: {// 数据查询类型，全部，文件属性，形状属性
                type: String,
                default: 'all'
            }
        },
        data() {
            return {
                readOnlyCursor: false,
                key1: Math.random(),
                key2: Math.random(),
                key3: Math.random(),
                createBtnDisabled: false,
                mainHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - parseInt(this.parentHeaderHeight)) + 'px',
                treeHeight: (parseInt(this.$store.getters.getTopMainHeightFn) - parseInt(this.parentHeaderHeight) - 61) + 'px',
                loading: false,
                loadingText: '加载中',
                tree: {
                    data: [],
                    defaultExpandedKeys: [],
                    props: {
                        children: 'children',
                        label: 'label'
                    },
                    loading: false,
                    loadingText: '加载中'
                },
                tableData: [],
                tableDataTemp: [],
                nodeData: null,
                drawer: {
                    title: '新增属性',
                    visible: false,
                    loading: false,
                    footerHeight: '50px',
                    buttonDisabled: false
                },
                attrForm: {
                    isCreate: true,// 是否新建
                    id: '',
                    key: '',
                    title: '',
                    newTitle: '',
                    type: '',
                    desc: '',
                    ref: '',
                    relationRef: {// 关联pal组织架构
                        method: '',
                        type: '',
                        multiple: 'false',
                    },
                    awsorgRef: {// 关联bpm组织架构
                        scope: [],
                        multiple: 'false'
                    },
                    tableRef: {
                      firstColumn: '',
                      secondColumn: '',
                    },
                    value: '',
                    readonly: false,
                    isRequired: false,
                    isValid: true,
                    groupPathName: '',
                    groupPath: '',
                    fileScope: false,
                    shapeScope: false,
                    shapeScopeValue: [],
                    scopeName: '',
                    sort: '',
                    bpmFileShow: false,
                    bpmShapeShow: false,

                    typeOpts: [],
                    relationMethodScopeOpts: [],
                    relationTypeOpts: [],
                    awsorgScopeOpts: [],
                    multipleOpts: [
                        {
                            "label" : '多选',
                            "value" : "true"
                        },
                        {
                            "label" : '单选',
                            "value" : "false"// value为false select不识别，改为字符串false
                        }
                    ],
                    groupOpts: [],
                    shapeOpts: []
                },
                rules: {
                    key: [
                        { required: true, message: '请输入属性代码', trigger: 'blur' },
                        { min: 1, max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '请输入属性名称', trigger: 'blur' },
                        { min: 1, max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
                    ],
                    value: [
                        { required: false, message: '请输入属性名称', trigger: 'blur' },
                        { min: 1, max: 255, message: '长度在 255 个字符以内', trigger: 'blur' }
                    ],
                    desc: [
                      { required: true, message: '请输入属性描述', trigger: 'blur' },
                      { min: 1, max: 20, message: '长度在 20 个字符以内', trigger: 'blur' }
                    ]
                },
            }
        },
        mounted() {
            // 火狐浏览器拖拽问题
            document.body.ondrop = function (event) {
                event.preventDefault();
                event.stopPropagation();
            }
            this.initTreeData();
        },
        methods: {
            initTreeData() {// 初始化树
                const that = this;
                that.tree.loadingText = '加载中';
                that.tree.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_tree_data_query',
                        methodId: that.methodId,
                        wsId: that.$store.getters.getWsIdFn
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.tree.loading = false;
                    if (ro.result == 'ok') {
                        if (ro.data.length > 0) {
                            that.tree.defaultExpandedKeys.push(ro.data[0].id);
                        }
                        for (let i = 0; i < ro.data.length; i++) {
                            if (ro.data.children) {
                                for (let j = 0; j < ro.data.children.length; j++) {
                                    ro.data[i].children[j].isUse = false;
                                }
                            }

                        }
                        that.tree.data = ro.data;
                        that.initTableData();
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.loading = false;
                })
            },
            initTableData() {// 初始化表格
                const that = this;
                that.tableData = [];
                this.tableDataTemp = [];
                that.loadingText = '加载中';
                that.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_table_data_query',
                        methodId: that.methodId,
                        wsId: that.$store.getters.getWsIdFn,
                        type: that.methodDataType
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.loading = false;
                    if (ro.result == 'ok') {
                        const lightTreeIds = [];
                        for (let i = 0; i < ro.data.length; i++) {
                            ro.data[i].randomNum = Math.random();
                            if (that.methodDataType != 'all') {
                                ro.data[i].isUpdate = false;
                                if (ro.data[i].isUse) {
                                    lightTreeIds.push(ro.data[i].id);
                                }
                            }
                        }
                        // 处理树右侧点亮图标
                        for (let i = 0; i < that.tree.data.length; i++) {
                            if (that.tree.data[i].children) {
                                for (let j = 0; j < that.tree.data[i].children.length; j++) {
                                    if (lightTreeIds.indexOf(that.tree.data[i].children[j].id) > -1) {
                                        that.tree.data[i].children[j].isUse = true;
                                    } else {
                                        that.tree.data[i].children[j].isUse = false;
                                    }
                                }
                            }
                        }
                        that.tableDataTemp = ro.data;
                        that.search();
                        if (that.methodDataType != 'all') {
                            that.$nextTick(function(){
                                that.rowDrop();
                            });
                        }
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.loading = false;
                })
            },
            search() {// 查询
                if (this.nodeData == null) {
                    const data = JSON.parse(JSON.stringify(this.tableDataTemp));
                    for (let i = 0; i < data.length; i++) {
                        data[i].no = i + 1;
                    }
                    this.tableData = data;
                } else {
                    const data = [];
                    let index = 1;
                    if (this.nodeData.type == 'group') {
                        for (let i = 0; i < this.tableDataTemp.length; i++) {
                            if (this.tableDataTemp[i].groupPath == this.nodeData.id) {
                                const item = JSON.parse(JSON.stringify(this.tableDataTemp[i]));
                                item.no = index++;
                                data.push(item);
                            }
                        }
                    } else {
                        for (let i = 0; i < this.tableDataTemp.length; i++) {
                            if (this.tableDataTemp[i].key == this.nodeData.id) {
                                const item = JSON.parse(JSON.stringify(this.tableDataTemp[i]));
                                item.no = index++;
                                data.push(item);
                                break;
                            }
                        }
                    }
                    this.tableData = data;
                }
            },
            //行拖拽
            rowDrop() {
                const tbody = document.querySelector('.el-table__body-wrapper tbody')
                const that = this;
                Sortable.create(tbody, {
                    onEnd({ newIndex, oldIndex }) {
                        if (newIndex != oldIndex) {
                            const oldId = that.tableData[oldIndex].id;// 被拖拽的属性
                            let referenceId = '';
                            let position = '';
                            // 重点在整体混合排序之后点击树大类进行某个大类之下的属性单独排序的处理
                            if (newIndex - oldIndex == 1) {// 下移一位
                                referenceId = that.tableData[newIndex].id;
                                position = 'bottom';
                            } else if (oldIndex - newIndex == 1) {// 上移一位
                                referenceId = that.tableData[newIndex].id;
                                position = 'top';
                            } else if (newIndex == 0) {// 拖拽到开头位置
                                // 放置在原0位置属性的上方
                                referenceId = that.tableData[0].id;
                                position = 'top';// oldId在referenceId的上方
                            } else if (newIndex == that.tableData.length - 1) {// 放到了结尾位置
                                // 放置在原结尾位置属性的下方
                                referenceId = that.tableData[that.tableData.length - 1].id;
                                position = 'bottom';// oldId在referenceId的下方
                            } else {// 放到了中间位置
                                // 放置在原位置属性的上方
                                referenceId = that.tableData[newIndex].id;
                                position = 'top';// oldId在referenceId的上方
                            }
                            // 修改dataTableTemp
                            let currRow = null;// 被拖拽的行
                            for (let i = 0; i < that.tableDataTemp.length; i++) {
                                if (that.tableDataTemp[i].id == oldId) {
                                    currRow = that.tableDataTemp.splice(i, 1)[0];// 删除此行
                                    break;
                                }
                            }
                            // 移动位置
                            for (let i = 0; i < that.tableDataTemp.length; i++) {
                                if (that.tableDataTemp[i].id == referenceId) {
                                    if (position == 'top') {
                                        that.tableDataTemp.splice(i, 0, currRow);
                                        break;
                                    } else if (position == 'bottom') {
                                        that.tableDataTemp.splice(i+1, 0, currRow);
                                        break;
                                    }

                                }
                            }
                            // 保存
                            const attrs = [];
                            for (let i = 0; i < that.tableDataTemp.length; i++) {
                                attrs.push({
                                    id: that.tableDataTemp[i].id,
                                    newTitle: that.tableDataTemp[i].newTitle
                                });
                            }
                            const params = {
                                url:'jd',
                                data:{
                                    cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_file_and_shape_sort_update',
                                    methodId: that.methodId,
                                    wsId: that.$store.getters.getWsIdFn,
                                    type: that.methodDataType,
                                    attrs: JSON.stringify(attrs),
                                }
                            };
                            // 查询数据
                            awsuiAxios.post(params).then(function (ro) {
                                if(ro.result == 'ok') {
                                    that.$message({message: '移动成功',type: 'success'});
                                    that.search();
                                } else {
                                    that.$message.error(ro.msg);
                                }
                            }).catch(error=>{
                                console.log(error);
                            })
                        }
                    }
                })
            },
            // 清空form数据
            clearDrawerForm() {
                this.attrForm = {
                    isCreate: true,// 是否新建
                    id: '',
                    key: '',
                    title: '',
                    newTitle: '',
                    type: '',
                    desc: '',
                    ref: '',
                    relationRef: {// 关联pal组织架构
                        method: '',
                        type: '',
                        multiple: 'false',
                    },
                    awsorgRef: {// 关联bpm组织架构
                        scope: [],
                        multiple: 'false'
                    },
                    tableRef: {
                      firstColumn: '',
                      secondColumn: ''
                    },
                    value: '',
                    readonly: false,
                    isRequired: false,
                    isValid: true,
                    groupPathName: '',
                    groupPath: '',
                    fileScope: false,
                    shapeScope: false,
                    shapeScopeValue: [],
                    scopeName: '',
                    sort: '',
                    bpmFileShow: false,
                    bpmShapeShow: false,

                    typeOpts: [],
                    relationMethodScopeOpts: [],
                    relationTypeOpts: [],
                    awsorgScopeOpts: [],
                    multipleOpts: [
                        {
                            "label" : '多选',
                            "value" : "true"
                        },
                        {
                            "label" : '单选',
                            "value" : "false"// value为false select不识别，改为字符串false
                        }
                    ],
                    groupOpts: [],
                    shapeOpts: []
                };
            },
            closeDrawer() {// 关闭drawer
                this.drawer.visible = false;
            },
            handleDrawerClose(done) {
                done();
            },
            initDrawer(title) {
                const that = this;
                that.drawer.buttonDisabled = false;
                that.drawer.title = title;
                that.drawer.visible = true;
                that.$nextTick(function(){
                    that.initDrawerBodyHeight();
                });
            },
            createAttrDefine() {// 全部-新建属性配置xml数据
                this.clearDrawerForm();
                const form = this.attrForm;
                form.isCreate = true;
                // 获取所有形状
                this.initDrawer('新增属性');
                this.getAttrOptsParam('');
            },
            // 全部-修改属性配置的xml定义文件
            updateAttrDefine(row, column, cell, event) {
                if (column.property == 'readonly' || column.property == 'isValid') {
                    return false;
                }
                this.clearDrawerForm();
                const form = this.attrForm;
                form.isCreate = false;
                form.id = row.id;
                form.key = row.key;
                form.title = row.title;
                form.newTitle = row.newTitle;
                form.type = row.type;
                form.ref = row.ref;
                if (form.type == 'relation') {
                    form.relationRef.method = row.relationRef.method;
                    form.relationRef.type = row.relationRef.type;
                    form.relationRef.multiple = row.relationRef.multiple ? "true" : "false";
                }
                if (form.type == 'awsorg') {
                    form.awsorgRef.scope = row.awsorgRef.scope;
                    form.awsorgRef.multiple = row.awsorgRef.multiple ? "true" : "false";
                }
                if (form.type == 'table') {
                  form.tableRef.firstColumn = row.tableRef.firstColumn
                  form.tableRef.secondColumn = row.tableRef.secondColumn
                }
                // 类型为pal bpm 时 只读行为不可选
                let arr = ['relation','awsorg'];
                let type = form.type;
                if(arr.includes(type)){
                    this.readOnlyCursor = true;
                    form.readonly = false;
                }else{
                    this.readOnlyCursor = false;
                    form.readonly = row.readonly;
                }
                form.value = row.value;
                form.desc = row.desc
                form.isValid = row.isValid;
                form.isRequired = row.isRequired
                form.groupPath = row.groupPath;
                form.groupPathName = row.groupPathName;
                form.bpmFileShow = row.bpmFileShow;
                form.bpmShapeShow = row.bpmFileShow;
                this.initDrawer('修改属性');
                this.getAttrOptsParam(row.scope);
            },
            // 获取一些选择框参数
            getAttrOptsParam(scope) {
                const form = this.attrForm;
                const that = this;
                that.drawer.loading = true;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_shape_option_query',
                        methodId: that.methodId
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    that.drawer.loading = false;
                    if (ro.result == 'ok') {
                        form.typeOpts = ro.data.typeOpts;
                        form.relationMethodScopeOpts = ro.data.relationMethodScopeOpts;
                        form.relationTypeOpts = ro.data.relationTypeOpts;
                        form.awsorgScopeOpts = ro.data.awsorgScopeOpts;
                        form.groupOpts = ro.data.groupOpts;
                        form.shapeOpts = ro.data.shapeOpts;
                        form.shapeScopeValue = [];
                        if (scope.indexOf('%') > -1) {
                            form.fileScope = true;
                        }
                        if (scope.indexOf("*") > -1 || (scope.indexOf('%') > -1 && scope.indexOf(',') > -1) || (scope.indexOf('%') == -1 && scope.length > 0)) {
                            form.shapeScope = true;
                            const shapeIds = scope.split(',');
                            for (let i = 0; i < form.shapeOpts.length; i++) {
                                if (shapeIds.indexOf(form.shapeOpts[i].value) > -1) {
                                    form.shapeScopeValue.push(form.shapeOpts[i].value);
                                }
                            }
                        }
                        if (form.isCreate) {
                            form.type = form.typeOpts[0].value;
                            const currNode = that.$refs.tree.getCurrentNode();
                            if (currNode == null) {
                                form.groupPath = form.groupOpts[0].value;
                            } else if (currNode.type == 'group') {
                                form.groupPath = currNode.id;
                            } else {
                                form.groupPath = that.$refs.tree.getNode(currNode.pid).data.id;
                            }
                        }
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.drawer.loading = false;
                })
            },
            // 新增、修改保存
            saveDrawerData() {
                const form = this.attrForm;
                const that = this;
                let scope = [];
                if (form.fileScope) {
                    scope.push('%')
                }
                if (form.shapeScope) {
                    if (form.shapeScopeValue.length == 0) {
                        // 一个也没选，默认为全选
                        scope.push("*")
                    } else if (form.shapeScopeValue.length == form.shapeOpts.length){
                        scope.push("*")
                    } else {
                        scope = scope.concat(form.shapeScopeValue);
                    }
                }
                if (!(/^\w+$/.test(form.key))) {
                    that.$message({message: '[属性代码]请输入数字、字母、下划线的组合',type: 'warning'});
                    return false;
                }
                if (scope.length == 0) {
                    that.$message({message: '[作用范围]不允许为空',type: 'warning'});
                    return false;
                }


                if (form.type == 'string' || form.type == 'textarea' || form.type == 'number') {
                    form.ref = '';
                }
                if (form.type == 'boolean') {
                    form.ref = '是,否';
                }
                if (form.type == 'select' || form.type == 'select_m') {
                    if (form.ref == '') {
                        that.$message({message: '[选择范围]不允许为空',type: 'warning'});
                        return false;
                    }
                }
                if (form.type == 'awsorg') {
                    if (form.awsorgRef.scope == '') {
                        that.$message({message: '[BPM组织架构范围选择]不允许为空',type: 'warning'});
                        return false;
                    }
                    form.ref = form.awsorgRef;
                    form.ref.multiple = form.ref.multiple == 'true' ? true : false;// 转换为boolean
                    form.ref = JSON.stringify(form.ref);
                }
                if (form.type == 'relation') {
                    if (form.relationRef.method == '') {
                        that.$message({message: '[关联的建模方法]不允许为空',type: 'warning'});
                        return false;
                    }
                    if (form.relationRef.type == '') {
                        that.$message({message: '[关联范围]不允许为空',type: 'warning'});
                        return false;
                    }
                    form.ref = form.relationRef;
                    form.ref.multiple = form.ref.multiple == 'true' ? true : false;// 转换为boolean
                    form.ref = JSON.stringify(form.ref);
                }
                if (form.type == 'table') {
                  if (form.tableRef.firstColumn == '' || form.tableRef.secondColumn == '') {
                    that.$message({message: '[列名]不允许为空',type: 'warning'});
                    return false;
                  }
                  form.ref = form.tableRef;
                  form.ref = JSON.stringify(form.ref);
                }
                const data = {
                    url:'jd',
                    data:{
                        cmd : 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_add_or_update_save',
                        methodId: that.methodId,
                        isCreate: form.isCreate,
                        key: form.key,
                        title: form.title,
                        type: form.type,
                        desc: form.desc,
                        ref: form.ref,
                        value: form.value,
                        readonly: form.readonly,
                        isRequired: form.isRequired,
                        groupPath: form.groupPath,
                        isValid: form.isValid,
                        bpmFileShow: form.bpmFileShow,
                        bpmShapeShow: form.bpmShapeShow
                    }
                };
                data.data.scope = scope;
                this.$refs['attrForm'].validate((valid) => {
                    if (valid) {
                        that.drawer.buttonDisabled = true;
                        awsuiAxios.post(data).then(function (ro) {
                            if (ro.result == 'ok') {
                                // 成功，刷新当前页面
                                let msg = '修改';
                                if (form.isCreate) {
                                    msg = '新增';
                                }
                                that.$message({message: msg + '成功',type: 'success'});
                                that.closeDrawer();
                                that.clearDrawerForm();
                                that.initTreeData();
                            } else {
                                that.$message({message: ro.msg, type: 'warning'});
                                that.drawer.buttonDisabled = false;
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    } else {
                        return false;
                    }
                });

            },
            handleNodeClick(data) {
                this.nodeData = data;
                this.search();
            },
            // 变更是否只读,必填,有效
            handleChangeReadonlyAndValid(id, name, readonly,isRequired, isValid,) {
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_readonly_and_valid_update',
                        methodId: that.methodId,
                        key: id,
                        readonly: readonly,
                        isRequired,
                        isValid: isValid
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    if (ro.result == 'ok') {
                        that.$message({message: '修改成功',type: 'success'});
                        for (let i = 0; i < that.tableDataTemp.length; i++) {
                            if (id == that.tableDataTemp[i].id) {
                                that.tableDataTemp[i].readonly = readonly;
                                that.tableDataTemp[i].isRequired = isRequired;
                                that.tableDataTemp[i].isValid = isValid;
                                that.tableDataTemp[i].randomNum = Math.random();
                                that.search();
                                break;
                            }
                        }
                        // that.initTableData();
                    } else {
                        that.$message({message: ro.msg,type: 'warning'});
                    }
                }).catch(error=>{
                    console.log(error);
                    that.drawer.loading = false;
                })
            },
            handleChangeBpmShow(id, name, bpmShow, type) {// 变更是否在bpm运行时显示的通配
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_bpm_show_update',
                        methodId: that.methodId,
                        key: id,
                        bpmShow: bpmShow,
                        type: type
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    if (ro.result == 'ok') {
                        that.$message({message: '修改成功',type: 'success'});
                        for (let i = 0; i < that.tableDataTemp.length; i++) {
                            if (id == that.tableDataTemp[i].id) {
                                if (type == 'bpmFileShow') {
                                    that.tableDataTemp[i].bpmFileShow = bpmShow;
                                } else if (type == 'bpmShapeShow') {
                                    that.tableDataTemp[i].bpmShapeShow = bpmShow;
                                }
                                that.tableDataTemp[i].randomNum = Math.random();
                                that.search();
                                break;
                            }
                        }
                        // that.initTableData();
                    } else {
                        that.$message({message: ro.msg,type: 'warning'});
                    }
                }).catch(error=>{
                    console.log(error);
                    that.drawer.loading = false;
                })
            },
            handleAttrMouseEnter(row, column, cell, event) {// 文件属性行移入显示属性修改输入框
                for (let i = 0; i < this.tableData.length; i++) {
                    if (row.id == this.tableData[i].id) {
                        this.tableData[i].isUpdate = true;
                    } else {
                        this.tableData[i].isUpdate = false;
                    }
                }
            },
            handleAttrMouseLeave(row, column, cell, event) {// 文件属性行移出隐藏属性修改输入框
                for (let i = 0; i < this.tableData.length; i++) {
                    if (row.id == this.tableData[i].id) {
                        this.tableData[i].isUpdate = false;
                    }
                }
            },
            updateAttrDbInfo(attrId, newTitle, orderIndex) {// 更新属性名称信息
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_file_and_shape_update',
                        methodId: that.methodId,
                        wsId: that.$store.getters.getWsIdFn,
                        type: that.methodDataType,
                        attrId: attrId,
                        newTitle: newTitle,
                        orderIndex: orderIndex
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    if (ro.result == 'ok') {
                        that.$message({message: '修改成功',type: 'success'});
                        // 把临时的数据进行更新
                        for (let i = 0; i < that.tableDataTemp.length; i++) {
                            if (attrId == that.tableDataTemp[i].id) {
                                that.tableDataTemp[i].newTitle = newTitle;
                            }
                        }
                    } else {
                        alert('请求响应错误');
                    }
                }).catch(error=>{
                    console.log(error);
                    that.drawer.loading = false;
                })

            },
            removeAttr(attrId, title) {
                let confirmText = [
                    "确定要删除吗？",
                    '注意：将一并删除该属性在所有资产库的文件属性和形状属性中的配置信息(不包含业务内容数据)'
                ];
                const newDatas = [];
                const h = this.$createElement;
                for (const i in confirmText) {
                    newDatas.push(h("p", null, confirmText[i]))
                }
                this.$confirm('提示', {
                    message: h("div", null, newDatas),
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const that = this;
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal_pl_manage_method_attr_remove',
                            methodId: that.methodId,
                            attrId: attrId
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(params).then(function (ro) {
                        if(ro.result == 'ok') {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.initTreeData();
                        } else {
                            that.$message(ro.msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            },
            changeReadOnly(){
                if(this.attrForm.readonly){
                    this.attrForm.readonly = false;
                }else{
                    this.attrForm.readonly = true;
                }

            },
            changeAttrType(obj) {

                // 类型为pal bpm 时 只读行为不可选
                let arr = ['relation','awsorg'];
                if(arr.includes(obj)){
                    this.readOnlyCursor = true;
                    this.attrForm.readonly = false;
                }else{
                    this.readOnlyCursor = false;
                }
                this.attrForm.ref = '';
                this.attrForm.relationRef.value = '';
                this.attrForm.relationRef.multiple = 'false';
                this.attrForm.relationRef.type = '';
                this.attrForm.awsorgRef.scope = [];
                this.attrForm.awsorgRef.multiple = 'false';
                this.attrForm.tableRef.firstColumn = ''
                this.attrForm.tableRef.secondColumn = ''
                this.attrForm.value = '';
            },
            initDrawerBodyHeight() {
                if (document.getElementById("drawerBody") != null) {
                    document.getElementById("drawerBody").style.height =
                        parseInt(this.mainHeight) -40 + parseInt(this.parentHeaderHeight) - 58 - parseInt(this.drawer.footerHeight) + 'px';// 68是drawer标题高度
                }
            },
        },
        computed: {
            listenTopMainHeight() {
                return this.$store.getters.getTopMainHeightFn;
            }
        },
        watch: {
            listenTopMainHeight: function (newd, old) {
                this.mainHeight = (parseInt(newd)) - parseInt(this.parentHeaderHeight) + 'px';
                this.treeHeight = (parseInt(newd) - parseInt(this.parentHeaderHeight) - 61) + 'px';
                this.initDrawerBodyHeight();
            },
            methodDataType: function(newV, oldV) {
                this.nodeData = null;
                if (this.$refs.tree) {
                    this.$refs.tree.setCurrentKey(null);
                }
                if (newV != 'all') {
                    this.createBtnDisabled = true;
                } else {
                    this.createBtnDisabled = false;
                }
                this.initTableData();
            }

        }
    }
</script>

<style scoped>
    #methodAttribute >>> .el-tree-node__content {
        background-color: #f8f8f8;
    }
    #methodAttribute >>> .el-tree-node__content:hover {
        /*background-color: #F5F7FA;*/
        background-color: #d4d4d4;
    }
    #methodAttribute >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #F5F7FA;
        color: #4E7FF9;
    }
    #methodAttribute >>> .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .awsui-iconfont {
        color: #4E7FF9 !important;
    }
    #methodAttribute >>> .awsui-main {
        padding: 10px;
    }
    #methodAttribute >>> .awsui-sidebar__header {
        margin-bottom: 0px;
        padding: 15px 20px 15px 20px;
        border-bottom: 1px solid #f2f2f2;
        font-size: 16px;
    }
    .attr-aside {
        background-color: #f8f8f8;
        overflow: hidden;
    }
    #methodAttribute >>> .input-update-attr-name input {
        border-style: dashed !important;
    }
    #methodAttribute >>> .el-table__row .operate-icon-display{
        display: none;
    }
    #methodAttribute >>> .el-table__row:hover .operate-icon-display{
        display: inline-block;
    }
    .attr {
        cursor: move;
    }
    .div-button-small {
      display:inline-block;
      width: 32.8%;
      height: 35px;
      border: 1px solid #e9e9e9;
      line-height: 37px;
      vertical-align: middle;
      text-align: center;
      cursor: pointer;
    }
    .div-button {
        display:inline-block;
        width: 49%;
        height: 35px;
        border: 1px solid #e9e9e9;
        line-height: 37px;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
    }
    #methodAttribute /deep/ .el-table__body-wrapper:hover {
        cursor: pointer;
    }
</style>