<template>
<div style="padding: 10px">
  <toptitle name="资源位详情">
    <el-button  @click="goback1()">返回上一步</el-button>
  </toptitle>
  <el-row>
    <el-col :span="10"><div class="grid-content bg-purple" style="position: relative">
      <img style="width: 400px;height: 400px;border: 1px solid #303133" :src="infoData.mainImg" >
      <p style="margin-top: 10px;color: #303133;"> <i class="el-icon-headset"></i> &nbsp咨询电话：{{infoData.contactsMsg}}</p>
      <div>
        <img v-if="infoData.status==0" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);"  src="../../../assets/img/ziyuanwei-node.png" alt="">
      </div>
    </div>
    </el-col>
    <el-col :span="12"><div class="grid-content bg-purple-light" style="line-height: 40px;margin-left: 10px">
      <p style="font-weight: bold;font-size: 22px">{{infoData.title}}</p>
      <p>投放平台：{{infoData.portMsg}}</p>
      <p>类型：{{infoData.typeMsg}}</p>
      <p>内容制作说明：{{infoData.context}}</p>
      <p>投放时间：{{infoData.dateMsg}}</p>
      <p>价格：<span  style="font-size: 16px;color: #FF6801;">￥{{infoData.salePrice}} </span> <span style="text-decoration-line: line-through;color: #A8ABB2;">￥{{infoData.productPrice}}</span></p>
      <p :style="{marginTop:infoData.isSpecialMsg?'90px':'125px'}" v-if="infoData.status!==0">
        <el-button v-if="infoData.payStatus==1" type="primary" style="width:201px;text-align: center" @click="goBuy">立即投放</el-button>
        <el-button v-if="infoData.payStatus==0" type="info" disabled style="width:201px;text-align: center" >等待下次投放</el-button>
      </p>
      <div v-if="infoData.isSpecialMsg" style="color: #ff6600">{{infoData.isSpecialMsg}}</div>
    </div></el-col>
  </el-row>
  <el-dialog
    :close-on-click-modal="false"
    top="2vh"
    title="投放设置"
    :visible.sync="dialogVisible"
    width="800px"
   >
    <div style="display: flex">
      <div class="search-item">
        <el-input class="input"  style="width: 300px" clearable v-model="params.search"
                  placeholder="请输入SPU ID/SPU型号/SKU型号"></el-input>
      </div>
      <div style="margin-left: 10px">
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </div>
    </div>
    <el-row :gutter="10">
    <el-col  :span="6" v-for="(item,index) in actSkuList"><div class="grid-content bg-purple" style="margin-top: 10px;position: relative" >
      <el-card :body-style="{ padding: '0px' }"  shadow="never" >
        <img  style="width:100%" :src="item.mainImg" class="image">
        <div style="margin: 10px 10px;line-height: 20px">
          <div>{{item.skuModel}}</div>
          <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
          <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
        </div>
        <div>
          <div style="position: absolute;top: 10px;left: 10px">
            <img src="./set3.png" style="cursor: pointer" alt="" v-if="item.checken" @click="addShop(item,3)">
            <img src="./set1.png" style="cursor: pointer" alt="" v-else="item.checken" @click="addShop(item,1)">
          </div>
        </div>
      </el-card>
    </div>
    </el-col>
    </el-row>
    <pagination
      @eventCurrentChange="eventCurrentChange"
      :total="total"
      :pageSize="params.pageSize"
      :currentPage="params.pageNum"
      :pagerCount='5'
      layout="total, prev, pager, next, jumper"
    ></pagination>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false,seckenList=[]">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定({{seckenList.length}}/{{infoData.type==3?infoData.setNum:infoData.isSpecial==2?2:1}})</el-button>
  </span>
  </el-dialog>
  <!--图片类-->
  <el-dialog
    :close-on-click-modal="false"
    title="投放设置"
    :visible.sync="showModel"
    width="660px"
  >
    <p>推广名称：<span style="font-weight: bold">{{infoData.title}} </span></p>
    <p style="margin-top: 20px">上传图片：{{infoData.context}}</p>
    <div>
      <div class="imgsizeCom compalin_img" style="margin-top: 30px">
        <uploadImg ref="uploadImgRef" @uploadResult="uploadResult"
                   :isMultiple="true" :uploadWH="uploadWHList"   :limitNum='1'></uploadImg>
      </div>
      <div v-if="infoData.isSpecial==1">
        <p style="margin:20px auto ">置顶商品（{{seckenList.length}}/1）</p>
        <div v-if="seckenList.length>0">
          <div class="box-shop" v-for="item in seckenList">
            <el-row>
              <el-col :span="6">
                <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
              </el-col>
              <el-col :span="16" style="line-height: 20px">
                <div style="margin-top: 10px">{{item.skuModel}}</div>
                <div>
                  <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                  <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                </div>
              </el-col>
            </el-row>
            <div style="position: absolute;top: 10px;right: 10px" @click="seckenList=[]">
              <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
            </div>
          </div>
        </div>
        <div v-else>
          <img @click="showShopList" style="cursor: pointer" src="./addShop.jpg" alt="">
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="showModel = false">取 消</el-button>
    <el-button type="primary" @click="save">提交审核</el-button>
  </span>
  </el-dialog>
  <!--视频类-->
  <el-dialog
    :close-on-click-modal="false"
    title="投放设置"
    :visible.sync="showVideo"
    width="720px"
  >
    <p>推广名称：<span style="font-weight: bold">{{infoData.title}}   <span v-if="infoData.isSpecial==1" style="color: #ff6600">{{infoData.isSpecialMsg}}</span></span></p>
    <p style="margin-top: 20px">上传视频：{{infoData.context}}</p>
    <div>
      <div class="imgsizeCom compalin_img" style="margin-top: 30px">
        <uploadImg ref="uploadImgRefVIdeo" @uploadResult="uploadResultVIdeo"
                   :isMultiple="true"  :uploadWH="uploadWHList" :limitNum='1' :uploadSize="51200" uploadType="video"></uploadImg>
    </div>
      <div v-if="infoData.isSpecial==1||infoData.isSpecial==2">
        <p style="margin:20px auto ">置顶商品（{{seckenList.length}}/{{infoData.isSpecial==2?2:1}}）</p>
        <div v-if="seckenList.length>0">
         <div class="box-shop" v-for="(item,index) in seckenList">
           <el-row>
             <el-col :span="6">
               <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
             </el-col>
             <el-col :span="16" style="line-height: 20px">
               <div style="margin-top: 10px">{{item.skuModel}}</div>
               <div>
                 <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                 <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
               </div>
             </el-col>
           </el-row>
           <div style="position: absolute;top: 10px;right: 10px" @click="delList(index)">
             <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
           </div>
         </div>
        </div>
        <div v-else>
          <img @click="showShopList" style="cursor: pointer" src="./addShop.jpg" alt="">
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="showVideo = false">取 消</el-button>
    <el-button type="primary" @click="save">提交审核</el-button>
  </span>
  </el-dialog>
  <!--商品类-->
  <el-dialog
    :close-on-click-modal="false"
    title="投放设置"
    :visible.sync="showShop"
    width="800px"
  >
    <p>推广名称：<span style="font-weight: bold">{{infoData.title}}</span></p>
    <div>
      <div>
        <p style="margin:20px auto ">已选商品（{{seckenList.length}}/{{infoData.setNum}}）</p>
        <div>

          <el-row>
            <el-col :span="12"  v-for="(item,index) in seckenList" :key="index">
              <div class="box-shop">
                <el-row>
                  <el-col :span="6">
                    <img :src="item.mainImg" style="width: 80px;height: 80px" alt="">
                  </el-col>
                  <el-col :span="12" style="line-height: 20px">
                    <div style="margin-top: 10px">{{item.skuModel}}</div>
                    <div>
                      <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                      <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                    </div>
                  </el-col>
                </el-row>
                <div style="position: absolute;top: 10px;right: 10px" @click="delShop(index)">
                  <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div  v-if="seckenList.length<infoData.setNum">
          <img @click="showShopList" style="cursor: pointer;width: 372px" src="./addShop.jpg" alt="">
        </div>
      </div>
    </div>
    <div v-if="infoData.isAdvGoodsToImgPath==1">
      <p style="margin-top: 20px">上传效果图：建议尺寸500*500，大小1MB内（非必填项）</p>
      <div class="imgsizeCom compalin_img" style="margin-top: 30px">
        <uploadImg ref="uploadImgRef" @uploadResult="uploadResult"
                   :isMultiple="true" :uploadWH="uploadWHList"   :limitNum='1'></uploadImg>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
    <el-button @click="showShop = false">取 消</el-button>
    <el-button type="primary" @click="save">提交审核</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
  import pagination from "@/components/common/pagination";
