<template>
    <div class="wrap">
        <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 type="text/ecmascript-6">
import LHeader from "@/components/header.vue";
import { getFun, postFun } from "@/service/table.js";

export default {
    name: 'patrolCancle', //巡查取消
    components: {
        LHeader,
    },
    data() {
        return {
            text: '巡查取消',
            radio: "1",
            applyReason: "",
            setRank: "", //风险定级
            showReason: false,
            columnsReason: ["今日请假", "今日外出、离岗", "今日调休"],
            measures: "",
            isShow: true,
            content: '',
            applyTime: this.util.timestampToTime(new Date(), 'DT2', true)
        }
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    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('risk/currentRiskHoliday/save', { reason: this.content, holidayTime: 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 scoped lang='less'>
.wrap {
    height: 100vh;
    width: 100vw;
}

.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>
