<template>
  <el-card shadow="always" class="content_body_row_tree">
    <div class="tree_out">
      <el-input v-model.trim="title" placeholder="请输入标题" clearable maxlength="30" style="width:330px;">
        <template #append>
          <el-button type="primary" style="background:#409eff">
            <el-icon style="vertical-align: middle;color:#fff;">
              <Search />
            </el-icon>
          </el-button>
        </template>
      </el-input>
      <el-tree :data="dataSource" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false">
        <template #default="{ node, data }">
          <div class="tree_item">
            <div>{{ node.label }}</div>
            <div class="tree_item_opert">
              <el-icon size="16px" color="#409eff" @click="addConfirm(data)" class="item_opert">
                <FolderAdd />
              </el-icon>
              <el-icon size="16px" color="#67C23A" @click="editConfirm(data)" class="item_opert">
                <Edit />
              </el-icon>
              <el-icon size="16px" color="#F56C6C" @click="deleteFn(data)" class="item_opert">
                <Delete />
              </el-icon>

            </div>
          </div>
        </template>
      </el-tree>
    </div>
  </el-card>
</template>
 
<script lang="ts" setup>
import { ElMessageBoxOpert, ElConfirmBeforeOpert } from "utils/elementCom"
let title = ref("")
const dataSource: any = ref<any>([
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])


const addCallBack = (row: any, value: any) => {
  console.log("adddCallBack", row, value)
}
const editCallBack = (row: any, value: any) => {
  console.log("editCallBack", row, value)
}



const addConfirm = (row: any) => {

 
}
const editConfirm = (row: any) => {
  ElMessageBoxOpert(
    '编辑',
    '',
    '确定',
    '取消',
    (val: any) => {
      if (!val) {
        return "请填写类型模板"
      }
    },
    "请填写类型模板",
    editCallBack,
    row
  )
}



const deleteFn = (row: any) => {
  ElConfirmBeforeOpert(
    '操作确认',
    '是否确定删除数据？',
    deleteItem,
    '确定',
    '取消',
    row
  )
}


const deleteItem = (row: any) => {
  const itemID = row.v_id
  console.log("ITEMid", row)
}


</script>
 
<style scoped lang="scss">
.content_body_row_tree {
  height: calc(100vh - 142px);

  .tree_out {
    width: 460px;
  }
}

.tree_item {
  display: flex;
  justify-content: space-between;
}

.tree_item_opert {
  width: 160px;
  display: flex;
  justify-content: flex-end;
  .item_opert{
    margin-left: 12px;
  }
}

.btn_out {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
</style>
 