`
  샘플 문서, 추후 삭제 예정 입니다.
`
<template>
  <grid ref="tuiGrid"
    :data="gridProps.data"
    :columns="gridProps.columns"
    :options="gridProps.options"
    @click="clicked"
  />
</template>

<script>
  import 'tui-grid/dist/tui-grid.css'
  import { Grid } from '@toast-ui/vue-grid'

  class inputTag {
    constructor(props) {
      const el = document.createElement('input');
      el.type = "text";
      el.style.width = "80%";
      
      this.el = el;
      this.render(props);
    }
    getElement() {
      return this.el;
    }
    render(props) {
      this.el.value = "test";
      //this.el.value = String(props.value.chatbotId);
    }
  }

  class divTag {
    constructor(props) {
      const div = document.createElement("div");
      // props >> 컬럼 데이터. 하위 데이터가 있다면 props.value.xxx로 접근 가능하다.
      div.appendChild(document.createElement("div")).textContent = "id: " + props.value.chatbotId
      div.appendChild(document.createElement("div")).textContent = "snum: " + props.value.subNum

      
      
      this.el = div;
    }
    getElement() {
      return this.el;
    }
  }

  export default {
    components: {
      'grid': Grid
    },
    data() {
      return {
        gridProps: null
      }
    },
    created() {
      this.gridProps = {
        data: {
          api: {
            readData: { url: '/api/test/test', method: 'GET' },
          }
        },
        pageOptions: {
          perPage: 5
        },
        options: {
          header: {
            height: 100,
            // 헤더 merge
            complexColumns: [
              { header: "브랜드 모음", name: 'mergeColumn1', childNames: ["corpId", "mergeBrand", "mergeInfo"] },
              { header: "브랜드", name: 'mergeBrand', childNames: ["brId", "brNm"] },
              { header: "정보", name: 'mergeInfo', childNames: ["useYn", "apprYn", "apprReqYmd", "apprYmd"] }
            ]
          }
        },
        // 헤더
        columns: [
          { name: "corpId", header: "회사 아이디", align: "center" },
          { name: "brId", header: "브랜드 아이디", align: "center" },
          { name: "brNm", header: "브랜드 명", align: "center", sortable: true },
          { name: "useYn", header: "사용 여부", align: "center" },
          { name: "apprYn", header: "승인 여부", align: "center" },
          { name: "apprReqYmd", header: "승인요청 날짜", align: "center", sortable: true },
          { name: "apprYmd", header: "승인 날짜", align: "center", sortable: true },
          { name: "noname", header: "커스텀 1", align: "center", renderer: {
            type: inputTag  // 별도의 컬럼 구성이 필요한 경우
          }},
          { name: "chatbot", header: "커스텀 2", align: "center", renderer: {
            type: divTag  // 별도의 컬럼 구성이 필요한 경우
          }}
        ]
      }
    },
    mounted() {
      this.linkTo();
    },
    methods: {
      linkTo: function() {
        this.$refs.tuiGrid.invoke("addCellClassName", "0", "corpId", "cell-red");
      },
      clicked: function(v) {
        var data = this.$refs.tuiGrid.invoke("getRow", v.rowKey);
        //alert("브랜드 아이디(" + data.brId + ") 클릭");
      }
    }
  }
</script>

<style>
.tui-grid-cell.cell-red {background-color: red}
</style>