<script setup>
import { ElMessage } from 'element-plus'
import { importType, requiredType } from '@/utils/dictionary'
import { createAttr, updateAttr } from '../api'
import LiveProductCategory from '@/components/LiveProductCategory.vue'

const props = defineProps(['data', 'action'])

const emit = defineEmits(['update', 'update:modelValue'])

const actonMap = { add: '新增', update: '编辑', view: '查看' }

const isUpdate = computed(() => props.action === 'update')
const title = computed(() => actonMap[props.action] + '商品属性')

const formRef = ref()
const form = reactive({
  name: '',
  live_commodity_type_id: '',
  is_importance: '0',
  is_essential: '0',
  status: '1',
})
watchEffect(() => {
  if (props.data) Object.assign(form, props.data)
})

const rules = ref({
  name: [{ required: true, message: '请输入' }],
  live_commodity_type_id: [{ required: true, message: '请选择' }],
  is_importance: [{ required: true, message: '请选择' }],
  is_essential: [{ required: true, message: '请选择' }],
  status: [{ required: true, message: '请选择' }],
})

// 提交
async function handleSubmit() {
  await formRef.value?.validate()
  isUpdate.value ? handleUpdate() : handleAdd()
}

// 新建
async function handleAdd() {
  await createAttr(form)
  ElMessage({ message: '创建成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}

// 编辑
async function handleUpdate() {
  await updateAttr(form)
  ElMessage({ message: '修改成功', type: 'success' })
  emit('update')
  emit('update:modelValue', false)
}
</script>

<template>
  <el-dialog :title="title" :close-on-click-modal="false" @closed="$emit('update:modelValue', false)">
    <el-row justify="center">
      <el-col :sm="24" :md="16">
        <el-form ref="formRef" :model="form" :rules="rules" label-position="top" :disabled="action === 'view'">
          <el-form-item label="商品属性名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="所属商品品类" prop="live_commodity_type_id">
            <LiveProductCategory v-model="form.live_commodity_type_id" style="width: 100%" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="重要性" prop="is_importance">
            <el-radio-group v-model="form.is_importance" :disabled="isUpdate">
              <el-radio v-for="item in importType" v-bind="item" :key="item.value"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="必要性" prop="is_essential">
            <el-radio-group v-model="form.is_essential">
              <el-radio v-for="item in requiredType" v-bind="item" :key="item.value"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-switch
              v-model="form.status"
              active-text="生效"
              active-value="1"
              inactive-text="失效"
              inactive-value="0" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
        <el-button type="primary" round auto-insert-space @click="handleSubmit" v-if="action !== 'view'"
          >保存</el-button
        >
      </el-row>
    </template>
  </el-dialog>
</template>
