<template>
  <el-row :gutter="20">
    <el-col :span="20">
      <MdView>
        <template>
          # Tree 树形控件
          基于elementUI的树形控件，将常用的树形控件再一次封装。
        </template>
      </MdView>
      <CodeBox name="树形控件-基础用法" alias="basic" :code="demo.basicCode" desc="elementUI树形基础用法">
        <template slot="demo">
          <div style="border:1px solid #ccc; width:300px;">
            <ht-tree :data="data" :props="defaultProps" node-key="id" @node-click="handleNodeClick"></ht-tree>
          </div>
        </template>
      </CodeBox>
      <CodeBox
        name="树形控件-支持过滤"
        alias="filterText"
        :code="demo.filterTextCode"
        desc="在需要对节点进行过滤时，需要设置 support-filter 属性为true , 默认值为false"
      >
        <template slot="demo">
          <div style="border:1px solid #ccc; width:200px;">
            <ht-tree
              :data="data"
              :props="defaultProps"
              node-key="id"
              show-more-button
              support-filter
              @refresh="handleTreeRefresh"
              @node-click="handleNodeClick"
            ></ht-tree>
          </div>
        </template>
      </CodeBox>

      <CodeBox
        name="树形控件-对话框-支持过滤"
        alias="treeDialog"
        :code="demo.treeDialogCode"
        desc="树形对话框: 
         打开对话框 this.$refs.htTreeDialog.showDialog(); 
         事件 @onConfirm 确定事件，参数选中的数据;
         支持htTree的所有属性,
         showCheck 为true时 设置leafOnly属性是否只返回叶子节点，默认值为false, includeHalfChecked 是否只返回包含半选中的叶子节点,默认是为false "
      >
        <template slot="demo">
          <div>
            <el-radio-group v-model="showCheckbox" size="small">
              <el-radio :label="false">单选</el-radio>
              <el-radio :label="true">多选</el-radio>
            </el-radio-group>
            <el-checkbox-button v-if="showCheckbox" v-model="supportFilter2">是否支持过滤</el-checkbox-button>
            <el-checkbox-button v-if="showCheckbox" v-model="leafOnly">返回叶子节点</el-checkbox-button>
            <el-checkbox-button v-if="showCheckbox" v-model="includeHalfChecked">返回包含半选中节点</el-checkbox-button>
            <br />
            <el-button size="mini" @click="showTreeDialog()">打开树形对话框</el-button>

            <ht-tree-dialog
              ref="htTreeDialog"
              :show-checkbox="showCheckbox"
              default-expand-all
              node-key="id"
              :data="data"
              :props="defaultProps"
              :leaf-only="leafOnly"
              :include-half-checked="includeHalfChecked"
              :support-filter="supportFilter2"
              @onConfirm="treeDialogOnConfirm"
            ></ht-tree-dialog>
          </div>
        </template>
      </CodeBox>
    </el-col>
    <el-col :span="4">
      <AnchorWrapper :anchors="demo.anchors" />
    </el-col>
  </el-row>
</template>
<script>
import CodeBox from "@/components/CodeBox.vue";
import AnchorWrapper from "@/components/AnchorWrapper.vue";
import MdView from "@/views/MdView.vue";
import req from "@/api/sysType.js";

export default {
  name: "Form",
  components: { CodeBox, AnchorWrapper, MdView },
  data() {
    return {
      supportFilter: true,
      supportFilter2: false,
      showCheckbox: false,
      includeHalfChecked: false,
      leafOnly: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      demo: {
        anchors: [
          {
            content: "基础用法",
            alias: "basic"
          },
          {
            content: "节点过滤",
            alias: "filterText"
          },
          {
            content: "树形对话框",
            alias: "treeDialog"
          }
        ],

        basicCode: `
              <ht-tree :data="data" :props="defaultProps"  @node-click="handleNodeClick"></ht-tree>
              `,
        filterTextCode: `
              <ht-tree :data="data" :props="defaultProps"  support-filter   @node-click="handleNodeClick"></ht-tree>
          
              <script>
                export default {
                 
                  methods: {
                    handleNodeClick: function(data){
                     this.$message({ message: "您点击了节点 " + data.label, type: "success" });
                    }
                  },

                  data() {
                    return {
                      data: [],
                      defaultProps: {
                        children: 'children',
                        label: 'name'
                      }
                    };
                  }
                };
              <\/script>`,
        treeDialogCode: `
              <ht-tree-dialog
                ref="htTreeDialog"
                :show-checkbox="showCheckbox"
                default-expand-all
                :data="data"
                :props="defaultProps"
                :leaf-only="leafOnly"
                :include-half-checked="includeHalfChecked"
                :support-filter="supportFilter2"
                @onConfirm="treeDialogOnConfirm"
              ></ht-tree-dialog>`
      }
    };
  },
  methods: {
    handleNodeClick: function(data) {
      this.$message({
        message: "您点击了节点 " + data[this.defaultProps.label],
        type: "success"
      });
    },
    showTreeDialog: function(data) {
      this.$refs.htTreeDialog.showDialog();
    },
    treeDialogOnConfirm: function(nodes) {
      this.$message({
        showClose: true,
        message: JSON.stringify(nodes),
        type: "success"
      });
    },
    handleTreeRefresh(cb) {
      //TODO 重新加载树上的数据
      setTimeout(() => cb(), 1500);
    }
  },
  mounted() {
    let _this = this;
    req.getSysTypeData({}).then(function(data) {
      _this.data = data;
    });
  }
};
</script>
<style lang="scss" scoped>
.item-label {
  font-size: 12px;
}
</style>