<template>
    <div class="testdiv">
        <div class="divborder">
            <div class="newSearchDiv">
                <div class="filter">
                    <label>工装类别：</label>
                    <Cascader
                        class="searchSelect"
                        :data="typeTree"
                        clearable
                        change-on-select
                        v-model="category"
                        @on-change="getCategory"
                    ></Cascader>
                </div>
                <div class="filter">
                    <label>工装编号：</label>
                    <Input type="text" class="searchInput" v-model="number" />
                </div>
                <div class="filter">
                    <label>工装名称：</label>
                    <Input type="text" class="searchInput" v-model="name" />
                </div>
                <div class="filter">
                    <label>状态：</label>
                    <Select
                        label-in-value
                        clearable
                        filterable
                        v-model="state"
                        class="searchSelect"
                    >
                        <Option :value="1">可用</Option>
                        <Option :value="0">停用</Option>
                    </Select>
                </div>

                <div class="searchBtn">
                    <Button
                        type="primary"
                        class="twoWord"
                        icon="ios-search"
                        @click="tosearch()"
                        >{{ $t("1001") }}</Button
                    >
                    <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 intervalRight"
                        icon="md-close-circle"
                        @click="dele()"
                        >{{ $t("1004") }}</Button
                    >
                    <Button
                        type="primary"
                        class="fourWord"
                        icon="md-download"
                        @click="loadExcel()"
                        >{{ $t("1005") }}</Button
                    >
                    <Upload
                        style="display:inline-block"
                        ref="upload"
                        :action="action"
                        name="excel-file"
                        :headers="headers"
                        :show-upload-list="false"
                        :on-format-error="handleFormatError"
                        :on-success="handleSuccess"
                        :on-error="handleError"
                        :format="['xlsx','xls']"
                    >
                        <Button
                            type="primary"
                            class="fourWord"
                            icon="md-cloud-upload"
                        >{{$t('1006')}}</Button>
                    </Upload>
                    <Button
                        type="primary"
                        class="fourWord"
                        icon="ios-cloud-download"
                        @click="search(1)"
                        >{{ $t("1007") }}</Button
                    >
                </div>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                :columns="columns1"
                :data="data1"
                highlight-row
                @on-row-click="onExpand"
            ></Table>
            <!-- @on-row-click="onExpand" -->

            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        show-elevator
                        show-sizer
                        show-total
                        :page-size-opts="[10, 20, 30, 40, 100]"
                        @on-change="changePage"
                        @on-page-size-change="handlePageSize"
                    ></Page>
                </div>
            </div>
        </div>
        <Modal
            class="newModalClass"
            v-model="modal"
            :styles="{ width: '700px' }"
        >
            <p slot="header">
                <span v-show="type == 1">{{ $t("1002") }}</span>
                <span v-show="type == 2">{{ $t("1003") }}</span>
            </p>
            <div class="demo-spin-col">
                <Spin fix v-if="spinShow">
                    <div>正在上传...</div>
                </Spin>
                <div class="filter">
                    <label>父工装类型：</label>
                    <Cascader
                        class="searchSelect"
                        :data="typeTree"
                        v-model="parentType"
                        change-on-select
                        @on-change="getCategory1"
                        :disabled="disabled"
                    ></Cascader>
                </div>
                <div class="filter">
                    <label><i>*</i>父工装名称：</label>
                    <Select
                        v-model="toolingId1"
                        label-in-value
                        clearable
                        filterable
                        filter-by-label
                        class="searchSelect"
                        :disabled="disabled"
                    >
                        <Option
                            v-for="(item, index) in toolingList1"
                            :value="item.id"
                            :key="index"
                            :label="item.name + '#' + item.code"
                            >{{ item.name + "#" + item.code }}</Option
                        >
                    </Select>
                </div>

                <div style="padding-left: 50px">
                    <div class="filter">
                        <label>子工装类型：</label>
                        <Cascader
                            class="searchSelect"
                            :data="typeTree"
                            v-model="sonType"
                            change-on-select
                            @on-change="getCategory2"
                        ></Cascader>
                    </div>
                    <div class="filter">
                        <label><i>*</i>子工装名称：</label>
                        <Select
                            v-model="toolingId2"
                            label-in-value
                            clearable
                            filterable
                            filter-by-label
                            class="searchSelect"
                        >
                            <Option
                                v-for="(item, index) in toolingList2"
                                :value="item.id"
                                :key="index"
                                :label="item.name + '#' + item.code"
                                >{{ item.name + "#" + item.code }}</Option
                            >
                        </Select>
                    </div>
                </div>
                <div class="filter">
                    <label>备注：</label>
                    <Input type="text" class="searchInput" v-model="remark" />
                </div>
                <div class="filter">
                    <label><i>*</i>状态：</label>
                    <RadioGroup v-model="addstatus">
                        <Radio label="1"><span>可用</span></Radio>
                        <Radio label="0"><span>停用</span></Radio>
                    </RadioGroup>
                </div>
                <div>
                    <label>上传文件：</label>
                    <div class="accountInfoUploadFile">
                        <Upload
                            ref="upload"
                            :show-upload-list="false"
                            :on-success="handleSuccess1"
                            :before-upload="handleBeforeUpload"
                            :on-error="handleError1"
                            type="drag"
                            :headers="headers"
                            :action="UploadAction"
                        >
                            <div class="descicon" style="">
                                <Icon type="md-cloud-upload" size="15"></Icon>
                                <span>上传文件</span>
                            </div>
                        </Upload>
                        <div v-show="filename" class="hasfile">
                            {{ filename
                            }}<Icon
                                @click.native="delfile"
                                type="ios-close-circle"
                                size="15"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="modal = false">{{
                    $t("1033")
                }}</Button>
                <Button type="primary" size="large" @click="addPost()">{{
                    $t("1011")
                }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //导入方法
            action:
                this.axios.publicPath +
                "acc/Upload/UploadExcel?templateName=FixtureToolsAssmeblyTemplate",
            headers: {
                token: localStorage.getItem("token"),
                timestamp: localStorage.getItem("timestamp"),
                nonce: localStorage.getItem("nonce"),
                sign: localStorage.getItem("sign"),
            },
            disabled: false,
            columns1: [
                {
                    type: "expand",
                    width: "50",
                    render: (h, params) => {
                        // let str = "";
                        // if (params.row.managetype === 1) {
                        //     str = "单件";
                        // } else if (params.row.managetype === 2) {
                        //     str = "批次";
                        // }
                        return h("Table", {
                            props: {
                                data: params.row.childrens,
                                columns: this.columns2,
                                highlightRow: true,
                            },
                            on: {
                                "on-current-change": (
                                    currentRow,
                                    oldCurrentRow
                                ) => {
                                    this.childObj = {};
                                    this.childObj = currentRow;
                                },
                            },
                        });
                    },
                },
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                },
                {
                    title: "父工装类型",
                    key: "category",
                },
                {
                    title: "父工装料号",
                    key: "partnumber",
                },
                {
                    title: "父工装名称",
                    key: "name",
                },
                {
                    title: "父工装规格",
                    key: "specfication",
                },
                {
                    title: "父工装编号",
                    key: "code",
                },

                {
                    title: "装配详情",
                    key: "s",
                    render: (h, params) => {
                        // let str = "";
                        // if (params.row.managetype === 1) {
                        //     str = "单件";
                        // } else if (params.row.managetype === 2) {
                        //     str = "批次";
                        // }
                        return h("div", "详情");
                    },
                },
                {
                    title: "状态",
                    key: "status",
                    render: (h, params) => {
                        let str = "";
                        if (params.row.status === 1) {
                            str = "可用";
                        } else {
                            str = "停用";
                        }
                        return h("span", str);
                    },
                },
                {
                    title: "备注",
                    key: "remark",
                },
                {
                    title: "附件",
                    key: "filename",
                    render: (h, params) => {
                        return h(
                            "span",
                            {
                                style: {
                                    color: "#2b85e4",
                                    cursor: "pointer",
                                },
                                on: {
                                    click: () => {
                                        let name = params.row.filename;
                                        let url = params.row.fileurl;
                                        if (url) {
                                            this.downFile(url, name);
                                        }
                                    },
                                },
                            },
                            params.row.filename
                        );
                    },
                },
                {
                    title: "维护人",
                    key: "updator",
                },
                {
                    title: "维护时间",
                    key: "updatetime",
                },
            ],
            data1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            columns2: [
                {
                    title: "子工装类型",
                    key: "category",
                },
                {
                    title: "子工装料号",
                    key: "partnumber",
                },
                {
                    title: "子工装名称",
                    key: "name",
                },
                {
                    title: "子工装规格",
                    key: "specfication",
                },
                {
                    title: "子工装编号",
                    key: "code",
                },
                {
                    title: "状态",
                    key: "status",
                    render: (h, params) => {
                        let str = "";
                        if (params.row.status === 1) {
                            str = "可用";
                        } else {
                            str = "停用";
                        }
                        return h("span", str);
                    },
                },
                {
                    title: "维护人",
                    key: "updator",
                },
                {
                    title: "维护时间",
                    key: "updatetime",
                },
            ],
            modal: false,
            type: 0,
            typeTree: [],
            category: [],
            categoryId: 0,
            number: "",
            name: "",
            state: "",
            parentType: [],
            sonType: [],
            parentId: 0,
            sonId: 0,
            remark: "",
            toolingList1: [],
            toolingList2: [],
            toolingId1: 0,
            toolingId2: 0,
            spinShow: false,
            fileurl: "",
            filename: "",
            UploadAction: this.axios.publicPath + "config/upload/UploadImage",
            detailobj: {},
            childObj: {},
            addstatus:'1',//状态 1可用 0停用
        };
    },
    created() {
        this.columns1 = this.$time.initTableTitle(this.columns1);
        this.columns2 = this.$time.initTableTitle(this.columns2);

        this.initFrockType();
        this.tosearch();
    },
    methods: {
        tosearch(){
            this.page = 1;
            this.pagesize = 10;
            this.search(0);
        },
        search(toexcel) {
            let data = {
                category: this.categoryId, //工装类型id
                code: this.number,
                name: this.name,
                state: this.state, //0停用 1可用
                page: this.page,
                pagesize: this.pagesize,
                toexcel:toexcel //0查询 1导出
            };
            this.request(
                "/acc/FixtureToolsAssembly/GetPageList",
                data,
                "get"
            ).then((res) => {
                if(toexcel === 1){
                    if (res.data.ret === 1) {
                        window.location.href =
                            this.axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
                else{
                    this.total = 0;
                    this.data1 = [];
                    let data = res.data.data;
                    if (res.data.ret == 1 &&Array.isArray(data)&&data.length) {
                        this.total = res.data.total;
                        this.data1 = res.data.data;
                    }
                }
            });
        },
        add() {
            this.sonType = [];
            this.sonId = 0;
            this.remark = "";
            this.fileurl = "";
            this.filename = "";
            this.modal = true;
            this.toolingId2 = 0;
            this.disabled = false;
            if (!this.detailobj.id) {
                this.parentType = [];
                this.parentId = 0;
            } else {
                this.parentType = this.detailobj.categoryids;
                this.parentId = this.detailobj.categoryid;
                this.getToolingList(1);
                this.$nextTick(() => {
                    this.toolingId1 = this.detailobj.fixturetoolid;
                });
            }
            this.type = 1;
            this.addstatus = '1';//状态 1可用 0停用
        },
        addPost() {
            if(!this.toolingId1){
                this.$Message.error("请选择父工装");
                return false;
            }
            if(!this.toolingId2){
                this.$Message.error("请选择子工装");
                return false;
            }

            let url = "";
            let data = {
                parentid: this.toolingId1, //父级工装ID
                fixturetoolid: this.toolingId2, //工装ID
                fileurl: this.fileurl, //url
                filename: this.filename, //附件名称
                status: 1,
                remark: this.remark,
                status:this.addstatus,
            };
            if (this.type == 1) {
                url = "/acc/FixtureToolsAssembly/Add";
            }
            if (this.type == 2) {
                data.id = this.childObj.id;
                url = "/acc/FixtureToolsAssembly/Update";
            }
            this.request(url, data, "post").then((res) => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(res.data.msg));
                    this.modal = false;
                    this.detailobj = {};
                    this.childObj = {};
                    this.search(0);
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        edit() {
            if (!this.childObj.id) {
                this.$Message.error("请先选择子工装信息");
                return false;
            }
            this.parentType = this.childObj.parentcategoryids;
            this.sonType = this.childObj.categoryids;
            this.parentId = this.childObj.parentcategoryid;
            this.getToolingList(1);
            this.$nextTick(() => {
                this.toolingId1 = this.childObj.parentid;
            });
            this.sonId = this.childObj.categoryid;
            this.getToolingList(2);
            this.$nextTick(() => {
                this.toolingId2 = this.childObj.fixturetoolid;
            });

            this.filename = this.childObj.filename;
            this.fileurl = this.childObj.fileurl;
            this.remark = this.childObj.remark;
            this.disabled = true;
            this.type = 2;
            this.addstatus = this.childObj.status+'';//状态 1可用 0停用
            this.modal = true;
        },
        dele() {
            if (this.detailobj.id === undefined || this.detailobj.id === null) {
                this.$Message.error(this.$t("1017"));
                return false;
            } else {
                // if (!this.childObj.id) {
                //     this.$Message.error("请选择子工装信息");
                //     return false;
                // }
                var params = {
                    id: this.childObj.id ? this.childObj.id : this.detailobj.id,
                };
                this.$Modal.confirm({
                    title: this.$t("1018"),
                    content: "",
                    width: "290px",
                    closable: true,
                    okText: this.$t("1004"),
                    onOk: () => {
                        this.axios
                            .request({
                                url: "/acc/FixtureToolsAssembly/Delete",
                                params,
                                method: "get",
                            })
                            .then((res) => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t("1058"));
                                    this.search(0);
                                } else {
                                    this.$Message.error(this.$t(res.data.msg));
                                }
                            });
                    },
                });
            }
        },
        loadExcel() {
            this.axios.request({
                url: "/config/Download/GetTemplate?name=FixtureToolsAssmeblyTemplate",
                method: "get",
            })
            .then((res) => {
                if (res.data.ret === 1) {
                    window.location.href =
                        this.axios.publicPath + "" + res.data.data;
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        exportEecel() {},
        //工装类型
        initFrockType() {
            this.axios
                .request({
                    url: "/acc/FixtureTools/GetCategoryList",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        let arr = res.data.data;
                        this.contentTree(arr);
                        this.typeTree = arr;
                    }
                });
        },
        getCategory(val) {
            this.category = val;
            this.categoryId =
                this.category.length > 0
                    ? this.category[this.category.length - 1]
                    : 0;
        },
        getCategory1(val) {
            this.parentType = val;
            this.parentId =
                this.parentType.length > 0
                    ? this.parentType[this.parentType.length - 1]
                    : 0;

            if (this.parentId != 0) {
                this.getToolingList(1);
            }
        },
        getCategory2(val) {
            this.sonType = val;
            this.sonId =
                this.sonType.length > 0
                    ? this.sonType[this.sonType.length - 1]
                    : 0;
            if (this.sonId != 0) {
                this.getToolingList(2);
            }
        },
        getToolingList(index) {
            let id = 0;
            id = index == 1 ? this.parentId : this.sonId;
            this.request(
                "/acc/FixtureTools/GetFixtureToolList?categoryid=" + id,
                "",
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    let arr = res.data.data;
                    this.contentTree(arr);
                    if (index == 1) {
                        this.toolingList1 = arr;
                    }
                    if (index == 2) {
                        this.toolingList2 = arr;
                    }
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        contentTree(arr) {
            arr.forEach((ele) => {
                ele.disabled = false;
                if (
                    ele.children != undefined &&
                    ele.children != null &&
                    ele.children.length != 0
                ) {
                    this.contentTree(ele.children);
                } else {
                    ele.children = [];
                }
            });
        },
        handleRowChange(currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            console.log(currentRow);
            // this.data1.forEach((item, i) => {
            //     //这个循环是为了每次只能展开一个，其他自动收起，不需要可以去掉
            //     i !== currentRow.index ? (this.data1[currentRow.index]._expanded = false) : "";
            // });
            // this.data1[currentRow.index]._expanded = !this.data1[currentRow.index]._expanded;
            // this.data1.sort();
            // this.childObj = {};
        },
        onExpand(row, index) {
            this.detailobj = row;
            console.log(this.detailobj);
            this.data1.forEach((item, i) => {
                //这个循环是为了每次只能展开一个，其他自动收起，不需要可以去掉
                i !== index ? (this.data1[i]._expanded = false) : "";
            });
            this.data1[index]._expanded = !this.data1[index]._expanded;
            if (this.data1[index]._expanded == false) {
                this.detailobj = {};
                this.toolingId1 = 0;
                this.childObj = {};
            }
            this.data1.sort();
        },
        handlePageSize(value) {
            this.page = 1;
            this.pagesize = value;
            this.search(0);
        },
        changePage(value) {
            this.page = value;
            this.search(0);
        },
        /*********文件上传 start******** */
        handleBeforeUpload(file) {
            this.spinShow = true;
            if (!file) {
                this.spinShow = false;
                return false;
            }
        },
        handleSuccess1(res, file) {
            this.spinShow = false;
            if (res.ret == 1) {
                this.$Message.success(this.$t("100378"));
                this.filename = file.name;
                this.fileurl = res.data;
            } else {
                this.$Message.error(this.$t(res.msg + ""));
            }
        },
        handleError1() {
            this.spinShow = false;
            this.$Message.error(this.$t("600512") + "!");
        },
        delfile() {
            this.filename = "";
            this.fileurl = "";
        },
        /*********文件上传 end******** */
        request(url, data, type) {
            if (type == "get") {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type,
                    })
                    .then((res) => {
                        return res;
                    })
                    .catch((error) => error);
            }
        },
        handleFormatError(file) {
            this.$Message.error(
                this.$t("950396") + file.name + this.$t("950397")
            );
        },
        handleSuccess(res, file) {
            if (res.ret == 1) {
                this.$Message.success(this.$t("950398"));
                this.tosearch();
            } else {
                if ((res.msg + "").indexOf(",") != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.data));
                }
            }
        },
        handleError() {
            this.$Message.error(this.$t("2010006") + "!");
        },
    },
};
</script>

<style>
</style>