<template>
    <div class="entryWrap" id="entry">
        <div class="expand" id="full" @click="handleFullScreen">
            <Icon type="md-expand" size="50" />
        </div>
        <div class="entryItem">
            <div class="choose">
                <p class="selectTitle">
                    1.{{ $t(90000016) }}
                    <span class="red">*</span>
                </p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in passageList"
                        @click="change(index)"
                        :class="{ active: a == index }"
                    >
                        {{ item.title }}
                    </p>
                </div>
            </div>
            <div class="choose">
                <p class="selectTitle">
                    2.{{ $t("1052") }}
                    <span class="red">*</span>
                    ({{ $t("1220") }})
                </p>
                <div class="row">
                    <p
                        class="options"
                        :key="index"
                        v-for="(item, index) in stationList"
                        @click="change1(index)"
                        :class="{ active: b == index }"
                    >
                        {{ item.item }}
                    </p>
                </div>
            </div>
        </div>
        <div class="entryItem">
            <div class="choose">
                <p class="selectTitle">
                    3.{{ $t("100217") }}
                    <span class="red">*</span>
                </p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in productList"
                        @click="change2(index)"
                        :class="{ active: c == index }"
                    >
                        {{ item.productName }}
                    </p>
                </div>
            </div>
            <div class="choose">
                <p class="selectTitle">4.{{ $t(1950603) }}</p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in materialList"
                        @click="change3(index)"
                        :class="{ active: d == index && must == true }"
                    >
                        {{ item.name + "【" + item.pn + "】" }}
                    </p>
                </div>
            </div>
        </div>
        <div class="entryItem">
            <div class="choose">
                <p class="selectTitle">5.{{ $t(90000048) }}</p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in projectList"
                        @click="change4(index)"
                        :class="{ active: e == index && pmust == true }"
                    >
                        {{ item.item }}
                    </p>
                </div>
            </div>
        </div>
        <div class="entryItem">
            <div class="choose">
                <p class="selectTitle">6.{{ $t(5500006) }}</p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in referType"
                        @click="change5(index)"
                        :class="{ active: f == index && tmust == true }"
                    >
                        {{ item.name }}
                    </p>
                </div>
            </div>
        </div>
        <div class="entryItem">
            <div class="choose">
                <p class="selectTitle">7.{{ $t(5500005) }}</p>
                <div class="row">
                    <p
                        :key="index"
                        class="options"
                        v-for="(item, index) in reference"
                        @click="change6(index)"
                        :class="{ active: g == index && rmust == true }"
                    >
                        {{ item.remark }}
                    </p>
                </div>
            </div>
        </div>
        <div class="entryItem">
            <div class="choose">
                <p class="selectTitle">8.{{ $t(90000049) }}</p>
                <div class="row">
                    <div class="number row">
                        <p class="minus" @click="reduce">-</p>
                        <input type="text" class="digit" v-model="number" />
                        <p class="plus" @click="add">+</p>
                    </div>
                    <input
                        class="erweima"
                        type="text"
                        v-model="qrcode"
                        @keyup.enter="save()"
                    />
                </div>
            </div>
        </div>
        <div class="entryItem pr">
            <!-- <div class="tip" v-show="tip==true">提示：返工{{successnum}}个工件成功!</div> -->
            <div class="tip" v-html="showMsg"></div>
            <button class="save" @click="save" v-text="$t(900306)">保存</button>
        </div>
    </div>
</template>

<script>
import axios from "@/libs/api.request";

