<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <p>帮助文档</p>
      </div>
      <el-row class="content-menu">
        <el-col :span="4" class="menu">
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            :default-openeds="openMenuList"
            >
            <el-submenu v-for="item in menuList" :index="(item.id).toString()" v-if="item.children && item.children.length > 0">
              <template slot="title">
                <span>{{ item.title }}</span>
              </template>
              <el-menu-item-group v-if="item.children && item.children.length > 0">
                <el-menu-item
                  v-for="childItem in item.children"
                  :index="(childItem.id).toString()"
                  @click="showText(childItem)"
                >
                  {{ childItem.title }}
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
        <transition name="fade">
          <el-col :span="20" class="content-text">
            <el-row :span="24" type="flex" align="middle" justify="space-bewteen" class="pre-title">
              <el-col :span="12">
                <h3>保证金</h3>
              </el-col>
              <el-col :span="12">
                <p  style="float:right;">
                  <span>2021-05-05</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>运营团队</span>
                </p>
              </el-col>
            </el-row>
            <div class="ql-container ql-show">
              <div class="ql-editor">
                <div v-html="content"></div>
              </div>
            </div>
          </el-col>
        </transition>

      </el-row>

    </el-card>
  </div>
</template>

<script>
  export default {
    name: "Document",
    data() {
      return {
        show: true,
        menuList: [
          {
            id: 1,
            title: '商品规格',
            children: [
              {id: 11, title: '商品规格-1', content: '"<p>商品规格1111111111</p>"', children: null},
            ]
          },
          {id: 2, title: '订单问题', children: [
              {id: 21, title: '订单问题-1', content: '"<p>订单问题1111111111</p>"', children: null},
            ]},
          {id: 3, title: '店铺相关', children: [
              {id: 31, title: '店铺相关-1', content: '"<p>店铺相关1111111111</p>"', children: null},
            ]},
          {id: 4, title: '售后问题', children: [
              {id: 41, title: '售后问题-1', content: '<p>售后问题1111111111</p>', children: null},{id: 42, title: '商品规格-1', content: '"<p>商品规格1111111111</p>"', children: null},

            ]},
          {id: 5, title: '设置相关', children: [
              {id: 51, title: '设置相关-1', content: '<p>设置相关1111111111</p>', children: null},{id: 52, title: '商品规格-1', content: '"<p>商品规格1111111111</p>"', children: null},
            ]},
        ],
        editorOption: {},
        queryParams: {
          pageNum: 10,
          pageSize: 1
        },
        content: '<div class="main-text">\n' +
          '          <h2>胜天半子供应链商家入驻协议书</h2>\n' +
          '          <p>\n' +
          '            甲方：北京胜天半子科技有限公司（以下简称“甲方或者平台”）<br/>\n' +
          '          </p>\n' +
          '          <p>乙方：（以下简称“乙方”）</p>\n' +
          '          <p>\n' +
          '            甲乙双方本着互惠互利的双赢策略，根据甲方商城入驻条件，乙方申请入驻甲方商城，并完全接受甲方的规范，本着自愿、平等、公正原则，甲乙双方在协商一致的基础上达成如下协议：\n' +
          '          </p>\n' +
          '          <p>\n' +
          '            乙方可在平台上进行商铺发布及管理、推广商品、达成交易意向。\n' +
          '          </p>\n' +
          '          <h4>一、入驻商家基本条件</h4>\n' +
          '          <p>\n' +
          '            1、有良好的合作意愿，能提供优质的商品，保证合作的顺利进行，并保证提供良好的售后服务；\n' +
          '          </p>\n' +
          '          <p>\n' +
          '            2、 乙方申请成为平台入驻商家，应该满足以下条件：\n' +
          '            (1) 乙方已依照中华人民共和国法律注册并领取合法有效的营业执照及其他经营许可；\n' +
          '            (2) 乙方申请经营的商品或服务合法，资质齐全；\n' +
          '            (3)乙方同意本协议及平台相关规则并同意缴纳平台履约保证金1万-5万具体见附件\n' +
          '            <a target="_blank" class="download-Template-btn" :href="downTemplatehttp">《平台类目费率收取标准》</a>\n' +
          '            。 (4) 乙方须保证所提交予乙方的所有材料真实、准确、合法、有效。如相关材料有变更或更新时应及时通知甲方，若导致乙方不符合本协议所规定入驻条件的，甲方有权单方全部或部分限制乙方经营，直至终止本协议。\n' +
          '        </div>',
        openMenuList: [],

      }
    },
    created() {
      //menuList
      if(this.menuList.length > 0) {
        this.menuList.forEach((item,index) => {
          let indexStr = (index + 1).toString();
          this.openMenuList.push(indexStr);

        });
        console.log(121,this.openMenuList);
      }

    },
    methods: {
      onEditorChange(a,b,c) {
        console.log(25,b);
        console.log(25,b);
        console.log(25,b);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      showText(val) {
        //this.show = false;
        if(val['content']) {
          this.content = val['content'];
          //this.show = true;
        }
        console.log(142,val);
      }

    }
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  /deep/.el-card__header p {
    font-size: 18px;
  }
  /deep/.el-card__body {
    padding: 10px 0 10px 0;
    height: calc(100% - 45px);
    overflow :hidden;
  }
  .content-menu {
    height: 100%;
    overflow: hidden;
  }
  .menu {
    height :100%;
    border-right: 1px solid #DCDFE6;
    .el-menu {
      border: none;
    }
  }

  .pre-title {
    padding-right:50px;
    border-bottom: 1px solid #DCDFE6;
  }
  .content-text {
    height: 100%;
    padding: 0 20px;
  }


  .ql-container {
    height : calc(100% - 59px);
    overflow: hidden;
    .ql-editor {
      height :100%;
      padding: 0 20px;
    }
    .ql-editor > div:nth-child(0){
      height :100%;
      .main-text {
        height: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
  }
    /*样式重置*/
    /deep/.el-submenu__title {
      //padding: 0 30px!important;
    }
    /deep/.el-submenu__title > span {
      font-size: 16px;
    }

  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
