<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv">

                <div class="filter">
                    <label >{{$t(950052)}}：</label>
                    <Input class="searchInput" type="text"  v-model="keyword" v-on:keyup="getTreeData" :placeholder="'关键词'" />
                </div>
                 <div class="searchBtn">
                    <Button type="success" class="twoWord" icon="md-add-circle" @click="add()" >{{$t('1002')}}</Button>
                    <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()" >{{$t('1003')}}</Button>
                    <Button type="error" class="twoWord" icon="md-close-circle" @click="dele()" >{{$t('1004')}}</Button>
                </div>

        </div>
        <div class="divborder">
            <div>
                <Row :gutter="16">
                    <Col span="7" style="height:800px">
                        <div>
                            <Tree :data="tree_data" ref="tree" @on-select-change="treeselect"></Tree>
                        </div>
                    </Col>
                    <Col span="17" style="height:1100px">
                        <div>
                          <Table style="margin-top:10px" :data="tabledata1" :columns="tableColumns1" :max-height="200"></Table>
                          <div style="margin: 10px 0 -10px">
                             <Button type="success" icon="md-add"  @click="getdetail('Geometry')">{{$t(8105)}}</Button>
                          </div>
                          <Table style="margin-top:10px" :data="tabledata2" :columns="tableColumns2" :max-height="200"></Table>
                          <div style="margin: 10px 0 -10px">
                             <Button type="success" icon="md-add"  @click="getdetail('Technology')">{{$t(8106)}}</Button>
                          </div>
                          <Table style="margin-top:10px" :data="tabledata3" :columns="tableColumns3" :max-height="200"></Table>
                        </div>
                    </Col>
                </Row>
            </div>
        </div>

        <!-- 添加修改模态框开始 -->
            <Modal class="newModalClass" :title="type===1?this.$t('1002'):this.$t(1003)" v-model="add_model"   :styles="{width:'400px'}" >
                <div class="modal_body">
                    <div class="filter">
                        <label ><i>*</i>{{$t(920145)}}：</label>
                        <Input v-model="addobj.name"   class="searchInput" />
                        <!-- <Input class="publicinput" type="text"  v-model="addobj.name"  /> -->
                    </div>
                    <div class="filter">
                        <label ><i>*</i>{{$t(8107)}}：</label>
                        <Input  v-model="addobj.code"  class="searchInput"/>
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="add_model=false" v-text="$t('1033')">取消</Button>
                    <Button type="primary" size="large" @click="adddata" v-text="$t('1011')">确定</Button>
                </div>
        </Modal>

        <!-- 添加属性模态框开始 -->
            <Modal class="newModalClass" :title="this.parameter==='Geometry'?this.$t('920042'):this.$t('920043')" v-model="add_attr_model"   :styles="{width:'800px'}" >
                <div class="modal_body" style="padding-right:40px;">
                    <div class="filter">
                        <label ><i>*</i>{{$t(8000034)}}：</label>
                        <Input v-model="attr_name" class="searchInput" @on-keyup='initmodaltable()'/>
                        <!-- <Input class="publicinput" type="text"  v-model="addobj.name"  /> -->
                    </div>
                    <Table style="margin:10px 0px" :data="tabledata4" @on-selection-change="tr_select" :columns="tableColumns4" :max-height="200"></Table>
                    <Button type="primary" icon="md-add"  @click="addtr()">{{$t(1002)}}</Button>
                    <Table style="margin-top:10px" :data="tabledata5" :columns="tableColumns5" :max-height="200"></Table>

                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="add_attr_model=false" v-text="$t('1033')">取消</Button>
                    <Button type="primary" size="large" @click="basePost" v-text="$t('1011')">确定</Button>
                </div>
        </Modal>

    </div>
