<template>
  <Modal
    :options="getModalOptions"
    :on-positive-click="handleConfirm"
    :on-negative-click="handleClose"
    :on-close="handleClose"
  >
    <template #Context>
      <n-form
        ref="formRef"
        :model="form"
        :rules="rules"
        :label-width="80"
        label-placement="left"
        require-mark-placement="left"
        :disabled="disabled"
      >
        <n-form-item label="审核状态" path="status">
          <n-select v-model:value="form.status" :options="statusOptions" placeholder="请选择审核状态" />
        </n-form-item>
        <n-form-item label="备注" path="note">
          <n-input v-model:value="form.note" type="textarea" placeholder="请输入备注" />
        </n-form-item>
      </n-form>
    </template>
  </Modal>
</template>
<script>
import Modal from '@/components/Modal/index.vue'
import { defineComponent, computed, ref, reactive, toRefs, watch } from 'vue'
import { taskApprove } from '@/api/inspection/alltask.js'
export default defineComponent({
  name: 'TaskApprove',
  components: { Modal },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  emits: {
    'update:visible': null,
    'reload': null
  },
  setup(props, { emit }) {
    const data = reactive({
      form: { ...props.data },
      rules: {
        status: [{ required: true, message: '请选择审核状态', type: 'number', trigger: 'blur' }],
        note: [{ required: true, message: '请输入备注', type: 'string', trigger: 'blur' }]
      },
      statusOptions: [
        { value: 5, label: '审核通过' },
        { value: 20, label: '审核不通过' }
      ]
    })

    const formRef = ref(null)

    const getModalOptions = computed(() => {
      return {
        title: '审核',
        show: props.visible,
        negativeText: '取消',
        positiveText: '确认'
      }
    })

    watch(() => props.visible, (value) => {
      console.log(value)
    })

    /* 关闭弹窗 */
    const handleClose = () => {
      emit('update:visible', false)
    }

    /* 提交表单 */
    const handleConfirm = function() {
      formRef.value?.validate((errors) => {
        if (!errors) {
          const params = { ...data.form }
          taskApprove(params).then(res => {
            if (res.code === 0) {
              emit('reload')
              handleClose()
            }
          })
        } else {
          $message.error('请完善必填信息')
        }
      })
    }
    return {
      ...toRefs(data),
      formRef,
      getModalOptions,
      handleConfirm,
      handleClose
    }
  }
})
</script>
