<template>
  <div class="c-table-zq"  @click="onDetails"  v-html="content">
  </div>
</template>
<script>

  import CTable from '@/components/common/CTable'
  import {deepClone} from '@/utils/tools'

  export default {
    name: 'c-table',
    data() {
      return {
        info: {fdRequest: {}, fdExample: ''},
        content: '',
        firstIndex: 0
      }
    },
    props: {
      dataSource: {
        default: () => {
        }
      }
    },
    mounted() {
    },
    watch: {
      dataSource: {
        handler(nVal, oVal) {
          this.dataSource = nVal
          this.htmlRender(this.dataSource,-11)
        }
      }
    },
    methods: {
      async   htmlRender(value,hierarchy,childNode = '') {
        let a
        let b = hierarchy + 11
        let id = Math.random()*10
        for (let key in value) {
          a = deepClone(this.content) + `
      <div  class="flex-tr shows${childNode} ${hierarchy === -11? 'fontWeight':''}"  style="text-indent:${b}px" data-childen="${id}${key}" show="true">
      <div class="cell" style="width: 30%">${value[key].name || ''}</div>
      <div class="cell"  style="width: 10%">${value[key].type || ''}</div>
      <div class="cell" style="width: 20%">${this.formatParameters(value[key].example) || ''}</div>
      <div class="cell" style="width: 20%">${value[key].describe || ''}</div>
        </div>`
          this.content = deepClone(a)
          if (Array.isArray(value[key].example) && value[key].example.length > 0) {
          await  this.htmlRender(value[key].example,b,id+key)
          }
        }
      },
      formatParameters(value){
        if(Array.isArray(value)){
          return  '[...]'
        }else{
          return value
        }
      },
      async  onDetails(e){
        let target = e.path[1]
        if(target.getAttribute('show') === 'true'){
          let childen = document.getElementsByClassName('shows'+target.dataset.childen)
          for(let i = 0; i<= childen.length -1;i++){
            childen[i].classList.add('show')
          }
          target.setAttribute('show','false')
        }else{
          let childen = document.getElementsByClassName('shows'+target.dataset.childen)
          for(let i = 0; i<= childen.length -1;i++){
            childen[i].classList.remove('show')
          }
          target.setAttribute('show','true')
        }

      }
    },
    components: {
      CTable: CTable
    }
  }
</script>
<style lang="less" scoped>
  .c-table {
    display: contents;
    .flex-tr {
      border-bottom: 1px dashed #E6E6E6;
      display: table-row;
      & .cell:first-child {
        padding-left: 18px;
      }

    }
    & .flex-tr:last-child {
      border-bottom: none !important;
    }
    .cell {
      display: table-cell;
      padding: 8px;
    }
  }
</style>
<style lang="less">
  .c-table-zq {
    display: contents;
    .flex-tr {
      cursor: pointer;
      user-select: none;
      border-bottom: 1px dashed #E6E6E6;
      display: table-row;
      & .cell:first-child {
        padding-left: 18px;

      }

    }
    & .flex-tr:last-child {
      border-bottom: none !important;
    }
    .cell {
      display: table-cell;
      padding: 8px;
    }
    .fontWeight{
      font-weight: 700;
    }
    .show{
      display: none;
    }
  }
</style>