{extend name="public/base" /} {block name="body"}
<style>
.body-content{
    width: 96%;
    height:100%;
    display: flex;
    justify-content: center; 
    display:block;
    margin: 0 auto;
    padding-bottom: 50px;
}
.tit{
    width: 100%;
    padding-top:18px;
}
.inp{
    width: 250px;
}
.avatar {
width: 178px;
display: block;
}
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
input[type=file]{
    display: none;
}
.uploadlist{
    margin-left:20px;
    margin-top:20px;
    margin-bottom:20px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/application/admin/static/js/oss-h5-upload-js-direct/style.css" />

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
style="box-shadow: 2px 2px 2px #eee;">
<div class="modal-dialog">
  <div class="modal-content" style="overflow:auto;height:555px">
    
    <div class="uploadlist">
    <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>

    <br/>

    <div id="container">
        <a id="selectfiles" href="javascript:void(0);" class='btn btn-info'>选择文件</a>
        <a id="postfiles" href="javascript:void(0);" class='btn btn-info'>开始上传</a>
    </div>        
    </div> 

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


<div class="main-box clearfix" id="app">
<div class="body-content">

<div class="tit">
<el-button type="primary" size="mini" @click="uploadpart">上传集数</el-button>
<el-button type="primary" size="mini" @click="setall">批量设置</el-button>
</div>


  <el-table
    :data="tableData"
    style="width: 100%">
      
    <el-table-column
      fixed
      prop="order"
      label="集">
    </el-table-column>
    
    <el-table-column
      label="视频">
        <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="getmp4(scope.row.video_url)">查看</el-button>
        </template>        
    </el-table-column>
    
    <el-table-column
      prop="title"
      label="标题">
    </el-table-column>
    
    <el-table-column
      prop="price"
      label="书币">
    </el-table-column>
    
    <el-table-column
      label="是否付费">
        <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.isvip==1">付费</el-tag>
            <el-tag type="success" v-if="scope.row.isvip==0">免费</el-tag>
        </template> 
    </el-table-column>
    
    <el-table-column
      label="状态">
        <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.status==0">禁用</el-tag>
            <el-tag type="success" v-if="scope.row.status==1">正常</el-tag>
        </template>        
    </el-table-column>    

    <el-table-column
      prop="addtime"
      label="添加时间">
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
            
        <el-button
          @click="addlinkshow(scope.row)"
          type="text"
          size="small"
          v-if="scope.row.order<=6">
          生成推广链接
        </el-button>             
            
        <el-button
          @click="exitRow(scope.row)"
          type="text"
          size="small">
          编辑
        </el-button>          
          
        <el-button
          @click="deleteRow(scope.row.id)"
          type="text"
          size="small">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-dialog title="查看视频" :visible.sync="dialogFormVisible">
      <video controls="controls" autoplay="autoplay" :src="videourl" width="100%"></video>  
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    
<el-dialog title="编辑" :visible.sync="dialogFormVisible2">
  <el-form :model="exitRowData">
      
        <el-form-item label="标题" :label-width="formLabelWidth">
          <el-input v-model="exitRowData.title" autocomplete="off" class="inp"></el-input>
        </el-form-item>
        
        <el-form-item label="书币价格" :label-width="formLabelWidth">
          <el-input v-model="exitRowData.price" autocomplete="off" class="inp"></el-input>
        </el-form-item>        
        
        <el-form-item label="是否付费" :label-width="formLabelWidth">
          <el-select v-model="exitRowData.isvip" placeholder="是否付费" style="width:108px;">
            <el-option label="免费" value="0"></el-option>
            <el-option label="付费" value="1"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="exitRowData.status" placeholder="状态" style="width:108px;">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="正常" value="1"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="集" :label-width="formLabelWidth">
          <el-input v-model="exitRowData.order" autocomplete="off" class="inp"></el-input>
        </el-form-item>        
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="exitdataca(exitRowData)" :loading="loadingav">确 定</el-button>
      </div>
</el-dialog>    
    

<el-dialog title="批量设置" :visible.sync="dialogFormVisible3">
   
  <el-form :model="selalldata">  
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="selone" placeholder="选择" style="width:108px;">
            <el-option label="章节付费" value="1"></el-option>
            <el-option label="全本购买" value="2"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="全本购买价格" :label-width="formLabelWidth" v-if="selone==2">
          <el-input v-model="selalldata.allprice" style="width:108px"></el-input>
        </el-form-item>
        
        <el-form-item label="集选择" :label-width="formLabelWidth" v-if="selone==1">
          <el-input v-model="selalldata.start" style="width:108px" placeholder="第1集" type="number" min="1"></el-input>
          <label>-</label>
          <el-input v-model="selalldata.end" style="width:108px" placeholder="第2集" type="number" min="1"></el-input>
        </el-form-item>
        
        <el-form-item label="操作" :label-width="formLabelWidth" v-if="selone==1">
            <template>
              <el-radio v-model="allradio" label="1">禁用</el-radio>
              <el-radio v-model="allradio" label="2">正常</el-radio>
              <el-radio v-model="allradio" label="3">付费</el-radio>
              <el-radio v-model="allradio" label="4">免费</el-radio>
            </template>
        </el-form-item>
        
        <el-form-item label="单章价格" :label-width="formLabelWidth" v-if="allradio==3 && selone==1">
          <el-input v-model="selalldata.bookone" style="width:108px"></el-input>
        </el-form-item>
        
  </el-form>
    
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible3 = false">取 消</el-button>
    <el-button type="primary" @click="upallconf">确 定</el-button>
  </div>
</el-dialog>

     
<el-dialog title="生成推广链接" :visible.sync="dialogFormVisible4">
  <el-form :model="linkRowData">
      
        <el-form-item label="短剧名称" :label-width="formLabelWidth">
          <el-input v-model="linkRowData.title" autocomplete="off" class="inp" :disabled="true"></el-input>
        </el-form-item>
        
        <el-form-item label="第X集" :label-width="formLabelWidth">
          <el-input v-model="linkRowData.order" autocomplete="off" class="inp" :disabled="true"></el-input>
        </el-form-item>        
        
        <el-form-item label="渠道名称" :label-width="formLabelWidth">
          <el-input v-model="linkRowData.remark" autocomplete="off" class="inp"></el-input>
        </el-form-item>        
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible4 = false">取 消</el-button>
        <el-button type="primary" @click="addlink()" :loading="loadingav">生 成</el-button>
      </div>
</el-dialog> 

</div>
</div>
{/block} {block name="script"}
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/base64.js"></script>
<script type="text/javascript" src="/application/admin/static/js/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        tableData: [],
        dialogFormVisible:false,
        dialogFormVisible2:false,
        dialogFormVisible3:false,
        dialogFormVisible4:false,
        videourl:'',
        exitRowData:'',
        linkRowData:[],
        formLabelWidth:"100px",
        selone:'1',
        selalldata:[],
        allradio:'',
        loadingav:false,
        },
        methods: {
           refreshs() {
                this.loading = true
                var that = this
                var id = "{$id}"
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitchapter/refreshs')}",
                    data: {id:id},
                    dataType: "json",
                    success: function(data) {
                        that.loading = false
                        if (data.status == 1) {
                              that.tableData = data.data
                        }
                    }
                });
            },
            uploadpart(){
                $("#myModal").modal('show');
            },
            deleteRow(id){
                this.$confirm('此操作将删除该章节该视频 确定?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    var that = this
                    $.ajax({
                        type: "POST",
                        url: "{:url('Skitchapter/deleteRow')}",
                        data: {id:id},
                        dataType: "json",
                        success: function(data) {
                            if (data.status == 1) {
                                  that.refreshs()
                                  that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                  });
                            }
                        }
                    });                    
                }).catch(() => {
         
                });                
            },
            getmp4(url){
                this.dialogFormVisible = true
                this.videourl = url
            },
            exitRow(data){
                this.dialogFormVisible2 = true
                this.exitRowData = data
                
            },
            exitdataca(data){
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitchapter/exitdataca')}",
                    data: {data:data},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                          that.refreshs()    
                          that.$message({
                            type: 'success',
                            message: '成功!'
                          });   
                          that.dialogFormVisible2 = false
                        }else{
                            that.$message({
                                message: data.msg,
                                type: 'warning'
                            });                            
                        }
                    }
                });                
            },
            setall(){
                this.dialogFormVisible3 = true
                var id = "{$id}"
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitchapter/getbuytype')}",
                    data: {id:id},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                             if(data.buytype==1){
                                 that.selone = '2'
                                 that.selalldata.allprice = data.allprice
                             }else{
                                 that.selone = '1'
                             }
                        }
                    }
                });                
            },
            upallconf(){
                var selone = this.selone
                var allprice = this.selalldata.allprice
                var start = this.selalldata.start
                var end = this.selalldata.end
                var allradio = this.allradio
                var bookone = this.selalldata.bookone
                var id = "{$id}"
                this.loadingav = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitchapter/upallconf')}",
                    data: {
                        selone:selone,
                        allprice:allprice,
                        start:start,
                        end:end,
                        allradio:allradio,
                        bookone:bookone,
                        id:id
                    },
                    dataType: "json",
                    success: function(data) {
                        that.loadingav = false
                        if (data.status == 1) {
                          that.refreshs()
                          that.$message({
                            type: 'success',
                            message: '成功!'
                          });
                          that.dialogFormVisible3 = false
                        }else{
                            that.$message({
                                message: data.msg,
                                type: 'warning'
                            });                            
                        }
                    }
                });
            },
            addlinkshow(one){
                this.dialogFormVisible4 = true
                this.linkRowData.title = "{$name}"
                this.linkRowData.order = one.order
                this.linkRowData.id = one.id
            },
            addlink(){
                this.$confirm('确定生成?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    var that = this
                    $.ajax({
                        type: "POST",
                        url: "{:url('Skitchapter/addlink')}",
                        data: {
                            id:that.linkRowData.id,
                            remark:that.linkRowData.remark
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data.status == 1) {
                                  that.$message({
                                    type: 'success',
                                    message: '生成成功!'
                                  });
                                  that.dialogFormVisible4 = false
                                  that.linkRowData = []
                            }else{
                                that.$message({
                                    message: data.msg,
                                    type: 'warning'
                                });                            
                            }
                        }
                    });                    
                }).catch(() => {
         
                });                
            },
        },
        created: function() {
            this.refreshs()
            var that = this
            var policyText = {
                "expiration": "2023-01-01T12:00:00.000Z", //设置该Policy的失效时间，超过这个失效时间之后，就没有办法通过这个policy上传文件了
                "conditions": [
                    ["content-length-range", 0, 1048576000] // 设置上传文件的大小限制
                ]
            };
        
            accessid = 'LTAI4G4vE6yQ8YRztNZ65Wrf';
            accesskey = 'OCyBu0ThZOgSHz2JLHyXOm7evWf0NA';
            host = 'https://ytyss.oss-cn-beijing.aliyuncs.com';
            dirname = "{$directoryname}"+"/";
        
        
            var policyBase64 = Base64.encode(JSON.stringify(policyText))
            message = policyBase64
            var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, {
                asBytes: true
            });
            var signature = Crypto.util.bytesToBase64(bytes);
            var uploader = new plupload.Uploader({
                runtimes: 'html5,flash,silverlight,html4',
                browse_button: 'selectfiles',
                //runtimes : 'flash',
                container: document.getElementById('container'),
                flash_swf_url: '/application/admin/static/js/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/Moxie.swf',
                silverlight_xap_url: '/application/admin/static/js/oss-h5-upload-js-direct/lib/plupload-2.1.2/js/Moxie.xap',
        
                url: host,
        
                multipart_params: {
                    'Filename': '${filename}',
                    'key': dirname + '${filename}',
                    'policy': policyBase64,
                    'OSSAccessKeyId': accessid,
                    'success_action_status': '200', //让服务端返回200,不然，默认会返回204
                    'signature': signature,
                },
        
                init: {
                    PostInit: function() {
                        document.getElementById('ossfile').innerHTML = '';
                        document.getElementById('postfiles').onclick = function() {
                            uploader.start();
                            return false;
                        };
                    },
        
                    FilesAdded: function(up, files) {
                        plupload.each(files, function(file) {
                            document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' +
                                '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>' +
                                '</div>';
                        });
                    },
        
                    UploadProgress: function(up, file) {
                        var d = document.getElementById(file.id);
                        d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
        
                        var prog = d.getElementsByTagName('div')[0];
                        var progBar = prog.getElementsByTagName('div')[0]
                        progBar.style.width = 2 * file.percent + 'px';
                        progBar.setAttribute('aria-valuenow', file.percent);
                    },
        
                    FileUploaded: function(up, file, info) {
                        if (info.status >= 200 || info.status < 200) {
                            var id = "{$id}"
                            $.ajax({
                                type: "POST",
                                url: "{:url('Skitchapter/uploadvideo')}",
                                data: {filename:file.name,id:id},
                                dataType: "json",
                                success: function(data) {
                                    if (data.status == 1) {
                                        that.$message({
                                        message: '成功',
                                        type: 'success'
                                        });
                                        that.refreshs()
                                    }else{
                                        that.$message({
                                            message: data.msg,
                                            type: 'warning'
                                        })                                        
                                    }
                                }
                            });
                        } else {
                            document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
                        }
                    },
        
                    Error: function(up, err) {
                        document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
                    }
                }
            });
        
            uploader.init();            
        }
    })
</script>
{/block}