<template>
    <div class="testdiv">
        <div class="divborder newSearchDiv" style="margin:0px;">
            <div class="filter">
                <label>{{$t('100088')}}：</label>
                <Select
                    v-model="productname"
                    clearable
                    filterable
                    class="searchSelect"
                    @on-change="getLine"
                >
                    <!--  -->
                    <Option
                        v-for="item in products"
                        :value="item.id"
                        :key="item.code"
                    >{{ item.name }}({{item.code}})</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(500006)}}：</label>
                <Select v-model="lineid" clearable class="searchSelect">
                    <Option
                        v-for="item in lines"
                        :value="item.route"
                        :key="item.route"
                    >{{ item.text }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label>{{$t(100308)}}：</label>
                <Select v-model="machineId" clearable class="searchSelect">
                    <Option
                        v-for="item in machineList"
                        :value="item.id"
                        :key="item.id"
                    >{{ item.title }}</Option>
                </Select>
            </div>
            <div class="searchBtn">
                <Button
                    type="primary"
                    class="twoWord"
                    icon="ios-search"
                    @click="search(1,10)"
                >{{$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>
            </div>
        </div>
        <div class="divborder newTableDiv">
            <Table
                class="tableClass"
                @on-current-change="handleRowChange"
                highlight-row
                :data="tableData1"
                :columns="tableColumns1"
            ></Table>
            <Poptip trigger="hover" title="Title">
                <div slot="content"></div>
            </Poptip>
            <div class="pageDiv">
                <div class="pageDirection">
                    <Page
                        :total="total"
                        :current="page"
                        @on-change="changePage"
                        show-elevator
                        show-sizer
                        show-total
                        @on-page-size-change="handlePageSize"
                        :page-size-opts="[10,20,30,40,100]"
                    ></Page>
                </div>
            </div>
            <!-- 弹框 -->
            <Modal
                class="newModalClass"
                v-model="addmodal"
                :title="$t(1002)"
                :styles="{width:'900px'}"
            >

                <div class="modal_body">
                    <div class>
                        <div class="filter">
                            <label>
                                <i>*</i>
                                {{$t(100088)}}：
                            </label>
                            <Select
                                v-model="productid"
                                clearable
                                class="searchSelect"
                                @on-change="getTable"
                            >
                                <Option
                                    v-for="item in products"
                                    :value="item.id"
                                    :key="item.id"
                                >{{ item.name }}({{item.code}})</Option>
                            </Select>
                        </div>
                        <div class="filter">
                            <label><i>*</i>{{$t(500006)}}：</label>
                            <Select
                                v-model="routeid1"
                                clearable
                                class="searchSelect"
                                @on-change="getTable1"
                            >
                                <Option
                                    v-for="item in lines"
                                    :value="item.route"
                                    :key="item.route"
                                >{{ item.text }}</Option>
                            </Select>
                        </div>
                        <div class="filter">
                            <label><i>*</i>{{$t(100308)}}：</label>
                            <Select
                                v-model="machineId1"
                                clearable
                                class="searchSelect"
                                @on-change="getTable2"
                            >
                                <Option
                                    v-for="item in machineList1"
                                    :value="item.id"
                                    :key="item.id"
                                >{{ item.title }}</Option>
                            </Select>
                        </div>
                    </div>
                    <div style="width:100%;height:360px">
                        <div style="float:left;width:800px">
                            <Table
                                style="height:360px;"
                                height="360"
                                :data="processList"
                                :columns="addColumns"
                            ></Table>
                        </div>
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                    <Button type="primary" @click="addPost()">{{$t('1011')}}</Button>
                </div>
            </Modal>
            <Modal class="newModalClass" v-model="editModal" title="修改" :styles="{width:'740px'}">
                <div style="width:700px">
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t(100088)}}：
                        </label>
                        <Input type="text" class="searchInput" disabled v-model="pname" />
                    </div>
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t(500006)}}：
                        </label>
                        <Input type="text" class="searchInput" disabled v-model="route" />
                    </div>
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t(1041)}}：
                        </label>
                        <Input type="text" class="searchInput" disabled v-model="machineName" />
                    </div>
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t(500068)}}：
                        </label>
                        <InputNumber :min="0" class="searchInput" v-model="count" />
                    </div>
                    <div class="filter">
                        <label>
                            <i>*</i>
                            {{$t(8049)}}：
                        </label>
                        <DatePicker
                            type="date"
                            class="searchInput"
                            v-model="date"
                            format="yyyy-MM-dd"
                        ></DatePicker>
                    </div>
                </div>
                <div slot="footer">
                    <Button type="text" size="large" @click="closeadd()">{{$t('1033')}}</Button>
                    <Button type="primary" size="large" @click="editdata()">{{$t('1011')}}</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
