<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

import { addPersonalData, updatePersonalData } from '#/api'
import getDict from '#/hooks/useDict'

import UpLoad from './components/UpLoad.vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '添加',
  },
  diaData: {
    type: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['update:modelValue', 'onRefresh', 'reloadDia'])
const remarkData = ref<{ code: string; value: string }[]>([])
const tagData = ref<{ code: string; value: string }[]>([])
const usageFlagList = ref([
  { code: 0, value: '其他' },
  { code: 1, value: '扭蛋' },
  { code: 2, value: '任务' },
])
const show = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:modelValue', val)
  },
})
// 表单数据

const _formData = {
  status: 1,
  introduction: '',
  // homePageResourceUrl: '',
  personalInfoResourceUrl: '',
  resourceUrl: '',
  showTag: '',
  remark: '',
  currencyNum: '',
  name: '',
  productCode: '',
  limitType: 0,
}
const formRef = ref<FormInstance | undefined>()
const formData = reactive<Record<string, any>>({
  ..._formData,
})

const rules = reactive<FormRules>({
  introduction: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
  // homePageResourceUrl: [{ required: true, message: '请上传首页图', trigger: 'blur' }],
  personalInfoResourceUrl: [
    { required: true, message: '请上传个人信息图', trigger: 'blur' },
  ],
  resourceUrl: [{ required: true, message: '请上传预览图', trigger: 'blur' }],
  showTag: [{ required: true, message: '请选择标签', trigger: 'blur' }],
  remark: [{ required: true, message: '请选择类别', trigger: 'blur' }],
  currencyNum: [
    { required: true, message: '请输入价格', trigger: 'blur' },
    {
      pattern: /^(0|[1-9]\d*)$/,
      message: '请输入数字',
      trigger: 'blur',
    },
  ],
  name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
  productCode: [
    { required: true, message: '装扮编码不能为空', trigger: 'blur' },
  ],
  usageFlag: [{ required: true, message: '用途不能为空', trigger: 'blur' }],
})

function onOpen() {
  onClear()
  if (props.diaData.id) {
    for (const i in formData) {
      formData[i] = props.diaData[i]
    }
    if (props.title === '编辑个性装扮') {
      formData.id = props.diaData.id
      formData.sort = props.diaData.sort
    }
  }
}
async function handleSave() {
  await formRef.value?.validate((valid, _) => {
    if (valid) {
      if (props.title === '新增个性装扮') {
        // 添加
        addPersonalData(formData).then(({ data: res }) => {
          if (res.code === 200) {
            show.value = false
            onClear()
            emits('onRefresh')
          }
        })
        return
      }
      // 编辑
      updatePersonalData(formData).then(() => {
        show.value = false
        onClear()
        emits('onRefresh')
      })
    }
  })
}

function onClear() {
  Object.assign(formData, _formData)
}

onMounted(() => {
  tagData.value = getDict('mall_tool_tag')
  remarkData.value = getDict('user_personality_config')
})
</script>

<template>
  <el-dialog
    v-model="show"
    width="700px"
    :title="title"
    class="dia_box"
    destroy-on-close
    @open="onOpen"
  >
    <el-form ref="formRef" label-width="90px" :model="formData" :rules="rules">
      <el-row>
        <el-col v-if="props.title === '编辑个性装扮'" :span="3">
          <el-form-item label="排序:">
            <span>{{ formData.sort }}</span>
          </el-form-item>
        </el-col>
        <el-col v-if="props.title === '编辑个性装扮'" :span="9">
          <el-form-item label="装扮ID:">
            <span>{{ formData.id }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="等级要求:">
            <span>无</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="装扮编码" prop="productCode">
            <el-input
              v-model="formData.productCode"
              autosize
              placeholder="请输入"
              :disabled="props.title === '编辑个性装扮'"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" autosize placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用途" prop="usageFlag">
            <el-select
              v-model="formData.usageFlag"
              placeholder="请选择"
              style="width: 100%"
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option
                v-for="item in usageFlagList"
                :key="item.value"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label="价格" prop="currencyNum">
            <div class="price_box">
              <el-input
                v-model="formData.currencyNum"
                autosize
                placeholder="请输入"
              />
              <span class="price_title">钻石</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="类别" prop="remark">
            <el-select
              v-model="formData.remark"
              placeholder="请选择"
              style="width: 100%"
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option
                v-for="item in remarkData"
                :key="item.value"
                :label="item.value"
                :value="Number(item.code)"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标签" prop="showTag">
            <el-select
              v-model="formData.showTag"
              placeholder="请选择"
              style="width: 100%"
              collapse-tags
              collapse-tags-tooltip
            >
              <el-option
                v-for="item in tagData"
                :key="item.value"
                :label="item.value"
                :value="Number(item.code)"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="缩略图" prop="resourceUrl">
            <UpLoad v-model="formData.resourceUrl" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label-width="100px"
            label="原图"
            prop="personalInfoResourceUrl"
          >
            <UpLoad v-model="formData.personalInfoResourceUrl" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="8">
                    <el-form-item label="首页图" prop="homePageResourceUrl">
                        <UpLoad v-model="formData.homePageResourceUrl"></UpLoad>
                    </el-form-item>
                </el-col> -->
      </el-row>
      <el-form-item label="简介" prop="introduction">
        <el-input
          v-model="formData.introduction"
          autosize
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
      <el-row :gutter="24">
        <el-col :span="14">
          <el-form-item label="状态">
            <el-switch
              v-model="formData.status"
              class="ml-2"
              :active-value="1"
              :inactive-value="0"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="props.title === '编辑个性装扮'" :span="10">
          <el-form-item label="最近修改时间:" class="switch_box">
            <span>{{ formData.updateTime || formData.createTime }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="handleSave"> 保存 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.dia_box {
  .el-dialog__body {
    padding-left: 0px;
    padding-right: 20px;
  }
}
.price_box {
  display: flex;
  gap: 10px;
  .price_title {
    width: 40px;
  }
}
.switch_box {
  :deep(.el-form-item__label) {
    width: 120px !important;
  }
}
</style>
