<template>
    <!-- 广告服务 -->
    <div>
        <!-- 广告页面头部 -->
        <div class="head">
            <div class="inner">
                <div class="headLogo left">
                    <img src="../../static/images/image 36.png" alt="" @click="goBack">
                    <span>广告服务</span>
                </div>
                <div class="right">
                    <span>
                        <em class="home"></em>
                        设为首页
                    </span>
                    <span>
                        <em class="collection"></em>
                        加入收藏
                    </span>
                </div>
            </div>
        </div>
        <div class="tips">
            <div class="inner">
                <p v-show="adCurrent">注意：广告购买需提交信息，用户与商务人员进行线下金额交易，交易成功后由商务人员后台审核。审核通过，即广告投放成功。</p>
            </div>
        </div>
        <div class="advertising">
            <div class="inner">

                <!-- 左侧tab导航 -->
                <ul class="nav">
                    <li class="current" @click="goBuyAd">广告购买</li>
                    <li @click="goOrderList">工单列表</li>
                </ul>

                <!-- 广告购买 -->
                <div id="buyAd" v-show="adCurrent">
                    <!-- <AdvertisingBuyAD></AdvertisingBuyAD> -->

                    <div class="buyAD">
                        <div class="inner">
                            <!-- tab栏标题 -->
                            <div class="tabTitle">
                                <span class="title">
                                    <span class="number">1</span>
                                    填写广告信息
                                </span>
                                <span class="title">
                                    <span class="icon">
                                        <el-icon>
                                            <DArrowRight />
                                        </el-icon>
                                    </span>
                                    <span class="number">2</span>
                                    选择相应网站
                                </span>
                                <span class="title">
                                    <span class="icon">
                                        <el-icon>
                                            <DArrowRight />
                                        </el-icon>
                                    </span>
                                    <span class="number">3</span>
                                    提交工单信息
                                </span>
                            </div>

                            <!-- 填写广告信息内容 -->
                            <div class="textOne" v-show="ad == 1">
                                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="110"
                                    class="demo-ruleForm" :size="formSize" status-icon>
                                    <el-form-item label="广告名称:" prop="adName">
                                        <el-input v-model="ruleForm.adName" placeholder="请输入广告名称" />
                                    </el-form-item>
                                    <el-form-item label="广告链接:" prop="adLink">
                                        <el-input v-model="ruleForm.adLink" placeholder="请输入广告链接" />
                                    </el-form-item>
                                    <el-form-item label="广告持续时间:" required>
                                        <el-col :span="11">
                                            <el-form-item prop="startTime">
                                                <el-date-picker v-model="ruleForm.startTime" type="date"
                                                    placeholder="请选择开始时间" @change=changeStartTime
                                                    :disabled-date="disabledStartTime" style="width: 100%" />
                                            </el-form-item>
                                        </el-col>
                                        <el-col class="text-center" :span="2">
                                            <span class="text-gray-500">至</span>
                                        </el-col>
                                        <el-col :span="11">
                                            <el-form-item prop="endTime">
                                                <el-date-picker v-model="ruleForm.endTime" unlink-panels type="date"
                                                    placeholder="请选择结束时间" @change=changeEndTime
                                                    :disabled-date="disabledEndTime" style="width: 100%" />
                                            </el-form-item>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="广告尺寸:" prop="adSize">
                                        <el-select v-model="ruleForm.adSize" placeholder="请选择广告尺寸" @change="change">
                                            <el-option v-for="item in options" :key="item.id" :label="item.size"
                                                :value="item.id" :disabled="item.disabled" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="广告图:" prop="adImg">
                                        <el-upload class="avatar-uploader" action="#" :show-file-list="false"
                                            :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                                            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                                            <div v-else>
                                                <el-icon class="avatar-uploader-icon">
                                                    <Plus />
                                                    <div class="chooseImgDiv">选择图片</div>
                                                </el-icon>
                                            </div>
                                        </el-upload>
                                    </el-form-item>
                                </el-form>
                            </div>

                            <!-- 选择相应网站的内容 -->
                            <div class="textTwo" v-show="ad == 2">
                                <div class="inner">
                                    <!-- 搜索部分 -->
                                    <div class="pageTop">
                                        <div class="left">
                                            网站：
                                            <el-select v-model="adWeb" placeholder="请选择网站名称" size="large"
                                                style="width: 244px; height: 44px;">
                                                <el-option v-for="item in adWebList" :key="item.id"
                                                    :label="item.website_name" :value="item.id"
                                                    @click="chooseweb(item.id)" />
                                            </el-select>
                                            <a href="#">查看示意图</a>
                                        </div>
                                        <div class="right">
                                            <button class="reset" @click="goReset">重置</button>
                                            <button class="search" @click="goSearch">搜索</button>
                                        </div>
                                    </div>

                                    <!-- 表格部分 -->
                                    <div class="pageTable">
                                        <el-table :data="tableData" border @selection-change="handleSelectionChange"
                                            select-on-indeterminate style="width: 100%"
                                            :header-row-style="{ height: '60px' }" :row-style="{ height: '74px' }"
                                            :header-cell-style="{ backgroundColor: '#fafafa', color: '#666' }">
                                            <el-table-column type="selection" width="152" align="center" />
                                            <el-table-column prop="website_name" label="网站" width="240" />
                                            <el-table-column prop="name" label="广告位名称" width="240" />
                                            <el-table-column prop="size" label="广告尺寸" width="268" />
                                            <el-table-column prop="price" label="金额 (元) / 天" />
                                        </el-table>
                                    </div>

                                    <!-- 页码部分 -->
                                    <div class="pagination">
                                        <el-pagination background layout="prev, pager, next" :total="total"
                                            prev-text="上一页" next-text="下一页" :default-page-size="pageSize"
                                            @change="changePage" />
                                    </div>
                                </div>
                            </div>

                            <!-- 提交工单信息 -->
                            <div class="submit" v-show="ad == 3">
                                <div class="inner">
                                    <h1>广告信息已提交成功，请等待审核......</h1>
                                    <p>
                                        工单编号:
                                        <span>{{ orderInformation }}</span>
                                    </p>
                                    <div class="btn">
                                        <!-- <NuxtLink :to='`/advertising/adDetail?id=${orderId}`'>
                                            <el-button type="success" plain>查看工单</el-button>
                                        </NuxtLink> -->
                                        <button class="check" @click="lookOrder">查看工单</button>
                                        <!-- <button class="apply" @click="reapply">再次申请</button> -->
                                        <NuxtLink to="/advertising">
                                            <el-button type="success">再次申请</el-button>
                                        </NuxtLink>
                                    </div>
                                    <span>如有疑问，可联系客服人员。</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 工单列表 -->
                <div id="orderList" v-show="!adCurrent">
                    <AdvertisingOrderList @childData="handleChildData"></AdvertisingOrderList>
                </div>


            </div>

            <div class="bottom" v-show="ad != 3 && adCurrent">
                <div class="inner">
                    <!-- 总金额 -->
                    <div class="amount" v-show="ad == 2">
                        总金额:
                        <span>{{ priceTotal == '' ? 0 : priceTotal }}</span>
                        元
                    </div>

                    <!-- 按钮 -->
                    <div class="btn">
                        <button class="btn1" @click="prevStep" v-show="ad == 2">上一步</button>
                        <button class="btn2" @click="nextStep" v-show="ad == 1">下一步</button>
                        <button class="btn2" @click="submitStep" v-show="ad == 2"> 提交工单</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 广告页面底部 -->
        <AdvertisingFoot></AdvertisingFoot>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { ElDatePicker, ElInput, ElUpload, ElPagination, ElIcon, ElSelect, ElButton, ElOption, ElTabs, ElTabPane, ElTable, ElTableColumn, ElMessage, ElForm, ElFormItem, ElCol } from 'element-plus'
