<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>