<template>
  <div class="advertisementList">
    <div style="margin: 15px 15px">
      <div>
        <img src="@/assets/img/ziyuanwei-logo.jpg" alt="" >
      </div>
      <div class="title0" v-if="adId==16">TV版广告位 <span style="color: #FF2E2F;font-size: 14px">（面向C端消费者展示）</span></div>
      <div class="title0" v-if="adId==2">EDS采购APP广告位 <span style="color: #FF2E2F;font-size: 14px">（面向B端经销商展示）</span></div>
      <div class="title0" v-if="adId==3">EDS采购电脑版广告位 <span style="color: #FF2E2F;font-size: 14px">（面向B端经销商展示）</span></div>
      <div class="title0" v-if="adId==4">品牌直播广告位 <span style="color: #FF2E2F;font-size: 14px">（面向B端经销商展示）</span></div>
      <div class="title0" v-if="adId==14">消费者小程序广告位 <span style="color: #FF2E2F;font-size: 14px">（面向C端经销商展示）</span></div>
      <div class="title0" v-if="adId==-1">热销广告位 <span style="color: #FF2E2F;font-size: 14px"></span></div>
      <div style="width:100%;height: 1px;background: #CCCCCC;margin: 20px auto"></div>
      <div v-for="(item,index) in dataList">
        <div style="display: flex;margin-bottom: 15px">
          <div style="position: relative;width: 480px;height: 270px;">
            <el-image
              ref="preview"
              style="width: 480px;height: 270px;position: relative"
              :src="item.advId==15?lianheImg:item.cover"
              :preview-src-list="[item.cover]">
            </el-image>
            <div @click="onPreview(index)" style="position: absolute;right: 0;bottom: 0;cursor: pointer;">
              <img src="@/assets/img/fangdajing.jpg">
            </div>
          </div>
          <div style="margin-left: 12px">
            <div  v-if="item.rank==1"> <span class="title1 title-s">钻石广告位</span> <span v-if="item.isExcAct==1&&false" class="s1">活动专享</span></div>
            <div v-if="item.rank==2"> <span  class="title2 title-s">黄金广告位</span> <span  v-if="item.isExcAct==1&&false" class="s1">活动专享</span></div>
            <div class="name" style="line-height: 25px">{{item.name}}</div>
            <div class="name1" v-html="item.introduce"></div>
            <div class="price-box" v-if="item.advId==15">
              <div>
                价格： <span class="price">￥<span style="font-size: 20px">{{item.productPrice}}</span>/天</span> <span v-if="false" style="text-decoration-line: line-through;color: #999999;margin-left: 10px">原价：￥9600</span>
              </div>
              <div>
                投放类型：{{typeList[item.type]}}
              </div>
            </div>
            <div class="price-box" v-else>
              <div>
                价格： <span class="price">￥<span style="font-size: 20px">{{item.productPrice}}</span>/天</span>
              </div>
              <div>
                投放类型：{{typeList[item.type]}}
              </div>
            </div>

            <div style="margin: 10px auto">
              投放数量：<el-input-number :min="1" :max="item.oneLimitNum" v-model="item.defaultNum" :step="1"></el-input-number>&nbsp&nbsp <span style="color: #FF2E2F;font-weight: bold">限购{{item.oneLimitNum}}个</span>
            </div>
            <div style="display: flex">
              <div style="width: 90px">
                投放天数：
              </div>
              <div>
                <el-row :gutter="10">
                  <el-col  :span="12" v-for="e in item.priceList"><div @click="changeMoq(item,e)" :style="[{'borderColor':item.moq==e.day?'#FF2E2F':'#f6f5f5'},{'background':item.moq==e.day?'#fceeee':'#ffffff'}]" style="border: 2px solid #f1f1f1;padding: 8px 4px;margin-bottom: 10px;text-align: center;border-radius: 6px;cursor: pointer;position: relative">
                   <div style="display: flex;align-items: center">
                     <div :style="{'color':item.moq==e.day?'#FF2E2F':'#000000'}" style="font-size: 18px;color:#FF2E2F;font-weight: bold;margin-left: 3px;margin-right: 10px;width: 45px">
                       {{e.day}}天
                     </div>
                     <div style="text-align: left">
                       <div :style="{'color':item.moq==e.day?'#FF2E2F':'#FF2E2F'}" style="font-weight: bold;font-size: 14px"> {{item.advId==15?'总价':'优惠价'}}：￥{{e.discountPrice*item.defaultNum}}</div>
                       <div v-if="item.advId!=15" style="text-decoration: line-through;color: #999999;margin-top: 4px">原价：￥{{e.price*item.defaultNum}}</div>
                     </div>
                   </div>
                    <img v-if="item.moq==e.day" style="position: absolute;right: 0;bottom: -1px" src="./sss.png" alt="">
                  </div></el-col>
                </el-row>
              </div>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==5&&false" @click.stop="showXuqiModel(item)">
              <div class="btn" style="background:#58cb20">
                续期
              </div>
              <span v-if="item.renewBtnStatus==1"  class="btn-text" @click="showXuqiModel(item)"  style="color: #333333">已投放 {{item.launched}} 天，可点击 <span  style="cursor: pointer;color: #409EFF">续期<i class="el-icon-d-arrow-right"></i> </span> </span>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==6&&item.name=='【TV版】屏保视频'&&false">
              <div class="btn" style="background:#cccccc">
                已售罄
              </div>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==7&&false" >
              <div class="btn" style="background:#fd8704" @click.stop="JIEsuan(item)">
                结算
              </div>
              <span v-if="item.renewBtnStatus==1"  class="btn-text"  style="color: #333333">已投放 {{item.launched}} 天，可点击 <span @click.stop="showXuqiModel(item)"   style="cursor: pointer;color: #409EFF">续期<i class="el-icon-d-arrow-right"></i> </span> </span>
            </div>
            <div style="display: flex;align-items: center;margin-top: 10px" >
              <div v-if="item.btnStatus==0">
                <div class="btn" style="background: #ebeef2">
                  立即投放
                </div>
              </div>
            </div>
            <!--<div v-if="item.advId==15">-->
              <!--<div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==1&&item.surplusDay>0" @click="showBtn(item)">-->
                <!--<div class="btn">-->
                  <!--立即投放-->
                <!--</div>-->
                <!--<span class="btn-text" v-if="item.advId==15">3月16日0:00开始投放，支持先投放，后结算</span>-->
                <!--<span class="btn-text" v-else>先投放，后结算</span>-->
              <!--</div>-->
              <!--<div style="display: flex;align-items: center;margin-top: 20px"  v-else>-->
                <!--<div v-if="item.btnStatus==1">-->
                  <!--<div class="btn" style="background: #ebeef2">-->
                    <!--立即投放-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
            <div>
              <div style="display: flex;align-items: center;" v-if="item.btnStatus==1" @click="showBtn(item)">
                <div class="btn">
                  立即投放
                </div>
                <!--<span class="btn-text" v-if="item.advId==15">3月16日0:00开始投放，支持先投放，后结算</span>-->
                <!--<span class="btn-text" v-else>先投放，后结算</span>-->
              </div>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==2&&false" @click="neSS(item.launchId)">
              <div class="btn" style="background: #ff0000">
                未上传资料
              </div>
              <span class="btn-text">请先上传投放资料</span>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==3&&false" >
              <div class="btn" style="background: #ff0000">
                审核中
              </div>
              <span  class="btn-text" v-if="item.type==5">总部工作人员会联系您进行直播排期</span>
              <span  class="btn-text" v-else>资料审核中，审核通过后将于隔天开始投放</span>
            </div>
            <div style="display: flex;align-items: center;margin-top: 20px" v-if="item.btnStatus==4&&false" >
              <div class="btn" style="background: #57ca20">
                投放中
              </div>
              <span v-if="item.renewBtnStatus==1"  class="btn-text"  style="color: #333333">已投放 {{item.launched}} 天，可点击 <span @click.stop="showXuqiModel(item)"   style="cursor: pointer;color: #409EFF">续期<i class="el-icon-d-arrow-right"></i> </span> </span>
            </div>
          </div>
        </div>
        <div style="width:100%;height: 1px;background: #CCCCCC;margin: 20px auto"></div>
      </div>
    </div>
    <div v-if="showModel" class="show-model">
      <div style="position: relative">
        <div class="model-box" :style="{'height':temData.advId==15?'399px':'358px'}">
          <div class="header">是否确认投放广告？</div>
          <div style="position: absolute;right: 16px;top: 16px;cursor: pointer" @click="closeModel">
            <i class="el-icon-close" style="font-size: 16px"></i>
          </div>
          <div>
            <div style="font-size: 16px;color: #333333;font-weight: bold;margin: 0 20px;" v-if="temData.advId==15">
              {{temData.name}}
            </div>
          </div>
          <div class="price-box" style="margin-top: 10px;width: 410px;margin-left: 15px" v-if="temData.advId==15">
            <div>
              价格： <span class="price">￥<span style="font-size: 20px">{{temData.productPrice}}</span>/天</span> <span style="text-decoration-line: line-through;color: #999999" v-if="false">原价：￥9600</span>
            </div>
            <div>
              投放类型：{{typeList[temData.type]}}
            </div>
          </div>
          <div class="price-box" style="margin-top: 1px;width: 410px;margin-left: 15px" v-else>
            <div style="font-size: 16px;color: #333333;font-weight: bold">
              {{temData.name}}
            </div>
            <div>
              价格： <span class="price">￥<span style="font-size: 20px">{{temData.price}}</span>/天</span>
            </div>
          </div>
          <div style="margin-left: 21px;margin-top: 26px">
            <div style="margin: 10px auto">
              投放数量：<el-input-number v-model="temData.defaultNum" :disabled="true" :step="1"></el-input-number>&nbsp&nbsp <span style="color: #FF2E2F;font-weight: bold">限购{{temData.oneLimitNum}}个</span>
            </div>
            <div>
              投放天数：<el-input-number v-model="temData.moq" :disabled="true"  :step="1"></el-input-number>
            </div>
            <div class="model-text">
              温馨提示：确认后，立即上传资料进行审核。如关闭审核窗口，可在“我的广告位”查看广告位订单的相关信息。
            </div>
          </div>
          <div style="display: flex;justify-content: flex-end;align-items: center;border-top: 1px solid #f1f1f1;margin-top: 22px">
            <div>
              投放总价： <span style="font-size: 14px;color: #FF2E2F;font-weight: bold">￥</span>
              <span  style="font-size: 16px;color: #FF2E2F;font-weight: bold">{{(temData.totalPrice)}}</span>
            </div>
            <div class="model-btn" @click="save">
              确认投放
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--确认抵扣-->
    <div v-if="showDiKou" class="show-model" style="z-index: 1000" >
      <div style="position: relative">
        <div class="model-box" style="height: 410px">
          <div class="header">抵扣结算</div>
          <div style="position: absolute;right: 16px;top: 16px;cursor: pointer" @click="showDiKou=false">
            <i class="el-icon-close" style="font-size: 16px"></i>
          </div>
          <div>
            <div style="font-size: 22px;color: #333333;font-weight: bold;text-align: center;margin-bottom: 10px">
              总价
            </div>
            <div style="font-size: 24px;color: #FF2E2F;font-weight: bold;text-align: center;margin-right: 20px">
             <span style="font-size: 16px;">￥</span>{{temJieSuanData.totalPay}}
            </div>
            <div style="font-weight: 600;font-size: 16px;color: #333333;line-height: 21px;width: 386px;margin: 20px auto">
              选择抵扣结算则会从货款余额中抵扣，请联系总部客服或拨打推广热线确认抵扣。
            </div>
            <div style="width: 364px;margin: 18px auto;background: #f1f1f1;padding: 12px;line-height: 21px;border-radius: 10px;">
              <div>推广热线：</div>
              <div>13392942757（小秋）</div>
              <div>13590777619（区先生）</div>
              <div>19814459731（覃先生）</div>
            </div>
            <div style="text-align: center;margin-top: 33px">
              <div v-if="!isPay" style="color: #FF2E2F;font-weight: bold;text-space: 4px">已提交抵扣结算，请联系客服进行确认</div>
              <el-button v-if="isPay" style="width: 240px" type="primary" size="medium " @click="dikouPay(temJieSuanData)">确认抵扣</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--结算-->
    <div v-if="showJieSuan" class="show-model" >
      <div style="position: relative">
        <div class="model-box" style="width: 600px">
          <div class="header">结算</div>
          <div style="position: absolute;right: 16px;top: 16px;cursor: pointer" @click="showJieSuan=false">
            <i class="el-icon-close" style="font-size: 16px"></i>
          </div>
          <div class="price-box" style="margin-top: 1px;width: 538px;margin-left: 15px;height:118px;position: relative;line-height: 20px" >
            <div style="font-size: 16px;color: #333333;font-weight: bold;width: 360px;margin-top: 15px">
              {{temJieSuanData.advName}}
            </div>
            <div style="margin-top: 15px">
              价格： <span class="price">￥<span style="font-size: 20px">{{temJieSuanData.productPrice}}</span>/天</span>
            </div>
          </div>
          <div style="position: relative;left: 32px" :style="{top:temData.advId==15?'-62px':'-72px'}">
           <div>
             <span>已投放数量：{{temJieSuanData.num}}</span> &nbsp&nbsp&nbsp <span>已投放天数：{{temJieSuanData.day}}</span>
           </div>
            <div style="margin-top: 10px">
              <span>已投放价格：<span style="color:#FF2E2F ">￥{{temJieSuanData.totalPay}}</span> </span>
            </div>
          </div>
          <div style="display: flex;justify-content: flex-end;align-items: center;border-top: 1px solid #f1f1f1;margin-top: 86px">
            <div>line_over_2
              投放总价： <span style="font-size: 14px;color: #FF2E2F;font-weight: bold">￥</span>
              <span style="font-size: 16px;color: #FF2E2F;font-weight: bold">{{temJieSuanData.totalPay}}</span>
            </div>
            <div class="model-btn" style="width:150px " @click="zaixianPay(temJieSuanData)">
              在线支付
            </div>
            <div  class="model-btn" style="background: #ffb70a;margin-left: 0;width:150px " @click="showDiKou=true">
              抵扣结算
            </div>
          </div>
        </div>
      </div>
    </div>
    <xufeiModel @resData="closeXufeiModel" :showModel="xufeiData.show" :launchId="xufeiData.id"></xufeiModel>
    <advertisementModel :showBtn="true" @resData="resData" :dialogVisible="dialogData.dialogVisible"  :launchId="dialogData.launchId"  ></advertisementModel>
  </div>