import { Plus, DArrowRight } from '@element-plus/icons-vue'

import { useRoute } from 'vue-router'

const route = useRoute()

// axios请求
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;


// 通过变量ad控制tab栏标题的颜色及每一步下的不同的内容
let ad = useState("ad", () => 1)

let adCurrent = useState("adCurrent", () => true)
let adCurrent1 = useState("adCurrent1", () => 1)

let startTime = useState("startTime", () => "")
let adSize = useState("adSize", () => "")
let tableData = useState("tableData", () => [])
let processedData = useState("processedData", () => [])
let pids = useState("pids", () => "")
let pidArr = useState("pidArr", () => [])
let pidArr1 = useState("pidArr1", () => [])
let orderInformation = useState("orderInformation", () => "")
let adWeb = useState("adWeb", () => "")
let adWebId = useState("adWebId", () => "")
let adWebList = useState("adWebList", () => "")
let priceTotal = useState("priceTotal", () => '')//总金额
let orderId = useState("orderId", () => "")

// 分页
let total = useState('total', () => 0)
let pageSize = useState("pageSize", () => 10)
let page = useState("page", () => 1)

// let order = useState('order', () => "")
// let order_ad = useState('order_ad', () => "")
const value = ref('')
let adListSize = ref('')
const options = ref([])

