<template>
  <b-container fluid>
    <b-row>
      <b-col cols="4" style="margin-top: 30px">
        <div style="margin-left: -10px">
          <b-button @click="addNode" class="btn1">新增節點</b-button>
          <b-button class="btn1">上傳</b-button>
          <b-button class="btn1">全部</b-button>
        </div>
        <div style="margin-top: 20px">
          <vue-tree-list
            @click="onClick"
            @change-name="onChangeName"
            @delete-node="onDel"
            @add-node="onAddNode"
            :model="data"
            default-tree-node-name="new node"
            default-leaf-node-name="new leaf"
            v-bind:default-expanded="false"
            style="width: 350px"
          >
            <template v-slot:leafNameDisplay="slotProps" >
              <div>
                {{ slotProps.model.name }}
              </div>
            </template>
            <span style="font-size: 20px" slot="addTreeNodeIcon"
              ><b-icon-folder-fill style="color:#de9902"
            /></span>
            <span style="font-size: 20px" slot="addLeafNodeIcon"
              ><b-icon-plus style="color:green"
            /></span>
            <span style="font-size: 20px" slot="editNodeIcon"
              ><b-icon-pencil-fill style="color:blue"
            /></span>
            <span style="font-size: 20px" slot="delNodeIcon"
              ><b-icon-trash-fill style="color:red"
            /></span>
            <span
              class="icon"
              style="font-size: 16px"
              slot="leafNodeIcon"
            ></span>
            <span
              class="icon"
              style="font-size: 16px"
              slot="treeNodeIcon"
            ></span>
          </vue-tree-list>
        </div>
      </b-col>
      <b-col cols="8" style="margin-top: 40px">
        <div style="margin-left: 50px">
          <b-form-group
            label="關鍵字:"
            label-for="filter-input"
            label-cols="1"
            label-align="right"
            label-size="1px"
            class="mb-0"
          >
            <b-input-group size="1px" style="width: 600px">
              <b-form-input
                id="filter-input"
                v-model="filter"
                type="search"
                placeholder="請輸入關鍵字"
              ></b-form-input>
            </b-input-group>
          </b-form-group>
        </div>
        <div>
          <b-table
            class="text-center"
            thead-class="thClass"
            small
            responsive="sm"
            ref="selectableTable"
            bordered
            :fields="fields"
            :items="file"
            fixed
            :per-page="perPage"
            :current-page="currentPage"
            :filter="filter"
            sticky-header="700px"
          >
            <!-- HEAD -->
            <template #head()="{ label }">
              <span
                style="font-weight: normal; color: black; font-size: 15px"
                >{{ label }}</span
              >
            </template>
            <!-- BODY -->
            <!-- 下載 -->
            <template #cell(download)="data">
              <b-icon
                variant="primary"
                class="btn w-15 p-1"
                icon="cloud-arrow-down"
                aria-hidden="true"
                style="
                  height: 30px;
                  width: auto;
                  margin-bottom: 10px;
                  margin-left: 5px;
                "
              ></b-icon>
            </template>
            <!-- 預覽 -->
            <template #cell(views)="data">
              <b-icon
                variant="primary"
                class="btn w-15 p-1"
                icon="eye-fill"
                aria-hidden="true"
                style="
                  height: 30px;
                  width: auto;
                  margin-bottom: 10px;
                  margin-left: 5px;
                "
              ></b-icon>
            </template>
            <!-- 編輯 -->
            <template #cell(edit)="data">
              <b-icon
                variant="primary"
                class="btn w-15 p-1"
                icon="pencil-fill"
                aria-hidden="true"
                style="
                  height: 30px;
                  width: auto;
                  margin-bottom: 10px;
                  margin-left: 5px;
                "
              ></b-icon>
            </template>
            <!-- 版本 -->
            <template #cell(version)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 檔案名稱 -->
            <template #cell(document_name)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 類型 -->
            <template #cell(type)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 檔案大小 -->
            <template #cell(size)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 更新時間 -->
            <template #cell(update_time)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 標籤 -->
            <template #cell(label)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 備註 -->
            <template #cell(remark)="data">
              <span>{{ data.value }}</span>
            </template>
            <!-- 上傳最新版本 -->
            <template #cell(upload)="data">
              <span>{{ data.value }}</span>
            </template>
          </b-table>
          <!-- 分頁符號 -->
          <b-pagination
            v-model="currentPage"
            pills
            :total-rows="rows"
            :per-page="perPage"
            aria-controls="my-table"
            style="margin-left: 300px"
          >
          </b-pagination>
        </div>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import { VueTreeList, Tree, TreeNode } from 'vue-tree-list'

