<template>
	<div class="myAdvertisement">
    <div style="margin: 15px 15px">
      <div>
        <img src="@/assets/img/ziyuanwei-logo.jpg" alt="">
      </div>
      <div style="margin-top: 10px">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name=""></el-tab-pane>
          <el-tab-pane label="待上传资料" name="1"></el-tab-pane>
          <el-tab-pane label="审核中" name="2"></el-tab-pane>
          <el-tab-pane label="审核不通过" name="3"></el-tab-pane>
          <el-tab-pane label="审核通过并投放（投放中）" name="4"></el-tab-pane>
          <el-tab-pane label="投放结束" name="5"></el-tab-pane>
          <el-tab-pane label="待结算" name="6"></el-tab-pane>
          <el-tab-pane label="已结算" name="7"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="table-wrap">
        <el-table :data="tableData" style="width: 100%" v-loading="tableLoading" stripe>
          <el-table-column prop="skuVisualStock" label="广告位" align="center" width="220px">
            <template slot-scope="scope">
              <div style="display: flex;align-items: center">
                <div>
                  <el-image
                    style="width:80px; height:45px;margin-right: 10px"
                    :src="scope.row.advId==15?lianheImg:scope.row.cover"
                    :preview-src-list="[scope.row.cover]">
                  </el-image>
                </div>
                <div>
                  {{scope.row.advName}}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="deliveryDate" label="状态" align="center">
            <template slot-scope="scope">
              <div @click="neSS(scope.row.launchId,true)" style="font-weight: bold;cursor: pointer" v-if="scope.row.launchStatus==1||scope.row.launchStatus==3">
                <span style="color: #1A79FF" v-if="scope.row.launchStatus==1">{{launchStatusList[scope.row.launchStatus]}}</span>
                <span style="color: #dc362e" v-if="scope.row.launchStatus==3">{{launchStatusList[scope.row.launchStatus]}}</span>
              </div>
              <div  v-else>
                {{launchStatusList[scope.row.launchStatus]}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="投放数量" align="center"></el-table-column>
          <el-table-column prop="day" label="投放天数" align="center"></el-table-column>
          <el-table-column prop="totalPay" label="价格" align="center">
            <template slot-scope="scope">
              <div>
                ￥{{scope.row.totalPay}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="putInStartDate" label="开始时间" align="center"></el-table-column>
          <el-table-column prop="putInEndDate" label="结束时间" align="center"></el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="150">
            <template slot-scope="scope">
             <div style="text-align: center">
               <el-button type="text" size="small" @click="neSS(scope.row.launchId,false)">查看</el-button>
             </div>
              <div style="text-align: center" v-if="false">
                <!--scope.row.launchStatus==1||scope.row.launchStatus==2||scope.row.launchStatus==3-->
                <el-button type="text" size="small" @click="quxiaoSS(scope.row.launchId)">取消投放</el-button>
              </div>
              <!--<div v-if="scope.row.advId!=15">-->
                <!--<div v-if="scope.row.advId!=13">-->
                  <!--<div style="text-align: center" v-if="scope.row.launchStatus==4||scope.row.launchStatus==5||scope.row.launchStatus==6">-->
                    <!--<el-button type="text" size="small" @click="showXuqiModel(scope.row)">续期</el-button>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
              <div style="text-align: center" v-if="(scope.row.launchStatus==5&&scope.row.version==1)||(scope.row.launchStatus==6&&scope.row.version==1)||(scope.row.launchStatus==8&&scope.row.version==1)">
                <el-button type="text" size="small"  @click="JIEsuan(scope.row)">结算</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <pagination
          @eventSizeChange="eventSizeChange"
          @eventCurrentChange="eventCurrentChange"
          :total="total"
          :pageSize="params.pageSize"
        ></pagination>
      </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>
                投放总价： <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="isshowBTN" @resData="resData" :dialogVisible="dialogData.dialogVisible"  :launchId="dialogData.launchId"  ></advertisementModel>

    </div>
  </div>
</template>

<script>
  import xufeiModel from "./component/xufeiModel";
  import advertisementModel from "./component/advertisementModel";
  import pagination from "@/components/common/pagination";
  export default {
    components: { pagination,advertisementModel,xufeiModel},
    name: "myAdvertisement",
    data(){
      return{
        isshowBTN:false,
        temData:{},
        isPay:true,
        temJieSuanData:{},
        showJieSuan:false,
        showDiKou:false,
        lianheImg:require('@/assets/img/lianhe.png'),
        xufeiData:{show:false,id:''},
        dialogData:{
          dialogVisible:false,//弹窗
        },
        // ：1：资料待上传，2：审核中，3：审核不通过，4：审核通过并投放（投放中），5：投放结束，6：待结算，7：已结算
        launchStatusList:['','资料待上传','审核中','审核不通过','审核通过并投放（投放中）','投放结束','待结算','已结算','结算中'],
        tableLoading:false,
        tableData:[],
        activeName:'',
        params: {
          pageNum: 1,
          pageSize: 10,
          launchStatus:'',
        },
        total:0,
      }
    },
    mounted(){
      if(this.$route.query.launchId){
        this.neSS(this.$route.query.launchId,true)
        this.$router.push({path:'/ad/myAdvertisement'})
      }
      this.getData()
    },
    activated(){
      this.getData()
    },
    methods: {
      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.temData=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=data.etaoAdv2025Vo.productPrice
          }
          this.isPay=true
        })
        this.showJieSuan=true
      },
      showXuqiModel(data){
        this.xufeiData.id=data.launchId
        this.xufeiData.show=true
      },
      closeXufeiModel(){
        this.xufeiData.show=false
        document.body.style.overflow = '';
        document.body.style.position = '';
        this.getData()
      },
      quxiaoSS(data){
        this.$confirm('确定要取消投放吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            "launchId": data, // 广告投放id
            "cancelReason": "点错了" // 取消原因
          }
          this.$axios.post("/etaoAdv2025/cancelOrder",params).then(res=>{
            if (res.data.code == 200){
              this.getData()
              this.$message({
                type: 'success',
                message: '取消成功!'
              });
            }else {
              this.$message.error(res.data.message)
            }
          })
        }).catch(() => {

        });
      },
      neSS(data,stu){
        this.isshowBTN=stu
        this.dialogData.dialogVisible=true
        this.dialogData.launchId=data
      },
      resData(){
        this.dialogData.dialogVisible=false
        this.getData()
      },
      getData() {
        var params = this.params;
        this.$axios.get("/etaoAdv2025/myLaunch", { params })
          .then(res => {
            this.tableLoading = false;
            if (res.data.code == 200) {
              var data = res.data.data;
              this.total = parseInt(data.total);
              this.tableData = data.list;
            }else {
              this.tableData=[]
              this.total=0
            }
          })
          .catch(() => {
            this.tableLoading = false;
          });
      },
      eventSizeChange(e) {
        this.params.pageSize = e;
        this.getData();
      },
      eventCurrentChange(e) {
        this.params.pageNum = e;
        this.getData();
      },
      handleClick() {
        this.params.launchStatus=this.activeName==0?'':this.activeName
        this.getData()
      }
    }
  };
</script>

<style lang="scss"  scoped>
  .myAdvertisement {
    .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>

