<template>
    <div class="container">
        <div class="title_top">
            <div class="title_name" @click="handleHome">
                {{ this.$dictLabel('node_title7') }}
            </div>
        </div>

        <leftNav selNavId="1" />

        <div class="text_gradual title"> {{ this.$dictLabel('node_sub_title4') }} </div>
        <div class="li_item" @click="handleClick(1)">
            <div class="li_item_inner">
                <img src="@/assets/bigScreen/task/icon_1.png" alt="">
                <span class="text_gradual">{{ this.$dictLabel('node_sub_title5') }} </span>
            </div>
        </div>
        <div :class="{ li_item: true, sel_item: selTab==2 }" @click="handleClick(2)">
            <div class="li_item_inner">
                <img src="@/assets/bigScreen/task/icon_2.png" alt="">
                <span class="text_gradual">{{ this.$dictLabel('node_sub_title6') }} </span>
            </div>
            <div class="popup_box" v-if="selTab == 2">
                <div class="text_gradual popup_title">{{ this.$dictLabel('node_sub_title8') }}</div>
                <el-form :model="form" label-position="left" class="demo-dynamic">
                    <el-form-item v-for="(v,k) in form" :key="k" class="flex_item">
                        <el-form-item label="经度:">
                            <el-input v-model="v.longitude"></el-input>
                        </el-form-item>
                        <el-form-item label="纬度:">
                            <el-input v-model="v.latitude"></el-input>
                        </el-form-item>
                        <i v-if="k==0" class="el-icon-circle-plus-outline but_circle" @click.stop.self="handleAdd"></i>
                        <i v-else class="el-icon-remove-outline but_circle" @click="handleMinus(v,k)"></i>
                    </el-form-item>
                </el-form>

                <div class="but_box">
                    <div class="but_bg but_area"></div>
                    <div class="but_bg but_sub"></div>
                </div>
            </div>
        </div>
        <div class="li_item" @click="handleClick(3)">
            <div class="li_item_inner">
                <img src="@/assets/bigScreen/task/icon_3.png" alt="">
                <span class="text_gradual">{{ this.$dictLabel('node_sub_title7') }} </span>
            </div>
        </div>
        <div class="tip_box">
            <div class="flex top_suess" v-if="isShow == 1">
                <img src="@/assets/bigScreen/task/icon_4.png" alt="">
                <span class="tip_name">数据已录入完毕，请点击下方的生成按钮</span>
            </div>
            <div class="flex top_wain" v-if="isShow == 2">
                <img src="@/assets/bigScreen/task/icon_5.png" alt="">
                <span class="tip_name">您尚未录入数据，暂时无法点击生成，请先完成数据录入</span>
            </div>
        </div>
        <div class="but_generate" @click="handleSave"></div>


        <!--   图片、文件  上传  :action="uploadUrl"  :on-success="handleUploadSuccess"  -->
        <el-upload class="upload-demo" action="noop" ref="hiddenUpload" :before-upload="beforeUpload" accept=".xlsx"
            :http-request="uploadFile" :file-list="fileList" :show-file-list="false">
        </el-upload>
    </div>