export default {
  components: {
    VueTreeList
  },
  data () {
    return {
      filter: null,
      filterOn: [],
      perPage: 10,
      currentPage: 1,
      newTree: {},
      data: new Tree([
        {
          name: '設計書',
          id: 1,
          pid: 0,
          dragDisabled: true,
          addTreeNodeDisabled: true,
          addLeafNodeDisabled: true,
          editNodeDisabled: true,
          delNodeDisabled: true,
          children: [
            {
              name: '測試一',
              id: 2,
              isLeaf: true,
              pid: 1
            }
          ]
        },
        {
          name: '設計圖變更',
          id: 3,
          pid: 0,
          disabled: true
        },
        {
          name: '環境影響說明書',
          id: 4,
          pid: 0
        },
        {
          name: '環境影響分析差異報告',
          id: 5,
          pid: 0
        },
        {
          name: '契約書',
          id: 6,
          pid: 0
        },
        {
          name: '契約變更書',
          id: 7,
          pid: 0
        },
        {
          name: '補充說明',
          id: 8,
          pid: 0
        },
        {
          name: '特定條款',
          id: 9,
          pid: 0
        },
        {
          name: '監造計畫',
          id: 10,
          pid: 0
        },
        {
          name: '地質月報',
          id: 11,
          pid: 0
        }
      ]),
      fields: [
        {
          key: 'download',
          label: '下載',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '70px' }
        },
        {
          key: 'views',
          label: '預覽',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '70px' }
        },
        {
          key: 'edit',
          label: '編輯',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '70px' }
        },
        {
          key: 'version',
          label: '版本',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '70px' }
        },
        {
          key: 'document_name',
          label: '檔案名稱',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '220px' }
        },
        {
          key: 'type',
          label: '類型',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '70px' }
        },
        {
          key: 'size',
          label: '大小',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '95px' }
        },
        {
          key: 'update_time',
          label: '最後更新',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '140px' }
        },
        {
          key: 'label',
          label: '標籤',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '170px' }
        },
        {
          key: 'remark',
          label: '備註',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '170px' }
        },
        {
          key: 'upload',
          label: '上傳新版本',
          tdClass: 'align-middle',
          thStyle: { background: '#c8cbcf', width: '110px' }
        }
      ],
      file: [
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        },
        {
          version: '1',
          document_name: '測試用7.pdf',
          type: 'pdf',
          size: '1TB',
          update_time: '2022-09-22',
          label: 'e801',
          remark: '好長啊',
          upload: '1'
        }
      ]
    }
  },
  methods: {
    onDel (node) {
      console.log(node)
      node.remove()
    },

    onChangeName (params) {
      console.log(params)
    },

    onAddNode (params) {
      console.log(params)
    },

    onClick (params) {
      console.log(params)
    },

    addNode () {
      var node = new TreeNode({ name: '新節點自己改名拉', isLeaf: false })
      if (!this.data.children) this.data.children = []
      this.data.addChildren(node)
    },

    getNewTree () {
      var vm = this
      function _dfs (oldNode) {
        var newNode = {}

        for (var k in oldNode) {
          if (k !== 'children' && k !== 'parent') {
            newNode[k] = oldNode[k]
          }
        }

        if (oldNode.children && oldNode.children.length > 0) {
          newNode.children = []
          for (var i = 0, len = oldNode.children.length; i < len; i++) {
            newNode.children.push(_dfs(oldNode.children[i]))
          }
        }
        return newNode
      }

      vm.newTree = _dfs(vm.data)
    }
  },
  async mounted () {
    try {
      console.log(this.list)
    } catch (err) {
      console.log(err)
    }
  },
  computed: {
    rows () {
      return this.file.length
    }
  }
}
</script>
<style>
/* .thClass {
  background-color: #1d325f;
  color: white;
} */
</style>
<style lang="scss" scoped>
.form-control {
  color: black;
}
.btn1 {
  background-color: rgb(75, 102, 255);
  font-size: 16px;
  margin-top: 15px;
  margin-left: 15px;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  border: none;
  hover {
    color: #ffffff;
    background-color: #4b66ff;
  }
}
.text-center {
  height: 100%;
  margin-top: 10px;
  margin-left: -180px;
}
.muted {
  color: gray;
  font-size: 80%;

}
</style>
