<template>
  <div :class="{'node': true, 'root': isRoot || !show, 'node-error-state': showError}">
    <div v-if="show" @click="emit('selected')" :class="{'node-body': true, 'error': showError}">
      <div class="node-body-header" :style="{'background-color': headerBgc}">
        <el-icon v-if="headerIcon" size="20">
          <component :is="headerIcon"/>
        </el-icon>
        <ellipsis class="name" hover-tip :content="title"/>
        <el-icon v-if="!isRoot && designState" size="20" style="float:right;" @click="emit('delNode')">
          <Close/>
        </el-icon>
      </div>
      <div class="node-body-content">
        <el-icon v-if="leftIcon">
          <component :is="leftIcon"/>
        </el-icon>
        <template v-if="selectUser.show && mode === 'view'">
          <div class="avatar_button">
            <avatar-ellipsis :row="3" v-if="userInfo.length > 0" :user-info="userInfo"/>
            <el-button type="primary" :icon="Plus" circle/>
          </div>
        </template>
        <template v-else-if="showAvatar">
          <span class="placeholder" v-if="userInfo.length === 0">{{ placeholder }}</span>
          <avatar-ellipsis :row="3" :user-info="userInfo" v-else/>
        </template>
        <template v-else>
          <span class="placeholder" v-if="(content || '').trim() === ''">{{ placeholder }}</span>
          <ellipsis :row="3" :content="content" v-else/>
        </template>
      </div>
      <div class="node-error" v-if="showError">
        <el-tooltip effect="dark" :content="errorInfo" placement="top-start">
          <el-icon>
            <Warning/>
          </el-icon>
        </el-tooltip>
      </div>
    </div>
    <div class="node-footer">
      <div v-if="merge" class="branch-merge">
        <svg-icon name="fenzhi" :class-name="'fen-icon'"/>
<!--        <img data-v-1e7b1da5=""-->
<!--             src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAABXlJREFUeF7tmm2IVGUUx3/nLkQUqxmkpAVhSPUllZX8EEGhvVgZQWCU6wcpsqi2mXtnoaBwoqLCufeO9oJYUJQiFZWlZPQCfYiIXkylstTyS1oWWeYWCe6cuLsz7t3r3Ll3du6907oz35bnPM9z/r895zznmWeECf6RCa6fDoBOBExwAp0UmOAB0CmCnRTopECbCZi2nivK1CMD7FpXlH+ydqctKZBz9QyjwkqFG4HzfKK/0gpvl/ulmBWIzAHkVmlRDFY2EihwwLFkRhYQxgzAtHW2CpcBc4CpOsg26eK7yVPYVFwu/9ZzPufq2VLhQBxhAk85lvSF2Y5l/3prjQlAvqR3IjwJTKqz6DeGssQuyLfBsbyjz6PcFgeAZyOwzLFk/QnrjHH/RACYtj6ncHuUCDWYXs7Lz367XEn3inB+1NzauMLGsiW3+u1b2b9lAH22LuiCD2IJED5yTbmiZpt3dAbKT7Hmjhjtdi25oPZnK/uH7dtUCpi2vqVwQ1wRWuHhWkW3StpTEb6IO3fIThhwTemuzWll/0QA5G39FTgrtghhs2vKELA7inra6d38HXvusOEnriWXHo+iFvZvGUDfap3VdYzdzQgIHmd5W7cBc2Ovoax1C3KXZ5/E/i3VgCQciNMD+J1Ug55yXjxo7QfgOdFKCvjyeL/C9MgoEBa5przrt0ti/+C+mRVB/8amrWsU7m2Ql/c5lqwJjre9CDZ1DMFnriXzw0SatvZW4FqBW6o2vwGvCGxyLPmw3rym9g8cwy0XQV8Ix2qEgH0C1ziWNCyceVu1uvZrriVLGqVGsainHO7mRyDynlCvEWupCI7Kxcat6BFg+OwW9ohyfSMIcQF44v/sZovAlRH1I7QVTwyAt1Cjy8hfh9hYvepGQogDoI74HYbSXzHwusTYl7FEAURVcdPWN+NAiAJQTzzCda4p+6N8iDPe1CkQZ8FAtY+E0AhA2uKHszTlT1QkhAHIQnwmAKr1IjQS6gHISnxmABpBCALIUnymAMIgKHxf6wMmH6E3cNTtSLLgZXoKNOgAR6UDyqyq7esKk3znfOriM48AXzc5AmGE1EFgWvXPTMS3DcAJ6TA6XDIT31YAoRCEc5JqcuKc8Kn3AVFO+E4BryvJVHzbI8BzwAdgi2vJ4ihgSY//nyIg8jqctPi2RYBp61wV5qsyR2BFVdhBhBe0wtdisNU15VAagoNrZh4BOVsfFcVCODVUoLBn6E2hIBvShpApgLyt3nvhRXFFCWxwLOmNaz8Wu8wA5G31ntQWNOukwD2OJc80Oy+ufSYAciVdJsJLcZ0K2nV1MbuUk51jnd9oXuoACmW9eHCQj49/T+j3RtiJslPgFxXmoVxe11nhPdeUq8clANPWPoXVQef9D6e1saEHVINHUBYF7Q1lnl2QL5OGkHoE5G19GRhVyBQ+L1tyST0xoa/Iygq3IOvGI4BdwIWjHBeecE15IExM3tYfgJmBOetcU2o9Q2IcsoiAw8Gf0qhyU7kgb4QCcPRTlNGvSspmtzD81J7kJ30AJX0fYeHo2seLjiXLG0TA78CZ/nGFB8uWPJakeG+t9AE4+jjK/XGLWtgTusBix5It4w5ArqRLRTjhl14IW40KD/kre66ki0R4p57IrgozS/2yb9wByDvqhbKX07Xv/oIavMfOP6pFb0pdgcqrbkFuTlp8JingbRIaBfEUHUOYltbtMPUaUNNo2rpeYWk8zSNWqvSmeSvMDIAnybT1boWnY0I4aigL7YJ4bXRqn0wBeCqG7gYVVqFcFapKWXt0gP5nizKQmvLqwpkDqAkaanmhB4MelOkI27XCDjHY7pqyN23htfXbBiArgVH7dABEETrZxzsRcLL/h6P0/Qc1qphfvB2K3wAAAABJRU5ErkJggg=="-->
<!--             alt="">-->
      </div>
      <div class="btn">
        <insert-button v-if="designState" @insertNode="type => emit('insertNode', type)"/>
      </div>
    </div>
    <!--    <user-picker v-if="selectUser.show" title="请选择系统用户" :multiple="selectUser.multiple" ref="userPicker"-->
    <!--                 :selected="_userInfo"-->
    <!--                 @ok="selectedUser"/>-->
  </div>
