<template>
  <!--  <div>-->
  <!--    <template v-for="column in childColumns">-->
  <!--      <el-table-column-->
  <!--        :key="column.id"-->
  <!--        :prop="column.columnField"-->
  <!--        :label="column.columnName"-->
  <!--        :width="column.columnWidth"-->
  <!--        v-if="column.visible"-->
  <!--        show-overflow-tooltip>-->
  <!--        <template slot-scope="{row}">-->
  <!--          <el-button v-if="column.linkUrl" @click.stop="redirectToUrl(column.linkUrl, row)" type="text" size="small">-->
  <!--            {{-->
  <!--              row[column.columnField]-->
  <!--            }}-->
  <!--          </el-button>-->
  <!--          <template v-else>-->
  <!--            {{ row[column.columnField] }}-->
  <!--          </template>-->
  <!--        </template>-->
  <!--        <template v-if="column.childColumnList.length > 0">-->
  <!--          <el-table-column width="1"></el-table-column>-->
  <!--          <recursion-table-column-->
  <!--            :childColumns="column.childColumnList"></recursion-table-column>-->
  <!--        </template>-->
  <!--      </el-table-column>-->
  <!--    </template>-->
  <!--  </div>-->

  <div>
    <template v-for="column in childColumns">
      <template v-if="column.childColumnList.length > 0">
        <el-table-column
          :key="column.id"
          :label="column.columnName"
          v-if="column.visible"
          header-align="center"
          show-overflow-tooltip>
          <el-table-column width="1"></el-table-column>
          <recursion-table-column :childColumns="column.childColumnList"></recursion-table-column>
        </el-table-column>
      </template>
      <template v-else>
        <el-table-column
          :key="column.id"
          :prop="column.columnField"
          :label="column.columnName"
          :width="column.columnWidth"
          v-if="column.visible"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            <el-button v-if="column.linkUrl" @click.stop="redirectToUrl(column.linkUrl, row)" type="text" size="small">
              {{
                row[column.columnField]
              }}
            </el-button>
            <template v-else>
              {{ row[column.columnField] }}
            </template>
          </template>
        </el-table-column>
      </template>
    </template>
  </div>
</template>

<script>
function getParamsFromTemplate(template, row) {
  const reg = new RegExp('\{(.+?)\}', 'gm')
  return template.replace(reg, function (node, key) {
    return row[key]
  })
}

export default {
  name: "recursionTableColumn",
  props: {
    childColumns: {
      default: () => []
    }
  },
  methods: {
    redirectToUrl(template, row) {
      const destUrl = getParamsFromTemplate(template, row)
      this.$router.push(destUrl)
      // console.log(destUrl);
    }
  }
}
</script>

<style scoped>

</style>