</template>
<script>
export default {
    data () {
        return {
            keyword: '', // 模具类别
            tree_data: [], // 模具类型
            treeselectnode: {}, // 树选中节点node
            type: 1, // 模态框类型
            addobj: {}, // 添加对象
            add_model: false, // 添加修改模态框
            parameter: '', // 参数
            add_attr_model: false, // 添加属性模态框
            tabledata1: [], // 基本信息 数据
            attr_name: '', // 属性关键词
            mode_type: 1, // 1 添加弹出框 2编辑弹出框
            tableColumns1: [ // 基本信息表头
                {
                    title: this.$t(300018),
                    key: 'station',
                    align: 'center',
                    children: [
                        {
                            title: this.$t('920145'), // 类别名称
                            key: 'name',
                            align: 'center'

                        },
                        {
                            title: this.$t('8000033'), // 类别编号
                            key: 'code',
                            align: 'center'
                        }
                    ]
                }
            ],
            tabledata2: [], // 几何参数table
            tableColumns2: [ // 几何参数表头
                {
                    title: this.$t(920042),
                    // key: 'station',
                    align: 'center',
                    children: [
                        {
                            title: this.$t('8000034'), // 属性名称
                            key: 'name',
                            align: 'center'

                        },
                        {
                            title: this.$t('8000035'), // 属性类型
                            key: 'type_value',
                            align: 'center'
                        },
                        {
                            title: this.$t('8000036'), // 初始值
                            key: 'code',
                            align: 'center'

                        },
                        {
                            title: this.$t('200017'), // 单位
                            key: 'unit',
                            align: 'center'
                        }
                    ]
                }
            ],
            tabledata3: [], // 工艺参数table
            tableColumns3: [ // 工艺参数表头
                {
                    title: this.$t(920043),
                    // key: 'station',
                    align: 'center',
                    children: [
                        {
                            title: this.$t('8000034'), // 属性名称
                            key: 'name',
                            align: 'center'

                        },
                        {
                            title: this.$t('8000035'), // 属性类型
                            key: 'type_value',
                            align: 'center'
                        },
                        {
                            title: this.$t('8000036'), // 初始值
                            key: 'code',
                            align: 'center'

                        },
                        {
                            title: this.$t('200017'), // 单位
                            key: 'unit',
                            align: 'center'
                        }
                    ]
                }
            ],
            tabledata4: [], // 添加table
            tableColumns4: [ // 工艺参数表头
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: this.$t('8000034'), // 属性名称
                    key: 'name',
                    align: 'center'

                },
                {
                    title: this.$t('8000035'), // 属性类型
                    key: 'type_value',
                    align: 'center'
                },
                {
                    title: this.$t('8000036'), // 初始值
                    key: 'code',
                    align: 'center'

                },
                {
                    title: this.$t('200017'), // 单位
                    key: 'unit',
                    align: 'center'
                }
            ],
            tableColumns5: [
                {
                    title: this.$t('8000034'), // 属性名称
                    key: 'name',
                    align: 'center'
                },
                {
                    title: this.$t('8000035'), // 属性类型
                    key: 'type_value',
                    align: 'center'
                },
                {
                    title: this.$t('8000036'), // 初始值
                    key: 'code',
                    align: 'center'

                },
                {
                    title: this.$t('200017'), // 单位
                    key: 'unit',
                    align: 'center'
                },
                {
                    title: this.$t('1038'), // 操作
                    align: 'center',
                    width: 90,
                    render: (h, params) => {
                        return h(
                            'Button',
                            {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on: {
                                    click: row => {
                                        var arr = []
                                        this.tabledata5.filter(item => {
                                            if (item.id !== params.row.id) {
                                                arr.push(item)
                                            }
                                        })
                                        this.tabledata5 = arr
                                        if (!this.tabledata4.some((itemx) => { return itemx.id === params.row.id })) {
                                            this.tabledata4.push(params.row)
                                        }
                                    }
                                }
                            },
                            this.$t(1004)
                        )
                    }
                }
            ],
            tabledata5: [], //
            tr_select_val: []// table多选框数组
        }
    },
    created () {
        this.inittree()
    },
    methods: {
        getTreeData () {
            this.inittree()
        },
        inittree () {
            var params = {
                type: 3,
                keyword: this.keyword
            }
            this.axios.request({
                url: '/ims/Category/GetCategoryTree',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var arr = []
                    res.data.data.expand = true
                    arr.push(res.data.data)
                    this.tree_data = arr
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        add () {
            this.mode_type = 1;
            this.addobj = {};
            this.add_model = true;
        },
        treeselect (value) {
            //    if (value.length < 1) {
            //         return false;
            //     }
            let node = this.$refs.tree.getSelectedNodes();
            if (node.length > 0) {
                if (node[0].id === 0) {
                    this.tabledata1 = []
                    this.tabledata2 = []
                    this.tabledata3 = []
                    return false;
                } else {
                    this.treeselectnode = node[0];
                }
            } else {
                this.treeselectnode = {}
                return false;
            }
            var params = {
                id: this.treeselectnode.id // 树节点
            }
            this.axios.request({
                url: '/ims/Category/GetCategory',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var arr = []
                    arr.push({
                        name: res.data.data.name,
                        code: res.data.data.code
                    })
                    this.tabledata1 = arr;
                    if (res.data.data.geometryParameter.length > 0) {
                        res.data.data.geometryParameter.forEach(ele => {
                            ele.type_value = ele.type === 1 ? this.$t(800016) : this.$t(8109)
                        });
                        this.tabledata2 = res.data.data.geometryParameter;
                    } else {
                        this.tabledata2 = []
                    }
                    if (res.data.data.technologyParameter.length > 0) {
                        res.data.data.technologyParameter.forEach(ele => {
                            ele.type_value = ele.type === 1 ? this.$t(800016) : this.$t(8109)
                        });
                        this.tabledata3 = res.data.data.technologyParameter;
                    } else {
                        this.tabledata3 = []
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        adddata () {
            if (!this.addobj.name || !this.addobj.code) {
                this.$Message.error(this.$t('9000136'));
                return false;
            }

            // 添加
            if (this.mode_type === 1) {
                var data = {
                    name: this.addobj.name,
                    code: this.addobj.code,
                    type: 3,
                    parent: this.treeselectnode.id ? this.treeselectnode.id : 0
                }
                var url = '/ims/Category/Add'
            } else if (this.mode_type === 2) {
                var data = {
                    name: this.addobj.name,
                    code: this.addobj.code,
                    type: 3,
                    id: this.treeselectnode.id
                }
                var url = '/ims/Category/Edit'
            }
            this.axios.request({
                url: url,
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1'))
                    this.add_model = false
                    this.inittree()
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        edit () {
            this.mode_type = 2;
            if (!this.treeselectnode.id) {
                this.$Message.error(this.$t('8000014'));
                return false;
            }
            var params = {
                id: this.treeselectnode.id
            }
            this.axios.request({
                url: 'ims/Category/GetCategory',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.addobj = res.data.data;
                    this.add_model = true
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        getdetail (val) {
            this.parameter = val
            //   this.parameter=val?val:this.parameter
            //    if(!this.treeselectnode.id){
            //     this.$Message.error(this.$t('600266'));
            //     return false;
            //   }
            //    var params={
            //        module:'ims',
            //        category:this.parameter,
            //        search:this.attr_name?this.attr_name:''
            //    }
            //    this.axios.request({
            //        url:'/config/Parameter/GetParamters',
            //        params,
            //        method:'get'
            //    }).then(res=>{
            //        if(res.data.ret===1){
            //            if(res.data.data.length>0){
            //             res.data.data.forEach(ele => {
            //                ele.type_value=ele.type===1?this.$t(800016):this.$t(8109)
            //            });
            //                this.tabledata4=res.data.data
            //            }else{
            //                this.tabledata4=[]
            //            }
            //            this.add_attr_model=true
            //        }else{
            //            this.$Message.error(this.$t(""+res.data.msg))
            //        }
            //    })
            if (val === 'Geometry') {
                this.tabledata5 = this.tabledata2;
            } else {
                this.tabledata5 = this.tabledata3;
            }
            this.initmodaltable()
        },
        initmodaltable () {
            this.parameter = this.parameter ? this.parameter : 'Geometry'
            if (!this.treeselectnode.id) {
                this.$Message.error(this.$t('600266'));
                return false;
            }
            var params = {
                module: 'ims',
                category: this.parameter,
                search: this.attr_name ? this.attr_name : ''
            }
            this.axios.request({
                url: '/config/Parameter/GetParamters',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    if (res.data.data.length > 0) {
                        res.data.data.forEach(ele => {
                            ele.type_value = ele.type === 1 ? this.$t(800016) : this.$t(8109)
                        });
                        this.tabledata4 = res.data.data
                    } else {
                        this.tabledata4 = []
                    }
                    this.add_attr_model = true
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        tr_select (value) {
            //   console.log(value)
            this.tr_select_val = value
        },
        addtr () {
            var arr = []
            if (this.parameter === 'Geometry' && this.tabledata2.length > 0) {
                arr.push(this.$time.deepClone(...this.tabledata2))
            } else if (this.parameter === 'Technology' && this.tabledata3.length > 0) {
                arr.push(this.$time.deepClone(...this.tabledata3))
            }
            this.tabledata4 = this.tabledata4.filter(item => {
                let idList = this.tr_select_val.map(v => v.id)
                return !idList.includes(item.id)
            })
            if (this.tr_select_val.length > 0) {
                this.tr_select_val.forEach((item) => {
                    if (!this.tabledata5.some((itemx) => { return itemx.id === item.id })) {
                        this.tabledata5.push(item)
                    }
                })
            }
            if (this.parameter === 'Geometry') {
                this.tabledata2 = arr
            } else {
                this.tabledata3 = arr
            }
        },
        basePost () {
            var ids = []
            this.tabledata5.forEach(item => {
                ids.push(item.id)
            })
            //    console.log(ids.length,this.tabledata3.length)
            if (ids.length === 0 && this.tabledata3.length === 0) {
                this.$Message.error(this.$t(8108))
                return false
            }
            var data = {
                id: this.treeselectnode.id,
                category: this.parameter,
                parameters: ids
            }
            this.axios.request({
                url: '/ims/Category/UpdateCategoryParameters',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1'))
                    this.add_attr_model = false;
                    //   this.inittree()
                    this.treeselect('')
                } else {
                    //    console.log(this.$t(''+res.data.msg),res.data.msg)
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        dele () {
            if (this.treeselectnode.id === undefined) {
                this.$Message.error(this.$t('8000014'));
                return false;
            }
            this.$Modal.confirm({
                title: this.$t('1018'),
                content: '',
                width: '290px',
                closable: true,
                okText: this.$t('1004'),
                onOk: () => {
                    this.axios.request({
                        url: '/ims/Category/Delete?id=' + this.treeselectnode.id,
                        method: 'post'
                    }).then(res => {
                        if (res.data.ret === 1) {
                            this.inittree()
                            this.tabledata1 = []
                            this.tabledata2 = []
                            this.tabledata3 = []
                            this.treeselectnode = {}
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                        }
                    })
                },
                onCancel: () => {
                    return false
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
