<template>
  <div class="main_box">
    <top-title name="广告详情"></top-title>
    <div>
      <el-form
        ref="ruleForm"
        label-width="90px"
        :model="params"
      >
      <div class="tit">广告信息：</div>
        <el-form-item
          label="广告封面："
          prop="name"
        >
          <template>
              <div>
                  <el-row>
                      <el-col :span="10">
                            <el-form-item label="" prop="qrCode">
                              <div class="img_show_box">
                                <el-image 
                                  class="s_img_box"
                                  :src="params.advertisementCoverImage" 
                                  :preview-src-list="[params.advertisementCoverImage]">
                                </el-image>
                                <!-- 操作按钮 -->
                              <!-- <span class="s_action">
                                <span
                                  class="s_btn"
                                  >
                                  <i class="el-icon-zoom-in"></i>
                                </span>
                              </span> -->
                              </div>
                            </el-form-item>
                      </el-col>
                      <el-col :span="10">
                           <el-form-item label="投放展示：">
                           <div class="img_show_box">
                                <el-image 
                                  class="s_img_box"
                                  :src="params.advertisementImage" 
                                  :preview-src-list="[params.advertisementImage]">
                                </el-image>
                              </div>
                            </el-form-item>
                      </el-col>
                  </el-row>
              </div>
          </template>
        </el-form-item>
        <el-form-item label="广告标题：">
          <span>{{params.advertisementTitle}}</span>
        </el-form-item>
       <el-form-item label="投放端口：">
         <span>{{params.portContent}}</span>
        </el-form-item>
        <el-form-item label="投放价格：" >
          <div v-if="params.showMoneyContent">日常价：<span style="color:#ff0000;">{{params.showMoneyContent}}</span></div>
          <div v-if="params.actShowMoneyContent">活动价：<span style="color:#ff0000;">{{params.actShowMoneyContent }}</span></div>
        </el-form-item>

        <el-divider></el-divider>

        <div class="tit">我的投放：</div>
        <el-form-item label="投放图片：" v-if="params.type==1">
            <span class="f_c_must">建议图片大小为1920*350px，大小不超过500KB</span>
            <uploadImg ref="uploadImgRef_cover" @uploadResult="uploadResult1" :isMultiple="false"></uploadImg>
        </el-form-item>
        <el-form-item label="投放视频：" v-if="params.type==2">
            <span class="f_c_must">商品短视频必须为MP4格式，大小不可超过{{params.videoSize}}M</span>
            <uploadImg ref="uploadImgRef_cover" class="video_box" @uploadResult="uploadResult1" :isMultiple="false" :uploadType="'video'" :uploadSize="params.videoSize*1024"></uploadImg>
        </el-form-item>
        <el-form-item label="关联商品：" v-if="params.jumpType==1">
          <div class="select_pro" v-if="detialItem.spuId">
            <SelectProductCard :item="detialItem" type="0" :border="false"/>
            <div class="s_action" @click="selectPro()">
              <span class="s_btn">
                <i class="el-icon-refresh"></i>
              </span>
            </div>
          </div>
          <div v-else class="select_pro">
            <div class="sel"  @click="selectPro()">
             <img
                class="sel_ico"
                src="../../../assets/img/add_kefu.png"
                alt
              />
              <p class="sel_txt">选择商品</p>

            </div>
          </div>
        </el-form-item>
        <el-form-item label="关联品牌：" v-if="params.jumpType==2">
          <span>{{params.putJumpContent}}</span>
        </el-form-item>
        <el-form-item label="投放时长：">
          <el-select v-model="params.timeStatus" placeholder="投放时长" @change="onSelectTime">
            <el-option label="1周" :value="1"></el-option>
            <el-option label="2周" :value="2"></el-option>
            <el-option label="3周" :value="3"></el-option>
            <el-option label="4周" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投放时间：">
          <span>{{params.startTime + ' 至 ' +params.endTime}}</span>
          <div class="timetit">系统已为您排到最近的时间</div>
        </el-form-item>
        <el-form-item label="实际支付：">
          <span style="color:#ff0000;font-weight:bold;">{{params.resultPrice}}元</span>
          <div class="timetit">实际支付价格 = 日常价*天数 + 活动价*天数</div>
        </el-form-item>

      </el-form>
      <sel-pro-dialog
        :dialogVisiblePro="dialogVisible"
        @changeDia="changeDialogV"
        :ids="checkIds"
        :list="checkList"
        :max="1"
        :min="0"
        :goodsListUrl="productsUrl"
        ref="selPro"
        ></sel-pro-dialog>
    </div>
    <div class="btns">
      <el-button type="primary" @click="onSave('ruleForm')">购买广告投放</el-button>
      <el-button @click="$router.back()">返回</el-button>
    </div>
  </div>
</template>