</template>
<!-------     请选择数据上传方式       ------->
<script>
import { importFile, taskData } from "@/api/bigScreen/api.js";
export default {
    name: 'Inducts',
    props: {

    },
    components: {

    },
    data(){
        return {
            isShow: 0, 
            fileList: [],
            selTab: 0,
            form: [],
            taskId: '',
        }
    },
    created() {
        this.taskId = this.$route.query.id
    },
    methods: {
        //  选择上传方式
        handleClick(type){
            this.selTab = type
            if (type != 2) {
                this.handleUpload()
            } else {
                if (this.form.length == 0) {
                    this.form = [{
                        longitude: '',
                        latitude: ''
                    }]
                    
                }
            }
        },
        //  按地域录入/选择  +
        handleAdd() {
            this.form.push({
                longitude: '',
                latitude: ''
            })
        },
        //  按地域录入/选择  -
        handleMinus(v,k){
            this.form.splice(k,1)
        },
        //  生成
        async handleSave(){
            // if (this.isShow != 1) {
            //     this.isShow = 2
            //     return
            // }
            // this.$router.push('/xmind')
            let query = {
                pageNum: 1,
                pageSize: 100,
                taskId: this.taskId,
                status: '',
            }
            let res = await taskData(query)
            if (res.code == 0) {
                let dataList = res.rows
                if (dataList.length > 0){
                    this.$router.push({ path: '/xmind', query: { id: this.taskId } });
                    // this.$router.push({ path: '/matrix', query: { id: this.taskId } });
                } else {
                    this.isShow = 2
                }
            }
        },


        //  打开 文件||图片  上传
        handleUpload(type) {
            if (type && this.imgDis()) {
                return false
            }
            
            const uploadInput = this.$refs.hiddenUpload.$el.querySelector('input[type="file"]');
            if (uploadInput) uploadInput.click();
        },
        //  文件||图片上传前的回调
        beforeUpload(file) {
            if (file.size === 0) {
                this.$message.error('文件大小为0，请重新选择文件');
                return false
            }
        },
        //  自定义 上传文件||图片
        async uploadFile(params) {
            console.log('params', params);
            let formData = new FormData()
            formData.append('file', params.file)
            formData.append('taskId', this.taskId)
            let res = await importFile(formData)
            if (res.code == 0) {
                // this.$modal.msgSuccess("上传成功");
                console.log(this.fileList);
                
                this.$modal.msgSuccess(res.msg);
                this.isShow = 1
            }
            


        },
        // 上传成功回调
        handleUploadSuccess(res, file) {
            
        },
        handleHome() {
            this.$router.push('/home')
        }
    }
}
</script>

<style lang="scss" scoped>
.container{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('~@/assets/bigScreen/task/bg_2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title{
        font-weight: bold;
        font-size: 22px;
    }
    .li_item{
        position: relative;
        margin-top: 50px;
        width: 575px;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: url('~@/assets/bigScreen/task/img_bg_2.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        .li_item_inner{
            width: 400px;
            display: flex;
            align-items: center;
            img{
                width: 88px;
                height: 89px;
                user-select: none;
            }
            span{
                font-size: 18px;
                font-weight: bold;
                text-shadow: none; /* 白色发光 */
            }
        }
    }
    .sel_item{
        background-image: url('~@/assets/bigScreen/task/img_bg_3.png');
    }
    .popup_box{
        box-sizing: border-box;
        padding: 50px;
        position: absolute;
        left: 500px;
        top: -190px;
        width: 713px;
        height: 628px;
        background-image: url('~@/assets/bigScreen/task/img_bg_4.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .popup_title{
            font-weight: 700;
        }
        .el-form{
            margin-top: 20px;
            height: 400px;
            overflow-y: auto;
            ::v-deep .flex_item>.el-form-item__content{
                display: flex;
                align-items: center;
                .el-form-item{
                    display: flex;
                    .el-form-item__label{
                        padding: 0;
                        width: 45px;
                        font-size: 14px;
                        font-weight: 500;
                        letter-spacing: 0.1em;
                        color: #c0c5d0;
                    }
                    .el-input__inner{
                        background-color: #13335c;
                        border-color: #13335c;
                        color: #FFFFFF;
                    }
                }
                .el-form-item + .el-form-item{
                    margin-left: 30px;
                }
                .but_circle{
                    font-size: 26px;
                    color: #FFFFFF;
                    margin-left: 20px;
                }
            }
        }
        .but_box{
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            .but_bg{
                width: 180px;
                height: 59px;
                background-repeat: no-repeat;
                background-position: -40px -40px;
                background-size: 260px 140px;
                cursor: pointer;
            }
            .but_area{
                background-image: url('~@/assets/bigScreen/task/but_area.png')
            }
            .but_sub{
                margin-left: 10px;
                background-image: url('~@/assets/bigScreen/task/but_sub.png')
            }
        }
    }

    .tip_box{
        margin-top: 50px;
        height: 30px;
        .flex{
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
            .tip_name{
                margin-left: 10px;
                font-size: 16px;
            }
        }
        .top_suess{
            img{
                width: 23px;
                height: 23px;
            }
            .tip_name{
                color: #04cb00;
            }
        }
        .top_wain{
            img{
                width: 23px;
                height: 27px;
            }
            .tip_name{
                color: #ff9d00;
            }
        }
    }
    .but_generate{
        margin-top: 20px;
        width: 180px;
        height: 59px;
        background-image: url('~@/assets/bigScreen/task/but_gen.png');
        background-repeat: no-repeat;
        background-position: -40px -40px;
        background-size: 260px 140px;
        cursor: pointer;
    }
}
</style>