@extends('Public.index')
@section('admin')
<script src="/admin/plugins/jquery/jquery.min.js"></script>
<script src="/admin/layer-v3.1.1/layer/layer.js"></script>
<!-- 图片裁剪 -->
<!-- <link rel="stylesheet" type="text/css" href="/img_cate/ycbootstrap.css"> -->
<link rel="stylesheet" type="text/css" href="/img_cate/reset.css">
<script src="/img_cate/jquery-1.10.2.js"></script>
<!-- <script src="/img_cate/jquery.min.js"></script> -->
<script src="/img_cate/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="/img_cate/hammer.js" type="text/javascript" charset="utf-8"></script>
<script src="/img_cate/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
<script src="/img_cate/jquery.photoClip.min.js" type="text/javascript" charset="utf-8"></script>
<style>
  img {
    max-width: 100%;
  }
</style>
<input type="hidden" value="" id="result">
<div class="content-wrapper" style="min-height: 810px;">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h4>首页营销</h4>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/admin/index">首页</a></li>
              <li class="breadcrumb-item active">商品管理</li>
              <li class="breadcrumb-item active">首页营销</li>
            </ol>
          </div>
        </div>
      </div>
    </section>
    <!-- <div class="col-xs-3">
        <button class="btn btn-danger back" style="margin-left:17px;margin-bottom:15px"> 返回列表</button>
    </div> -->

    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-body p-0">
                <!-- 表单 -->
                <!-- <form class="form">
                    <div class="form-group m-4">
                        <label for="exampleInputName2" class="col-md-4"> 链接文章或商品</label>
                        <select class="form-control col-md-6" id="link">
                            <option disabled>商品</option>
                            @foreach($goods as $key => $val)
                            <option value="sp/{{ $val -> id }}" @if($ad -> link == 'pages/goodsDetail/goodsDetail?id=' . $val -> id) selected @endif>-- {{ $val -> goods_name }}</option>
                            @endforeach
                            <option disabled>文章或沙龙</option>
                            @foreach($wz as $key => $val)
                            <option value="wz/{{ $val -> id }}" @if($ad -> link == 'pages/wzDetail/wzDetail?id=' . $val -> id) selected @endif>-- {{ $val -> wz_name }}</option>
                            @endforeach
                        </select>
                    </div>
                </form> -->
                <form class="form">
                    <div class="form-group m-4">
                        <label for="exampleInputName2" class="col-md-4"> 链接文章或商品</label>
                        <select class="form-control col-md-6" id="select">
                            <option value="" class="se">--选择--</option>
                            <option value="1">商品</option>
                            <!-- <option value="2">文章</option> -->
                        </select>
                    </div>
                </form>
                
                <!-- 商品分类 -->
                <form class="form goods_item" style="display:none">
                    <div class="form-group m-4">
                        <label for="exampleInputName2" class="col-md-4"> 商品分类</label>
                        <select class="form-control col-md-6" id="goods_cate">
                            <option value="" class="goods">--选择--</option>
                            
                        </select>
                    </div>
                </form>
                <!-- 文章分类 -->
                <form class="form wz_item" style="display:none">
                    <div class="form-group m-4">
                        <label for="exampleInputName2" class="col-md-4"> 文章分类</label>
                        <select class="form-control col-md-6" id="wz_cate">
                            <option value="" class="wz">--选择--</option>
                            
                        </select>
                    </div>
                </form>
                <!-- 三级分类 -->
                <!-- 商品 -->
                <form class="form goods_item3" style="display:none">
                    <div class="form-group m-4">
                        <label for="exampleInputName2" class="col-md-4"> 选择商品</label>
                        <select class="form-control col-md-6" id="goods_cate3">
                            <option value="" class="goods3">--选择--</option>
                            
                        </select>
                    </div>
                </form>
                <!-- 文章 -->
                <form class="form wz_item3" style="display:none">
                    <div class="form-group m-4">
                        <label for="exampleInputName2" class="col-md-4"> 选择文章</label>
                        <select class="form-control col-md-6" id="wz_cate3">
                            <option value="" class="wz3">--选择--</option>
                            
                        </select>
                    </div>
                </form>
                <!-- 图片裁剪代码 -->
                <body style="">
                  <div class="yc-upload-wrap col-md-6">
                  <div class="yc-upload-box">
                  <div class="container">
                  <div class="row">
                  <div class="col-md-12 col-sm-12 col-xs-12" style="padding:0;">
                  <div class="ycupload-mainbox">
                  <div class="ycupload-line"></div>
                  <div style="height:30px;"></div>
                  <div style="min-height:1px;">
                  <div class="container">
                  <div class="row">
                  <div class="col-md-12 col-sm-12 col-xs-12" style="padding-right:0;padding-left:36px;">

                  <div style="min-height:1px;line-height:160px;text-align:center;position:relative;" ontouchstart="">
                  <div class="cover-wrap" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 10000000; text-align: center; display: none;">
                  <div class="" style="width:900px;height:600px;margin:100px auto;background-color:#FFFFFF;overflow: hidden;border-radius:4px;">
                  <div id="clipArea" style="margin: 10px; height: 520px; user-select: none; overflow: hidden; position: relative;"><div class="photo-clip-view" style="position: absolute; left: 50%; top: 50%; width: 428px; height: 321px; margin-left: -214px; margin-top: -160.5px;"><div class="photo-clip-moveLayer" style="transform-origin: 0px 0px 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px);"><div class="photo-clip-rotateLayer"></div></div></div><div class="photo-clip-mask" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;"><div class="photo-clip-mask-left" style="position: absolute; left: 0px; right: 50%; top: 50%; bottom: 50%; width: auto; height: 321px; margin-right: 214px; margin-top: -160.5px; margin-bottom: -160.5px; background-color: rgba(0, 0, 0, 0.5);"></div><div class="photo-clip-mask-right" style="position: absolute; left: 50%; right: 0px; top: 50%; bottom: 50%; margin-left: 214px; margin-top: -160.5px; margin-bottom: -160.5px; background-color: rgba(0, 0, 0, 0.5);"></div><div class="photo-clip-mask-top" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 50%; margin-bottom: 160.5px; background-color: rgba(0, 0, 0, 0.5);"></div><div class="photo-clip-mask-bottom" style="position: absolute; left: 0px; right: 0px; top: 50%; bottom: 0px; margin-top: 160.5px; background-color: rgba(0, 0, 0, 0.5);"></div><div class="photo-clip-area" style="border: 1px dashed rgb(221, 221, 221); position: absolute; left: 50%; top: 50%; width: 428px; height: 321px; margin-left: -215px; margin-top: -161.5px;"></div></div></div>
                  <div class="" style="height:56px;line-height:36px;text-align: center;padding-top:8px;">
                  <button id="clipBtn" style="width:120px;height: 36px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align: center;line-height: 36px;outline: none;">保存封面</button>
                  </div>
                  </div>
                  </div>
                  <div id="view"  style="width: 564px; height: 323px; background-color: rgb(102, 102, 102); background:url('/{{ $ad -> imgUrl }}'); background-repeat: no-repeat; background-position: center center; background-size: contain;" title="请上传 428*321 的封面图片"></div>
                  <div style="height:10px;"></div>
                  <div class="" style="width:140px;height:32px;border-radius: 4px;background-color:#ff8a00;color: #FFFFFF;font-size: 14px;text-align:center;line-height:32px;outline:none;margin-left:37px;position:relative;">
                  点击上传封面图(564x323)
                  <input type="file" id="file" style="cursor:pointer;opacity:0;filter:alpha(opacity=0);width:100%;height:100%;position:absolute;top:0;left:0;" accept="image/*">
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  <!-- <div style="height:25px;"></div> -->
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>

                  </body>
                  
                <input type="hidden" id="imgURL">

                <form class="form">
                    <div class="form-group m-4 col-sm-6">
                        <a class="btn btn-success ok" style="color:white">保存</a>
                    </div>
                </form>
                <!-- 表单结束 --> 

              </div>
            </div>
          </div>
        </div>
    </section>
  </div>

