<!-- 基本信息 -->
<template>
    <div>
        <el-form ref="ruleFormRef" :model="_ruleFormParam" label-width="140">
            <el-form-item label="产品名称" required>
                <el-input v-model="_ruleFormParam.name" style="width: 440px" />
            </el-form-item>
            <el-form-item label="副标题名称">
                <el-input v-model="_ruleFormParam.short_name" style="width: 440px" />
            </el-form-item>
            <el-form-item label="型号" required>
                <el-input v-model="_ruleFormParam.spu" style="width: 440px" disabled />
            </el-form-item>
            <el-form-item label="产品分类" style="width: 440px" required>
                <!-- <el-input v-model="_ruleFormParam.category_id" /> -->

                <el-tree-select
                    clearable
                    v-model="_ruleFormParam.category_id1"
                    :data="options"
                    :render-after-expand="false"
                    show-checkbox
                    check-strictly
                    @change="handleTreeChange()"
                />
            </el-form-item>

            <el-form-item label="产品参数">
                <el-input
                    v-model="_ruleFormParam.params"
                    style="width: 440px"
                    type="textarea"
                    :autosize="{ minRows: 10, maxRows: 20 }"
                />
            </el-form-item>

            <el-form-item label="产品排序" style="width: 440px" required>
                <!-- <el-input v-model="_ruleFormParam.sort" /> -->

                <el-input-number
                    :min="0"
                    :max="9999"
                    :controls="true"
                    v-model="_ruleFormParam.sort"
                    step-strictly
                    :step="1"
                    controls-position="right"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="是否上架" style="width: 440px">
                <el-radio-group v-model="_ruleFormParam.is_show">
                    <el-radio :value="1" :label="1">是</el-radio>
                    <el-radio :value="0" :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="是否新品" style="width: 440px">
                <el-radio-group v-model="_ruleFormParam.is_new">
                    <el-radio :value="1" :label="1">是</el-radio>
                    <el-radio :value="0" :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="热门" style="width: 440px">
                <el-radio-group v-model="_ruleFormParam.is_hot">
                    <el-radio :value="1" :label="1">是</el-radio>
                    <el-radio :value="0" :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- <el-form-item label="是否启用" style="width: 440px">
                <el-radio-group v-model="_ruleFormParam.status">
                    <el-radio :value="1" :label="1">是</el-radio>
                    <el-radio :value="0" :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item> -->
            <el-form-item label="SEO标题">
                <el-input v-model="_ruleFormParam.seo_title" style="width: 440px" />
            </el-form-item>
            <el-form-item label="SEO关键词">
                <el-input v-model="_ruleFormParam.seo_keywords" style="width: 440px" />
            </el-form-item>
            <el-form-item label="SEO描述">
                <el-input v-model="_ruleFormParam.seo_desc" style="width: 440px" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts" name="basicInfo">
import type { FormInstance } from "element-plus";
const ruleFormRef = ref<FormInstance>();

interface IProps {
    data: { [key: string]: any };
    options: any[];
}

const props = defineProps<IProps>();

//重置
const reset = () => {
    _ruleFormParam = {};
};

let _ruleFormParam: any = computed(() => props.data);

const handleTreeChange = () => {
    _ruleFormParam.value.category_id = _ruleFormParam.value.category_id1;
};

// 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
defineExpose({
    ruleForm: _ruleFormParam,
    reset
});
</script>

<style scoped></style>