</template>

<script setup>
import InsertButton from '../common/InsertButton.vue'
import Ellipsis from '../common/Ellipsis.vue'
import AvatarEllipsis from '../common/AvatarEllipsis.vue'
import SvgIcon from '@/components/svgIcon/index.vue'
import {Close, Warning, Plus} from '@element-plus/icons-vue'

const emit = defineEmits(['insertNode'])
const props = defineProps({
  //是否为根节点
  isRoot: {
    type: Boolean,
    default: false
  },
  nodeId: {
    type: String,
    default: () => {
      return "";
    }
  },
  //是否显示节点体
  show: {
    type: Boolean,
    default: true
  },
  //是否显示节点体
  merge: {
    type: Boolean,
    default: false
  },
  //节点内容区域文字
  content: {
    type: String,
    default: ""
  },
  //节点内容区域文字
  userInfo: {
    type: Array,
    default() {
      return []
    }
  },
  //节点内容区域文字
  showAvatar: {
    type: Boolean,
    default: false
  },
  selectUser: {
    type: Object,
    default() {
      return {
        show: false,
        multiple: false,
      }
    }
  },
  title: {
    type: String,
    default: "标题"
  },
  placeholder: {
    type: String,
    default: "请设置"
  },
  //节点体左侧图标
  leftIcon: {
    type: Object,
    default: null
  },
  //头部图标
  headerIcon: {
    type: String,
    default: ''
  },
  //头部背景色
  headerBgc: {
    type: String,
    default: '#576a95'
  },
  //是否显示错误状态
  showError: {
    type: Boolean,
    default: false
  },
  errorInfo: {
    type: String,
    default: '无信息'
  },
  mode: {
    type: String,
    default: 'design'
  }
})

const designState = computed(() => {
  return props.mode === 'design'
})


const init = () => {
  // let userInfo = this.$store.state.selectUserMap.get(this.nodeId);
  // if (userInfo){
  //   let userInfoList = []
  //   for (let val of userInfo) {
  //     let userInfo = {
  //       id: val.id,
  //       name: val.name,
  //       avatar: val.avatar,
  //     }
  //     userInfoList.push(userInfo)
  //   }
  //   // this._userInfo = userInfoList
  // }
}

// init()
</script>

<style lang="scss" scoped>

.root {
  &:before {
    display: none !important;
  }
}

.node {
  padding: 0 50px;
  //width: 220px;
  width: 320px;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 0;
    border-style: solid;
    border-width: 8px 6px 4px;
    border-color: #000000 transparent transparent;
    background: #ffffff;
  }

  .node-body {
    cursor: pointer;
    min-height: 63px;
    position: relative;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0px 0px 5px 0px #d8d8d8;

    &:hover {
      box-shadow: 0px 0px 3px 0px;

      .node-body-header {
        .el-icon-close {
          display: inline;
          font-size: medium;
        }
      }
    }

    .node-body-header {
      text-align: center;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      padding: 5px 15px;
      color: white;
      font-size: xx-small;

      .el-icon-close {
        display: none;
      }

      .name {
        //height: 14px;
        //width: 150px;
        display: inline-block;
        font-size: 16px;
      }
    }

    .node-body-content {
      padding: 18px;
      color: #656363;
      font-size: 14px;

      .avatar_button {
        //float: left;
        display: flex;
        //flex: 1;
        flex-wrap: wrap;

        button {
          margin-top: 3px;
          height: 40px;
          //flex-shrink: 0;
          //flex-grow: 0;
        }
      }

      i {
        position: absolute;
        top: 55%;
        right: 5px;
        font-size: medium;
      }

      .placeholder {
        color: #8c8c8c;
      }
    }
  }


}
</style>