//ruleForm
let logoUrl = ref('');
const formSize = ref('default');
const ruleFormRef = ref();
const ruleForm = reactive({
    adName: '',
    adLink: '',
    startTime: '',
    endTime: '',
    adSize: '',
    adImg: '',
});

const rules = reactive({
    adName: [{ required: true, message: '请输入广告名称', trigger: 'blur' }],
    adLink: [{ required: true, message: '请输入广告链接', trigger: 'change' }],
    startTime: [{ required: true, message: '请输入开始时间', trigger: 'change' }],
    endTime: [{ required: true, message: '请输入结束时间', trigger: 'change' }],
    adSize: [{ required: true, message: '请选择广告尺寸', trigger: 'change' }],
    adImg: [{ required: true, message: '请选择广告图', trigger: 'change' }],
});

const tabPosition = ref('left')

// 获取开始时间
let changeStartTime = (val) => {
    startTime.value = val
    ruleForm.startTime = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
    console.log(ruleForm.startTime);
}
let disabledStartTime = (time) => {
    return time.getTime() <= (Date.now() + 3600 * 1000 * 24);
}

// 获取结束时间
let changeEndTime = (val) => {
    ruleForm.endTime = `${val.getFullYear()}-${val.getMonth() + 1}-${val.getDate()}`
    console.log(ruleForm.endTime);
}
let disabledEndTime = (time) => {
    // console.log('时间',time);
    // console.log("time.getTime()",time.getTime());
    if (ruleForm.startTime == '') {
        return true;
    } else {
        const targetDate = new Date(ruleForm.startTime);// 这里设置禁用日期为2024年1月1日之前的日期
        return time.getTime() < targetDate.getTime() + 3600 * 1000 * 24;
    }
}

const imageUrl = ref('');
const handleAvatarSuccess = (response, uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
};

//获取图片地址
const beforeAvatarUpload = (file) => {
    console.log('000');
    console.log('file', file);

    if (!file) return;
    const isJPG = file.type === 'image/jpeg';
    const isPNG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG && !isPNG) {
        ElMessage.error('上传图片只能是 JPG 或 PNG 格式!');
        return;
    }
    if (!isLt2M) {
        ElMessage.error('上传图片大小不能超过 2MB!');
        return;
    }

    const data = new FormData();
    data.append('file', file);

    axios.post("/public/uploadFile", data).then(res => {
        console.log(res);
        logoUrl.value = res.data.imgUrl;
        ruleForm.adImg = res.data.imgUrl;
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '网络错误，请重试！'
        });
    });
};

//返回
let goBack = () => {
    window.location.href = ('http://nwpre.bjzxtw.org.cn/')
}

//选择的广告位
let handleSelectionChange = (selectedRows) => {
    console.log('selectedRows', selectedRows);
    let selectedpids = [];
    selectedRows.forEach(row => {
        selectedpids.push(row.pid);

    });
    // console.log('选中行的 pid:', selectedpids);
    // pids.value = selectedpids.join(",")

    pids.value = selectedpids


    for (let i = 0; i <= selectedpids.length - 1; i++) {
        pidArr.value.push(selectedpids[i])
    }
    console.log("pidArr", typeof (pidArr.value), pidArr.value);
    let aa = Array.from(pidArr.value).filter((item, index, self) => {
        return self.indexOf(item) === index;
    });
    console.log(aa);

    // let pidArr1 = pidArr.map((item, index, self) => {
    //     return self.indexOf(item) === index;
    // });
    console.log("pidArr1", typeof (pidArr1.value), pidArr1.value);

    console.log("pidArr", pidArr.value);
    console.log("pidArr1", pidArr1.value);
    getPrice()
    console.log("pids", pids.value);
    console.log("pids", pids);
}
pidArr.value = [...pids.value]

//搜索前选择网站
let chooseweb = (id) => {
    console.log("id", id);
    adWebId.value = id
}