import uploadImg from "@/components/common/uploadImg"
  import toptitle from "@/components/common/topTitle";
  export default {
    components: {
      toptitle,uploadImg,pagination
    },
    name: "ziyuanweiDetails",
    data(){
      return{
        showShop:false,
        seckenList:[],
        actSkuList:[],
        total: 0,
        params: {
          pageSize: 8,
          pageNum: 1,
          search: "",
        },
        showVideo:false,
        uploadWHList:[],
        paramsCompalin:{
          "voucherImage":"",//多张图片逗号隔开
        },
        showModel:false,
        dialogVisible:false,
        infoData:{},
      }
    },
    mounted(){
      this.initData()
    },
    methods:{
      delList(index){
        this.seckenList.splice(index,1)
      },
      delShop(index){
        this.seckenList.splice(index,1)
      },
      addShop(data,type){
        // 单选
        if(this.infoData.isSpecial==1){
          this.actSkuList.forEach(item=>{
            item.checken=false
          })
          this.$set(data,'checken',true)
          this.seckenList=[data]
          return
        }
        if(type==1){
          if(this.infoData.type==3){
            if(this.seckenList.length==this.infoData.setNum){
              this.$message.error(`最多可投放${this.infoData.setNum}个商品`)
              return
            }
          }
          if(this.infoData.isSpecial==2){
            if(this.seckenList.length==2){
              this.$message.error(`最多可投放2个商品`)
              return
            }
          }
          this.seckenList.push(data)
          this.$set(data,'checken',true)
        }else {
          this.$set(data,'checken',false)
          if(this.seckenList.length>0){
            let index = this.seckenList.findIndex(item=>data.skuId==item.skuId)
            this.seckenList.splice(index,1)
          }
        }
      },
      onSearch() {
        this.params.pageNum = 1;
        this.getActSkuList();
      },
      getActSkuList() {
        this.$axios.post("/etaoadv/productList", {
          ...this.params
        }).then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.total = parseInt(data.total);
            data.list.forEach(item=>{
              item.checken=false
              this.seckenList.forEach(e=>{
                if(item.skuId==e.skuId){
                  item.checken=true
                }
              })
            })
            this.actSkuList = data.list;
          }else {
            this.actSkuList=[]
            this.total=0
          }
        })
      },
      eventSizeChange(e) {
        this.params.pageSize = e;
        this.getActSkuList();
      },
      eventCurrentChange(e) {
        this.params.pageNum = e;
        this.getActSkuList();
      },
      showShopList(){
        this.params.pageNum=1
        this.getActSkuList()
        this.dialogVisible=true
      },
      goback1() {
        history.go(-1);
      },
      uploadResultVIdeo(res){
        this.paramsCompalin.voucherImage = res?res:''
      },
      save(){
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        let p ={
          advId:this.$route.query.advId,
          text:this.paramsCompalin.voucherImage
        }
        if(this.infoData.type==3){
          if(this.seckenList.length>0){
            p.text = (this.seckenList.map(item=>item.skuId)).join(',')
          }
          if(this.infoData.isAdvGoodsToImgPath==1){
            p.advGoodsImgPath=this.paramsCompalin.voucherImage
          }
        }
        if(this.infoData.isSpecial==1&&this.seckenList.length>0){
          p.isSpecialSkuId=this.seckenList[0].skuId
        }
        if(this.infoData.isSpecial==2&&this.seckenList.length>0){
          p.isSpecialSkuId=(this.seckenList.map(item=>item.skuId)).join(',')
        }
        p.orderDetailId=this.$route.query.orderDetailId
        p.orderId=this.$route.query.orderId
        this.$axios
          .post("/etaoadv/againAdv",p)
          .then(res => {
            if (res.data.code == 200) {
              this.$router.push('/marketing/ziyuanwei?type=2');
              loading.close()
            }else {
              this.$message.error(res.data.message)
              loading.close()
            }
          })
          .catch(() => {});
      },
      goBuy(){
        let p ={
          advId:this.$route.query.advId,
        }
        this.$axios
          .post("/etaoadv/buyAdvV2",p)
          .then(res => {
            if (res.data.code == 200) {
              document.querySelector('body').innerHTML = res.data.data;
              document.forms[0].submit();
              loading.close()
            }else {
              this.$message.error(res.data.message)
              loading.close()
            }
          })
          .catch(() => {});
      },
      showType(){
        this.seckenList=[]
        this.paramsCompalin.voucherImage=[]
        if(this.infoData.typeMsg=='图片类'){
          if(this.infoData.advSizes){
            this.uploadWHList=this.infoData.advSizes
          }
          if(!!this.$refs.uploadImgRef){
            this.$refs.uploadImgRef.imgsJson.supMainImgs =[]
          }
          this.showModel=true
        }else if(this.infoData.typeMsg=='视频类') {
          if(!!this.$refs.uploadImgRefVIdeo){
            this.$refs.uploadImgRefVIdeo.imgsJson.supMainImgs =[]
          }
          this.showVideo=true
        }else if(this.infoData.typeMsg=='商品类') {
          this.showShop=true
        }
      },
      uploadResult(res){
        this.paramsCompalin.voucherImage = res?res:''
      },
      initData(){
        this.$axios
          .get("/etaoadv/getInfo?advId="+this.$route.query.advId)
          .then(res => {
            if (res.data.code == 200) {
                 this.infoData=res.data.data
              if(this.$route.query.orderId){
                 this.showType()
              }
            }
          })
          .catch(() => {});
      },
    },
  };
</script>

<style scoped>
.box-shop{
  margin-bottom: 10px;
  position: relative;
  width: 360px;
  min-height: 80px;
  background: #FFFFFF;
  border: 1px solid #E4E7ED;
}
</style>
