<script setup lang="ts">
import { Delete, MoreFilled, EditPen, User, Avatar, PieChart, UserFilled, View } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import Icon from '@/components/ConnectionIcon.vue'
import { deleteConnection } from '../api'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const props = defineProps<{
  data: {
    experiment_id: string
    id: string
    type_name: string
    type: string
    config_attributes: any
    events: any
    last_event: string
  }
}>()

const router = useRouter()

const emits = defineEmits([
  'update',
  'edit',
  'generateUserData',
  'generateEventData',
  'viewDataProgress',
  'handleStudentFollow',
])

// 删除
function handleRemove() {
  ElMessageBox.confirm('确定要删除该连接吗？', '提示').then(() => {
    deleteConnection({ id: props.data.id }).then(() => {
      ElMessage({ message: '删除成功', type: 'success' })
      emits('update')
    })
  })
}
// 去查看
const handleView = function () {
  router.push({ path: '/connect/view', query: { id: props.data.id } })
}

const edit = function () {
  emits('edit', props.data.id)
}
const iconMap: Record<string, string> = {
  '13': '99',
  '14': '100',
  '16': 'wechatVideo'
}

const generateUserData = function () {
  emits('generateUserData', props.data.experiment_id, props.data.id, props.data.type_name)
}

const generateEventData = function () {
  emits('generateEventData', props.data.experiment_id, props.data.id, props.data.events, props.data.last_event)
}

const viewDataProgress = function () {
  emits('viewDataProgress', props.data.experiment_id)
}

const handleStudentFollow = function () {
  emits('handleStudentFollow', props.data.experiment_id, props.data.id, props.data.type)
}
</script>

<template>
  <div class="connect-item">
    <div class="connect-item_top">
      <!-- <div class="connect-item__edit">
        <img @click="edit" src="https://webapp-pub.ezijing.com/pages/assa/dml_edit.png"  />
        <el-icon size="20" color="#333" @click.stop="edit"><Edit /></el-icon>
      </div>
      <div class="connect-item__remove" @click.stop="handleRemove">
        <img src="https://webapp-pub.ezijing.com/pages/assa/dml_delete.png"  />
        <el-icon size="20" color="#333"><Delete /></el-icon>
      </div> -->
      <div class="connect-item__icon">
        <Icon
          w="40"
          h="40"
          :multiColor="true"
          class="svg"
          :name="data.type === '15' ? 'mall' : iconMap[data.type] || data.type"></Icon>
      </div>
    </div>
    <div class="connect-item_bottom">
      <p>{{ data.type === '12' ? data.config_attributes[0].value : data.type_name }}</p>
      <el-popover popper-class="popper">
        <template #reference>
          <el-icon size="14" color="#333"><MoreFilled /></el-icon>
        </template>
        <template #default>
          <ul class="connect-item_tool">
            <li @click.stop="handleView" v-if="userStore.role?.id !== 1">
              <el-icon size="16" color="#000"><View /></el-icon>
              <span>查看</span>
            </li>
            <li @click.stop="handleStudentFollow" v-if="userStore.role?.id === 1">
              <el-icon size="16" color="#000"><UserFilled /></el-icon>
              <span>用户触达</span>
            </li>
            <li @click.stop="edit" v-if="userStore.role?.id !== 1">
              <el-icon size="16" color="#000"><EditPen /></el-icon>
              <span>编辑</span>
            </li>
            <li @click.stop="generateUserData">
              <el-icon size="16" color="#000"><User /></el-icon>
              <span>自动生成用户数据</span>
            </li>
            <li @click.stop="generateEventData">
              <el-icon size="16" color="#000" @click.stop="edit"><Avatar /></el-icon>
              <span>自动生成事件数据</span>
            </li>
            <li @click.stop="viewDataProgress">
              <el-icon size="16" color="#000" @click.stop="edit"><PieChart /></el-icon>
              <span>数据生成进度</span>
            </li>
            <li @click.stop="handleRemove" v-if="userStore.role?.id !== 1">
              <el-icon size="16" color="#000" @click.stop="edit"><Delete /></el-icon>
              <span>删除</span>
            </li>
          </ul>
        </template>
      </el-popover>
    </div>
  </div>
</template>

<style lang="scss">
.connect-item {
  position: relative;
  background-color: #f3f3f3;
  border: 1px solid #f3f3f3;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  .connect-item_bottom {
    height: 40px;
    background-color: #fff;
    display: flex;
    // flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
  }
  .connect-item_top {
    height: 124px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  &:hover {
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 6px 0px;
    .connect-item__remove {
      display: block;
    }
    .connect-item__edit {
      display: block;
    }
  }
  p {
    font-size: 12px;
    // margin-top: 8px;
  }
}
.connect-item__remove {
  display: none;
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 999;
}
.connect-item__edit {
  display: none;
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 999;
}
.connect-item_tool {
  li {
    display: flex;
  }
}
.popper {
  padding: 20px 0 !important;
  width: fit-content !important;
  min-width: fit-content !important;
  border-radius: 10px !important;
  ul {
    li {
      display: flex;
      height: 35px;
      align-items: center;
      padding: 0 15px;
      &:hover {
        background-color: #f1f1f1;
      }
      cursor: pointer;
      span {
        margin-left: 8px;
        font-size: 12px;
        line-height: 100%;
      }
    }
  }
}
</style>