<script>
$('.back').click(function(){
    window.location.href="/admin/goodscate/goods";
})
//选择门店联动
$('#md').change(function(){
    let id = $('#md option:selected').val();
    if(!id){
      layer.alert('参数不全');
      return false;
    }
    ajax(id);
})

//默认门店分类联动预选择
  var clipArea = new bjj.PhotoClip("#clipArea", {
      size: [564, 323],// 截取框的宽和高组成的数组。默认值为[260,260]
      outputSize: [0, 0], // 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
      //outputType: "jpg", // 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
      file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
      view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
      ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
      loadStart: function() {
        $('.cover-wrap').fadeIn();
        console.log("照片读取中");
      },
      loadComplete: function() {
        console.log("照片读取完成");
      },
      clipFinish: function(dataURL) {
        $('.cover-wrap').fadeOut();
        $('#view').css('background-size','100% 100%');
        if(dataURL){
          $('#imgURL').val(dataURL);
        }
      }
    });
$('.ok').click(function(){
  var imgURL = $('#imgURL').val();
  var link = $('#result').val();
  $.post('/admin/ad/ad',{imgURL:imgURL,link:link,save:'save'},function(res){
          if(res.code == '1000'){
                layer.alert(res.msg);
            }else{
                layer.alert(res.msg);
            }
  })
})


