<template>
    <!-- 添加或修改项目信息对话框 -->
    <div class="el-drawer__wrapper">
        <el-drawer :title="title" v-model="visible" direction="rtl" size="100%">
            <div class="page-container form-container">
            <div class="form-btns-container">
                    <span class="title-label"><el-icon>
                            <Document />
                        </el-icon> 项目信息</span>
                <el-button-group>
                    <el-button v-if="editStatus" type="primary" size="small" icon="Finished"
                               @click="submitForm">保存</el-button>
                    <el-button v-else type="warning" size="small" icon="Edit" @click="editStatus = true">编辑</el-button>
                    <el-button v-if="form.id && editStatus" type="info" size="small" icon="Close"
                               @click="editStatus = false">取消编辑</el-button>
                    <el-button v-if="form.id" type="success" size="small" @click="getForm">
                        <i class="fa fa-refresh" aria-hidden="true" /> 刷新
                    </el-button>
                </el-button-group>
                <div class="screen-btn" @click="handleScreen">
                    <template v-if="!isFullscreen">
                        <i class="fa fa-window-maximize" aria-hidden="true" />
                        <!-- <span>全屏</span> -->
                    </template>
                    <template v-else>
                        <i class="fa fa-window-restore" aria-hidden="true" />
                        <!-- <span>还原</span> -->
                    </template>
                </div>
                <div class="close-btn" @click="cancel">
                    <i class="fa fa-times" aria-hidden="true" />
                    <!-- <span>关闭</span> -->
                </div>
            </div>
            <div class="Y-scrollbar" style="position: absolute; top: 32px; bottom: 0; width: 100%; overflow: auto">
            </div>
            <el-form ref="rejectRef" class="master-container" :model="form" :rules="rules" label-width="120px">
                <el-row :gutter="30">
                                    <el-col :span="6">
                                        <el-form-item label="废品原因" prop="abandonmentReason">
                                            <el-input  v-if="editStatus" v-model="form.abandonmentReason" placeholder="请输入废品原因" />
                                            <span v-else>{{ form.abandonmentReason }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="0：正常；1废弃；2还原" prop="isAbandoned">
                                            <el-input  v-if="editStatus" v-model="form.isAbandoned" placeholder="请输入0：正常；1废弃；2还原" />
                                            <span v-else>{{ form.isAbandoned }}</span>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="操作日期" prop="operationDate">
                                            <el-date-picker v-if="editStatus" clearable
                                                            v-model="form.operationDate"
                                                            type="date"
                                                            value-format="YYYY-MM-DD"
                                                            placeholder="请选择操作日期">
                                            </el-date-picker>
                                            <span v--else>{{ form.operationDate }}</span>
                                        </el-form-item>
                                    </el-col>
                </el-row>
            </el-form>
            </div>
        </el-drawer>
    </div>
</template>
<script setup>
    import {getReject,addReject,updateReject} from "@/api/business/reject";
    const { proxy } = getCurrentInstance()
    /** 父组件传参 */
    const props = defineProps({
        getList: {
            type: Function,
            default: () => { }
        }
    })
    const { getList } = toRefs(props)
    /** 字典数组区 */
    /** 表单抽屉 页变量 */
    const title = ref("")
    const loading = ref(false)
    const multiple = ref(true)
    const visible = ref(false)
    const editStatus = ref(false)
    const isFullscreen = ref(false)
    const webHost = import.meta.env.VITE_APP_BASE_API
    const data = reactive({
        form: {},
        rules: {
                        abandonmentReason: [
                        { required: true, message: "废品原因不能为空", trigger: "blur" }
                    ],
                        isAbandoned: [
                        { required: true, message: "0：正常；1废弃；2还原不能为空", trigger: "blur" }
                    ],
                        operationDate: [
                        { required: true, message: "操作日期不能为空", trigger: "blur" }
                    ]
        }
    });
    const { form, rules } = toRefs(data);
/***********************  方法区  ****************************/
    /** 打开抽屉 */
    function open(id) {
        reset();
        visible.value = true;
        if (id) {
            getReject(id).then(response => {
                form.value = response.data;
                editStatus.value = false
                title.value = "修改项目信息"
            })
        } else {
            editStatus.value = true
            title.value = "添加项目信息"
        }
    }

    /** 取消按钮 */
    function cancel() {
        visible.value = false;
        reset();
    }

    /** 表单重置 */
    function reset() {
        form.value = {
                        id: null,
                        carrierId: null,
                        abandonmentReason: null,
                        isAbandoned: null,
                        createTime: null,
                        creatorId: null,
                        updateTime: null,
                        updaterId: null,
                        deleted: null,
                        version: null,
                        operationDate: null
        };
        proxy.resetForm("rejectRef");
    }

    /** 全屏缩放 */
    function handleScreen() {
    const dom = document.querySelector('.list-container > .el-drawer__wrapper > .el-overlay')
    isFullscreen.value = !isFullscreen.value
    dom.style.position = isFullscreen.value ? 'fixed' : 'absolute'
    }


/** 提交按钮 */
function submitForm() {
  proxy.$refs["rejectRef"].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updateReject(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          visible.value = false;
          getList.value()
        });
      } else {
        addReject(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          visible.value = false;
          getList.value()
        });
      }
    }
  });
}

    /** 查询表单信息  */
    function getForm() {
    loading.value = true
    getReject(form.value.id).then(response => {
        loading.value = false
        form.value = response.data
    })
    }

    /** 暴露给父组件的方法 */
    defineExpose({
        open
    })
</script>
