<template>
    <div class="body">
        <div class="list" v-loading="selecting">
            <div style="display: flex">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
                <el-button type="primary" style="margin-left: 10px" @click="sel"
                    >搜索</el-button
                >
            </div>
            <div>
                <el-button v-for="(item,index) in list" :key="index" style="width: 100%; margin: 0; margin-top: 10px" @click="xuanze(index)">{{item.name}}</el-button>
                
            </div>
        </div>
        <div class="zhangjie" v-loading="zhangjieing">
            <el-tabs type="border-card" style="height: 100%;overflow:auto;height:100%" v-if="mhxz != -1" @tab-click="selzj" >
                <el-tab-pane v-for="(item,index) in list[mhxz].list" :key="index" :label="item.name">
                  <!-- <el-button>{{item.url}}</el-button> -->
                  <div v-for="(items,index) in zhangjielist[item.name]" :key="index">
                    <div><el-tag>{{items.title}}</el-tag></div>
                    <el-button v-for="(i,j) in items.list" :key="j" @click="getimg(i.url,item.name)">{{i.title}}</el-button>

                  </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="50%" v-loading="imging">
          <div style="overflow:auto;height: 100vh">
          <img v-for="(item,index) in imglist.chapterImages" :key="index" :src="imglist.imghost + (imglist.chapterPath ?'/' + imglist.chapterPath : '/' ) + item" alt="" style="width:100%">

          </div>
        </el-drawer>
    </div>
</template>

<script>
export default {
    name: "App",
    components: {},
    data() {
        return {
            drawer: false,
            list:[],
            input: "",
            selecting:false,
            mhxz: -1,
            zhangjielist:{},
            zhangjieing: false,
            name:"",
            imglist:[],
            imging:false

        };
    },
    methods:{
      sel(){
        this.selecting = true
        this.zhangjielist = {}
        this.mhxz = -1;
        this.axios.get("https://manhua.luyuan.tk/find?name=" + this.input).then((res)=>{
          this.list = res.data
          this.selecting = false
        }).catch(()=>{
          this.selecting = false
        })
      },
      xuanze(index){
        this.mhxz = index
        this.zhangjie(this.list[index].list[0].name,this.list[index].list[0].url)
      },
      zhangjie(name, url){
        this.zhangjieing = true
        this.axios.get("https://manhua.luyuan.tk/section?name=" + name + "&url=" + url).then((res)=>{
          this.zhangjielist[name] = res.data 
          this.zhangjieing = false
        }).catch(()=>{
          this.zhangjieing = false
        })
      },
      selzj(e){
        console.log(e)
        this.name = e.label
        if(this.zhangjielist[e.label] == undefined){
          this.zhangjie(e.label, this.list[this.mhxz].list[e.index].url)
        }
      },
      getimg(url, name){
        this.drawer = true
        this.imging = true
        this.imglist = []
        this.axios.get("https://manhua.luyuan.tk/picture?name=" + name + "&url=" + url).then((res)=>{
          this.imglist = res.data 
          this.imging = false
        }).catch(()=>{
          this.imging = false
        })
      }
    }
};
</script>

<style>
.body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-around;
    background-color: #ececec;
    align-items: center;
}
.body .list {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    width: 19%;
    box-sizing: border-box;
    height: 95%;
}
.body .zhangjie {
    box-sizing: border-box;
    overflow: hidden;
    background-color: #fff;
    height: 95%;
    width: 79%;
    border-radius: 10px;
}
</style>