export default {
    data() {
        return {
            passageList: ["CH3.3", "CH3.3fsgfdgd", "CH3.3", "CH3.3", "CH3.3"],
            stationList: [],
            productList: [],
            materialList: [],
            projectList: [],
            referType: [], // 原因类别
            reference: [], // 原因明细
            passage: 0, // 通道
            station: 0, // 工位
            nextId: 0,
            product: 0, // 产品
            material: 0, // 物料
            project: 0, // 不良项目
            typeid: 0,
            reason: "",
            number: 0, // 返工数量
            qrcode: "", // 二维码
            settingId: 0, // 返工设置ID
            a: 0,
            b: 0,
            c: 0,
            d: -1,
            e: -1,
            f: -1,
            g: -1,
            tip: false,
            fullscreen: false,
            must: false,
            pmust: false,
            tmust: false,
            rmust: false,
            successnum: 1,
            arr: [],
            arr2: [],
            arr3: [],
            array: [],
            showMsg: "",
        };
    },
    created() {
        this.init();
        this.loadReferType();
        // this.change(0);
    },
    methods: {
        init() {
            axios
                .request({
                    url: "/qms/RepairPostionSetting/GetChanel",
                    method: "get",
                })
                .then((res) => {
                    this.passageList = res.data.data;
                    this.change(0);
                    if (this.passageList.length == 0) {
                        this.$Message.error(this.$t(950057));
                    }
                });
        },
        initData() {
            this.station = 0;
            this.product = 0;
            this.material = 0;
            this.project = 0;
            this.number = 0;
            this.must = false;
            this.pmust = false;
            this.tip = false;
        },
        // 选择通道
        change(i) {
            this.a = i;
            this.initData();
            this.passage = this.passageList[i].id;
            this.tip = false;

            // 根据通道选择工位产品
            axios
                .request({
                    url:
                        "/qms/RepairPostionSetting/GetSettingByChanel?Id=" +
                        this.passage,
                    method: "get",
                })
                .then((res) => {
                    // console.log(res.data.data);
                    this.stationList = res.data.data;
                    if (this.stationList.length > 0) {
                        this.station = this.stationList[0].id;
                        this.nextId = this.stationList[0].nextId;
                        this.settingId = this.stationList[0].settingId;
                        this.change1(0);
                    }
                });
        },
        // 选择工位
        change1(i) {
            this.tip = false;
            this.material = 0;
            this.project = 0;
            this.must = false;
            this.pmust = false;
            this.b = i;
            this.station = this.stationList[i].id;
            this.nextId = this.stationList[i].nextId;
            this.settingId = this.stationList[i].settingId;
            // 获得产品数据
            axios
                .request({
                    url:
                        "/qms/InspectStandard/GetOQCItemProduct?sectionId=" +
                        this.station,
                    method: "get",
                })
                .then((res) => {
                    this.productList = res.data.data;
                    if (this.productList.length > 0) {
                        this.change2(0);
                    } else {
                        this.materialList = [];
                        this.projectList = [];
                    }
                    // setTimeout(() => {
                    // this.product = this.productList[0].productId;
                    // }, 100);
                });
            // 根据产品选择物料
            var params = {
                productId: this.product,
                section: this.station,
            };
            if (this.productList.length > 0) {
                axios
                    .request({
                        url: "/qms/ManufacturingMaterial/GetMaterialByCell",
                        params,
                        method: "get",
                    })
                    .then((res) => {
                        if (res.data.ret === 1) {
                            this.materialList = res.data.data;
                        }
                    });
            }
            if (this.productList.length > 0 && this.stationList.length > 0) {
                axios
                    .request({
                        url:
                            "/qms/InspectStandard/GetItems?productid=" +
                            this.product +
                            "&sectionid=" +
                            this.station,
                        method: "get",
                    })
                    .then((res) => {
                        this.projectList = res.data.data;

                        // this.project = this.projectList[0].id;
                        // console.log(this.$t(x))
                    });
            }
        },
        // 选择产品
        change2(i) {
            this.project = 0;
            this.material = 0;
            this.must = false;
            this.pmust = false;
            this.product = this.productList[i].productId;
            this.c = i;
            // 根据产品选择物料
            var params = {
                productId: this.productList[i].productId,
                section: this.station,
            };
            axios
                .request({
                    url: "/qms/ManufacturingMaterial/GetMaterialByCell",
                    params,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret == 1 && res.data.data.length > 0) {
                        this.materialList = res.data.data;
                        this.material = this.materialList[0].id;
                    } else {
                        this.materialList = [];
                        this.material = 0;
                    }
                });
            // 根据工位+产品选择项目
            axios
                .request({
                    url:
                        "/qms/InspectStandard/GetItems?productid=" +
                        this.product +
                        "&sectionid=" +
                        this.station,
                    method: "get",
                })
                .then((res) => {
                    this.projectList = res.data.data;
                    // console.log(this.$t(x))
                });
        },
        // 选择物料
        change3(i) {
            this.tip = false;
            // this.must = true;
            // this.d = i;
            // this.material = this.materialList[i].id;
            let arrIndex = this.arr.indexOf(i);

            if (arrIndex > -1) {
                this.arr = [];
                this.must = false;
                this.d = -1;
                this.material = 0;
            } else {
                this.arr = [];
                this.d = -1;
                this.arr.push(i);
                this.must = true;
                this.d = i;
                this.material = this.materialList[i].id;
            }
            // console.log(this.arr);
        },

        // 选择不良项目
        change4(i) {
            this.tip = false;

            let arrIndex = this.arr2.indexOf(i);
            if (arrIndex > -1) {
                this.arr2 = [];
                this.pmust = true;
                this.e = -1;
                this.project = 0;
            } else {
                this.arr2 = [];
                this.e = -1;
                this.arr2.push(i);
                this.pmust = true;
                this.e = i;
                this.project = this.projectList[i].id;
            }
        },
        // 选择返工类型
        change5(i) {
            this.tip = false;
            let arrIndex = this.arr3.indexOf(i);

            if (arrIndex > -1) {
                this.arr3 = [];
                this.tmust = true;
                this.f = -1;
                this.remark = "";
                this.reasonList = [];
            } else {
                this.arr3 = [];
                this.f = -1;
                this.arr3.push(i);
                this.tmust = true;
                this.f = i;
                this.typeid = this.referType[i].id;
                this.loadRefer();
            }
        },
        // 选择返工原因
        change6(i) {
            let arrIndex = this.array.indexOf(i);

            if (arrIndex > -1) {
                this.array = [];
                this.rmust = false;
                this.g = -1;
                this.reason = "";
            } else {
                this.array = [];
                this.g = -1;
                this.array.push(i);
                this.rmust = true;
                this.g = i;
                this.reason = this.reference[i].remark;
            }
            // console.log(this.reason);
        },
        reduce() {
            this.tip = false;

            if (this.number > 1) {
                this.number--;
            } else {
                this.number = 1;
            }
        },
        add() {
            this.tip = false;
            this.number++;
        },
        save() {
            if (this.number < 1) {
                //  window_warning('返工数量不能小于1')
                this.showMsg = this.$t(930026) + this.$t(930058);
                return false;
            }
            this.successnum = this.number;
            if (this.passage == 0) {
                // this.$Message.error('请选择通道')
                this.showMsg = this.$t(930026) + this.$t(90000016);
                return false;
            }
            if (this.station == 0 || this.settingId == 0) {
                // this.$Message.error('请选择工位')
                this.showMsg = this.$t(930026) + this.$t(1052);
                return false;
            }
            if (this.product == 0) {
                // this.$Message.error(this.$t(100217))
                this.showMsg = this.$t(930026) + this.$t(100217);
                return false;
            }
            let data = {
                Sn: this.qrcode,
                ProductId: this.product,
                Materail: this.material,
                SectionId: this.station,
                PreRoute: 0,
                Route: this.nextId,
                SnType: 0,
                QID: this.project,
                Remark: this.reason,
                Count: this.number,
                SettingId: this.settingId,
            };
            axios
                .request({
                    url: "/qms/RepairData/AddRepair",
                    data,
                    method: "post",
                })
                .then((res) => {
                    if (res.data.ret == 1) {
                        this.tip = true;
                        this.number = 0;
                        this.qrcode = "";
                        this.showMsg =
                            this.$t(930059) + this.successnum + this.$t(930060);
                    }
                    // 成功后显示提示
                });
        },
        // 全屏事件
        handleFullScreen() {
            let element = document.getElementById("entry");
            // 判断是否已经是全屏
            // 如果是全屏，退出
            if (this.fullscreen) {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                // 否则，进入全屏
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
            // 改变当前全屏状态
            this.fullscreen = !this.fullscreen;
        },
        submitqr() {
            if (this.qrcode == "") {
                this.$Message.error(this.$t(9000436));
            } else {
                axios
                    .request({
                        url:
                            "'/qms/RepairData/GetProductRoute?sn=" +
                            this.qrcode,
                        method: "post",
                    })
                    .then((res) => {
                        if (res.data.ret == 1) {
                            this.save();
                        }
                        // 成功后显示提示
                        this.tip = true;
                    });
            }
        },
        loadReferType() {
            axios
                .request({
                    url: "/qms/ReworkReferenceType/GetItem?type=1",
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.referType = res.data.data;
                    } else {
                        console.log(this.$t(res.data.msg));
                    }
                });
        },
        loadRefer() {
            axios
                .request({
                    url:
                        "/qms/ReworkReference/GetItem?type=1&referType=" +
                        this.typeid,
                    method: "get",
                })
                .then((res) => {
                    if (res.data.ret === 1) {
                        this.reference = res.data.data;
                    } else {
                        this.reference = [];
                        console.log(this.$t(res.data.msg));
                    }
                });
        },
    },
};
</script>

