{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;
}
</style>


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

<div class="tit">
<el-button type="primary" size="mini" @click="addskits">新增短剧</el-button>
<el-input v-model="searchinp1" placeholder="剧名" size="mini" style="width:150px;"></el-input>
<el-button type="primary" size="mini" @click="searchs">搜索</el-button>
</div>


  <el-table
    :data="tableData"
    style="width: 100%">
      
    <el-table-column
      fixed
      prop="id"
      label="ID">
    </el-table-column>
    
    <el-table-column
      label="封面">
        <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 140px;border-radius:4px;"
              :src="scope.row.cover"></el-image>
        </template>        
    </el-table-column>
    
    <el-table-column
      prop="name"
      label="短剧名">
    </el-table-column>
    
    <el-table-column
      prop="anthology"
      label="集数">
    </el-table-column>
    
    <el-table-column
      prop="latest"
      label="最新">
    </el-table-column>
    
    <el-table-column
      label="状态">
        <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==1">上架</el-tag>
            <el-tag type="danger" v-if="scope.row.status==0">禁用</el-tag>
        </template> 
    </el-table-column>
    
    <el-table-column
      label="进程">
        <template slot-scope="scope">
            <el-tag type="warning" v-if="scope.row.process==0">未完继续</el-tag>
            <el-tag type="success" v-if="scope.row.process==1">已完结</el-tag>
        </template>        
    </el-table-column>
    
    <el-table-column
      label="购买类型">
        <template slot-scope="scope">
            <el-tag v-if="scope.row.buytype==0">按集付费</el-tag>
            <el-tag v-if="scope.row.buytype==1">全本购买</el-tag>
        </template>        
    </el-table-column>     


    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        
        <el-button
          @click="geturl(scope.row.id)"
          type="text"
          size="small">
          章节管理
        </el-button>            

        <el-button
          @click="exitRow(scope.row.id)"
          type="text"
          size="small">
          编辑
        </el-button>          
          
        <el-button
          @click="deleteRow(scope.row.id)"
          type="text"
          size="small"
          :loading="loadingdel">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>


<el-dialog title="新增短剧" :visible.sync="dialogFormVisible">
  <el-form :model="addinfo">
      
    <el-form-item label="短剧名" :label-width="formLabelWidth">
      <el-input v-model="addinfo.name" autocomplete="off" class="inp"></el-input>
    </el-form-item>
    
    <el-form-item label="简介" :label-width="formLabelWidth">
      <el-input v-model="addinfo.description" autocomplete="off" class="inp" type="textarea"></el-input>
    </el-form-item>    
    
    <el-form-item label="是否完结" :label-width="formLabelWidth">
      <el-select v-model="addinfo.process" 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="addinfo.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-select v-model="addinfo.category_id" placeholder="分类" style="width:108px;">
            <el-option :label="v.title" :value="v.id" v-for="(v, index) in assort"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="排序" :label-width="formLabelWidth">
      <el-input-number v-model="addinfo.sort" :min="1" :max="100" label="排序" style="width:108px;" controls-position="right"></el-input-number>
    </el-form-item>
    
    <el-form-item label="封面" :label-width="formLabelWidth">    
        <el-upload
          class="avatar-uploader"
          action="{:url('Skitmanagement/upimg')}"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="addinfoposa(addinfo)">确 定</el-button>
  </div>
</el-dialog>


<el-dialog title="编辑" :visible.sync="dialogFormVisible2">
  <el-form :model="exitdata">
      
    <el-form-item label="首页展示栏位" :label-width="formLabelWidth">
        
  <el-select
    v-model="exitdata.top"
    multiple
    filterable
    allow-create
    default-first-option
    placeholder="请选择栏位" class="inp">
    <el-option
      v-for="item in exitoptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

    </el-form-item>      
      
    <el-form-item label="短剧名" :label-width="formLabelWidth">
      <el-input v-model="exitdata.name" autocomplete="off" class="inp"></el-input>
    </el-form-item>
    
    <el-form-item label="简介" :label-width="formLabelWidth">
      <el-input v-model="exitdata.description" autocomplete="off" class="inp" type="textarea"></el-input>
    </el-form-item>     
    
    <el-form-item label="是否完结" :label-width="formLabelWidth">
      <el-select v-model="exitdata.process" 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="exitdata.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-select v-model="exitdata.category_id" placeholder="分类" style="width:108px;">
            <el-option :label="v.title" :value="v.id" v-for="(v, index) in exitdata.assort"></el-option>
      </el-select>
    </el-form-item>
    
    <el-form-item label="排序" :label-width="formLabelWidth">
      <el-input-number v-model="exitdata.sort" :min="1" :max="100" label="排序" style="width:108px;" controls-position="right"></el-input-number>
    </el-form-item>

    <el-form-item label="封面" :label-width="formLabelWidth">    
        <el-upload
          class="avatar-uploader"
          action="{:url('Skitmanagement/upimg')}"
          :show-file-list="true"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload">
          <img v-if="exitdata.cover" :src="exitdata.cover" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="exitdataca(exitdata)">确 定</el-button>
  </div>
