<template>
  <div>
    <el-form ref="ruleFormRef" :rules="rules" :model="formData" label-width="120px">
      <el-form-item label="所属分类" prop="categoryId">
        <el-select v-model="formData.categoryId" placeholder="请选择">
          <el-option v-for="item in options" :key="item.categoryId" :label="item.categoryName"
            :value="item.categoryId" />
        </el-select>
      </el-form-item>
      <el-form-item label="指标标题" prop="title">
        <el-input v-model="formData.title" placeholder="请输入指标标题" />
      </el-form-item>
      <el-form-item label="指标描述" prop="remark">
        <el-input v-model="formData.remark" type="textarea" placeholder="请输入指标描述" />
      </el-form-item>
      <el-form-item label="指标分值" prop="score">
        <el-input v-model="formData.score" type="number" placeholder="请输入指标分值" />
      </el-form-item>
      <el-form-item label="排列序号" prop="sort">
        <el-input v-model="formData.sort" placeholder="请输入排列序号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { createPageData, editPageData, getPageListData } from '@/api/main/system/system';
  const { proxy } = getCurrentInstance();
  const props = defineProps({
    getListInfo: {
      type: Object,
      default: () => ({}),
    }
  });
  const ruleFormRef = ref()
  const formData = ref({
    categoryId: '',
    title: '',
    remark: '',
    score: '',
    sort: ''
  })
  const categoryListId = ref()
  const options = ref([])
  const rules = reactive({
    categoryId: [
      { required: true, message: '请输入分类名称', trigger: 'blur' },
    ]
  })
  watch(props, (nweProps) => {
    init(nweProps)
  });
  onMounted(() => {
    init(props)

  });
  function init(props) {
    categoryListId.value = props.getListInfo.indexId
    console.log(props.getListInfo)
    getCategory()
    if (categoryListId.value) {
      getDetail(props.getListInfo)
    } else {
      resetForm()
    }
  }
  // 分类数据
  function getCategory() {

    const params = {}
    getPageListData("/quality/category", params).then((res) => {
      if (res.data.length > 0) {
        options.value = res.data
      } else {
        options.value = []
      }

    })
  }
  const emit = defineEmits(["refreshOrder"]);
  function submitForm(formEl) {
    formEl.validate((valid, fields) => {
      if (valid) {
        if (categoryListId.value) {
          formData.value.indexId = categoryListId.value
          editPageData('/quality/indexbase', formData.value).then((data) => {
            proxy.$modal.msgSuccess('编辑成功！');
            console.log(formData.value.categoryId)
            emit('refreshOrder',formData.value.categoryId);
          })
        } else {
          createPageData('/quality/indexbase', formData.value).then((data) => {
            proxy.$modal.msgSuccess('新增成功！');
            console.log(formData.value.categoryId)
            emit('refreshOrder',formData.value.categoryId);
          })
        }

      } else {
        console.log('error submit!', fields)
      }
    })
    console.log('保存')
    
  }
  function getDetail(item) {
    
    formData.value.categoryId = item.categoryId
    formData.value.title = item.title
    formData.value.remark = item.remark
    formData.value.score = item.score
    formData.value.sort = item.sort
  }
  function resetForm() {
    formData.value.indexId = ''
    formData.value.categoryId = ''
    formData.value.title = ''
    formData.value.remark = ''
    formData.value.score = ''
    formData.value.sort = ''
  }
</script>

<style scoped lang="scss"></style>