</template>

<script>
  import advertisementModel from "./component/advertisementModel";
  import xufeiModel from "./component/xufeiModel";
  export default {
    components: {
      advertisementModel,xufeiModel
    },
    name: "advertisementList",
    data() {
      return {
        isPay:true,
        temJieSuanData:{},
        showJieSuan:false,
        showDiKou:false,
        lianheImg:require('@/assets/img/lianhe.png'),
        xufeiData:{show:false,id:''},
        dialogData:{
          dialogVisible:false,//弹窗
        },
        temData:{},
        showModel:false,
        typeList:['','视频类','品牌类','商品类','图片类','直播','弹窗类'],
        dataList: [],
        adId: null,
        adTitle: "TV版广告位",
      };
    },
    watch: {
      //监听相同路由下参数变化的时候，从而实现异步刷新
      "$route"(to, from) {
        this.adId = this.$route.params.type ? this.$route.params.type : "-1";
        this.initData();
      },
    },
    mounted() {
      this.adId = this.$route.params.type||-1
      this.initData();
    },
    methods: {
      changeMoq(item,e){
        item.moq=e.day
      },
      dikouPay(data){
        this.$axios.get("/etaoAdv2025/mortgageSettlement?launchId="+data.launchId).then(res => {
          let { code,msg,message } = res.data;
          if (code == 200) {
            this.showJieSuan=false
            this.isPay=false
          }else {
            this.$message.error(msg);
            return
          }
        })
      },
      zaixianPay(data){
        this.$axios.get("/etaoAdv2025/pay?launchId="+data.launchId).then(res => {
          let { code,msg,message } = res.data;
          if (code == 200) {
            document.querySelector('body').innerHTML = message;
            document.forms[0].submit();
          }else {
            this.$message.error(msg);
            return
          }
        })
      },
      JIEsuan(e){
        this.$axios.get("/etaoAdv2025/launch/info?launchId="+e.launchId).then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.temJieSuanData=data.launch
            this.temJieSuanData.productPrice=e.productPrice
          }
          this.isPay=true
        })
        this.showJieSuan=true
      },
      closeXufeiModel(){
        this.xufeiData.show=false
        document.body.style.overflow = '';
        document.body.style.position = '';
        this.initData();
      },
      showXuqiModel(data){
        this.xufeiData.id=data.launchId
        this.xufeiData.show=true
      },
      neSS(data){
        this.dialogData.dialogVisible=true
        this.dialogData.launchId=data
      },
      resData(){
        this.dialogData.dialogVisible=false
        this.closeModel()
      },
      save(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let p = {
          "advId": this.temData.advId, // 广告位id
          "num": this.temData.defaultNum, // 投放数量
          "day": this.temData.moq // 投放天数
        }
        this.$axios.post("/etaoAdv2025/addOrder",p).then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.zaixianPay(data)
            // this.dialogData.dialogVisible=true
            // this.dialogData.launchId=data.launchId
            loading.close();
            // this.$message.success('投放成功！')
            // this.showModel=false
          } else {
            this.$message.error(res.data.message);
            loading.close();
          }
        });
      },
      closeModel(){
        document.body.style.overflow = '';
        document.body.style.position = '';
        this.showModel=false
        this.initData();
      },
      showBtn(item){
        if(item.moq==7||item.moq==15||item.moq==30){
          this.$axios.post("/etaoAdv2025/settlement",{
            "advId": item.advId, // 广告位id
            "num": item.defaultNum, // 投放数量
            "day": item.moq // 投放天数（只能传7,15,30）
          }).then(res=>{
            let { code, data } = res.data;
            if (code == 200) {
              this.temData={...item,...data}
              console.log(this.temData);
              document.body.style.overflow = 'hidden';
              this.showModel=true
            }else {
              this.$message.error(res.data.message);
            }
          })
        }else {
          this.$message.error('请选择天数');
        }
      },
      onPreview(index) {
        this.$refs.preview[index].clickHandler();
      },
      initData() {
        this.$axios.get("/etaoAdv2025/list").then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            if(this.adId==1){
            }else if(this.adId==2){
              this.dataList = data.app;
            }else if(this.adId==3){
              this.dataList = data.pc;
            }else if(this.adId==4){
              this.dataList = data.zb;
            }else if(this.adId==14){
              this.dataList = data.xcx;
            }else if(this.adId==16){
              this.dataList = data.etb;
            }else {
              this.dataList = data.hot;
            }
          } else {
            this.dataList=[]
            this.$message.error(res.data.message);
          }
        });
      },
    },
  };
