<template>
    <div>
        <LHeader :text="text"></LHeader>

        <!-- 内容列表 -->
        <div class="con-list">
            <!-- v-for="(item, index) in messageList" :key="index" -->
            <van-cell-group inset>
                <van-row gutter class="cont-operation">
                    <van-col span="24">申请原因</van-col>
                </van-row>

                <van-row gutter class="cont-operation" style="margin-top: 10px;">
                    <van-col span="24">
                        <van-radio-group v-model="radio" direction="horizontal" @change="operation">
                            <van-radio name="1" shape="square">快捷申请</van-radio>
                            <van-radio name="2" shape="square">自定义</van-radio>
                        </van-radio-group>
                    </van-col>
                </van-row>
            </van-cell-group>
        </div>

        <van-form
            style="margin: 0 10px"
            @submit="onSubmit"
            :scroll-to-error="true"
            :show-error="false"
            validate-trigger="onSubmit"
        >
            <van-field
                v-if="isShow"
                readonly
                clickable
                required
                label="申请原因"
                name="applyReason"
                :value="applyReason"
                placeholder="请选择"
                @click="showReason = true"
                :rules="[{ required: true, message: '请选择申请原因' }]"
            />
            <van-popup v-model="showReason" position="bottom">
                <van-picker
                    show-toolbar
                    :columns="columnsReason"
                    @confirm="onConSetReason"
                    @cancel="showReason = false"
                />
            </van-popup>

            <van-field
                v-if="!isShow"
                v-model="measures"
                name="measures"
                label="应急措施"
                type="textarea"
                rows="3"
                autosize
                placeholder="请输入"
            />
            <div class="operation-btn">
                <!-- <van-button
                    block
                    type="info"
                    plain
                    native-type="button"
                    style="border-radius: 5px; background-color: #f0f1f5; margin-bottom: 10px;"
                    @click="cancel"
                >取消</van-button> -->
                <van-button
                    block
                    type="info"
                    native-type="submit"
                    style="border-radius: 5px;"
                >提交</van-button>
        </div>
        </van-form>
    </div>
</template>

<script>
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";
export default {
    name: "cancel-patrol",
    components: {
        LHeader
    },
    data() {
        return {
            text: "取消巡查",
            radio: "1",
            applyReason: "",
            setRank: "", //风险定级
            showReason: false,
            columnsReason: ["今日请假", "今日外出、离岗", "今日调休"],
            measures: "",
            isShow: true,
            content:'',
            applyTime:this.util.timestampToTime(new Date(),'DT2',true)
        };
    },
    methods: {
        operation() {
            if (this.radio == "1") {
                this.isShow = true;
            } else {
                this.isShow = false;
            }
        },
        onConSetReason(value) {
            this.showReason = false;
            this.applyReason = value;
        },
        onSubmit(values) {
            console.log(values)
            this.$toast.loading({
                message: "提交中...",
                forbidClick: true,
                loadingType: "spinner",
                duration: 0,
            });
            if(this.radio=='1'){
                this.content=this.applyReason
            }else if(this.radio=='2'){
                this.content=this.measures
            }
            postFun('patrol/cancel', {content:this.content,applyTime:this.applyTime})
                .then((res) => {
                    this.$toast.clear();
                    this.$toast.success({
                        message: "提交成功",
                        duration: 2000,
                    });
                    history.go(-1);
                })
                .catch(() => {
                    this.$toast.clear();
                    this.$toast.fail("提交失败,请稍后再试");
                });
        },
        save(){
            
        },
        cancel() {
            this.$router.go(-1);
        }
    }
};
</script>
<style lang="less" scoped>
/* @import url(); 引入css类 */
.con-list {
    padding: 0;
    background-color: #f0f1f5;
    .van-cell-group--inset {
        margin: 0;
        margin-bottom: 0.26667rem;
        padding: 0.25rem;
        font-size: 0.4rem;
        position: relative;
        border-radius: 4%;
        box-shadow: 0px 0px 10px 2px #f3f3f3;
        width: 90%;
        margin: 0.4rem auto;
        .van-row {
            font-size: 0.4rem;
            line-height: 0.8rem;
            margin-bottom: 0;
        }
    }
}
.operation-btn {
    width: 95%;
    margin: 20px 10px 10px;
    position: fixed;
    bottom: 50px;
    right: 0;
    left: 0;
}
</style>
