<script setup lang="ts">
import type { LabelType } from '../types'
import { Edit, Delete } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { deleteLabelType } from '../api'
import { useLabelType } from '../composables/useLabelType'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

defineProps<{ activeId: string }>()

defineEmits<{
  (e: 'select', id: string): void
}>()

const LabelTypeFormDialog = defineAsyncComponent(() => import('../components/LabelTypeFormDialog.vue'))

const { labelCount, typeList, fetchTypeList } = useLabelType()

let formVisible = $ref(false)
let currentRow = $ref<LabelType>()

// 新建
function handleAdd() {
  currentRow = undefined
  formVisible = true
}
// 修改
function handleUpdate(row: LabelType) {
  currentRow = row
  formVisible = true
}
// 删除
function handleRemove(row: LabelType) {
  ElMessageBox.confirm('确定要删除该目录吗？', '提示').then(() => {
    deleteLabelType({ id: row.id }).then(() => {
      ElMessage({ message: '删除成功', type: 'success' })
      fetchTypeList()
    })
  })
}
</script>

<template>
  <el-button type="primary" style="width: 100%" @click="handleAdd" v-if="!userStore.status.tag_status"
    >添加标签目录</el-button
  >
  <div class="label-type-total" @click="$emit('select', '')">
    <h4>全部标签</h4>
    <p>{{ labelCount }}</p>
  </div>
  <ul>
    <li
      class="label-type-item"
      :class="{ 'is-active': item.id === activeId }"
      v-for="item in typeList"
      :key="item.id"
      @click="$emit('select', item.id)"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        :fill="item.url"
        width="16.67333984375"
        height="16.669540405273438"
        viewBox="0 0 16.67333984375 16.669540405273438"
      >
        <g>
          <path
            d="M16.6733,8.79462Q16.6733,7.76343,15.9463,7.03212L15.9442,7.03002L9.20711,0.292893C9.01957,0.105357,8.76522,0,8.5,0L1,0C0.447715,0,0,0.447715,0,1L0,8.5C0,8.76541,0.10551,9.01993,0.293287,9.2075L7.02965,15.9364Q7.76207,16.6695,8.79838,16.6695Q9.83479,16.6695,10.5667,15.9367L15.9463,10.5571Q16.6733,9.82582,16.6733,8.79462ZM6.41683,5.37499C6.41683,5.95029,5.95045,6.41666,5.37516,6.41666C4.79987,6.41666,4.3335,5.95029,4.3335,5.37499C4.3335,4.7997,4.79987,4.33333,5.37516,4.33333C5.95045,4.33333,6.41683,4.7997,6.41683,5.37499Z"
          />
        </g>
      </svg>
      <p>{{ item.name }}</p>
      <div class="label-type-actions" v-if="!item.is_default">
        <el-icon
          class="label-type-item__edit"
          @click.stop="handleUpdate(item)"
          v-permission="'experiment_tag_type_update'"
          ><Edit
        /></el-icon>
        <el-icon
          class="label-type-item__remove"
          @click.stop="handleRemove(item)"
          v-permission="'experiment_tag_type_delete'"
          ><Delete
        /></el-icon>
      </div>
    </li>
  </ul>

  <LabelTypeFormDialog
    v-model="formVisible"
    :data="currentRow"
    @update="fetchTypeList"
    v-if="formVisible"
  ></LabelTypeFormDialog>
</template>

<style lang="scss">
.label-type-total {
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  cursor: pointer;
}
.label-type-item {
  display: flex;
  align-items: center;
  padding: 0 5px;
  margin-bottom: 4px;
  font-size: 12px;
  line-height: 30px;
  p {
    padding: 0 10px;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    cursor: pointer;
  }
  &.is-active,
  &:hover {
    color: var(--main-color);
    background: #f8e8ec;
    .label-type-actions {
      display: flex;
    }
  }
}
.label-type-actions {
  display: none;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  .el-icon {
    font-size: 14px;
    &:hover {
      color: var(--main-color);
    }
  }
}
</style>
