<template>
  <div>
    <el-card v-for="data in list" :key="data.id" class="box-card">
      <div class="id">
        <img :src="data.cover">
      </div>
      <div class="btn">
        <el-button
          type=""
          icon="el-icon-view"
          circle size="mini"
          @click="showQr(data)"
          v-if="!$store.state.readonly">
        </el-button>
        <el-button
          type=""
          icon="el-icon-edit"
          circle size="mini"
          @click="onEdit(data)"
          v-if="!$store.state.readonly">
        </el-button>
        <el-button
          type=""
          icon="el-icon-delete"
          circle size="mini"
          @click="delLseeon(data)"
          v-if="$store.state.deletePermission && !$store.state.readonly">
        </el-button>
      </div>
      <div class="name">
        {{data.title}}
        <el-tag size="mini">{{data.min_age}}-{{data.max_age}}岁</el-tag>
      </div>
    </el-card>

    <div class="add-block" v-if="id">
      <el-button round type="success" @click="onAdd" v-if="!$store.state.readonly">+新增课时</el-button>
    </div>
    <editor-dialog :editorObj="editorObj" @reflash="getList"/>
    <el-dialog
      title="微信扫码预览"
      :center="true"
      :visible.sync="qrShow"
      width="300px">
        <div id="qrcode"></div>
    </el-dialog>
  </div>
</template>

<script>
  import {getCateListApi,delElementApi,saveViewDataApi,getElemenetDetailApi} from "../../service/api";
  import  QRCode from 'qrcodejs2'
  import EditorDialog from './editorDialog'
  export default {
    name: "list",
    components:{
      EditorDialog
    },
    props:[
      'id'
    ],
    data(){
      return {
        list:[],
        qrShow:false,
        qr:false,
        editorObj:{
          show:false,// 显示开关
          category_id:0,// 分类id
          type:0,//0 新增 1 修改
          title:'',// 标题
          id:''// 课程id
        }
      }
    },
    created(){
      if(this.id !== '' && this.id !== null)this.getList()
    },
    methods:{
      qrcode(data){
        if(this.qr){
          this.qr.makeCode(data)
        }else{
          this.qr = new QRCode('qrcode', {
            width: 250,
            height: 250, // 高度
            text: data, // 二维码内容
            image: ''
          });
        }

      },
      showQr(data){
        this.qrShow = true;
        this.$nextTick(()=>{
          getElemenetDetailApi(data.id).then(res=>{
            saveViewDataApi(data.id,res).then(()=>{
              this.qrcode(window.location.href.split('#')[0] + '#/newLesson?elementId='+data.id);
              console.log(window.location.href.split('#')[0] + '#/newLesson?elementId='+data.id)
            })
          });
        })
      },
      getList(){
        getCateListApi({category_id:this.id}).then(res=>{
          this.list = res.list
        })
      },
      delLseeon(data){
        this.$confirm('此操作将删除该课包?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delElementApi(data.id).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          });
          this.getList();
        });
      },
      onUp(){},
      onAdd(){
        this.editorObj = {
          show:true,
          category_id:this.id,
          type:0,
          title:'新增课包'
        }
      },
      onEdit(data){
        this.editorObj = {
          show:true,
          category_id:this.id,
          id:data.id,
          type:1,
          title:'编辑课包'
        }
      }
    },
    watch:{
      id(value){
        if(value !== '' && value !== null)this.getList()
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .box-card{
    margin: 10px 0;
    cursor: pointer;
    padding: 0;
    &:hover{
      background: #3a8ee6;
      color: white;
    }
    .id{
      margin-right: 20px;
      width: 4em;
      text-align: center;
      float: left;
      img{
        width: 100%;
      }
    }
    .btn{
      float: right;
    }
    .name{
      span{
        display: inline-block;
        text-align: center;

      }
    }
  }
  .add-block{
    .clear-both;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }

</style>