<template>
    <div class="users">
        <el-form :inline="true" :model="formData" :rules="rules" ref="formData" class="option">
            <el-row>
                <el-row>
                    <el-form-item label="审批意见:" prop="status">
                        <el-radio v-model="formData.status" label="PASS">批准</el-radio>
                        <el-radio v-model="formData.status" label="REJECT">驳回</el-radio>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="信息内容:" prop="reason">
                        <el-input
                                v-model="formData.reason"
                                type="textarea"
                                show-word-limit
                                :rows="5"
                                maxlength="300"
                                placeholder="请输入"
                        >
                        </el-input>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-col :offset="10">
                        <el-form-item>
                            <el-button @click="cancel('formData')">取消</el-button>
                            <el-button type="primary" :loading="loading" @click="save('formData')">确定</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { approveLimit } from '@/api/job'
import { handleProblemImgs, dateFormat } from '@/utils/tool'

export default {
    name: 'ApproveStatusV2',
    props: {
        data: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            loading: false,
            formData: {
                status: null,
                reason: null
            },
            rules: {
                status: [
                    {required: true, message: '请选择审核状态', trigger: 'blur'}
                ],
                reason: [
                    {required: true, message: '请输入信息内容', trigger: 'change'}
                ]
            }
        }
    },
    computed: {
        isLimit() {
            // 是否限改
            if (this.data) {
                return this.data.job_type == 'NORMAL' || 
                        this.data.job_type == 'SPECIAL' || 
                        this.data.job_type == 'REPORT'
            }
            return false;
        },
    },
    methods: {
        cancel(formName) {
            this.$refs[formName].resetFields();
            this.$emit("changeApproveVisible");
        },
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    const url = handleProblemImgs(this.data.deadline_file_id);
                    const name = this.data.enforce_org_name || '';
                    const date = dateFormat('YYYY年mm月dd日', new Date(this.data.finish_time));
                    const content = `根据《中华人民共和国消防法》第五十三条的规定，我${name}于${date}对你单位（场所）进行消防监督检查，即刻查看检查结果：${url}`;
                    const params = Object.assign(this.formData, {
                        message: content
                    });
                    approveLimit(this.data.id, params).then(res => {
                        this.$message({
                            type: 'success',
                            message: '处理成功!'
                        });
                        this.cancel(formName);
                    }).catch(err => {
                        this.loading = false;
                    });
                } 
                else {
                    this.$message.warning('必填项没填写');
                    return false;
                }
            });
        }

    }
}
</script>