<script setup lang="ts">
import { FormRules } from "element-plus";
import { reactive } from "vue";

defineProps<{
  title: string;
  detail: Record<string, string>;
  columns: Array<Record<string, string>>;
}>();

const rules: FormRules = {
  cost: [{ required: true, trigger: "change", message: "请选择类目" }],
  name: [{ required: true, trigger: "change", message: "请选择商品名称" }],
  fixed: [{ required: true, trigger: "change", message: "请选择税率" }]
};

const formData = reactive({
  cost: "",
  fixed: "",
  name: ""
});
</script>

<template>
  <div class="settings__content" bg-white>
    <h1 mb-2 font-bold>{{ title }}</h1>
    <el-descriptions :column="3" size="small" border mb-5>
      <el-descriptions-item
        label="demo"
        v-for="(item, index) in columns"
        :key="index"
        >{{ detail[item.field] }}</el-descriptions-item
      >
    </el-descriptions>

    <div w-500px m-auto mt-2>
      <el-form
        label-width="120px"
        label-position="left"
        :rules="rules"
        :mode="formData"
      >
        <el-form-item label="商品类目设置" prop="cost">
          <!-- 远程搜索 -->
          <el-input placeholder="选择类目设置" />
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="税率" prop="fixed">
          <el-input disabled placeholder="请输入税率" />
        </el-form-item>
      </el-form>

      <div flex justify-center>
        <el-button type="primary">保存</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.settings__content {
  padding: 20px !important;
}
</style>
