<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"
            />
            <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="请输入"
            />
        </van-form>
        <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;"
                @click="save"
            >提交</van-button>
        </div>
    </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
        };
    },
    methods: {
        operation() {
            if (this.radio == "1") {
                this.isShow = true;
            } else {
                this.isShow = false;
            }
        },
        onConSetReason(value) {
            this.showReason = false;
            this.applyReason = value;
        },
        onSubmit(values) {
            // 放图片路径 因为formdat存数组会自动变成字符串所以次用这种追加字段的方式
            console.log(values);
            // this.$toast.loading({
            //     message: "提交中...",
            //     forbidClick: true,
            //     loadingType: "spinner",
            //     duration: 0,
            // });

            // postReAdd(url, formdata)
            //     .then((res) => {
            //         this.$toast.clear();
            //         this.$toast.success({
            //             message: "提交成功",
            //             duration: 2000,
            //         });
            //         history.go(-1);
            //     })
            //     .catch(() => {
            //         this.$toast.clear();
            //         this.$toast.fail("提交失败,请稍后再试");
            //     });
            // this.$toast.clear();
        },
        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>