</el-dialog>


</div>
</div>
{/block} {block name="script"}
<script>
    var app = new Vue({
        el: '#app',
        data: {
        tableData: [],
        loading:false,
        dialogFormVisible:false,
        dialogFormVisible2:false,
        addinfo:[],
        formLabelWidth:"100px",
        imageUrl:'',
        assort:'',
        exitdata:[],
        exitoptions:[],
        searchinp1:'',
        loadingdel:false,
        },
        methods: {
           refreshs() {
                this.loading = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitmanagement/refreshs')}",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        that.loading = false
                        if (data.status == 1) {
                              that.tableData = data.data
                        }
                    }
                });
            },
            addskits(){
                this.dialogFormVisible = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitmanagement/getassort')}",
                    data: {},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                              that.assort = data.assort
                        }
                    }
                });                
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.thumb_url;
                this.addinfo.cover = res.thumb_url;
            },
            handleAvatarSuccess2(res, file){
                this.exitdata.cover = res.thumb_url;
            },
            beforeAvatarUpload(file) {
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                  this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isLt2M;
            },
            addinfoposa(s){
                var that = this
                //console.log(s)
                   $.ajax({
                        type: "POST",
                        url: "{:url('Skitmanagement/addinfoposa')}",
                        data: {
                            name:s.name,
                            process:s.process,
                            status:s.status,
                            category_id:s.category_id,
                            cover:s.cover,
                        },
                        dataType: "json",
                        success: function(data) {
                            if (data.status == 1) {
                                that.dialogFormVisible = false
                                that.addinfo = []
                                that.refreshs();
                                that.imageUrl = '';
                                that.$message({
                                    message: '成功',
                                    type: 'success'
                                });
                                $('.el-upload-list__item-name').hide()
                            } else {
                                that.$message({
                                    message: data.msg,
                                    type: 'warning'
                                });
                            }
                        }
                    });                
            },
            exitRow(id){
                this.dialogFormVisible2 = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitmanagement/getexitinfo')}",
                    data: {id:id},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                              that.exitdata = data.data
                              that.exitoptions = data.exitoptions
                        }
                    }
                });                
            },
            exitdataca(data){
                //console.log(data);
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitmanagement/exitdataca')}",
                    data: {data:data},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                                that.refreshs()
                                that.$message({
                                    message: '成功',
                                    type: 'success'
                                });
                        }else{
                            that.$message({
                                    message: data.msg,
                                    type: 'warning'
                                });
                        }
                    }
                });                
            },
            geturl(id){
                location.href="/admin/Skitchapter/index?id="+id
            },
            searchs(){
                this.loading = true
                var that = this
                $.ajax({
                    type: "POST",
                    url: "{:url('Skitmanagement/searchs')}",
                    data: {searchinp1:that.searchinp1},
                    dataType: "json",
                    success: function(data) {
                        if (data.status == 1) {
                            that.loading = false
                            that.tableData = data.data
                        }
                    }
                });
            },
            deleteRow(id){
                this.$confirm('此操作将删除该短剧跟所有视频 确定?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    this.loadingdel = true
                    var that = this
                    $.ajax({
                        type: "POST",
                        url: "{:url('Skitmanagement/deleteRow')}",
                        data: {id:id},
                        dataType: "json",
                        success: function(data) {
                            that.loadingdel = false
                            if (data.status == 1) {
                                  that.refreshs()
                                  that.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                  });
                            }
                        }
                    });                    
                }).catch(() => {
         
                });                
            },            
        },
        created: function() {
            this.refreshs()
        }
    })
</script>
{/block}