<script>
import {_getStorage} from '@/utils/utils'
import topTitle from "@/components/common/topTitle";
import uploadImg from "@/components/common/uploadImg"
import selProDialog from "./selectProductMultipleDialog"
import SelectProductCard from "@/components/common/SelectProductCard"
export default {
    components: {
    topTitle,uploadImg,selProDialog,SelectProductCard
  },
  data() {
    return {
      params: {
      "advertisementId":'',//广告编号
      "timeStatus":1,//1周 2周 3周 4周
      "putJumpContent":"",//跳转 商品 或者品牌
      },
      productsUrl:'/advertisement/productList',
      dialogVisible:false,
      checkIds:[],
      checkList:[],
      detialItem:{}
    };
  },
  mounted() {
    let { brandName } = _getStorage("info");
    this.params.putJumpContent = brandName;
    let id = this.$route.query.id;
    if (id) {
      this.params.advertisementId = id;
      this.getData();
    }
  },
  methods: {
    onSelectTime(e){
      this.getPrice(e);
    },
    getPrice(status){
      this.$axios.post("/advertisement/getPrice", {
        id:this.params.advertisementId,
        status:status
      })
        .then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.params.resultPrice=data.resultPrice;
            this.params.startTime=data.startTime;
            this.params.endTime=data.endTime;
            this.params.showMoneyContent=data.showMoneyContent;
            this.params.actShowMoneyContent = data.actShowMoneyContent;
          }
        });
    },
    changeDialogV(e,ids,list){
      this.dialogVisible =e;
      if(ids&&ids.length>0){
        this.params.putJumpContent=ids[0];
      }
      if(list&&list.length>0){
        this.detialItem=list[0]
      }
    },
    selectPro(){
      this.dialogVisible=true;
    },
     uploadResult1(res){
        this.params.putAdvertisement = res?res:''
     },
    getData() {
      this.$axios.get("/advertisement/info", {
        params:{id:this.params.advertisementId}
      })
        .then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.params = { ...this.params, ...data};
            this.getPrice(this.params.timeStatus);
            this.$nextTick(function(){
                this.$refs.uploadImgRef_cover.imgsJson['supMainImgs'] = data.putAdvertisement?[{url:data.putAdvertisement}]:[]
            })
          }
        });
    },
    onSave(formName) {
      if(!this.params.putAdvertisement){
        if(this.params.type==1){
          this.$message.error("请上传投放图片！");
        }else{
          this.$message.error("请上传投放视频！");
        }
        return
      }
      if(!this.params.putJumpContent){
        if(this.params.jumpType==1){
          this.$message.error("请选择关联商品！");
        }
        return
      }
      var params = {
        "id":this.params.advertisementId,//广告编号
        "sellPrice":this.params.resultPrice,//支付金额
        "status":this.params.timeStatus,//1周 2周 3周 4周
        "putAdvertisement":this.params.putAdvertisement,// 图片或者是视频 
        "putJumpContent":this.params.putJumpContent,//跳转 商品 或者品牌
        "startTime":this.params.startTime,// 开始时间
        "endTime":this.params.endTime// 结束时间
      }
      this.$axios.post("/advertisement/buyAdvertisement", params).then(res => {
        let { code, data, msg,message } = res.data;
          if(code == 200){
            if(data){
              document.querySelector('body').innerHTML = data;
              document.forms[0].submit();
            }else{
              this.$message.error(msg||message);
            }
          }else{
            this.$message.error(msg||message);
            return
          }
      });
    }
  },
};
</script>
<style >
    
</style>
<style lang="scss" scoped>
.timetit{
  color: #f60;
  font-size: 12px;
  line-height: 14px;
}
.select_pro{
    cursor: pointer;
    border: 1px solid #e0e0e0;
    width: 220px;
    height: 340px;
    line-height: 16px;
    position: relative;
    .sel{
      margin-top: 100px;
      cursor: pointer;
      text-align: center;
      img{
        width: 70px;
        height: 70px;
      }
      .sel_txt{
        color: #f60;
        padding-top: 10px;
      }
    }
    .s_action{
      font-size: 30px;
    }
    .s_btn{
      line-height: 340px;
    }
}
.main_box{
  padding: 10px;
}
.tit{
  font-weight: bold;
  font-size: 16px;
  padding-bottom: 20px;
}
.f_c_must {
    color: #F56C6C;
}
.input {
  width: 300px;
}
.btns {
display: flex;
justify-content: center;
margin: 50px 0;
}
/deep/ .el-upload--picture-card{
    width: 350px;
    height: 200px;
    line-height: 200px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
    width: 350px;
    height: 200px;
    line-height: 200px;
}
.s_img_box{
  width: 100%;
  height: 100%;
}
.img_show_box{
    width: 350px;
    height: 200px;
    line-height: 200px;
    position: relative;
}
.s_img{
    width: 100%;
    height: 100%;
}
.s_action{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0,0,0,0.5);
  -webkit-transition: opacity .3s;
  transition: opacity .3s;

}
.s_action:hover{
  opacity: 1;
  .s_btn{
    cursor: pointer;
  }
}
</style>