// 点击搜索按钮
let goSearch = () => {
    console.log(1);
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
        website_id: adWebId.value
    }
    // 搜索按钮接口
    axios.post("/order/getWebsiteAd", adData).then(response => {
        console.log(response.data);
        console.log(response.data.rows);
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
        }
    })
}

//点击重置
let goReset = () => {
    adWeb.value = ''
    getDate()

}

let getDate = () => {

    // 获取广告位需要传递的参数
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
    }
    //获取广告位
    axios.post("/order/getAD", adData).then(response => {
        console.log("广告位信息", response.data.rows);
        total.value = response.data.count
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
        }
        console.log(tableData.value);
        console.log("ruleForm.adSize", ruleForm.adSize);

    }).catch(error => {
        console.log(error);
    })
}

//获取广告尺寸列表
let adSizeList = () => {
    // 搜索按钮接口
    axios.post("/order/getAD").then(response => {
        console.log("responseresponse", response);
        options.value = response.data
        for (let item of options.value) {
            console.log(item);
            item.size = item.width + ' * ' + item.height + ' px '
        }
        console.log(options.value);
    })
}

//查看工单
let lookOrder = () => {
    navigateTo({
        path: "/advertising/adDetail",
        query: {
            id: orderId.value
        }
    })
}

//获取总金额
const getPrice = () => {

    let data = {
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pid: pidArr.value
    }
    axios.post('/order/getPrice', data).then(data => {
        console.log('获取到的金额', data.data);
        priceTotal.value = data.data
        // let count = data.data
        // priceTotal.value = Number(priceTotal.value) + Number(count);
    })
}

//挂载成功
onMounted(() => {
    // this.$nextTick(() => {
    adSizeList()
    getPrice()
    if (!route.query.adCurrent) {
        adCurrent.value = JSON.parse(sessionStorage.getItem('adCurrent'));
        if (adCurrent.value) {
            adCurrent.value = true
            let lis = Array.from(document.querySelectorAll('.nav>li'))
            lis[0].classList.add('current')
            lis[1].classList.remove('current')
        } else {
            adCurrent.value = false
            let lis = Array.from(document.querySelectorAll('.nav>li'))
            lis[0].classList.remove('current')
            lis[1].classList.add('current')
        }
    }
    if (route.query.adCurrent && adCurrent1.value == 1) {
        adCurrent.value = JSON.parse(route.query.adCurrent)
        adCurrent.value = true
        let lis = Array.from(document.querySelectorAll('.nav>li'))
        lis[0].classList.add('current')
        lis[1].classList.remove('current')
        return
    } else if (route.query.adCurrent && adCurrent1.value == 2) {
        adCurrent.value = false
        let lis = Array.from(document.querySelectorAll('.nav>li'))
        lis[0].classList.remove('current')
        lis[1].classList.add('current')
        return
    }


    sessionStorage.setItem('adCurrent', JSON.stringify(adCurrent.value));
    watch(adCurrent, (newval) => {
        // console.log('adCurrent', newval);
        sessionStorage.setItem('adCurrent', JSON.stringify(newval));
    }, {
        deep: true,
        immediate: true
    })
    watch(adCurrent1, (newval) => {
        // console.log('adCurrent1', newval);
        sessionStorage.setItem('adCurrent1', JSON.stringify(newval));
    }, {
        deep: true,
        immediate: true
    })
    // })

    // handleChildData()
    // prevStep()
    // nextStep()
    // submitStep()
    // goBuyAd()
    // goOrderList()
})

let change = (val) => {
    console.log(val);
    ruleForm.adSize = val
    console.log(ruleForm.adSize);
}

//页码发生改变
const changePage = (val) => {
    console.log(val);
    page.value = val
    // 获取广告位需要传递的参数
    let adData = {
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        pageSize: pageSize.value,
        page: page.value,
    }

    //获取广告位
    axios.post("/order/getAD", adData).then(response => {
        console.log("广告位", response.data);
        // console.log("广告位信息", response.data.rows);
        total.value = response.data.count
        tableData.value = response.data.rows
        for (let item of tableData.value) {
            item.size = item.size_width + ' * ' + item.size_height + ' px '
        }
        console.log(tableData.value);
    }).catch(error => {
        console.log(error);
    })

}

//6.子组件传递的数据 start ---------------------------------------->
let handleChildData = (data) => {
    adCurrent.value = data
    let lis = Array.from(document.querySelectorAll('.nav>li'))
    lis[0].classList.add('current')
    lis[1].classList.remove('current')
}
//6.子组件传递的数据 end ---------------------------------------->

