<script setup lang="ts">
import type { LabelType } from '../types'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { createLabelType, updateLabelType } from '../api'

const props = defineProps<{
  data?: LabelType
}>()

const emit = defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

const isUpdate = $computed(() => !!props.data?.id)
const title = $computed(() => (isUpdate ? '修改标签目录' : '新建标签目录'))

const formRef = $ref<FormInstance>()
const form = reactive({ id: '', name: '', url: '' })

watchEffect(() => {
  if (props.data) Object.assign(form, props.data)
})

const rules = ref<FormRules>({
  name: [{ required: true, message: '请输入标签目录名称' }],
  url: [{ required: true, message: '请选择标签目录图标' }]
})

const iconColorList = $ref(['#AA593B', '#CD9A23', '#20AE6C', '#196D42', '#614BE8', '#6D4E8B', '#A01578', '#BD2547'])
function handleChangeIcon(color: string) {
  form.url = color
}

// 提交
function handleSubmit() {
  formRef?.validate().then(() => (isUpdate ? handleUpdate() : handleCreate()))
}
// 新建
function handleCreate() {
  createLabelType(form).then(() => {
    ElMessage({ message: '创建成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
// 修改
function handleUpdate() {
  updateLabelType(form).then(() => {
    ElMessage({ message: '修改成功', type: 'success' })
    emit('update')
    emit('update:modelValue', false)
  })
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" width="600px" @closed="$emit('update:modelValue', false)">
    <el-form ref="formRef" :model="form" :rules="rules" label-suffix="：" label-width="100px">
      <el-form-item label="目录名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="目录图标" prop="url">
        <div class="label-type-icon-list">
          <div
            class="label-type-icon-item"
            v-for="color in iconColorList"
            :class="{ 'is-active': color === form.url }"
            :key="color"
            @click="handleChangeIcon(color)">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              :fill="color"
              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>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row justify="center">
        <el-button plain auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.label-type-icon-list {
  width: 100%;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(5, 50px);
}
.label-type-icon-item {
  width: 16px;
  height: 16px;
  padding: 16px;
  line-height: 0;
  cursor: pointer;
  &:hover,
  &.is-active {
    border-radius: 50%;
    box-shadow: rgb(0 0 0 / 40%) 0px 2px 6px 0px;
  }
}
</style>
