<template>
    <!-- 资源审核弹窗 -->
    <a-modal :visible="true" :width="width" :maskClosable="false" :destroyOnClose="true" :title="title" :footer="null"
        centered wrapClassName="modal-wrap" @cancel="onClose">
        <div class="action-content">
            <div class="item" v-if="record">
                <div class="item-header">申请信息</div>
                <!-- <div class="item-body">{{ record?.SQYT || '暂无'}}</div> -->
                <br>
                <div class="sqxx">
                    <ul>
                        <li>
                            <p><span>资源类型:</span><i>{{ record?.SERVICETYPENAME || '暂无' }}</i></p>
                            <p><span>资源名称:</span><i>{{ record?.SERVICENAME || '暂无' }}</i></p>
                        </li>
                        <li>
                            <p><span>应用系统:</span><i>{{ record?.SQYT || '暂无' }}</i></p>
                            <p><span>应用IP地址:</span><i>{{ record?.SYSTEMIP || '暂无' }}</i></p>
                        </li>
                        <li>
                            <p><span>申请单位:</span><i>{{ record?.SQDWNAME || '暂无' }}</i></p>
                            <p><span>申请人:</span><i>{{ record?.SQR || '暂无' }}</i></p>
                            <p><span>申请时间:</span><i>{{ record?.SQSJ || '暂无' }}</i></p>
                        </li>
                        <li>申请用途:{{ record?.SQYT || '暂无' }}</li>
                    </ul>
                </div>
            </div>
            <div class="item">
                <div class="item-header">审核信息</div>
                <div class="item-body">
                    <a-form ref="formRef" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="审核结果" name="ispass" :label-col="{ span: 2 }"
                                    :wrapper-col="{ span: 22 }">
                                    <a-radio-group v-model:value="form.ispass" button-style="solid" @change="changeIspass">
                                        <a-radio-button value="1">同意</a-radio-button>
                                        <a-radio-button value="0">不同意</a-radio-button>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="审核意见" name="opinion" :label-col="{ span: 2 }"
                                    :wrapper-col="{ span: 22 }">
                                    <a-textarea v-model:value="form.opinion" placeholder="" :rows="3" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="10">
                                <a-form-item label="审核时间" name="passtime">
                                    <a-input v-model:value="form.passtime" style="width: 100%" disabled />
                                </a-form-item>
                            </a-col>
                            <a-col :span="10" :offset="4">
                                <a-form-item label="审核人" name="user">
                                    <a-input v-model:value="form.user" style="width: 100%" disabled />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </div>
            <div class="item-footer">
                <a-button style="margin-right: 16px;" @click="onClose">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
                <!-- <a-button danger style="margin-right: 16px;" @click="onSubmitNo">不通过</a-button>
                <a-button type="primary" @click="onSubmitYes">通过</a-button> -->
            </div>
        </div>
    </a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, watch, toRefs, createVNode } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { session } from '/@/utils/Memory';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import moment from 'moment';
import { subminExamineResult } from '/@/api/resource/examine';
import { structureList } from '/@/api/sys/menu';

const props = {
    bussInfo: {
        type: Object,
        default: {}
    }
}
export default defineComponent({
    name: 'modal',
    components: { ExclamationCircleOutlined },
    props,
    setup(props, { emit }) {
        const data = reactive({
            width: '1000px',
            title: '资源审核',
        })
        const formRef = ref(null)
        const form = reactive({
            bussInfoId: "",
            resId: "",
            ispass: "1",
            userId: session.getItem('userId'),
            opinion: "",
            passtime: moment().format('YYYY-MM-DD HH:mm:ss'),
            user: session.getItem('userInfo').EMPLOYEE.NAME
        })
        const rules = {
            ispass: [{
                required: true,
                message: '',
                trigger: 'blur'
            }],
            opinion: [{
                required: false,
                message: '请输入审核意见',
                trigger: 'blur'
            }]
        };
        //不同意需要输入审核意见
        function changeIspass(e) {
            if (e.target.value == "0") rules.opinion[0].required = true;
        }
        var record = ref(null);
        //初始化请求所需数据
        onMounted(() => {
            form.bussInfoId = props.bussInfo.bussInfoId;
            form.resId = props.bussInfo.resId;
            record.value = props.bussInfo.record;
            if (record.value) {
                record.value.SERVICETYPENAME = record.value.BUSSNAME.slice(0, -2)
                structureList().then(res => {
                    let findArr = deepFind(record.value.SQDW, 'id', res, 'children')
                    record.value.SQDWNAME = findArr[0]?.departName || ''
                })
            }
        })
        const deepFind = (findKey, key, arr, children) => {
            let resArr = []
            arr.forEach(item => {
                if (item[key] === findKey) {
                    resArr.push(item)
                }
                item[children] && (resArr = resArr.concat(deepFind(findKey, key, item[children], children)))
            });
            return resArr;
        }
        watch(() => props.bussInfo, (val) => {
            form.bussInfoId = val.bussInfoId;
            form.resId = val.resId;
            record.value = val.record;
            console.log(val)
        }, { deep: true })
        // 关闭请求弹窗
        const onClose = (e) => {
            emit('closeModal')
        }
        //提交方法
        function handleSubmit() {
            console.log("授权审核form:", form)
            if (form.ispass == '0' && !form.opinion) {
                message.error('审核意见必须填写！')
                return;
            } else {
                subminExamineResult({
                    bussInfoId: form.bussInfoId,
                    ispass: form.ispass,
                    opinion: form.opinion,
                    userId: form.userId
                }).then(res => {
                    if (res.resp_code === 0 && (res.resp_msg === '提交成功' || res.resp_msg === '批量提交完成')) {
                        message.success('审核成功')
                    } else {
                        message.error('审核失败')
                    }
                    emit('onSubmit', Number(form.ispass))
                })
            }
        }



        return {
            changeIspass,
            record,
            formRef,
            form,
            ...toRefs(data),
            rules,
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
            onClose,
            handleSubmit,
        };
    },
});
</script>
<style lang="less" scoped>
.sqxx li p {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sqxx li p:first-child {
    width: 33%;
}

.sqxx li:nth-child(3) p {
    width: 33%;
}

.sqxx p i {
    font-style: normal;
}

.modal-wrap {
    .action-content {
        padding: 20px 50px;

        .item {
            margin-top: 10px;
            margin-bottom: 20px;

            &:first-child {
                margin-top: 0;
            }

            .item-header {
                padding-left: 10px;
                height: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-left: 2px solid #0671DD;
                box-sizing: border-box;
            }

            .item-body {
                margin-top: 20px;
                // padding-left: 10px;

                // .submit-btn {
                //     cursor: pointer;
                //     user-select: none;
                // }

                // ::v-deep td{
                //     padding: 5px 5px;
                // }
            }
        }

        .item-footer {
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>