//点击上一步按钮
let prevStep = () => {
    ad.value--
    let icon = Array.from(document.querySelectorAll(".icon"))
    let number = Array.from(document.querySelectorAll(".number"))
    let title = Array.from(document.querySelectorAll(".title"))
    icon[0].classList.remove('color')
    number[1].classList.remove('bgc')
    title[1].classList.remove('color')

    pidArr.value = []
    // priceTotal.value = data.data

}


// 点击下一步与提交工单按钮
let nextStep = () => {
    if (ruleForm.adName == '') {
        ElMessage({
            message: '请输入广告名称',
            type: 'error',
        })
        return
    }
    if (ruleForm.adLink == '') {
        ElMessage({
            message: '请输入广告链接',
            type: 'error',
        })
        return
    }
    if (ruleForm.startTime == '') {
        ElMessage({
            message: '请选择广告持续时间!',
            type: 'error',
        })
        return
    }
    if (ruleForm.endTime == '') {
        ElMessage({
            message: '请选择广告尺寸',
            type: 'error',
        })
        return
    }
    if (ruleForm.adSize == '') {
        ElMessage({
            message: '请选择广告尺寸',
            type: 'error',
        })
        return
    }
    if (ruleForm.adImg == '') {
        ElMessage({
            message: '请添加广告图',
            type: 'error',
        })
        return
    }
    let icon = Array.from(document.querySelectorAll(".icon"))
    let number = Array.from(document.querySelectorAll(".number"))
    let title = Array.from(document.querySelectorAll(".title"))


    // 点击下一步
    if (ad.value == 1) {
        ad.value++
        icon[0].classList.add('color')
        number[1].classList.add('bgc')
        title[1].classList.add('color')


        //获取网站名称需要传递的参数
        let data = {
            ad_size_id: ruleForm.adSize,
            starttime: ruleForm.startTime,
            endtime: ruleForm.endTime,
            pageSize: pageSize.value,
            page: page.value,
        }
        console.log(data);

        //网站名称
        axios.post("/order/getWebsiteAd", data).then(response => {
            console.log("网站名称", response);
            // console.log("网站名称", response.data.rows);
            adWebList.value = response.data.rows
        }).catch(error => {
            console.log(error);
        })


        // 获取广告位需要传递的参数
        let adData = {
            ad_size_id: ruleForm.adSize,
            starttime: ruleForm.startTime,
            endtime: ruleForm.endTime,
            pageSize: pageSize.value,
            page: page.value,
        }

        //获取广告位
        axios.post("/order/getAD", adData).then(response => {
            console.log("广告位", response.data);
            // console.log("广告位信息", response.data.rows);
            total.value = response.data.count
            tableData.value = response.data.rows
            for (let item of tableData.value) {
                item.size = item.size_width + ' * ' + item.size_height + ' px '
            }
            console.log(tableData.value);
        }).catch(error => {
            console.log(error);
        })
    }
}
// 点击提交工单信息
let submitStep = () => {
    let icon = Array.from(document.querySelectorAll(".icon"))
    let number = Array.from(document.querySelectorAll(".number"))
    let title = Array.from(document.querySelectorAll(".title"))

    // 获取广告位需要传递的参数
    let orderData = {
        name: ruleForm.adName,
        ad_size_id: ruleForm.adSize,
        starttime: ruleForm.startTime,
        endtime: ruleForm.endTime,
        imgurl: ruleForm.adLink,
        imgsrc: ruleForm.adImg,
        pid: pids.value,
        price: priceTotal.value
    }

    //提交工单
    axios.post("/order/addAD", orderData).then(response => {
        console.log("提交工单", response); //order_id
        // console.log("提交工单", response.data.order_id); //order_id

        if (response.code == 200) {
            tableData.value = response.data.rows
            orderInformation.value = response.data.ordernum
            ad.value = 3
            icon[1].classList.add('color')
            number[2].classList.add('bgc')
            title[2].classList.add('color')
            orderId.value = response.data.order_id
        }


    }).catch(error => {
        console.log(error);
    })
}


// 点击广告购买标签的事件驱动函数
let goBuyAd = () => {
    adCurrent.value = true
    adCurrent1.value = 1
    let lis = Array.from(document.querySelectorAll('.nav>li'))
    lis[0].classList.add('current')
    lis[1].classList.remove('current')
}