//4-11   二级分类
$('#select').change(function(){
  $('.se').attr('disabled','true')
  var status = $(this).val();
  //选择了呃文章或者商品
    //文章
    $.get('/getxuanze',{status,status},function(res){
      console.log(res);
      var html = '';
      if(res.code == '1000') {
        for(var x in res.result ) {
          html += '<option value='+ res.result[x].id +'>'+ res.result[x].cate_name +'</option>';
        }
        //先要隐藏分类和下面的所有下拉
        //清空goods和wz下面的下拉
        $('#goods_cate').html('').append('<option value="" class="goods">--选择--</option>');
        $('#wz_cate').html('').append('<option value="" class="wz">--选择--</option>');
        $('#goods_cate3').html('').append('<option value="" class="goods">--选择--</option>');
        $('#wz_cate3').html('').append('<option value="" class="wz">--选择--</option>');
        $('.goods_item').attr('style','display:none');
        $('.wz_item').attr('style','display:none');
        $('.goods_item3').attr('style','display:none');
        $('.wz_item3').attr('style','display:none');
        if(status == 1) {   //商品
          $('.goods_item').attr('style','display:block');
          $('.goods').after(html);
        }else{
          $('.wz_item').attr('style','display:block');
          $('.wz').after(html);
        }
        
      }
    })
})
//三级分类
//选择商品
$('#goods_cate').change(function () {
  var id = $(this).val();
  if(id) {
    $.get('/getxuanze3',{id:id,status:'goods'},function(res){
      console.log(res);
      var html = '';
      if(res.code == '1000') {
        for(var x in res.result ) {
          html += '<option value=sp/'+ res.result[x].id +'>'+ res.result[x].goods_name +'</option>';
        }
        //先要下面的所有三级下拉
        $('.goods_item3').attr('style','display:none');
        $('.wz_item3').attr('style','display:none');
        $('.goods_item3').attr('style','display:block');
        $('#goods_cate3').html('').append('<option value="" class="goods3">--选择--</option>');
        $('#wz_cate3').html('').append('<option value="" class="wz3">--选择--</option>');
        $('.goods3').after(html);
      }

    })
  }
})
$('#wz_cate').change(function () {
  var id = $(this).val();
  if(id) {
    $.get('/getxuanze3',{id:id,status:'wz'},function(res){
      console.log(res);
      var html = '';
      if(res.code == '1000') {
        for(var x in res.result ) {
          html += '<option value=wz/'+ res.result[x].id +'>'+ res.result[x].wz_name +'</option>';
        }
        //先要下面的所有三级下拉
        $('.goods_item3').attr('style','display:none');
        $('.wz_item3').attr('style','display:none');
        $('.wz_item3').attr('style','display:block');
        $('#goods_cate3').html('').append('<option value="" class="goods3">--选择--</option>');
        $('#wz_cate3').html('').append('<option value="" class="wz3">--选择--</option>');
        $('.wz3').after(html);
      }
    })
  }
})
$('#goods_cate3').change(function(){
  var id = $(this).val();
  $('#result').val(id);
})
$('#wz_cate3').change(function(){
  var id = $(this).val();
  $('#result').val(id);
})
</script>
@endsection
@section('title','商品添加')
@section('goods','menu-open')
@section('goods2','active')
@section('ad','active')