<style scoped>
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-shrink: 1;
}
.entryWrap {
    position: relative;
    background-color: #f5f7f9;
    overflow-y: auto;
    overflow-x: hidden;
}
.expand {
    position: absolute;
    top: 10px;
    right: 10px;
    /* left: 95%; */
}
.entryItem {
    background-color: #fff;
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
}
.selectTitle {
    font-size: 18px;
}
.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;
}
.active {
    background-color: #2d8cf0;
    color: #fff;
}
.number {
    margin: 10px 55px 10px 0;
}
.minus {
    width: 55px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background-color: #2d8cf0;
    border-radius: 5px;
    cursor: pointer;
}
.plus {
    width: 55px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    text-align: center;
    color: #fff;
    background-color: #2d8cf0;
    border-radius: 5px;
    cursor: pointer;
}
.digit {
    display: block;
    outline: none;
    width: 180px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #d8d8d8;
    background-color: #f4f7f9;
    margin: 0 5px;
    color: #000;
}
.erweima {
    display: block;
    outline: none;
    width: 582px;
    height: 42px;
    line-height: 42px;
    font-size: 20px;
    color: #000;
    text-align: center;
    border: 1px solid #d8d8d8;
    margin: 10px 0;
    background-color: #f4f7f9;
}

.save {
    width: 95px;
    height: 55px;
    background-color: #2d8cf0;
    color: #fff;
    line-height: 55px;
    text-align: center;
    font-size: 20px;
    /* cursor: pointer; */
    outline: none;
    border: none;
    border-radius: 10px;
    /* position: absolute;
  right: 20px; */
    margin-left: 90%;
}
.pr {
    position: relative;
    height: 80px;
}
.tip {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    /* border: 1px solid #d2d2d2; */
    border-radius: 5px;
    color: red;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}
.red {
    color: red;
}
</style>