</script>

<style lang="scss"  scoped>
  .advertisementList {
    .show-model{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
      display: flex; /* 使用Flexbox布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      z-index: 999;
      .model-text{
        margin-top: 40px;
        width: 413px;
        height: 40px;
        font-weight: 400;
        font-size: 14px;
        color: #676767;
        text-align: left;
        font-style: normal;
        line-height: 18px;
      }
      .model-btn{
        margin-left: 15px;
        cursor: pointer;
        width: 170px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color: #FFFFFF;
        font-size: 16px;
        background: #FF6800;
      }
      .model-box{
        height: 358px;
        width: 473px;
        background: #FFFFFF;
        border-radius: 3px;
        .header{
          font-weight: 600;
          font-size: 18px;
          color: #333333;
          text-align: left;
          padding: 20px 20px;
        }
      }
    }
    .btn{
      cursor: pointer;
      text-align: center;
      line-height: 40px;
      color: #FFFFFF;
      width: 190px;
      height: 40px;
      background: linear-gradient( 180deg, #FF9F05 0%, #FF6602 100%);
      border-radius: 20px;
    }
    .btn-text{
      font-weight: bold;
      margin-left: 10px;
      font-size: 14px;
      color: #FF2E2F;
    }
    .title0{
      margin-top: 10px;
      font-weight: bold;
      font-size: 18px;
      color: #333333;
      font-style: normal;
    }
    .title1{
      background: linear-gradient( 270deg, #7632FF 0%, #B366FF 50%, #A020E0 100%), #9500FF;
    }
    .s1{
      border: 1px solid #FF2E2F;
      font-weight: bold;
      font-size: 12px;
      color: #FF2E2F;
      border-radius: 4px;
      padding: 1px 6px;
    }
    .title-s{
      padding: 1px 8px;
      color: #FFFFFF;
      text-align: center;
      line-height: 18px;
      width: 68px;
      height: 18px;
      border-radius: 4px;
    }
    .title2 {
      background: #D59C29;
    }
    .name {
      font-weight: 600;
      font-size: 20px;
      color: #333333;
      margin-left: -10px;
      margin-top: 6px;
      margin-bottom: 10px;
    }
    .name1{
      font-weight: 400;
      font-size: 14px;
      color: #676767;
      font-style: normal;
      line-height: 18px;
    }
    .price-box{
      margin-top: 20px;
      margin-bottom: 10px;
      width: 480px;
      height: 50px;
      background: #F1F1F1;
      border-radius: 10px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      .price{
        font-weight: 600;
        font-size: 14px;
        color: #FF2E2F;
      }
    }
  }
</style>
