<template>
    <div class="checkOperation">

        <div>
            <div class="carousel-page">
                <div class="carousel-page-content">
                    <div
                        class="img-box"
                        style="width: 35%;"
                    >
                        <ul>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    位置:
                                </span>
                                <span class="img-box-value">
                                    {{streetName}}-{{direction==1?"左":"右"}}-{{side==1?"浅":"深"}}-{{checkObj.column}}列-{{checkObj.row}}层
                                </span>
                            </li>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    核对状态:
                                </span>
                                <span class="img-box-value">
                                    {{ statusMap[checkObj.status] }}
                                </span>
                            </li>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    品规:
                                </span>
                                <span class="img-box-value">

                                    <a-select
                                        ref="select"
                                        style="width: 100%"
                                        show-search
                                       
                                        :value="checkObj.category"
                                        @change="handleChangeVlue"
                                    >
                                        <a-select-option
                                            v-for="(value, key) in categorys"
                                            :key="value"
                                            :value="key"
                                        >
                                            {{ key}}
                                        </a-select-option>
                                    </a-select>
                                </span>
                            </li>
                            <li class="img-box-item">
                                <span class="img-box-title">
                                    上位品规:
                                </span>
                                <span class="img-box-value">
                                    {{checkObj.wmsCategory}}{{checkObj.wmsCategoryName!="" && checkObj.wmsCategoryName!=null ?"-"+checkObj.wmsCategoryName:""}}
                                </span>
                            </li>
                            <!-- <li class="img-box-item">
                                <span class="img-box-title">
                                    个数:
                                </span>
                                <span class="img-box-value">
                                    <a-input-number
                                        id="inputNumber"
                                        style="width: 100%"
                                        v-model="checkObj.count"
                                        :min="0"
                                        :max="50"
                                    />

                                </span>
                            </li> -->
                            <li
                                class="img-box-item"
                                v-for="item in params"
                                :key="item.label"
                            >

                                <span class="img-box-title">
                                    {{ item.label }}:
                                </span>
                                <span class="img-box-value">
                                    {{ checkObj[item.key] }}
                                </span>
                            </li>
                        </ul>
                    </div>
                    
                    <div
                        class="img-box"
                        style="width: 40%;"
                    >
                        <div class="carousel-wrapper">

                            <div
                            
                                :key="ite"
                                style="float:left;height:100%; width:100% ;display: flex; "
                            >

                            <viewer  :images="actionUrl">
                                <img
                                    style="height:100%; width:100% ;"
                                    :src="actionUrl"
                                >
                </viewer>
                            </div>
                            
                        </div>
                        <span>随行图像</span>
                       
                    </div>

                    <div
                        class="img-box"
                        style="width: 40%;"
                    >
                        <div class="carousel-wrapper">

                            <div
                                v-for="ite in checkPics"
                                :key="ite"
                                style="float:left;height:100%; width:100% ;display: flex; "
                            >

                            <viewer  :images="checkPics">
                                <img
                                    style="height:100%; width:100% ;"
                                    :src="ite"
                                >
                </viewer>
                            </div>
                            
                        </div>
                        <span>盘点图像</span>

                       
                    </div>

                </div>
            </div>
            <div class="bottom-btn">
                <a-button
                    class="btn"
                    type="primary"
                    style="background:#29c12b;border-color:#29c12b;"
                    @click="checkSure(checkObj.row,checkObj.column,checkObj.shelveId,index)"
                >核对正确
                </a-button>
                <!-- <a-button
                    v-if="pcd!='' && pcd!=null"
                    class="btn"
                    type="primary"
                    style="background:#29c12b;border-color:#29c12b;"
                    @click="get3D()"
                >
                    <a-modal
                        width="1005px"
                        v-model="visible"
                        title="3D点云信息"
                        @ok="handleOk"
                    >
                        <pointCloud :src.sync="pcd"></pointCloud>
                    </a-modal>

                    3D点云信息
                </a-button> -->

                <!-- <a-button
                    class="btn"
                    type="primary"
                    style="background:#29c12b;border-color:#29c12b;"
                    @click="getOveroperationPic()"
                >
                    <a-modal
                        v-drag
                        width="600px"
                        v-model="visible_pic"
                        title="随行图像"
                        style="top: 20px;"
                        @ok="overoperationPicStop"
                    >
                    <template #footer>
        <a-button key="footer" type="primary" :loading="loading" @click="overoperationPicStop">确定</a-button>
      </template>
                        <div
                            style="height: 700px;"
                            class="parent"
                        >

                            <img
                                style="width:700px ;"
                                :src="checkPics[0].substring(0, str.length - 4)"
                            >
                        </div>
                    </a-modal>

                    随行图像
                </a-button> -->
                <!-- <a-button
                    class="btn"
                    type="primary"
                    style="background:#29c12b;border-color:#29c12b;"
                    @click="nextOne(checkObj.id)"
                >
                    下一个盘点
                </a-button> -->
            </div>

        </div>

    </div>
