<template>
  <div>
    <el-row :gutter="8">
      <el-col :lg="24" :xs="24">
        <div>
          <el-form
            ref="formRef"
            :model="formData"
            label-width="90px"
            :rules="rules"
          >
            <el-form-item
              v-for="(item, index) in formAttrList"
              :key="index"
              :prop="item.key"
              :label="item.name"
              :required="item.required"
            >
              <el-input
                v-if="item.type === 'textarea'"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData[item.key]"
              />
            </el-form-item>

            <el-form-item>
              <div class="w-full text-right">
                <el-button @click="handleCancel()">取消</el-button>
                <el-button type="primary" @click="handleOk()">确定</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import SteelAPI, { PageParams, SteelDTO } from "@/api/steel";
const emit = defineEmits(["handleCloseDialog", "handleResetQuery"]);
const formRef = ref(ElForm);
const props = withDefaults(
  defineProps<{
    obj: any;
    type: string;
  }>(),
  {
    obj: {},
    type: "询价",
  }
);

const formData = reactive<any>({});

const formAttrList = reactive<any>([
  {
    name: "备注",
    key: "remarks",
    type: "textarea",
  },
]);

const rules = reactive({});

function handleCancel() {
  formData.remarks = "";
  emit("handleCloseDialog");
}

function handleOk() {
  SteelAPI.updateRegisById({
    id: props.obj.id,
    status: 1,
    remarks: formData.remarks,
  }).then((res) => {
    formData.remarks = "";
    emit("handleCloseDialog");
    emit("handleResetQuery");
  });
}

watch(
  () => props.obj,
  () => {
    formData.remarks = props.obj.remarks;
  }
);
</script>