import axios from "@/libs/api.request";
import "view-design/dist/styles/iview.css";
export default {
    name: "productmanagement", // 组件不刷新
    data() {
        return {
            products: [],
            productname: 0,
            productid: "",
            lines: [],
            lineid: "",
            machineId: "",
            workOrder: "",
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            addmodal: false,
            editmodal: false,
            detailobj: {},
            editobj: {},
            type: 0,
            tableColumns1: [
                {
                    type: "index2",
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h(
                            "span",
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    },
                    width: "70px",
                },
                {
                    title: this.$t(100088),
                    key: "product_name",
                    align: "center",
                },
                {
                    title: this.$t(1041),
                    key: "machineType_name",
                    align: "center",
                },
                {
                    title: this.$t(500006),
                    key: "route",
                    align: "center",
                },
                {
                    title: this.$t(600042),
                    key: "cutter_number",
                    align: "center",
                },
                {
                    title: this.$t(900630),
                    key: "tool_code",
                    align: "center",
                },

                {
                    title: "BOM清单",
                    key: "boom",
                    render: (h, params) => {
                        let data = [],
                            columns = [];
                        data = params.row.boom;
                        columns = [
                            {
                                title: "类别",
                                key: "categoryName",
                            },
                            {
                                title: "刀具名称",
                                key: "name",
                            },
                            {
                                title: "刀具编号",
                                key: "code",
                            },
                        ];
                        return h("div", [
                            h(
                                "Poptip",
                                {
                                    props: {
                                        trigger: "hover",
                                        width: 400,
                                        placement: "bottom",
                                        transfer: true,
                                    },
                                },
                                [
                                    h("a", "查看"),
                                    h(
                                        "div",
                                        {
                                            slot: "content",
                                        },
                                        [
                                            h("Table", {
                                                props: {
                                                    data: data,
                                                    columns: columns,
                                                },
                                            }),
                                        ]
                                    ),
                                ]
                            ),
                        ]);
                    },
                },

                {
                    title: this.$t(300084),
                    key: "count",
                },
                {
                    title: this.$t(8049),
                    key: "date",
                },
            ],
            code: "",
            adddata: {},
            tooltype: "",
            toolcode: "",
            toolid: "",
            modalData: [],
            processList: [],
            addColumns: [
                {
                    title: this.$t(600042),
                    key: "cutter_number",
                    align: "center",
                },
                {
                    title: this.$t(900630),
                    key: "tool_code",
                    align: "center",
                },

                {
                    title: "BOM清单",
                    key: "boom",
                    render: (h, params) => {
                        let data = [],
                            columns = [];
                        data = params.row.boom;
                        columns = [
                            {
                                title: "类别",
                                key: "categoryName",
                            },
                            {
                                title: "刀具名称",
                                key: "name",
                            },
                            {
                                title: "刀具编号",
                                key: "code",
                            },
                        ];
                        return h("div", [
                            h(
                                "Poptip",
                                {
                                    props: {
                                        trigger: "hover",
                                        width: 400,
                                        placement: "bottom",
                                        transfer: true,
                                    },
                                },
                                [
                                    h("a", "查看"),
                                    h(
                                        "div",
                                        {
                                            slot: "content",
                                        },
                                        [
                                            h("Table", {
                                                props: {
                                                    data: data,
                                                    columns: columns,
                                                },
                                            }),
                                        ]
                                    ),
                                ]
                            ),
                        ]);
                    },
                },
                {
                    title: this.$t(300084),
                    key: "count",
                    render: (h, params) => {
                        return h("InputNumber", {
                            props: {
                                size: "small",
                                min: 0,
                                value: params.row.count,
                            },
                            on: {
                                "on-change": (e) => {
                                    this.processList[params.index][
                                        params.column.key
                                    ] = e;
                                    // this.updateData(id, val);
                                },
                            },
                        });
                    },
                },
                {
                    title: this.$t(8049),
                    key: "date",
                    render: (h, params) => {
                        return h("DatePicker", {
                            props: {
                                clearable: false,
                                value: params.row[params.column.key],
                                type: "date",
                                format: "yyyy-MM-dd",
                                size: "small",
                                transfer: true,
                            },
                            on: {
                                "on-change": (val) => {
                                    this.processList[params.index][
                                        params.column.key
                                    ] = val;
                                },
                            },
                        });
                    },
                },
            ],
            codeList: [],
            loading1: false,
            editState: false,
            machineList: [],
            order_number: "",
            pname: "",
            route: "",
            machineName: "",
            count: 0,
            date: "",
            editModal: false,
            routeid1: "",
            machineId1: "",
            machineList1: [],
        };
    },
    created() {
        this.iniproducts();
        this.inilines();
        // this.getMachine();

        this.search(1, 10);
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1);
    },
    methods: {
        iniproducts() {
            var params = {
                name: "",
                count: 50,
            };
            axios
                .request({
                    url: "/config/ProjectProduct/GetProductsByCode",
                    params,
                    method: "get",
                })
                .then((res) => {
                    this.products = res.data.data;
                });
        },
        // 获取工序
        inilines(id) {
            axios
                .request({
                    url: "/tlm/Technology/GetRoutes?productid=" + id,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.lines = res.data.data;
                    }
                });
        },
        getMachine() {
            this.request(
                "/tlm/Technology/GetTechMachine?product_id=" + this.productid + "&route=" + this.routeid1,
                "",
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.machineList = res.data.data;
                    this.machineList1 = res.data.data;
                }
            });
        },
        getLine(value) {
            if (value) {
                this.productname = value;
                this.inilines(this.productname);
                this.getMachine(value);
            } else {
                this.lines = [];
                this.machineList = []
            }
        },
        search(page, pagesize) {
            var data = {
                order_number: "",
                product_id: this.productname,
                machine_type: this.machineId,
                route: this.lineid,
                page: page,
                pagesize: pagesize,
            };
            axios
                .request({
                    url: "/tlm/ToolWorkorder/GetPagedList",
                    data,
                    method: "post",
                })
                .then((res) => {
                    this.total = res.data.total;
                    this.tableData1 = res.data.data;
                });
        },
        getTable(value) {
            if (value) {
                this.productid = value;

                this.inilines(value);
                this.getMachine(value);
                // this.getTechList();
            } else {
                this.lines = [];
                this.machineList1 = [];
                this.processList = [];
            }
        },
        getTable1(val) {
            if (val) {
                this.routeid1 = val;
                // this.getTechList();
                this.getMachine()
                this.machineId1 = '';
            }
        },
        getTable2(val) {
            if (val) {
                // console.log(val);
                this.machineId1 = val;
                this.getTechList();
            }
        },
        getTechList() {
            let data = {
                productid: this.productid,
                routeid: this.routeid1,
                machineid: this.machineId1,
            };
            this.request("/tlm/ToolWorkorder/GetTechList", data, "get").then(
                (res) => {
                    // console.log(res.data);
                    if (res.data.ret == 1) {
                        let arr = res.data.data;
                        // this.processList = arr;
                        this.renderModalTable(arr);
                    } else {
                        this.processList = [];
                    }
                }
            );
        },
        renderModalTable(arr = []) {
            let data = [];
            arr.forEach((item) => {
                if (item) {
                    item.count = 0;
                    item.date = "";
                    // data.push({
                    //     id: item.id,
                    //     machineName: item.machineType_name,
                    //     route: item.route,
                    //     toolNum: item.havetoollist,
                    //     count: 0,
                    //     date: "",
                    // });
                }
            });
            this.processList = arr;
            console.log(this.processList);
        },
        add() {
            this.productid = "";
            this.routeid1 = "";
            this.machineId1 = "";
            this.processList = [];
            this.addmodal = true;
        },
        closeadd() {
            this.addmodal = false;
            this.editModal = false;
        },
        addPost() {
            if (this.addworkOrder == "" || this.addproductid == "") {
                this.$Message.error(this.$t(9000136));
                return false;
            }
            let arr = [];

            this.processList.forEach((ele) => {
                let obj = {};
                if (ele.count > 0 && ele.date != "") {
                    obj.tool_code = ele.tool_code;
                    obj.count = ele.count;
                    obj.date = ele.date;
                    obj.technology_id = ele.id;
                    obj.order_number = this.addworkOrder;
                    arr.push(obj);
                }
            });

            if (arr.length == 0) {
                this.$Message.error(this.$t(8056));
                return false;
            }

            let data = {
                product_id: this.addproductid,
                workorders: arr,
            };
            //   console.log(data);
            // return false;
            this.request("/tlm/ToolWorkorder/AddRange", data, "post").then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.$Message.success(this.$t(1055));
                        this.addModal = false;
                        this.search(1, 10);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        editdata() {
            var data = {
                id: this.detailobj.id,
                count: this.count,
                date: this.date,
            };
            this.request("/tlm/ToolWorkorder/Edit", data, "post").then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.$Message.success(this.$t(1060));
                        this.detailobj = {};

                        this.editModal = false;
                        this.search(1, 10);
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        dele() {
            if (
                this.detailobj === undefined ||
                this.detailobj.id === undefined ||
                this.detailobj.id === 0
            ) {
                this.$Message.error(this.$t("1017"));
                return false;
            } else {
                // var data = {
                //   Id: this.detailobj.id,
                // };
                this.$Modal.confirm({
                    title: this.$t("1018"),
                    content: "",
                    width: "290px",
                    closable: true,
                    okText: this.$t("1004"),
                    onOk: () => {
                        let id = this.detailobj.id;
                        this.request(
                            "/tlm/ToolWorkorder/Delete?id=" + id,
                            "",
                            "post"
                        ).then((res) => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t("1058"));
                                this.detailobj = {};
                                this.search(1, 10);
                            } else {
                                this.$Message.error(this.$t(res.data.msg));
                            }
                        });
                    },
                });
            }
        },
        edit() {
            if (!this.detailobj.id) {
                this.$Message.error(this.$t(200231));
                return false;
            }

            this.type = 2;
            this.pname = this.detailobj.product_name;
            this.route = this.detailobj.route;
            this.machineName = this.detailobj.machineType_name;
            this.count = this.detailobj.count;
            this.date = this.detailobj.date;
            this.editModal = true;
        },

        handleRowChange(currentRow, oldCurrentRow) {
            // console.log(this.detailobj);
            // this.getData();
            this.detailobj = currentRow;
        },
        handlePageSize(value) {
            this.pagesize = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        changePage(value) {
            this.page = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        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.search(1, 10);
            } else {
                if ((res.msg + "").indexOf(",") != -1) {
                    inittip(res.msg);
                } else {
                    this.$Message.error(this.$t(res.msg));
                }
            }
        },
        handleError() {
            this.$Message.error(this.$t("2010006") + "!");
        },
        handleSelectRow: function (data) {
            var ids = [];
            for (var i in data) {
                ids.push(data[i].id);
            }
            this.selectids = ids.join(",");
        },
        loadexcel() {
            axios
                .request({
                    url: "/config/download/GetTemplate?name=ToollifeToolConfig",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        Export() {
            let data = {
                Page: this.page,
                Pagesize: this.pagesize,
                code: this.tool_number,
                ProjectId: 0,
            };
            axios
                .request({
                    url: "/tlm/ToolConfig/ExportProjectToollifeToolConfig",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        window.location.href =
                            axios.publicPath + "" + res.data.data;
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                });
        },
        unloadexcel() {
            let file = this.readyFiles[0];
            const data = new FormData();
            data.append("file", file);
            data.append("type", 2);
            axios
                .request({
                    url:
                        "/acc/Upload/UploadExcel?templateName=toollifetoolconfig",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.ret === 1) {
                        this.$Message.success(this.$t("100378"));
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch((err) => {
                    alert(err.msg);
                });
        },

        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);
            }
        },
    },
};
</script>
<style scoped>
#machine .ivu-input[disabled] {
    color: #515a6e !important;
}
.modalbody {
    padding: 25px;
    width: 630px;
    margin: 0 auto;
    /* display: flex; */

    /* width:800px; */
}
.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.m10 {
    margin: 10px auto;
}
.formItem {
    width: 270px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
</style>
