<template>
  <van-popup 
    v-model="show"
    position="bottom" 
    :close-on-click-overlay="false"
    :style="{height: '95%'}"
    class="base-info select-template">
    <div style="position:relative;margin-bottom:0px;" class="header">
      <div><div v-show="!showDetailb" @click="goBack" style="font-size:16px;"><common-svg name="fanhui2" ></common-svg> 返回</div></div>
      <span>选择模版</span>
      <common-svg
        @click.native="cancel"
        name="moban-quxiao"></common-svg>
    </div>
    <van-search 
      v-model="searchValue" 
      show-action
      placeholder="请输入搜索关键词" 
      :left-icon="require('@/assets/search2.png')"
      @search="onSearch"
      @input="onSearch"></van-search>
    <div v-if="searchValue" class="folder-detail">
        <div style="color:#818181;font-size: 14px;text-align:left;padding-left: 17px;margin-bottom: 15px;">搜索结果：</div>
        <div v-if="searchResult.length <= 0" style="padding: 30px;">
            <van-image src="@/assets/search.png" fit="contain" width="78px"></van-image>
            <div style="color:#9B9B9B;font-size: 14px;">没找到内容，换个名称试试吧</div>
        </div>
        <van-radio-group v-model="radio" class="template-list">
          <van-radio :name="template.id" v-for="(template, index) in searchResult" :key="index" @click="selectTemplate(template.id)">
            <div>
              <van-image round :src="template.s_image_url" width="50px" height="50px" fit="contain"></van-image>
              <div>{{template.name}}</div>
            </div>
            <template #icon="props">
              <common-svg :name="props.checked? 'moban-xuanzhongzhuangtai1':''"></common-svg>
            </template>
          </van-radio>
        </van-radio-group>
        <div></div>
        <div class="btn-group" v-if="radio >= 0">
          <div class="left" @click="preview">预览</div>
          <div class="right" @click="confirm">确定</div>
        </div>  
    </div>
    <div v-else>
      <div style="position:relative;" class="folderList" v-if="showDetailb">
        <div class="addFolder" @click="addFolder" v-if="isSy">+添加文件夹</div>
        <van-tabs v-model="active" >
          <van-tab title="系统模板">
            <div
              v-for="(folder,index) in systemFolderList"
              :key="index" 
              class="item" 
              @click="selectFolder(folder)">
              <van-image
                class="thumb"
                :src="folder.folder_img_url"
                fit="contain"
                ></van-image>
              <div class="title">{{folder.folder_name}}</div>
              <div class="desc" style="color:#AAAAAA;">{{(folder.detail || []).length}}条模版</div>
              <common-svg name="jinru" class="right-icon"></common-svg>
            </div>
          </van-tab>
          <van-tab title="我的模板" v-if="isSy">
            <div 
              v-for="(folder,index) in userFolderList"
              :key="index" 
              class="item" 
              @click="selectFolder(folder)">
              <van-image
                class="thumb"
                :src="folder.folder_simg_url"
                fit="contain"
                ></van-image>
              <div class="title">{{folder.folder_name}}</div>
              <div class="desc" style="color:#AAAAAA;">{{(folder.detail || []).length}}条模版</div>
              <common-svg name="jinru" class="right-icon"></common-svg>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="folder-detail" v-else>
        <header>
          <div>{{currentFolder.folder_name}}</div>
          <router-link to="addTemplate" tag="p" style="color:#3F79FE;" v-if="isSy">+添加模板</router-link>
        </header>
          <van-radio-group v-model="radio" class="template-list">
            <van-radio 
              :name="template.id"
              v-for="(template, index) in currentFolder.detail" 
              :key="index" 
              @click="selectTemplate(template.id)">
              <div>
                <van-image
                  round 
                  :src="template.s_image_url || require('@/assets/defaulttemplate.png')"
                  width="50px"
                  height="50px"
                  fit="contain">
                </van-image>
                <div class="van-ellipsis" style="width:96px">{{template.name}}</div>
              </div>
              <template #icon="props">
                <common-svg :name="props.checked? 'moban-xuanzhongzhuangtai1':''"></common-svg>
              </template>
            </van-radio>
          </van-radio-group>
        <div class="btn-group" v-if="radio >= 0">
          <div class="left" @click="preview">预览</div>
          <div class="right" @click="confirm">确定</div>
        </div>  
      </div>
    </div>
    
  </van-popup>  
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit , Inject } from 'vue-property-decorator';
import { Collapse, CollapseItem, Field,
          Button, NavBar, SwipeCell,
          Popup, Uploader, Picker,
          Tab, Tabs, Image, Search, RadioGroup, Radio } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
