<template>
    <div class="testdiv">
        <!-- <div class="divborder newSearchDiv">
            <div>
                <div class="filter">
                    <label>模具类别：</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> -->
        <div class="divborder">
            <div>
                <Row :gutter="16">
                    <Col span="7" style="height: 800px; overflow-y: scroll">
                        <div>
                            <Tree
                                class="demo-tree-render"
                                :data="tree_data"
                                ref="tree"
                                :render="
                                    (h, { root, node, data }) =>
                                        renderContent(
                                            h,
                                            { root, node, data },
                                            1
                                        )
                                "
                                @on-select-change="treeselect($event, 1)"
                            ></Tree>
                            <Tree
                                class="demo-tree-render"
                                :data="handleTree"
                                ref="tree"
                                :render="
                                    (h, { root, node, data }) =>
                                        renderContent(
                                            h,
                                            { root, node, data },
                                            2
                                        )
                                "
                                @on-select-change="treeselect($event, 2)"
                            ></Tree>
                            
                        </div>
                    </Col>
                    <Col span="17" style="height: 1100px">
                        <div class="nodetail" v-show="!treeselectnode.id">
                            <img :src="url" alt="" />
                            <p>请选择模具类别</p>
                        </div>
                        <div class="container" v-show="treeselectnode.id">
                            <div class="basic">
                                <div class="toolTitle">基本信息</div>
                                <div
                                    class="detail"
                                    v-for="item in tabledata1"
                                    :key="item.id"
                                >
                                    <p>
                                        <span class="column">类别名称：</span>
                                        {{ item.name }}
                                    </p>
                                    <p>
                                        <span class="column">类别编号：</span
                                        >{{ item.code }}
                                    </p>
                                </div>
                            </div>
                            <div class="geo">
                                <div class="toolTitle">
                                    几何参数<span
                                        class="tinybtn"
                                        @click="getdetail('Geometry')"
                                        >+</span
                                    >
                                </div>
                                <div class="detail">
                                    <p
                                        v-for="item in tabledata2"
                                        :key="item.id"
                                    >
                                        <span class="column"
                                            >{{ item.name }}：</span
                                        >
                                        {{ item.code }} {{ item.unit }}
                                        <!-- [{{item.type_value}}] -->
                                    </p>
                                </div>
                            </div>
                            <div class="crafts">
                                <div class="toolTitle">
                                    工艺参数<span
                                        class="tinybtn"
                                        @click="getdetail('Technology')"
                                        >+</span
                                    >
                                </div>
                                <div class="detail">
                                    <p
                                        v-for="item in tabledata3"
                                        :key="item.id"
                                    >
                                        <span class="column"
                                            >{{ item.name }}：</span
                                        >
                                        {{ item.code }} {{ item.unit }}
                                        <!-- [{{item.type_value}}] -->
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- <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: [], // 模具类型
            handleTree: [],
            headTree: [],
            attachmentTree: [],
            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.tabledata4.push(params.row)
                                    },
                                },
                            },
                            this.$t(1004)
                        );
                    },
                },
            ],
            tabledata5: [], //
            tr_select_val: [], // table多选框数组
            clone1: [],
            clone2: [],
            clone3: [],
            clone4: [],
            addType: 0,
            url: require("../../../assets/images/default2.png"),
        };
    },
    created() {
        this.inittree(1);
        this.inittree(2);
        // this.inittree(3);
        // this.inittree(4);
    },
    methods: {
        getTreeData() {
            this.inittree();
        },
        inittree(type) {
            var params = {
                type: type,
                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);
                        switch (type) {
                            case 1:
                                this.tree_data = arr;
                                this.clone1 = JSON.parse(JSON.stringify(arr));
                                break;
                            case 2:
                                this.handleTree = arr;
                                this.clone2 = JSON.parse(JSON.stringify(arr));

                                break;
                            case 3:
                                this.attachmentTree = arr;
                                this.clone3 = [...arr];
                                break;
                            case 4:
                                this.headTree = arr;
                                this.clone4 = [...arr];
                                break;
                        }
                    } else {
                        this.$Message.error(this.$t("" + res.data.msg));
                    }
                });
        },
        add() {
            if (this.addType == 0) {
                this.$Message.error("请先选择添加类型");
                return false;
            }
            this.mode_type = 1;
            this.addobj = {};
            this.add_model = true;
        },
        treeselect(value, type) {
            this.addType = type;
            for (let i = 1; i < 5; i++) {
                if (type != i) {
                    this.inittree(i);
                }
            }
            // if(type == 2){
            //     this.tree_data = this.clone1;
            //     this.attachmentTree = this.clone3;
            //     this.headTree = this.clone4;
            // }
            //    if (value.length < 1) {
            //         return false;
            //     }
            // let node = this.$refs.tree1.getSelectedNodes();
            let id = 0;
            if (value.length > 0) {
                if (value[0].id === 0) {
                    this.tabledata1 = [];
                    this.tabledata2 = [];
                    this.tabledata3 = [];
                    this.treeselectnode = value[0];
                    console.log(this.treeselectnode);

                    return false;
                } else {
                    this.treeselectnode = value[0];
                    id = value[0].id;
                }
            } else {
                this.treeselectnode = {};
                return false;
            }
            this.getCategory(id);
        },

        getCategory(id) {
            var params = {
                id: 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: this.addType,
                    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: this.addType,
                    id: this.treeselectnode.id,
                };
                var url = "/ims/Category/Edit";
            }
            // console.log(this.addType);
            console.log(data);
            // return
            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(this.addType);
                    } 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;
            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));
            }
            //    console.log(this.tabledata3.length)

            //    console.log(arr)
            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("");
                        this.getCategory(this.treeselectnode.id);
                    } else {
                        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.addType);
                                this.tabledata1 = [];
                                this.tabledata2 = [];
                                this.tabledata3 = [];
                                this.treeselectnode = {};
                            } else {
                                this.$Message.error(this.$t("" + res.data.msg));
                            }
                        });
                },
                onCancel: () => {
                    return false;
                },
            });
        },
        renderContent(h, { root, node, data }, type) {
            // console.log(type);
            return h(
                "span",
                {
                    style: {
                        display: "inline-block",
                        width: "100%",
                    },
                    on: {
                        mouseover: (e) => {
                            document.getElementById(
                                "btn" + node.node.id + type
                            ).style.opacity = 1;
                        },
                        mouseout: (e) => {
                            document.getElementById(
                                "btn" + node.node.id + type
                            ).style.opacity = 0;
                        },
                    },
                },
                [
                    h(
                        "span",
                        {
                            style: {
                                // float: "left",
                                display: "inline-block",
                                marginRight:'50px'
                            },
                        },
                        data.title
                    ),
                    h(
                        "span",
                        {
                            style: {
                                // display: "none",
                                display: "inline-block",
                                // float: "right",
                                opacity: 0,
                            },
                            attrs: {
                                // id: "btn",
                                id: "btn" + node.node.id + type,
                            },
                        },
                        [
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "success",
                                        ghost: true,
                                        size: "small",
                                    },
                                    style: {
                                        marginRight: "8px",
                                    },
                                    on: {
                                        click: () => {
                                            this.addType = type;

                                            // node.node.selected = true
                                            this.add();
                                            // this.treeselect();
                                        },
                                    },
                                },
                                [
                                    h("Icon", {
                                        props: {
                                            size: "20",
                                            type: "ios-add",
                                        },
                                    }),
                                ]
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "warning",
                                        ghost: true,
                                        size: "small",
                                    },
                                    style: {
                                        marginRight: "8px",
                                        // color:'#19BE6B',
                                        // fontSize:'14px'
                                    },
                                    on: {
                                        click: () => {
                                            // this.append(data);
                                            this.addType = type;

                                            this.treeselectnode.id =
                                                node.node.id;
                                            // this.treeselect();
                                            this.edit();
                                        },
                                    },
                                },
                                [
                                    h("Icon", {
                                        props: {
                                            size: "20",
                                            type: "md-create",
                                        },
                                    }),
                                ]
                            ),
                            h(
                                "Button",
                                {
                                    props: {
                                        type: "error",
                                        ghost: true,
                                        size: "small",
                                    },
                                    style: {
                                        marginRight: "8px",
                                        // color:'#19BE6B',
                                        // fontSize:'14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.addType = type;

                                            console.log(node.node.id);
                                            this.treeselectnode.id =
                                                node.node.id;
                                            // this.treeselect();

                                            this.dele(node.node.id);
                                        },
                                    },
                                },
                                [
                                    h("Icon", {
                                        props: {
                                            size: "20",
                                            type: "ios-close",
                                        },
                                    }),
                                ]
                            ),
                        ]
                    ),
                ]
            );
        },
    },
};
</script>
<style src="../../../style/edit.css"></style>

