<template>
    <div>
        <div class="divborder">
            <div class="choose">
                <p class="selectTitle">
                    1.请选择生产线
                    <!-- <span class="red">*</span> -->
                </p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in productionLine"
                        @click="change(index)"
                        :class="{ active: a == index }"
                    >
                        {{ item.title }}
                    </p>
                </div>
                <div class="choose">
                    <p class="selectTitle">2.上下料工位</p>
                    <div class="row">
                        <div
                            :key="index"
                            class="options2"
                            v-for="(item, index) in stationList"
                            @click="change2(index)"
                            :class="{ active: b == index }"
                        >
                            <p>{{ item.title }}</p>
                            <p>
                                {{
                                    item.status == 1
                                        ? "待上料"
                                        : orderDetail.status == 2
                                        ? "运行中"
                                        : "待下料"
                                }}
                            </p>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <p class="selectTitle">3.操作</p>
                    <Tabs type="card" :value="tabindex">
                        <TabPane label="上料" :disabled="attr1" name="1">
                            <div class="filter">
                                <label style="font-size: 16px"
                                    >上料信息：</label
                                >
                                <Input
                                    type="text"
                                    class="searchInput"
                                    style="width: 300px"
                                    v-model="code"
                                    @on-keyup.enter="getWorkOrderInfo()"
                                />
                            </div>
                            <div class="row">
                                <p class="flex">
                                    <span class="infoLabel">工单信息：</span>
                                    <span class="info">{{
                                        orderDetail.orderNumber
                                    }}</span>
                                </p>
                                <p class="flex">
                                    <span class="infoLabel">产品编号：</span>
                                    <span class="info">{{
                                        orderDetail.productCode
                                    }}</span>
                                </p>
                                <p class="flex">
                                    <span class="infoLabel">产品名称：</span>
                                    <span class="info">{{
                                        orderDetail.productName
                                    }}</span>
                                </p>
                                <p class="flex">
                                    <span class="infoLabel">工件编号：</span>
                                    <span class="info">{{
                                        orderDetail.sn
                                    }}</span>
                                </p>
                            </div>
                            <div class="row">
                                <p class="flex">
                                    <span class="infoLabel">状态：</span>
                                    <span class="info">{{
                                        orderDetail.status == 1
                                            ? "待上料"
                                            : orderDetail.status == 2
                                            ? "运行中"
                                            : orderDetail.status == 3
                                            ? "待下料"
                                            : ""
                                    }}</span>
                                </p>
                                <p class="flex">
                                    <span class="infoLabel">储位编号：</span>
                                    <span class="info">{{
                                        orderDetail.location
                                    }}</span>
                                </p>
                                <p class="flex">
                                    <span class="infoLabel">工装编号：</span>
                                    <span class="info">{{
                                        orderDetail.fixtureGuid
                                    }}</span>
                                </p>

                                <Button type="primary" @click="modal = true"
                                    >储位选择</Button
                                >
                            </div>
                            <div class="flex">
                                <p class="infoLabel">产品图片：</p>
                                <div>
                                    <img
                                        :src="orderDetail.url
                                        "
                                        alt=""
                                        style="width: 100%"
                                    />
                                </div>
                            </div>
                            <div>
                                <Button type="primary" @click="feedReady()"
                                    >准备上料</Button
                                >
                                <Button type="primary" @click="installOver()"
                                    >安装完成</Button
                                >
                            </div>
                        </TabPane>
                        <TabPane label="下料" :disabled="attr2" name="2"
                            ><div class="flex">
                                <div>
                                    <Table
                                        class="tableClass"
                                        :data="data2"
                                        :columns="columns2"
                                        :max-height="200"
                                        style="width: 500px"
                                        highlight-row
                                        @on-current-change="handleRowChange1"
                                    ></Table>
                                </div>
                                <div>
                                    <div class="row">
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >工单信息：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.orderNumber
                                            }}</span>
                                        </p>
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >产品编号：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.productCode
                                            }}</span>
                                        </p>
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >产品名称：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.productName
                                            }}</span>
                                        </p>
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >工件编号：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.sn
                                            }}</span>
                                        </p>
                                    </div>
                                    <div class="row">
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >状态：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.status == 1
                                                    ? "待上料"
                                                    : orderDetail.status == 2
                                                    ? "运行中"
                                                    : orderDetail.status == 3
                                                    ? "待下料"
                                                    : ""
                                            }}</span>
                                        </p>
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >储位编号：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.location
                                            }}</span>
                                        </p>
                                        <p class="flex">
                                            <span class="infoLabel"
                                                >工装编号：</span
                                            >
                                            <span class="info">{{
                                                orderDetail.fixtureGuid
                                            }}</span>
                                        </p>
                                    </div>
                                    <div>
                                        <Button
                                            type="primary"
                                            @click="blankReady()"
                                            >准备下料</Button
                                        >
                                        <Button
                                            type="primary"
                                            @click="uninstallOver()"
                                            >拆卸完成</Button
                                        >
                                    </div>
                                </div>
                            </div></TabPane
                        >
                    </Tabs>
                    <Modal
                        class="newModalClass"
                        title="储位选择"
                        v-model="modal"
                        :styles="{ width: '700px' }"
                    >
                        <div class="modal_body" style="padding-right: 40px">
                            <Table
                                class="tableClass"
                                :data="data1"
                                :columns="columns1"
                                @on-current-change="handleRowChange"
                                highlight-row
                            ></Table>
                        </div>
                        <div slot="footer">
                            <Button
                                type="text"
                                size="large"
                                @click="modal = false"
                                v-text="$t('1033')"
                                >取消</Button
                            >
                            <Button
                                type="primary"
                                size="large"
                                v-text="$t('1011')"
                                @click="modal = false"
                                >提交</Button
                            >
                        </div>
                    </Modal>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            productionLine: [],
            stationList: [],
            a: -1,
            b: -1,
            attr1: false, //上料、下料、上下料
            attr2: false, //上料、下料、上下料
            modal: false,
            code: "", //工令单
            columns1: [
                {
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h("span", params.index + 1);
                    },
                    width: 70,
                },
                {
                    title: "仓库",
                    key: "wavehouse",
                },
                {
                    title: "储位编号",
                    key: "locationcode",
                },
                {
                    title: "工装编号",
                    key: "code",
                },
                {
                    title: "工件编号",
                    key: "materialsn",
                },
            ],
            data1: [],
            columns2: [
                {
                    title: this.$t("1008"),
                    key: "xuhao",
                    render: (h, params) => {
                        return h("span", params.index + 1);
                    },
                    width: 70,
                },
                {
                    title: "储位编号",
                    key: "locationcode",
                },
                {
                    title: "工装编号",
                    key: "code",
                },
                {
                    title: "工件编号",
                    key: "materialsn",
                },
            ],
            data2: [],
            orderDetail: {},
            detailobj: {},
            sectionid: 0,
            tabindex: "1",
            locationobj:{}
        };
    },
    created() {
        this.getProLine();
        this.getStorages();
    },
    mounted() {
        // this.getStations()
    },
    methods: {
        // 获取生产线
        getProLine() {
            this.axios
                .request({
                    url: "/qms/RepairPostionSetting/GetChanel",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.productionLine = res.data.data;
                        // this.change(0);
                        if (this.productionLine.length == 0) {
                            this.$Message.error(this.$t(950057));
                        }
                    }
                });
        },
        getStations(id) {
            let data = {
                line: id,
                type: 0,
            };
            this.request(
                "/acc/AutomationOperate/GetloadStation",
                data,
                "get"
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.stationList = res.data.data;
                }
            });
        },
        change(i) {
            this.a = i;
            this.getStations(this.productionLine[i].id);
        },
        change2(index) {
            this.b = index;
            let status = this.stationList[index].status;
            this.sectionid = this.stationList[index].section;
            // if (status == 3) {
            //     this.attr1 = true;
            //     this.tabindex = "2";
            this.getRunningDetail(index);
            // }
            // else {
            //     this.attr2 = true;
            // }
            // if (status == 2) {
            //     this.getRunningDetail(index);
            // }
        },
        //获取储位
        getStorages() {
            this.request("/acc/AutomationLocation/GetLocationList?fillsn=1", "", "get")
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.data1 = res.data.data;
                        this.data2 = res.data.data;
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        // 获取工单信息
        getWorkOrderInfo() {
            let data = {
                code: this.code,
            };

            this.request("/acc/AutomationOperate/ScanCode", data, "get")
                .then((res) => {
                    if (res.data.ret == 1) {
                        let obj = res.data.data;
                        if(obj.url == null || obj.url=='' || obj.url ==undefined){
                            obj.url = ''
                        }else{
                            obj.url = this.axios.publicPath +obj.url;
                        }
                        this.orderDetail = Object.assign(
                            {},
                            this.orderDetail,
                            obj
                        );
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                        this.orderDetail = {};
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getRunningDetail(i) {
            // /acc/AutomationOperate/GetLoadingState?section=4861
            // 获取已上料的信息
            this.request(
                "/acc/AutomationOperate/GetLoadingState?section=" +
                    this.stationList[i].section,
                "",
                "get"
            )
                .then((res) => {
                    if (res.data.ret == 1) {
                        let obj = res.data.data;
                        this.orderDetail = Object.assign(
                            {},
                            this.orderDetail,
                            obj
                        );
                    } else {
                        this.$Message.error(this.$t(res.data, msg));
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        feedReady() {
            // 准备上料
            if (this.sectionid == 0) {
                this.$Message.error("请选择工位");
                return false;
            }
            let data = {
                section: this.sectionid,
                code: this.orderDetail.orderNumber,
                guid: this.orderDetail.fixtureGuid,
                locationid: this.orderDetail.location,
            };
            this.request("/acc/AutomationOperate/Loading", data, "post").then(
                (res) => {
                    if (res.data.ret == 1) {
                        console.log(res.data.data);
                        this.$Message.success(this.$t(res.data.msg));
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        installOver() {
            // 安装完成
            if (this.sectionid == 0) {
                this.$Message.error("请选择工位");
                return false;
            }
            let data = {
                section: this.sectionid,
            };
            this.request(
                "/acc/AutomationOperate/CompalateAssemble",
                data,
                "post"
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(res.data.msg));
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        blankReady() {
            // 准备下料
            if (this.sectionid == 0) {
                this.$Message.error("请选择工位");
                return false;
            }
            if (!this.locationobj.id) {
               this.$Message.error("请选择储位");
                return false; 
            }
            let data = {
                section: this.sectionid,
                id:this.locationobj.id,
            };
            this.request("/acc/AutomationOperate/Unloading", data, "post").then(
                (res) => {
                    if (res.data.ret == 1) {
                        this.$Message.success(this.$t(res.data.msg));
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                }
            );
        },
        uninstallOver() {
            // 拆卸完成
            if (this.sectionid == 0) {
                this.$Message.error("请选择工位");
                return false;
            }
            let data = {
                section: this.sectionid,
            };
            this.request(
                "/acc/AutomationOperate/Disassemble",
                data,
                "post"
            ).then((res) => {
                if (res.data.ret == 1) {
                    this.$Message.success(this.$t(res.data.msg));
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            });
        },
        handleRowChange(currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
            this.orderDetail.fixtureGuid = this.detailobj.fixtureguid;
            this.orderDetail.location = this.detailobj.locationid;
        },
        handleRowChange1(currentRow, oldCurrentRow) {
            console.log(currentRow);
            this.locationobj = currentRow;
            this.orderDetail.fixtureGuid = this.detailobj.fixtureguid;  
            this.orderDetail.location = this.detailobj.locationid;
            if(this.locationobj.id){
                this.request("/acc/AutomationOperate/ScanCode?id="+this.locationobj.id, '', "get")
                .then((res) => {
                    if (res.data.ret == 1) {
                        let obj = res.data.data;
                        this.orderDetail = Object.assign(
                            {},
                            this.orderDetail,
                            obj
                        );
                    } else {
                        this.$Message.error(this.$t(res.data.msg));
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
            }
        },
        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>
.selectTitle {
    font-size: 18px;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 1;
}
.options {
    font-size: 12px;
    padding: 0 12px;
    /* width: 100px; */
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    background-color: #f2f2f2;
    margin: 10px 0;
    margin-right: 50px;
    cursor: pointer;
}
.options2 {
    font-size: 12px;
    padding: 0 12px;
    height: 50px;
    line-height: 25px;
    text-align: center;
    border-radius: 5px;
    background-color: #f2f2f2;
    margin: 10px 0;
    margin-right: 50px;
    cursor: pointer;
}
.active {
    background-color: #2d8cf0;
    color: #fff;
}
.actionTitle {
    height: 50px;
    width: 100px;
    line-height: 50px;
    font-size: 25px;
    text-align: center;
    /* border: 1px solid #b2b2b2; */
    /* color: #c0c0c0; */
}
.flex {
    display: flex;
}
.infoLabel {
    display: inline-block;
    margin-right: 10px;
    width: 100px;
    text-align: right;
    font-size: 16px;
}
.info {
    display: inline-block;
    width: 200px;
    font-size: 16px;
}
.ivu-btn {
    margin: 10px;
}
.m010 {
    margin: 0 10px;
}
</style>