import PreviewTemplate from './PreviewTemplate.vue';
@Component({
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [SwipeCell.name]: SwipeCell,
    [Popup.name]: Popup,
    [Uploader.name]: Uploader,
    [Picker.name]: Picker,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Image.name]: Image,
    [Search.name]: Search,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    PreviewTemplate,
  },
})
export default class SelectTemplate extends Vue {
  @Inject('isSy') private isSy!: boolean;
  private active: number = 0;
  private systemFolderList: any[] = [];
  private userFolderList: any[] = [];
  private currentFolder: any = {};
  private currentTemplate: any = {};
  private show: boolean = true;
  private searchValue: string = '';
  private searchResult: any[] = [];
  private showDetailb: boolean = true;
  private radio: number = -1;
  private detail: any[] = [];

  private mounted() {
    // Promise.all([this.$api.template
    //   .list({
    //     template_type: TEMPLATETYPE.SYSTEM,
    //   }),this.$api.template.list({
    //   template_type: TEMPLATETYPE.USER,
    // })]).then((res: any) => {
    //   this.systemFolderList = res[0].results || [];
    //   this.userFolderList = res[1].results || [];
    // })
    this.$api.template.systemList().then((res: any) => {
      this.systemFolderList = res.results || [];
    });
    this.$api.template.folderList({
      template_type: 1,
    }).then((res: any) => {
      const ids = (res.results || []).map((folder: any) => folder.id);
      return this.$api.template.list({
        id: ids,
      });
    }).then((res: any) => {
      this.userFolderList = res.results || [];
    });
  }
  private selectFolder(folder: any) {
    this.currentFolder = folder;
    this.showDetailb = false;
  }
  private goBack() {
    this.showDetailb = true;
  }
  private async selectTemplate(templateId: number) {
    this.currentTemplate = await this.$api.template.get(templateId);
  }
  private async preview() {
    this.detail = JSON.parse(this.currentTemplate.detail)[0];
    this.$emit('preview', this.currentTemplate);
  }

  private addFolder() {
    this.$emit('add-folder');
  }
  private confirm() {
    this.show = false;
    this.$emit('next', {templateId: this.currentTemplate.id, templateName: this.currentTemplate.name});
  }
  private employ() {
    this.show = false;
    this.$emit('next', {templateId: this.currentTemplate.id, templateName: this.currentTemplate.name});
  }
  @Emit('cancel')
  private cancel() {
    this.show = false;
  }
  private onSearch(key: string) {
    if (!key) { return; }
    this.$api.template.searchCustomize(key).then((res: any) => {
      this.searchResult = res.results || [];
    });
  }
}
</script>
<style scoped lang="scss">
  .select-template{
    ::v-deep .van-search__action{
      color: #AAAAAA;
    }
    .header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 19px 12px;
      padding-bottom: 0;
      color: #353535;
      font-size: 18px;
    }
    ::v-deep .van-radio{
    position: relative;
    &__icon{
      position: absolute;
      z-index: 3;
      right: 0;
      top: 5px;
    }
  }
  ::v-deep .van-tabs__line{
    display: none;
  }
  ::v-deep .van-tab{
    width: 70px;
    flex: none;
    padding: 4px;
  }
  // ::v-deep .van-search__action{
  //   color: #3F79FE;
  // }
  .folderList{
    .addFolder{
      position: absolute;
      right: 17px;
      top: 0;
      z-index: 1;
      height: 11.73333vw;
      line-height: 11.73333vw;
      font-size: 14px;
      color: #3175FF;
    }
  }
  .item{
    display: grid;
      grid-template-columns: 44px auto 30px;
      grid-template-rows: repeat(2, 25px);
      grid-auto-flow: column dense;
      place-items: center start;
      grid-gap: 0 17px;
      padding: 13px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 10px 0px rgba(218,218,218,0.31);
      border-radius:5px;
      margin-bottom: 10px;
      .thumb, .right-icon{
        place-self: center;
        grid-row: span 2;
      }
  }
  .folder-detail{
    header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 0 17px;
    }
    .template-list{
      display: grid;
      grid-template-columns: repeat(3, 30%);
      row-gap: 30px;
      place-items: center;
      justify-content: space-between;
      padding: 0 17px;
    }
    .btn-group{
      .left,.right{
        border-radius: 4px;
        height: 40px;
        line-height: 40px;
      }
      .left{
        width: 107px;
        background: #F0F1F5;
        margin-right: 10px;
        color: black;
      }
      .right{
        flex: auto;
        background:linear-gradient(180deg,rgba(93,123,246,1) 0%,rgba(108,122,254,1) 100%);
        box-shadow:0px 2px 10px 0px rgba(63,121,254,0.3);
        color: #FFFFFF;
      }
    }
  }
}
  
</style>