<template>
    <div class="login-container">
      <el-button
        type="primary"
        @click="() => addNode()"
      >{{ $t('users.add') }}</el-button>
      <el-tree
        ref="tree"
        :data="data"
        show-checkbox
        node-key="id"
        highlight-current
        check-strictly
        indent="40"
        icon-class="el-icon-pc"
        :props="defaultProps"
      >
        <!-- <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        highlight-current
        isLeaf
        @node-contextmenu="()=>rightKey(node, data)"
        check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
        :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
        :props="defaultProps"
      > -->
        <span
          slot-scope="{ node, data }"
          class="custom-tree-node"
        >
          <span>{{ node.label }}</span>
          <span>
            <el-button
              type="primary"
              icon="el-icon-upload"
              size="mini"
              @click="() => append(data)"
            >
              {{ $t('users.add') }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="() => update(node, data)"
            >
              {{ $t('users.update') }}
            </el-button>
            <el-button
              type="primary"
              icon="el-icon-delete"
              size="mini"
              class="danger"
              @click="() => remove(node, data)"
            >
              {{ $t('users.del') }}
            </el-button>
          </span>
        </span>
      </el-tree>
  
      <!-- <div class="buttons">
        <el-button @click="getCheckedNodes">通过 node 获取</el-button>
        <el-button @click="getCheckedKeys">通过 key 获取</el-button>
        <el-button @click="setCheckedNodes">通过 node 设置</el-button>
        <el-button @click="setCheckedKeys">通过 key 设置</el-button>
        <el-button @click="resetChecked">清空</el-button>
      </div> -->
    </div>
  </template>
  <script>
  let id = 1000
  export default {
    data() {
      return {
        data: [
          {
            label: '成镜',
            id: '1',
            children: [
              {
                label: '款式',
                id: '11',
                children: [
                  { label: '青春学子风' },
                  { label: '休闲' },
                  { label: '商务' },
                  { label: '复古' },
                  { label: '时尚' },
                  { label: '质感哥特潮' },
                  { label: '轻简北欧风' },
                  { label: '理性几何派' },
                  { label: '多元新风尚' },
                  { label: '立体巴洛克' },
                  { label: '有机未来时' },
                  { label: '无界人文系' },
                  { label: '自然舒视角' },
                  { label: '流线洛可可' },
                  { label: '奶奶风' },
                  { label: '简约-极简文艺范' },
                  { label: '运动风' },
                  { label: '行政风' },
                  { label: '折射率' }
                ]
              },
              { label: '个性化服务', id: '267', children: [] },
              {
                label: '赠品',
                id: '259',
                children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
              },
              {
                label: '场景',
                id: '258',
                children: [
                  { label: '学校场景' },
                  { label: '出行交际' },
                  { label: '夜店迷人' },
                  { label: '明星同款' }
                ]
              },
              {
                label: '销售保障',
                id: '245',
                children: [
                  { label: '可退' },
                  { label: '可换' },
                  { label: '可修' }
                ]
              },
              {
                label: '功能',
                id: '140',
                children: [
                  { label: '防踩压' },
                  { label: '防扭曲' },
                  { label: '抗过敏' },
                  { label: '防腐蚀' },
                  { label: '耐磨损' },
                  { label: '抗蓝光' }
                ]
              },
              {
                label: '品牌',
                id: '71',
                children: [
                  { label: '购易' },
                  { label: '海俪恩' },
                  { label: '沙漠风暴' },
                  { label: '古诗' },
                  { label: '暴龙' },
                  { label: '犀牛' },
                  { label: 'Ray-Ban雷朋' },
                  { label: 'PARIM派丽蒙' },
                  { label: '石狼' },
                  { label: '木九十' }
                ]
              },
              {
                label: '边形',
                id: '49',
                children: [
                  { label: '半框' },
                  { label: '全框' },
                  { label: '无框' }
                ]
              },
              {
                label: '性别',
                id: '23',
                children: [{ label: '男性' }, { label: '女性' }]
              },
              {
                label: '梁型',
                id: '20',
                children: [{ label: '双梁' }, { label: '单梁' }]
              },
              {
                label: '重量',
                id: '19',
                children: [{ label: '30克以下' }, { label: '80克以上' }]
              },
              {
                label: '适用脸型',
                id: '15',
                children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
              },
              {
                label: '形状',
                id: '14',
                children: [
                  { label: '正圆形' },
                  { label: '椭圆形' },
                  { label: '方圆' },
                  { label: '方形' },
                  { label: '多边形' },
                  { label: '内三角(蛤蟆)' },
                  { label: '外三角(蝶形)' }
                ]
              },
              { label: '年龄', id: '12', children: [{ label: '通用' }] },
              {
                label: '材质',
                id: '10',
                children: [
                  { label: '板材' },
                  { label: '纯钛' },
                  { label: 'TR90' },
                  { label: '木质' },
                  { label: '竹质' },
                  { label: 'β钛' },
                  { label: 'PC' },
                  { label: 'ULTEM塑钢' },
                  { label: '钨钛塑钢' },
                  { label: '镁铝合金' },
                  { label: '碳纤维' }
                ]
              },
              { label: '折射率', id: '286', children: [] },
              {
                label: '颜色',
                id: '13',
                children: [
                  { label: '金色' },
                  { label: '银色' },
                  { label: '黑色' },
                  { label: '彩色' },
                  { label: '枪色' }
                ]
              }
            ]
          },
          {
            label: '镜片',
            id: '2',
            children: [
              {
                label: '面型',
                id: '85',
                children: [{ label: '球面单光' }, { label: '非球面单光' }]
              },
              { label: '近视度数', id: '92', children: [] },
              { label: '散光', id: '93', children: [] },
              {
                label: '功能',
                id: '95',
                children: [
                  { label: '防起雾' },
                  { label: '防蓝光' },
                  { label: '防紫外线' },
                  { label: '偏光' },
                  { label: '染色' },
                  { label: '抗疲劳' },
                  { label: '青少年渐进' },
                  { label: '内渐进' },
                  { label: '变色' },
                  { label: '双光' },
                  { label: '耐磨损' },
                  { label: '防尘' },
                  { label: '防水' },
                  { label: '防摔' },
                  { label: '防指纹' },
                  { label: '防反光' }
                ]
              },
              {
                label: '颜色',
                id: '100',
                children: [
                  { label: '透明' },
                  { label: '染色' },
                  { label: '变色' },
                  { label: '单色' }
                ]
              },
              {
                label: '折射率',
                id: '101',
                children: [
                  { label: '1.56' },
                  { label: '1.60' },
                  { label: '1.65' },
                  { label: '1.67' },
                  { label: '1.71' },
                  { label: '1.74' }
                ]
              },
              { label: '阿贝数（色散）', id: '102', children: [] },
              { label: '重量', id: '103', children: [] },
              {
                label: '材质',
                id: '104',
                children: [
                  { label: '树脂' },
                  { label: '玻璃' },
                  { label: '宇宙PC' },
                  { label: 'PC' }
                ]
              },
              {
                label: '品牌',
                id: '118',
                children: [
                  { label: '好视力' },
                  { label: 'RAISE锐视' },
                  { label: '依视路' },
                  { label: '凯米' },
                  { label: '蔡司' },
                  { label: '舒曼' }
                ]
              },
              {
                label: '销售保障',
                id: '249',
                children: [
                  { label: '可退' },
                  { label: '可换' },
                  { label: '可修' }
                ]
              }
            ]
          },
          {
            label: '隐形眼镜',
            id: '88',
            children: [
              {
                label: '颜色',
                id: '105',
                children: [
                  { label: '绿' },
                  { label: '灰' },
                  { label: '黑' },
                  { label: '紫' },
                  { label: '蓝' },
                  { label: '棕色' },
                  { label: '紫色' }
                ]
              },
              {
                label: '颜料',
                id: '106',
                children: [{ label: '水性' }, { label: '油性' }]
              },
              { label: '度数', id: '107', children: [] },
              {
                label: '周期',
                id: '108',
                children: [
                  { label: '日抛' },
                  { label: '周抛' },
                  { label: '双周抛' },
                  { label: '月抛' },
                  { label: '季抛' },
                  { label: '半年抛' },
                  { label: '年抛' }
                ]
              },
              {
                label: '品牌',
                id: '133',
                children: [
                  { label: 'HolyNara' },
                  { label: '爱尔康' },
                  { label: 'MaxLook' },
                  { label: 'NEO' },
                  { label: 'GEO' },
                  { label: '实瞳' },
                  { label: '茵洛' },
                  { label: 'DAZZSHOP' },
                  { label: 'O-LENS' },
                  { label: 'envie' },
                  { label: '曼秀雷敦' },
                  { label: '妃蜜莉' },
                  { label: '海俪恩' },
                  { label: '凯达' },
                  { label: '蔡司' },
                  { label: '酷视' },
                  { label: 'LILMOON' },
                  { label: 'RICHBABY' },
                  { label: 'T-Garden' },
                  { label: 'lenstown' },
                  { label: '新加坡P2' },
                  { label: '星欧' },
                  { label: '美尼康' },
                  { label: '美汐' },
                  { label: '欧舒天' },
                  { label: '海昌' },
                  { label: '菲士康' },
                  { label: '卫康' },
                  { label: '库博' },
                  { label: '安视优' },
                  { label: '美若康' },
                  { label: '视康' },
                  { label: '澜柏' },
                  { label: '3N' },
                  { label: 'BIJOU' },
                  { label: '依视明' },
                  { label: '博士伦' },
                  { label: '瞳昕' },
                  { label: '科莱博' },
                  { label: '绮芙莉' },
                  { label: '雅培' },
                  { label: '爱能视' },
                  { label: '女神秘语' },
                  { label: '博视顿' },
                  { label: '妆美堂' },
                  { label: '人鱼姬' },
                  { label: 'EverColor' },
                  { label: 'Sincere' }
                ]
              },
              {
                label: '工艺',
                id: '159',
                children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
              },
              {
                label: '材质',
                id: '164',
                children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
              },
              {
                label: '含水量',
                id: '174',
                children: [
                  { label: '0-40%' },
                  { label: '40-44%' },
                  { label: '45%以上' }
                ]
              },
              {
                label: '基弧',
                id: '178',
                children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
              },
              {
                label: '直径',
                id: '181',
                children: [{ label: '13.4-14' }, { label: '14以上' }]
              },
              {
                label: '中心厚度',
                id: '184',
                children: [
                  { label: '0.0 - 0.03' },
                  { label: '0.04 - 0.09' },
                  { label: '0.1以上' }
                ]
              },
              { label: '销售保障', id: '253', children: [] },
              { label: '赠品', id: '260', children: [] }
            ]
          },
          {
            label: '特种镜',
            id: '146',
            children: [
              {
                label: '镜面颜色',
                id: '237',
                children: [{ label: '透明' }, { label: '亮金色' }]
              },
              {
                label: '品牌',
                id: '238',
                children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
              },
              {
                label: '销售保障',
                id: '254',
                children: [{ label: '包退' }, { label: '包换' }]
              },
              {
                label: '功能',
                id: '268',
                children: [
                  { label: '防风镜' },
                  { label: '防爆溅工作镜' },
                  { label: '泳镜' },
                  { label: '智能镜' }
                ]
              }
            ]
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      }
    },
    methods: {
      getCheckedNodes() {
        console.log(this.$refs.tree.getCheckedNodes())
      },
      getCheckedKeys() {
        console.log(this.$refs.tree.getCheckedKeys())
      },
      addNode() {
        let h
        this.$message({
          message: h('p', null, [
            h('span', null, '添加一个新节点 ')
            // h("i", { style: "color: teal" }, "VNode")
          ])
        })
      },
      append(data) {
        const newChild = { id: id++, label: 'testtest', children: [] }
        if (!data.children) {
          this.$set(data, 'children', [])
        }
        data.children.push(newChild)
      },
      remove(node, data) {
        // 删除
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex(d => d.id === data.id)
        children.splice(index, 1)
      },
      rightKey(node, data) {
        // 右键
        const h = this.$createElement
        // console.log(data, this.$refs.tree);
        this.$message({
          message: h('p', null, [
            h('span', null, '右键了啊！ ' + node + data),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        })
      },
      update(node, data) {
        // 更新
        const h = this.$createElement
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        })
      },
      setCheckedNodes() {
        this.$refs.tree.setCheckedNodes([
          {
            id: 5,
            label: '二级 2-1'
          },
          {
            id: 9,
            label: '三级 1-1-1'
          }
        ])
      },
      setCheckedKeys() {
        this.$refs.tree.setCheckedKeys([3])
      },
      resetChecked() {
        this.$refs.tree.setCheckedKeys([])
      }
    }
  }
  </script>
  <style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  </style>