<template>
    <div id="conditionFilter">
        <div v-if="palId == ''">
            <div class="opt-category-title"><p style="padding-left: 5px;"><b>文件信息</b></p></div>
            <awsui-form ref="form" :model="form" label-width="80px" label-position="right">
                <awsui-form-item label="对象">
                    <awsui-radio awsui-radio v-model="form.type" label="file" @change="initMethod">文件</awsui-radio>
                    <awsui-radio awsui-radio v-model="form.type" label="shape" @change="initMethod">文件内形状</awsui-radio>
                </awsui-form-item>
                <awsui-form-item label="范围">
                    <awsui-input v-model="form.rootFileName" placeholder="请选择一个根目录" readonly @click.native="rootFileTree.visible = true"></awsui-input>
                    <awsui-input type="hidden" v-model="form.rootFileId" placeholder="请选择一个根目录"></awsui-input>
                </awsui-form-item>
                <awsui-row :gutter="0">
                    <awsui-col :span="12">
                        <awsui-form-item label="名称">
                            <div style="display: inline-block;width: 20%;">
                                <awsui-select v-model="form.nameScope" :options="nameScopeOpts"></awsui-select>
                            </div>
                            <div style="display: inline-block;width: 80%;">
                                <awsui-input v-model="form.name" placeholder="请输入名称"></awsui-input>
                            </div>
                        </awsui-form-item>
                    </awsui-col>
                    <awsui-col :span="12">
                        <awsui-form-item label="文件类型">
                            <awsui-select style="width: 99%;" v-model="form.methodId" :options="methodOpts" @change="initExAttr"></awsui-select>
                        </awsui-form-item>
                    </awsui-col>
                </awsui-row>
            </awsui-form>
        </div>
        <div>
            <div class="opt-category-title" style="margin-top: 10px;"><p style="padding-left: 5px;"><b>文件属性</b></p></div>
            <div v-for="(attr, i) in extAttr">
                <awsui-row v-for="(item, n) in attr" class="row">
                    <awsui-col :span="2">
                        <div style="text-align: center;line-height: 30px;height: 30px;">
                            <span v-if="n != 0">且</span>
                        </div>
                    </awsui-col>
                    <awsui-col :span="8">
                        <awsui-input style="font-size: 0px" v-model="item.propertyName" placeholder="请选择属性" readonly @click.native="openAttrTree(i, n)"></awsui-input>
                        <awsui-input type="hidden" v-model="item.propertyKey" placeholder="请选择属性"></awsui-input>
                    </awsui-col>
                    <awsui-col :span="6">
                        <awsui-select v-model="item.propertyCondition" :options="extAttrConditionOpts"></awsui-select>
                    </awsui-col>
                    <awsui-col :span="8">
                        <div style="padding-right: 25px;">
                            <template v-if="item.propertyCondition!='null' && item.propertyCondition!='notNull'">
                                <!--单选类型-->
                                <awsui-select v-if="item.propertyType == 'select'" clearable v-model="item.propertyValue" :options="item.selectTypeOpts"></awsui-select>
                                <!--多选类型-->
                                <awsui-select v-else-if="item.propertyType == 'select_m'" multiple clearable v-model="item.propertyValue" :options="item.selectTypeOpts"></awsui-select>
                                <!--是否类型-->
                                <awsui-select v-else-if="item.propertyType == 'boolean'" v-model="item.propertyValue" :options="item.selectTypeOpts"></awsui-select>
                                <!--数字类型-->
                                <awsui-input-number v-else-if="item.propertyType == 'number'" v-model="item.propertyValue"></awsui-input-number>
                                <!--关联PAL类型-->
                                <awsui-input v-else-if="item.propertyType == 'relation'" v-model="item.propertyShowValue" placeholder="请选择" readonly @click.native="openPalRelationAddress(i, n)"></awsui-input>
                                <!--关联BPM组织架构类型-->
                                <awsui-input v-else-if="item.propertyType == 'awsorg'" v-model="item.propertyShowValue" placeholder="请选择" readonly @click.native="openBpmOrgAddress(i, n)"></awsui-input>
                                <!--文本、多行文本、其他类型-->
                                <awsui-input v-else v-model="item.propertyValue" placeholder="请输入"></awsui-input>
                            </template>
                            <template v-else>
                                <awsui-input value="" placeholder="不允许输入" readonly></awsui-input>
                            </template>
                        </div>
                        <i class="awsui-iconfont operate-icon-display" style="float: right;position: relative; top: -22px;padding-right: 5px;" @click="removeRowCondition(i, n)">&#xe626;</i>
                    </awsui-col>
                </awsui-row>
                <div>
                    <span class="cursor-pointer" @click="addAndCondition(i)"><u>+并条件</u></span>
                </div>
                <div v-if="i != extAttr.length - 1" style="width: 100%;text-align: center;">
                    <div style="display: inline-block;border-top:1px solid #c2c2c2;position: relative;bottom: -3px;width:100%;"></div>
                    <div style="display: inline-block;background-color:white;position: relative;bottom: 10px;color: #A8A5A5;">或</div>
                </div>
            </div>
            <div v-if="extAttr.length == 0">
                <span class="cursor-pointer" @click="addAndCondition(undefined)"><u>+并条件</u></span>
            </div>
            <div>
                <div style="display: inline-block;border-top:1px solid #c2c2c2;position: relative;bottom: -3px;width:100%;"></div>
                <div class="cursor-pointer" style="display: inline-block;background-color:white;position: relative;bottom: 10px;left: 40px;" @click="addOrCondition"><u>+或条件</u></div>
            </div>
        </div>
        <PALRepositoryTree
                ref="rootFileTree"
                :visible.sync="rootFileTree.visible"
                :wsId="rootFileTree.wsId"
                :teamId="rootFileTree.teamId"
                :categorys="rootFileTree.categorys"
                :multiple=false
                v-on:cancel="rootFileTree.visible = false"
                v-on:getResult="saveRootFileResult"
                :title="rootFileTree.title"
        ></PALRepositoryTree>
        <BPMOrgAddress
                ref="palAwsOrgAddress"
                :visible.sync="bpmOrgAddress.visible"
                :addressType="bpmOrgAddress.addressType"
                v-on:cancel="bpmOrgAddress.visible = false"
                v-on:getResult="saveBpmOrgAddressResult"
                :title="bpmOrgAddress.title"
                :multiple="bpmOrgAddress.multiple"
        />
        <pal-relation-address
                ref="palRelationAddress"
                :visible.sync="palRelationAddress.visible"
                v-on:cancel="palRelationAddress.visible = false"
                v-on:getResult="saveRelationResult"
                :title="palRelationAddress.title"
                :selectFileId="palRelationAddress.selectFileId"
                :selectShapeId="palRelationAddress.selectShapeId"
                :relationType="palRelationAddress.relationType"
                :categorys="palRelationAddress.category"
                :methods="palRelationAddress.method"
                :wsId="palRelationAddress.wsId"
                :teamId="palRelationAddress.teamId"
                :multiple = palRelationAddress.multiple
        />
        <pal-attribute-tree
                ref="palAttributeTree"
                :visible.sync="attributeDlg.visible"
                :methodId="attributeDlg.methodId"
                :type="attributeDlg.type"
                v-on:cancel="attributeDlg.visible = false"
                v-on:getResult="saveAttrTreeResult"
        />
    </div>