</template>
<script>
import Model from "./model.vue";
import { imgUrl } from "@/api/importExcel";
import { message } from "ant-design-vue";
import pointCloud from "../3DPointCloud/pointCloud.vue";

export default {
    data() {
        return {
            checkPics: [],
            upUrl: "",
            checkObj: {},
            row: 1,
            pcd: "15555",
            column: 1,
            streetName: "",
            visible: false,
            visible_pic3d: false,
            visible_pic: false,
            category: "",
            count: 0,
            modelData: {},
            index: 0,
            imgUrl: "",
            actionUrl: "",
            categorys: {},
            params: [
                {
                    label: "个数",
                    key: "count",
                },
                // {
                //     label: "上位品规",
                //     key: "wmsCategory",
                // },
                //{
                //    label: "上位品规名",
                //    key: "wmsCategoryName",
                //},
                {
                    label: "盘点任务号",
                    key: "checkNum",
                },
                {
                    label: "盘点时间",
                    key: "exportTime",
                },
            ],
            statusMap: {
                0: "未盘点",
                1: "盘点异常",
                2: "核对正确",
                3: "人工核对正确",
                4: "空托盘",
            },
        };
    },
    beforeRouteLeave(to, form, next) {
        // 修复第二次进入界面不执行created
        this.$destroy();
        if (to.name == "checkManage") {
            to.meta.isUseCache = true;
        } else {
            to.meta.isUseCache = false;
        }
        next();
    },
    created() {
        this.imgUrl = imgUrl;

        //this.getStreetList();
        if (
            this.$route.query.row &&
            this.$route.query.column &&
            this.$route.query.direction &&
            this.$route.query.side &&
            this.$route.query.streetId
        ) {
            this.id = this.$route.query.id;
            this.row = this.$route.query.row;
            this.column = this.$route.query.column;
            this.direction = this.$route.query.direction;
            this.side = this.$route.query.side;
            this.streetId = this.$route.query.streetId;
            this.streetName = this.$route.query.name;

            this.getStockInfo(this.row, this.column);
            this.getCategoryList();
        }
    },
    mounted() {},
    destroyed() {},
    components: {
        Model,
        pointCloud,
    },
    methods: {
        handleChangeVlue(value) {
            this.checkObj.category = value;
        },
        get3D() {
            this.visible = true;
        },
        getOveroperationPic() {
            this.visible_pic = true;
        },
        overoperationPicStop() {
            this.visible_pic = false;
        },

        
        getOveroperationPic3d() {
            this.visible_pic3d = true;
        },
        overoperationPicStop3d() {
            this.visible_pic3d = false;
        },
        handleOk() {
            this.visible = false;
        },
        //获取复核页面的核对信息
        getStockInfo(row, column) {
            this.$api.httpApi
                .getStockInfo({
                    data: {
                        row: Number(row),
                        column: Number(column),
                        direction: this.direction,
                        side: this.side,
                        streetId: this.streetId,
                    },
                })
                .then((res) => {
                    if (res.data) {
                        this.checkObj = res.data;
                        var pic = this.checkObj.checkPic;
                        this.checkPics = pic.toString().split(";");
                        this.actionUrl = pic.slice(0, -8);
                        this.pcd = res.data.pcd;
                        this.$forceUpdate();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        //获取复核页面的核对信息
        getCategoryList() {
            this.$api.httpApi
                .getCategoryList({
                    data: {},
                })
                .then((res) => {
                    if (res.data) {
                        this.categorys = res.data;
                        console.log(this.categorys);
                        //this.shelveId = res.data.shelveId;
                        //this.getScanAndCheck();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        handleChange(value) {
            this.select = value;
            this.id = value;
            this.row = 1;
            this.column = 1;
            this.getStockInfo(1, 1);
        },

        checkSure(row, column, shelveId, index) {
            this.$api.httpApi
                .stockCheckCorrect({
                    data: {
                        row: Number(row),
                        column: Number(column),
                        side: Number(this.side),
                        streetId: Number(this.streetId),
                        direction: Number(this.direction),
                        count: this.checkObj.count,
                        category: this.checkObj.category,
                        ok: 1,
                    },
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.getStockInfo(this.row, this.column);
                    }
                })
                .catch((err) => {});
        },
        checkfalse(row, column, shelveId, index) {
            this.$api.httpApi
                .stockCheckCorrectErr({
                    data: {
                        row: Number(row),
                        column: Number(column),
                        side: Number(this.side),
                        streetId: Number(this.streetId),
                        direction: Number(this.direction),
                        ok: 0,
                    },
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.$message.success("操作成功");
                        this.getStockInfo(this.row, this.column);
                    }
                })
                .catch((err) => {});
        },
        showModel(checkObj, index) {
            this.visible = true;
            this.modelData = checkObj;
            this.index = index;
        },
        submit(visible, index) {
            this.visible = visible;
            console.log(index);
            // this.next(index);
            this.checkObj.status = 1;
        },
        closeModel(visible, data) {
            this.visible = visible;
            this.modelData = data;
        },
        nextOne(id) {
            this.$api.httpApi
                .nextOne({
                    data: {
                        id: Number(id),
                    },
                })
                .then((res) => {
                    if (res.data && res.data != null) {
                        console.log(res.data);
                        this.checkObj = res.data;
                        this.id = res.data.id;
                        this.row = res.data.row;
                        this.column = res.data.column;
                        this.direction = res.data.direction;
                        this.side = res.data.side;
                        this.streetId = res.data.streetId;
                        this.streetName = res.data.streetName;
                        var pic = this.checkObj.checkPic;

                        this.checkPics = pic.toString().split(";");

                        this.actionUrl = pic.slice(0, -4);
                        console.log(this.checkPics);
                        this.$forceUpdate();
                    } else {
                        message.info("全部盘点已完成");
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>
<style lang="scss">
/* For demo */

.carousel-wrapper {
    overflow: hidden;
    align-items: center; 
    width: 100%;
    height: 70%;
    display: flex;
}

.ant-carousel .slick-list {
    margin: 0 -8px;
}

.ant-carousel .slick-slide {
    padding: 0 8px;
}

.checkOperation {
    .carousel-page {
        width: 100%;
        /*border: solid 1px blue;*/
        &-title {
            color: #009fe3;
            font-size: 16px;
            margin: 0;
            padding: 15px 0 10px 25px;
        }

        &-content {
            display: flex;
            align-items: center;
            padding-left: 20px;

            .img-box {
                display: flex;
                padding: 50px;
                margin-right: 56px;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                font-size: 17px;
                height: 700px;
                margin-right: 10px;
                img {
                    height: 100%;
                }

                p {
                    height: 25px;
                }
                ul {
                    width: 100%;
                    height: 100%;
                    margin-bottom: 0;
                    padding-inline-start: 0;
                    .img-box-item {
                        background-color: #ffaf11;
                        margin: 10px 0;
                        padding: 5px;
                        font-size: 16px;
                        font-weight: 600;
                        color: #494e52;
                        .img-box-title {
                            width: 30%;
                            display: inline-block;
                        }
                        .img-box-value {
                            display: inline-block;
                            width: calc(100% - 130px);
                            overflow: hidden;
                            width: 70%;
                            position: relative;
                            top: 5px;
                        }
                    }
                }
            }
        }

        &-footer {
            width: calc(100% - 380px);
            .info-box {
                color: #000000;
                display: flex;
                align-items: center;
                justify-content: center;

                p {
                    padding: 0 20px;
                    font-size: 18px;
                }
            }

            .status {
                text-align: center;
                font-size: 21px;
            }

            .status-btn {
                display: flex;
                align-items: flex-start;
                justify-content: flex-start;

                .btn {
                    padding: 50px;
                    font-size: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 0;
                    margin: 15px 45px;
                }
            }
        }
    }

    .bottom-btn {
        width: 100%;
        display: flex;
        align-items: right;
        justify-content: center;

        p {
            font-size: 18px;
            padding: 0;
            margin: 0;
        }

        .btn {
            margin: 25px;
        }
    }
}
.historyImg {
    width: 180px;
    height: auto;
}

img {
    transform: rotate(270deg);
}

.parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
.carousel-box {
    text-align: center;
    background: #364d79;
    height: 100%;
    overflow: hidden;
    li {
        background-color: #ffffff;
    }
}
</style>