// 点击工单列表标签的事件驱动函数
let goOrderList = () => {
    if (route.query.adCurrent) {
        window.location.href = ('http://localhost:3000/advertising')
        // window.location.href = ('http://nwpre.bjzxtw.org.cn/')
    }
    adCurrent.value = false
    let lis = Array.from(document.querySelectorAll('.nav>li'))
    lis[0].classList.remove('current')
    lis[1].classList.add('current')
    adCurrent1.value = 2
}


watch(adSize, (newval) => {
    // console.log('newval', newval);
    adSize.value = newval
}, {
    deep: true,
    immediate: true
})
watch(ad, (newval) => {
    // console.log('adnewval', newval);
    adSize.value = newval
}, {
    deep: true,
    immediate: true
})


</script>

<style lang="less" scoped>
// 广告页面头部
.head {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 27px;
    }

    .headLogo {
        img {
            width: 127px;
            height: 27px;
            padding-right: 15px;
            vertical-align: -10px;
            border-right: 1px solid #999;
        }

        span {
            display: inline-block;
            width: 100px;
            padding-left: 15px;
            vertical-align: middle;
            font-family: Microsoft YaHei, Microsoft YaHei;
            font-weight: 400;
            font-size: 18px;
            color: #333333;
            line-height: 21px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .right {
        span {
            margin-left: 26px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #666666;
            line-height: 14px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .home,
        .collection {
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: -3px;
        }

        .home {
            background-image: url("../../static/images/Iconly／Light／Home.png");
        }

        .collection {
            background-image: url("../../static/images/Iconly／Light／Star.png");
        }
    }
}

//提示信息
.tips {
    width: 100%;
    height: 70px;
    line-height: 70px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .inner {
        width: 1200px;
        height: 70px;
    }

    p {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #FE0101;
        // line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.advertising {
    width: 100%;
    overflow: hidden;

    .inner {
        width: 1520px;
        // height: 900px;
        overflow: hidden;
        position: relative;

        // 左侧tab导航
        .nav {
            width: 120px;
            height: 80px;
            position: absolute;
            top: 54px;
            left: 0;
            border-right: 1px solid #d9d9d9;

            >li {
                width: 120px;
                height: 30px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 20px;
                color: #333333;
                line-height: 26px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-bottom: 20px;

            }

            .current {
                font-weight: bold;
                color: #333;
                border-right: 2px solid #139602;
            }

        }



        // 广告购买
        #buyAd {
            width: 1200px;
            margin: 0 auto;

            .buyAD {
                width: 1200px;
                overflow: hidden;

                .inner {
                    width: 1200px;
                    overflow: hidden;
                    position: relative;

                    // 填写信息页tab标题
                    .tabTitle {
                        width: 1100px;
                        height: 80px;
                        padding-top: 26px;
                        margin: 0 auto;
                        box-sizing: border-box;
                        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

                        .icon,
                        .title {
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: bold;
                            font-size: 16px;
                            color: #D5D5D5;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;
                        }

                        .number {
                            display: inline-block;
                            width: 32px;
                            height: 32px;
                            line-height: 32px;
                            color: #ffffff;
                            background-color: #d5d5d5;
                            border-radius: 50%;

                        }

                        .bgc {
                            background-color: #139602;
                        }

                        .color {
                            color: #139602;
                        }

                        // 填写广告信息字体及背景颜色
                        .title:first-child {
                            color: #139602;
                        }

                        .title:first-child .number {
                            background-color: #139602;
                        }

                        // 图标>>
                        .icon {
                            padding: 0 165px;
                        }

                    }

                    // 1.填写信息内容
                    .textOne {
                        width: 1100px;
                        overflow: hidden;
                        // height: 515px;
                        margin-top: 35px;
                        margin-left: 50px;

                        /deep/ .el-form-item {
                            margin-bottom: 35px;
                        }

                        .el-col {
                            height: 36px;
                        }

                        .el-col-2 {
                            text-align: center;
                        }

                        .chooseImg {
                            display: block;
                        }

                        .chooseImgDiv {
                            font-size: 16px;
                            font-style: normal;
                        }

                        .avatar-uploader {
                            width: 120px;
                            height: 120px;
                            border: 1px solid #ededed;
                            border-radius: 12px;
                        }

                        .avatar-uploader .avatar {
                            width: 120px;
                            border-top-left-radius: 12px;
                            border-top-right-radius: 12px;
                        }

                        .avatar-uploader .el-upload {
                            border: 1px dashed var(--el-border-color);
                            border-radius: 6px;
                            cursor: pointer;
                            position: relative;
                            overflow: hidden;
                            transition: var(--el-transition-duration-fast);
                        }

                        .avatar-uploader .el-upload:hover {
                            border-color: var(--el-color-primary);
                        }

                        .el-icon.avatar-uploader-icon {
                            display: block;
                            font-size: 36px;
                            color: #8c939d;
                            background-color: #fafafa;
                            width: 120px;
                            height: 120px;
                            padding-top: 30px;
                            box-sizing: border-box;
                            border: 1px solid #EDEDED;
                            border-radius: 12px;
                            text-align: center;
                        }

                        >p {
                            width: 1110px;
                            height: 75px;

                            strong {
                                font-weight: 500;
                                color: #333333;
                                padding: 0 14px;
                            }

                            label {
                                display: inline-block;
                                width: 125px;
                                text-align: right;
                                padding-right: 10px;
                                box-sizing: border-box;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }

                            >label::before {
                                content: "*";
                                display: inline-block;
                                width: 10px;
                                height: 2px;
                                color: #fe0101;
                            }

                            span {
                                color: #fe0101;
                                display: block;
                                padding-left: 135px;
                                height: 30px;
                            }

                            .upload-demo {
                                display: inline-block;
                                width: 112px;
                                height: 112px;
                                vertical-align: -93px;
                            }

                            //上传图片相关样式
                            .avatar-uploader .el-upload {
                                border: 1px dashed var(--el-border-color);
                                border-radius: 6px;
                                cursor: pointer;
                                position: relative;
                                overflow: hidden;
                                transition: var(--el-transition-duration-fast);
                            }

                            .avatar-uploader .el-upload:hover {
                                border-color: var(--el-color-primary);
                            }

                            .el-icon.avatar-uploader-icon {
                                font-size: 28px;
                                color: #8c939d;
                                width: 178px;
                                height: 178px;
                                text-align: center;
                            }

                            //上传图片相关样式 end


                            /deep/.el-input__wrapper.is-focus {
                                box-shadow: 0 0 0 1px #c0c4cc;
                            }

                            /deep/.el-date-editor.el-input,
                            .el-date-editor.el-input__wrapper {
                                height: 44px;
                                width: 470px;
                            }

                            /deep/.el-input__inner {
                                font-size: 16px;
                            }

                            /deep/.el-upload-dragger {
                                padding: 0;
                                margin: 0;
                                border: 1px solid #ededed;
                            }

                            /deep/.el-upload-dragger .el-icon--upload {
                                font-size: 67px;
                                line-height: 50px;
                                padding: 0;
                                margin: 0;
                            }

                            /deep/.el-upload-dragger .el-upload__text {
                                font-size: 18px;
                                font-weight: 400;
                                color: #999;
                                text-align: center;
                                margin-bottom: 14px;
                                margin-top: 5px;
                            }

                            /deep/.el-icon svg {
                                width: 34px;
                                height: 34px;
                            }
                        }

                    }

                    // 2.选择相应网站
                    .textTwo {
                        width: 1200px;
                        overflow: hidden;

                        // 页面头部搜索和按钮
                        .pageTop {
                            width: 1150px;
                            height: 44px;
                            margin: 30px 0 40px 50px;

                            >.left {
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;

                                >a {
                                    width: 80px;
                                    height: 21px;
                                    padding-left: 30px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #47ACFF;
                                    line-height: 19px;
                                    text-align: left;
                                    font-style: normal;
                                    text-transform: none;
                                }

                                /deep/.el-select__wrapper.is-focused {
                                    box-shadow: 0 0 0 1px var(--el-border-color) inset;
                                }

                            }

                            >.right {
                                button {
                                    width: 94px;
                                    height: 36px;
                                    line-height: 36px;
                                    font-family: Microsoft YaHei, Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #33B023;
                                    line-height: 19px;
                                    text-align: center;
                                    border: none;
                                    border-radius: 7px;
                                }

                                .reset {
                                    border: 1px solid #33B023;
                                    color: #33B023;
                                    background-color: #fff;
                                    margin-right: 25px;
                                }

                                .search {
                                    background-color: #33B023;
                                    color: #ffffff;
                                }
                            }

                        }

                        // 页面中的表格
                        .pageTable {
                            width: 100%;
                            overflow: hidden;
                            padding-bottom: 60px;


                            /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
                                background-color: #333;
                                border-color: #333;
                            }

                            /deep/.el-table tr {
                                background-color: #fafafa;
                                height: 74px;
                            }

                            /deep/.el-table .cell {
                                text-align: center;
                                box-sizing: border-box;
                                height: 23px;
                                line-height: 23px;
                                overflow-wrap: break-word;
                                padding: 0 12px;
                                text-overflow: ellipsis;
                                white-space: normal;
                                font-family: Microsoft YaHei, Microsoft YaHei;
                                font-weight: 400;
                                font-size: 16px;
                                color: #333333;
                                line-height: 19px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        // 页码
                        .pagination {
                            display: flex;
                            justify-content: center;
                            // margin-top: 60px;
                            margin-bottom: 90px;

                            // 鼠标移入后字体颜色
                            :deep(.el-pagination:hover) {
                                color: #139609;
                            }

                            :deep(.el-pagination.is-background .btn-next),
                            :deep(.el-pagination.is-background .btn-prev) {
                                width: 70px;
                                height: 34px;
                                margin: 0px 10px;
                                border-radius: 4px;
                            }

                            :deep(.el-pagination.is-background .el-pager li) {
                                margin: 0px 10px;
                                width: 38px;
                                height: 34px;
                                border-radius: 4px;
                            }

                            :deep(.el-pagination.is-background .btn-next.is-active),
                            :deep(.el-pagination.is-background .btn-prev.is-active),
                            :deep(.el-pagination.is-background .el-pager li.is-active) {
                                background-color: #028e21;
                                color: #fff;
                            }
                        }

                    }

                    // 3.提交工单信息
                    .submit {
                        width: 1200px;
                        overflow: hidden;
                        text-align: center;

                        .inner {
                            width: 1100px;
                            padding-left: 50px;
                            padding-bottom: 130px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-style: normal;
                            text-transform: none;

                            // 标题
                            >h1 {
                                margin-top: 80px;
                                margin-bottom: 30px;
                                font-weight: bold;
                                font-size: 26px;
                                color: #333333;
                                line-height: 30px;
                                text-align: center;
                            }

                            // 工单编号
                            >p {
                                margin-bottom: 257px;
                                font-weight: 400;
                                font-size: 22px;
                                color: #333333;
                                text-align: center;
                            }

                            // 按钮
                            >.btn {
                                margin-bottom: 30px;

                                button {
                                    width: 134px;
                                    height: 50px;
                                    border: none;
                                    font-weight: 400;
                                    font-size: 16px;
                                    text-align: center;
                                    border-radius: 7px;
                                }

                                .check {
                                    background-color: #fff;
                                    color: #33B023;
                                    border: 1px solid #33B023;
                                    margin-right: 160px;
                                }

                                .apply {
                                    background-color: #33B023;
                                    color: #fff;
                                }
                            }

                            // 提示文字
                            >span {
                                font-weight: 400;
                                font-size: 14px;
                                color: #999999;
                            }

                        }

                    }
                }
            }
        }

        //工单列表
        #orderList {
            width: 1200px;
            margin: 0 auto;
        }


    }

    //广告页面底部部分
    .bottom {
        width: 100%;
        height: 145px;
        background-color: #ecf5ee;
        // display: none;

        .inner {
            width: 1200px;
            height: 145px;
            padding: 0;

            .amount {
                float: left;
                padding-top: 52px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                line-height: 19px;
                text-align: left;
                font-style: normal;
                text-transform: none;

                span {
                    padding: 0 15px 0 25px;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #028E21;
                    line-height: 28px;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }
            }

            .btn {
                float: right;

                .btn1 {
                    width: 115px;
                    height: 40px;
                    font-size: 16px;
                    background-color: #ffffff;
                    color: #028e21;
                    border: 1px solid #028e21;
                    border-radius: 6px;
                    margin-right: 50px;
                    margin-top: 53px;
                }

                .btn2 {
                    width: 115px;
                    height: 40px;
                    font-size: 16px;
                    background-color: #028e21;
                    color: #ffffff;
                    border: none;
                    border-radius: 6px;
                    margin: 53px 0;
                }
            }

        }
    }
}
</style>