<template>
    <div class="page">
        <headNav @backPage="backPage" title="编辑短信"></headNav>
        <div class="content">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="message"
                    rows="2"
                    autosize
                    label="信息内容"
                    input-align="right"
                    type="textarea"
                    readonly
                    placeholder="请输入信息内容"
                />
                <van-field
                    readonly
                    input-align="right"
                    clickable
                    name="picker"
                    :value="checkTime"
                    label="检查时间"
                    placeholder="请选择"
                    @click="showCheckTime = true"
                />
                <van-field
                    readonly
                    input-align="right"
                    clickable
                    name="picker"
                    :value="styleTxt"
                    label="发送方式"
                    placeholder="请选择"
                    @click="showStyle = true"
                />
                <van-field
                    readonly
                    v-if="styleTxt == '定时发送'"
                    input-align="right"
                    clickable
                    name="picker"
                    :value="sendTime"
                    label="发送时间"
                    placeholder="请选择"
                    @click="showSendTime = true"
                />
                <van-button style="margin-top: 20px;" block type="info" native-type="submit">发送通知</van-button>
            </van-form>
        </div>
        
        <van-popup v-model="showStyle" position="bottom">
            <van-picker
                show-toolbar
                :columns="columsSytle"
                @confirm="onConfirm"
                @cancel="showStyle = false"
            />
        </van-popup>
        <van-popup v-model="showCheckTime" position="bottom">
            <van-datetime-picker
                v-model="currentCheckDate"
                type="date"
                title="请选择"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onCheckConfirm"
                @cancel="showCheckTime = false"
            />
        </van-popup>
        <van-popup v-model="showSendTime" position="bottom">
            <van-datetime-picker
                v-model="currentSendDate"
                type="datetime"
                title="请选择"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="onSendConfirm"
                @cancel="showSendTime = false"
            />
        </van-popup>

        <v-mask :showOverLay="showOverLay"></v-mask>
    </div>
</template>

<script>
import headNav from "@/components/headNav.vue"
import mask_overLay from "@/components/overLay_xy.vue"
import {formatYYYYMMDD, isEmpty, dateFormat} from '@/utils/tool'

export default {
    components: {
        headNav,
        "v-mask": mask_overLay,
    },
    computed: {
        info() {
            return this.$route.params
        }
    },
    data () {
        return {
            showOverLay: false,
            showStyle: false,
            columsSytle: ["立即发送","定时发送"],
            styleTxt: "",
            sendTime: "",
            checkTime: "",
            showCheckTime: false,
            showSendTime: false,
            minDate: new Date(),
            maxDate: new Date(2025, 10, 1),
            currentCheckDate: new Date(),
            currentSendDate: new Date(),
            message:'',
        }
    },
    mounted () {
        this.checkTime = formatYYYYMMDD(this.currentCheckDate || new Date())
        this.updateMessage();
        // console.log(this.$route);
    },
    methods: {
        backPage() {
            this.$router.back()
        },
        updateMessage() {
            if (this.info) {
                const name = this.info.enforceName || ''
                const date = dateFormat('YYYY年mm月dd日', this.currentCheckDate || new Date());
                this.message = `【${name}监督抽查提示函】:根据《消防法》及《消防监督检查规定》，我支队拟于${date},对您的单位履行法定消防安全职责情况实施监督检查，请做好检查前的消防安全自检程序`
            }
        },
        // 选择发送方式
        onConfirm(value) {
            this.styleTxt = value;
            this.showStyle = false;
            if (value == '立即发送') {
                this.currentSendDate = new Date();
                this.sendTime = dateFormat('YYYY-mm-dd HH:MM', this.currentSendDate);
            }
        },
        onCheckConfirm(value) {
            this.checkTime = formatYYYYMMDD(value);
            this.showCheckTime = false;
            this.updateMessage();
        },
        onSendConfirm(value) {
            this.sendTime = dateFormat('YYYY-mm-dd HH:MM', value);
            this.showSendTime = false;
        },
        onSubmit() {
            if (!this.info || isEmpty(this.info.taskId)) {
                return;
            }
            if (isEmpty(this.styleTxt)) {
                this.$toast.fail('请选择发送方式');
                return;
            }
            if (!this.sendTime) {
                this.$toast.fail('请选择发送时间');
                return;
            }
            this.showOverLay = true;
            const obj = {
                id:Number(this.info.taskId),
                obj_id: this.info.objId,
                message_type: 'APPOINTMENT',
                receiver_type: this.styleTxt,
                message_content: this.message,
                send_time: this.currentSendDate
            };
            this.$http.post(`/v2/api/enforce-job/${this.info.taskId}/enforce-message`, obj).then(res => {
                this.showOverLay = false;
                this.$toast.success('发送成功');
                setTimeout(() => {
                    this.backPage();
                }, 1000);
            })
        },
    }
}
</script>