</template>

<script>
    import BPMOrgAddress from  "./components/BPMOrgAddress";// pal平台组织架构地址簿，调用平台部门人员角色
    import PalRelationAddress from  "./components/PalRelationAddress";
    import PALRepositoryTree from './components/PALRepositoryTree/index';
    import PalAttributeTree from './components/PalAttributeTree/index';
    import awsuiAxios from "../../awsuiAxios";
    export default {
        name: "condition-filter",
        components: {PALRepositoryTree, BPMOrgAddress, PalRelationAddress, PalAttributeTree},
        data () {
            return {
                wsId: wsId,
                teamId: teamId,
                palId: palId,
                attributeDlg: {
                    visible: false,
                    methodId: '',
                    type: '',
                    currGroup: 0,
                    currRow: 0
                },
                bpmOrgAddress: {
                    visible: false,
                    addressType: 'user',
                    title: '',
                    multiple: false,
                    currGroup: 0,
                    currRow: 0
                },
                palRelationAddress: {
                    visible: false,
                    selectFileId: '',
                    selectShapeId: '',
                    relationType: '',
                    category: '',
                    method: '',
                    wsId: wsId,
                    teamId: teamId,
                    multiple: false,
                    currGroup: 0,
                    currRow: 0
                },
                rootFileTree: {
                    visible: false,
                    wsId: wsId,
                    teamId: teamId,
                    categorys: 'process',
                    title: '请选择根目录'
                },
                form: {
                    type: 'file',// 对象，类型
                    rootFileName: '',// 范围根目录名称
                    rootFileId: '',// 范围根目录ID
                    nameScope: 'equals',// 名称范围
                    name:'',// 名称筛选
                    methodId: '',// 文件类型（建模方法范围筛选）
                },
                nameScopeOpts: [
                    {
                        value: 'equals',
                        label: '等于'
                    },
                    {
                        value: 'contain',
                        label: '包含'
                    }
                ],
                methodOpts: [],
                extAttrConditionOpts: [
                    {value:'equals', label: '等于'},
                    {value:'notEquals', label: '不等于'},
                    {value:'contain', label: '包含'},
                    {value:'notContain', label: '不包含'},
                    {value: 'null', label: '为空'},
                    {value: 'notNull', label: '不为空'}
                ],
                extAttr: [],
                extAttr2: [
                    [
                        {"propertyName":"单选密级","propertyKey":"securityclass","propertyType":"select","propertyCondition":"equals","propertyValue":"绝密","selectTypeOpts": [
                                {value: '保密', label: '保密'},
                                {value: '绝密', label: '绝密'},
                                {value: '秘密', label: '秘密'},
                            ]},
                        {"propertyName":"多选密级","propertyKey":"securityclass2","propertyType":"select_m","propertyCondition":"equals","propertyValue":['绝密','秘密'],"selectTypeOpts": [
                                {value: '保密', label: '保密'},
                                {value: '绝密', label: '绝密'},
                                {value: '秘密', label: '秘密'},
                            ]},
                        {"propertyName":"是否类型","propertyKey":"securityclass3","propertyType":"boolean","propertyCondition":"equals","propertyValue":"是","selectTypeOpts": [
                                {value: '是', label: '是'},
                                {value: '否', label: '否'}
                            ]},
                        {"propertyName":"数字类型","propertyKey":"securityclass4","propertyType":"number","propertyCondition":"equals","propertyValue":5},
                        {
                            "propertyName": "审批者(A)",
                            "propertyKey": "approval_a",
                            "propertyType": "relation",
                            "propertyCondition": "equals",
                            "propertyValue": "[{\"fileId\":\"\",\"shapeId\":\"\",\"shapeText\":\"\",\"attrId\":\"\",\"relationFileId\":\"de70f431-1143-4496-a109-a672f4e14a0d\",\"relationShapeId\":\"obj_c96e34f8b4e00001c1f4b45017301467\",\"relationShapeText\":\"角色3\"},{\"fileId\":\"\",\"shapeId\":\"\",\"shapeText\":\"\",\"attrId\":\"\",\"relationFileId\":\"de70f431-1143-4496-a109-a672f4e14a0d\",\"relationShapeId\":\"obj_c96e34f936b000019ebf1150e72099b0\",\"relationShapeText\":\"员工4\"}]",
                            "propertyShowValue": "角色3,岗位4"
                        },
                        {
                            "propertyName": "咨询者(C)XML",
                            "propertyKey": "counselor_c",
                            "propertyType": "awsorg",
                            "propertyCondition": "equals",
                            "propertyValue": "{\"admin\":{\"id\":\"admin\",\"type\":\"user\",\"name\":\"管理员\"},\"5bc3a2dc-3bd2-4376-bcc3-5612e28e55fe\":{\"name\":\"部门1\",\"id\":\"5bc3a2dc-3bd2-4376-bcc3-5612e28e55fe\",\"type\":\"department\"}}",
                            "propertyShowValue": "管理员,部门1"
                        },
                        {
                            "propertyName": "输出",
                            "propertyKey": "out",
                            "propertyType": "textarea",
                            "propertyCondition": "notEquals",
                            "propertyValue": "1"
                        },
                        {
                            "propertyName": "层次",
                            "propertyKey": "level",
                            "propertyType": "string",
                            "propertyCondition": "null",
                            "propertyValue": ""
                        }
                    ]
                ],// 属性筛选条件
            }
        },
        mounted() {
            if (palId != '') {
                this.form.type = 'shape';
            }
            this.initMethod();
        },
        methods: {
            initMethod() {// 初始化/查询建模方法
                const that = this;
                const data = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal.batch_replace_active_method_query',
                        type: that.form.type,
                        palId: that.palId
                    }
                };
                // 查询数据
                awsuiAxios.post(data).then(function (ro) {
                    if(ro.result == 'ok') {
                        that.methodOpts = ro.data.methodOpts;
                        if (that.palId != '') {
                            that.form.methodId = that.methodOpts[0].value;
                        } else {
                            that.form.methodId = '';
                        }
                        that.initExAttr();
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            initExAttr() {
                this.extAttr = [
                    [
                        {
                            "propertyName": "",
                            "propertyKey": "",
                            "propertyType": "string",
                            "propertyCondition": "equals",
                            "propertyValue": ""
                        }
                    ]
                ];
            },
            openBpmOrgAddress(i, n) {// 打开关联BPM组织架构数据选择
                const that = this;
                that.bpmOrgAddress.currGroup = i;
                that.bpmOrgAddress.currRow = n;
                const row = this.extAttr[this.bpmOrgAddress.currGroup][this.bpmOrgAddress.currRow];
                const ref = row.ref;

                const scope = ref.scope;
                that.bpmOrgAddress.addressType = scope.join(',');
                that.bpmOrgAddress.multiple = ref.multiple;
                that.bpmOrgAddress.title = row.propertyName;
                that.bpmOrgAddress.visible = true;
            },
            saveBpmOrgAddressResult(data) {// 关联BPM组织架构数据回调
                this.bpmOrgAddress.visible = false;
                console.log(data);
                // 保存
                const params = {};
                const propertyShowValue = [];
                for (let i = 0; i < data.length; i++) {
                    params[data[i].id] = {name: data[i].name, id: data[i].id, type: data[i].type};
                    propertyShowValue.push(data[i].name);
                }
                const row = this.extAttr[this.bpmOrgAddress.currGroup][this.bpmOrgAddress.currRow];
                row.propertyValue = JSON.stringify(params);
                row.propertyShowValue = propertyShowValue.join(',');
            },
            openPalRelationAddress(i, n) {// 打开关联PAL组织架构数据选择
                const that = this;
                that.palRelationAddress.currGroup = i;
                that.palRelationAddress.currRow = n;
                const row = this.extAttr[this.palRelationAddress.currGroup][this.palRelationAddress.currRow];
                const ref = row.ref;
                const propertyValue = JSON.parse(row.propertyValue);
                const selectFileId = [];
                const selectShapeId = [];
                for (let j = 0; j < propertyValue.length; j++) {
                    selectFileId.push(propertyValue[j].relationFileId);
                    selectShapeId.push(propertyValue[j].relationShapeId);
                }
                this.palRelationAddress.relationType = ref.type;
                this.palRelationAddress.multiple = ref.multiple;
                this.palRelationAddress.title = row.propertyName;
                this.palRelationAddress.selectFileId = selectFileId.join(',');
                this.palRelationAddress.selectShapeId = selectShapeId.join(',');
                if (ref.method.indexOf('.') > 0) {
                    this.palRelationAddress.method = ref.method;
                    this.palRelationAddress.category = ref.method.split('.')[0];
                } else {
                    this.palRelationAddress.category = ref.method;

                }
                this.palRelationAddress.visible = true;
            },
            saveRelationResult(data) {// 关联PAL组织架构数据回调
                this.palRelationAddress.visible = false
                const row = this.extAttr[this.palRelationAddress.currGroup][this.palRelationAddress.currRow];
                const ref = row.ref;
                const propertyValue = [];
                if (ref.type == 'file') {
                    for (let i = 0; i < data.length; i++) {
                        propertyValue.push({
                            fileId : "",
                            shapeId : "",
                            shapeText : "",
                            attrId : "",
                            relationFileId : data[i].versionId,
                            relationShapeId : '',
                            relationShapeText : data[i].name
                        });
                    }
                } else {
                    for (let i = 0; i < data.length; i++) {
                        const currFile = data[i];
                        const children = currFile.children;
                        for (let j = 0; j < children.length; j++) {
                            const currShape = children[j];
                            propertyValue.push({
                                fileId : "",
                                shapeId : "",
                                shapeText : "",
                                attrId : "",
                                relationFileId : currFile.id,
                                relationShapeId : currShape.shapeId,
                                relationShapeText : currShape.name
                            });
                        }
                    }
                }
                const propertyShowValue = [];
                row.propertyValue = JSON.stringify(propertyValue);
                for (let i = 0; i < propertyValue.length; i++) {
                    propertyShowValue.push(propertyValue[i].relationShapeText);
                }
                row.propertyShowValue = propertyShowValue.join(',');
            },
            saveRootFileResult(data) {// 选择根目录回调
                this.rootFileTree.visible = false;
                let id = '';
                let name = '';
                if (data.length > 0) {
                    const curr = data[0];
                    id = curr.currId;
                    name = curr.name;
                }
                this.form.rootFileId = id;
                this.form.rootFileName = name;
            },
            openAttrTree(i ,n) {// 打开自定义属性树组件
                const that = this;
                if (this.form.methodId == '') {
                    this.$message({message: '请选择文件类型',type: 'warning'});
                    return false;
                }
                // 查询特性树
                that.attributeDlg.currGroup = i;
                that.attributeDlg.currRow = n;
                that.attributeDlg.methodId = that.form.methodId;
                that.attributeDlg.type = that.form.type;
                that.attributeDlg.visible = true;
            },
            saveAttrTreeResult(data) {// 选择属性树点击确定按钮
                const row = this.extAttr[this.attributeDlg.currGroup][this.attributeDlg.currRow];
                row.propertyName = data.label;
                row.propertyKey = data.id;
                row.propertyType = 'string';// 先默认string，在nextTick中重新渲染对应的类型
                row.propertyValue = '';
                row.selectTypeOpts = [];
                row.propertyShowValue = '';
                row.ref = data.ref;
                this.$nextTick(function() {
                    row.propertyType = data.attrType;
                    if (data.attrType == 'select' || data.attrType == 'select_m' || data.attrType == 'boolean') {
                        row.selectTypeOpts = [];
                        const refArr = data.ref.split(',');
                        for (let i = 0; i < refArr.length; i++) {
                            row.selectTypeOpts.push({value: refArr[i], label: refArr[i]});
                        }
                    } else if (data.attrType == 'relation') {
                        row.propertyShowValue = '';
                        row.propertyValue = JSON.stringify([]);
                    } else if (data.attrType == 'awsorg') {
                        row.propertyShowValue = '';
                        row.propertyValue = JSON.stringify({});
                    }
                    this.attributeDlg.visible = false;
                })
            },
            addAndCondition(i) {// 增加"且条件"
                if (i != undefined) {
                    this.extAttr[i].push(
                        {
                            "propertyName": "",
                            "propertyKey": "",
                            "propertyType": "string",
                            "propertyCondition": "equals",
                            "propertyValue": ""
                        }
                    );
                } else {
                    this.extAttr.push([
                        {
                            "propertyName": "",
                            "propertyKey": "",
                            "propertyType": "string",
                            "propertyCondition": "equals",
                            "propertyValue": ""
                        }
                    ])
                }
            },
            addOrCondition() {// 增加"或"条件
                if (this.extAttr.length == 0) {
                    this.$message({message: '请先添加一条[+并条件]',type: 'warning'});
                    return false;
                }
                this.extAttr.push([
                    {
                        "propertyName": "",
                        "propertyKey": "",
                        "propertyType": "string",
                        "propertyCondition": "equals",
                        "propertyValue": ""
                    }
                ])
            },
            removeRowCondition(i, n) {// 删除"行条件"
                const group = this.extAttr[i];
                group.splice(n, 1);
                if (group.length == 0) {
                    this.extAttr.splice(i, 1);
                }
            },
            getResults() {// 父组件获取该组件结果集
                const result = {};
                result.uuid = palId;
                result.wsId = wsId;
                result.type = this.form.type;
                result.rootFileId = this.form.rootFileId;
                result.nameScope = this.form.nameScope;
                result.name = this.form.name;
                result.methodId = this.form.methodId;
                result.extAttr = this.extAttr;
                return result;
            }
        }
    }
</script>

<style scoped>
    #conditionFilter >>> .awsui-form-item__label {
        text-align: right;
    }
    .opt-category-title {
        height: 25px;
        line-height: 25px;
        vertical-align: center;
        margin: 20px 30px 15px 20px;
        border-left: 3px solid #4E7FF9;
    }
    #conditionFilter >>> .row .operate-icon-display{
        visibility: hidden;
        cursor: pointer;
        color: red;
    }
    #conditionFilter >>> .row:hover .operate-icon-display{
        visibility: visible;
    }
    .cursor-pointer {
        cursor: pointer;
        color: #4E7FF9;
    }

</style>