<template>
  <div v-if="showModel" class="show-model">
    <div style="position: relative">
      <div class="model-box">
        <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 class="price-box" style="margin-top: 1px;width: 410px;margin-left: 15px;line-height: 30px">
          <div style="display: flex;justify-content: space-between">
            <div style="font-size: 16px;color: #333333;font-weight: bold;margin-top: 12px">
              {{etaoAdv2025Vo.name}}
            </div>
            <div style="margin-top: 12px">
              价格： <span class="price">￥<span style="font-size: 20px">{{etaoAdv2025Vo.productPrice}}</span>/天</span>
            </div>
          </div>
          <div style="margin-left: 5px">
            <div style="font-size: 14px">
              <span>投放数量：{{launch.num}}</span><span style="margin-left: 30px"> 投放天数：{{launch.day}}</span>
            </div>
            <div>
              已投放价格：<span style="color: #FF2E2F;font-size: 14px;font-weight: bold">￥{{launch.totalPay}}</span>
            </div>
          </div>
        </div>
        <div style="margin-left: 21px;margin-top: 26px;margin-bottom: 75px">
          <div>
            投放天数：<el-input-number v-model="temDay" :min="1" :max="etaoAdv2025Vo.surplusDay"    :step="1"></el-input-number>&nbsp&nbsp  <span>可续投：{{etaoAdv2025Vo.canBuyDay}}天</span>
          </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">{{(launch.num*(temDay+launch.day)*etaoAdv2025Vo.productPrice).toFixed(2)}}</span>
          </div>
          <div class="model-btn" style="cursor: pointer" @click="save" :class="{'target-element':loading}">
            续期
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "xufeiModel",
    props: {
      showModel: Boolean,
      launchId:String,
    },
    data(){
      return{
        temDay:1,
        loading:false,
        etaoAdv2025Vo:{},
        launch:{},
      }
    },
    watch:{
      showModel(n){
        if(n){
          document.body.style.overflow = 'hidden';
          this.getInfo()
        }
      },
    },
    methods:{
      getInfo(){
        this.$axios.get("/etaoAdv2025/launch/info?launchId="+this.launchId).then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.etaoAdv2025Vo=data.etaoAdv2025Vo
            this.launch=data.launch
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      save(){
        this.loading=true
        this.$axios.get(`/etaoAdv2025/renew?launchId=${this.launchId}&day=${this.temDay}`).then(res=>{
          let { code,message } = res.data;
          if(code==200){
            this.$message.success('成功')
            this.loading=false
            this.$emit("resData",true);
          }else {
            this.loading=false
            this.$message.error(message)
          }
        })
      },
      closeModel(){
        document.body.style.overflow = '';
        document.body.style.position = '';
        this.$emit("resData",false);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .target-element {
    pointer-events: none;
  }
  .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;
      }
      .price-box{
        margin-top: 20px;
        margin-bottom: 10px;
        width: 480px;
        height: 119px;
        background: #F1F1F1;
        border-radius: 10px;
        padding: 0 15px;
        .price{
          font-weight: 600;
          font-size: 14px;
          color: #FF2E2F;
        }
      }
    }
  }
</style>
