<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="单位名称：">
            <span>{{form.name}}</span>
        </el-form-item>
        <el-form-item label="单位法人：">
            <span>{{form.people}}</span>
        </el-form-item>
        <el-form-item label="信息模板：">
            <span>{{form.message_content}}</span>
        </el-form-item>
        <template v-if="messageInfo">
            <el-form-item label="发送时间：" prop="send_time">
                <span>{{form.send_time}}</span>
            </el-form-item>
            <el-form-item label="发送状态：">
                <span class="success">已发送</span>
            </el-form-item>
            <el-form-item>
                <div class="row">
                    <el-button type="primary" plain @click="showHistory">历史记录</el-button>
                    <div class="row-span">
                        <el-button type="primary" @click="resendMessage">重新发送</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </div>
                </div>
            </el-form-item>
        </template>
        <template v-else>
            <el-form-item label="检查时间：" prop="check">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.check" @change="updateMessage"></el-date-picker>
            </el-form-item>
            <el-form-item label="发送方式：" prop="type">
                <el-select v-model="form.type" placeholder="请选择发送方式">
                    <el-option label="立即发送" value="0"></el-option>
                    <el-option label="定时发送" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发送时间：" prop="send_time" v-show="form.type === '1'">
                <el-date-picker type="datetime" placeholder="选择发送时间" v-model="form.send_time"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="onSubmit">发送</el-button>
            </el-form-item>
        </template>
        <el-dialog title="历史记录" :visible.sync="showHistoryBox" append-to-body class="history-dialog">
            <message-history :jobId="obj.id"></message-history>
        </el-dialog>
    </el-form>
</template>

<script>
import MessageHistory from './MessageHistory.vue'
import { dateFormat } from '@/utils/tool'
import { addMessage } from '@/api/job'

export default {
    name:"SendMessage",
    props: ['obj', 'msg'],
    components: {
        MessageHistory
    },
    data () {
        return {
            showHistoryBox: false,
            form: {
                name: null,
                people: null,
                type: '0',
                check: new Date(),
                message_content: null,
                message_type: 'APPOINTMENT',
                receiver_type: 'SMS',
                send_time: new Date()
            },
            rules: {
                type: [
                    { required: true, message: '请选择发送方式', trigger: 'change' }
                ],
                check: [
                    { required: true, message: '请选择检查时间', trigger: 'change' }
                ],
                send_time: [
                    { required: true, message: '请选择发送时间', trigger: 'change' }
                ]
            },
            messageInfo: null
        }
    },
    mounted () {
        if (this.obj) {
            this.form.name = this.obj.enforce_obj_name;
            if (this.obj.enforce_obj) {
                this.form.id = Number(this.obj.ID);
                this.form.obj_id = this.obj.enforce_obj_id;
                this.form.name = this.obj.enforce_obj.enforce_obj_name;
                this.form.people = this.obj.enforce_obj.legal_person + '  ' + this.obj.enforce_obj.legal_person_phone;
            }
        }
        this.updateSendMsgInfo();
    },
    methods: {
        updateSendMsgInfo() {
            if (this.msg) {
                this.messageInfo = this.msg;
                this.form.send_time = dateFormat('YYYY-mm-dd HH:MM:SS', new Date(this.msg.send_time));
                this.form.message_content = this.msg.message_content;
            }
            else {
                this.updateMessage()
            }
        },
        updateMessage() {
            if (this.obj) {
                const date = dateFormat('YYYY-mm-dd', this.form.check || new Date());
                this.form.message_content = `【${this.form.name}监督抽查提示函】:根据《消防法》及《消防监督检查规定》，我支队拟于${date},对您的单位履行法定消防安全职责情况实施监督检查，请做好检查前的消防安全自检程序`
            }
        },
        onSubmit() {
            const vm = this;
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    addMessage(vm.obj.id, vm.form).then(res=>{
                        vm.$message.success('发送成功');
                        setTimeout(() => {
                            vm.$emit('cancel', true);
                        }, 1200);
                    })
                }
            });
        },
        resendMessage() {
            this.messageInfo = null
        },
        showHistory() {
            this.showHistoryBox = true
        },
        cancel() {
            this.$emit('cancel', false);
        },
    }
}
</script>

<style lang="scss">
.history-dialog {
    .el-dialog {
        width: 680px;
    }
}
.text {
    &>textarea {
        resize: none !important;
    }
}
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>