<template>
    <view>
        <!-- pages/oneselfCenter/page/addNotice/addNotice.wxml -->
        <nav-bar :navbarData="navbarData"></nav-bar>
        <view class="notice" :style="'margin-top: ' + (height * 2 + 10) + 'rpx; height: calc(100vh - ' + (height * 2 + 10) + 'rpx)'">
            <view class="top">
                <view class="row">
                    <view class="col-6 required title-name">公告标题:</view>
                    <view class="col-4 delete" v-if="ID != ''" @tap="deleteNotice" :disabled="deleteflag">{{ deleteflag ? '删除中...' : '删除公告' }}</view>
                </view>
                <input :value="title" @input="titleChange" class="titleInput" placeholder="请输入不少于2字的标题" />
                <view class="tips">
                    <text class="tip" @tap="addTitle" data-title="温馨提示">+温馨提示</text>
                    <text @tap="addTitle" class="tip" data-title="警告通知">+警告通知</text>
                </view>
                <view class="required title-name">公告内容:</view>
                <textarea :value="content" @input="contentChange" class="content" placeholder="请输入不少于10字的内容"></textarea>
            </view>
            <view class="bottom-btn">
                <button class="multiBtn-left" @tap="save" data-flag="N">保存</button>
                <button class="multiBtn-right" @tap="save" :data-flag="status == 'Y' ? 'C' : 'Y'">
                    {{ status == 'Y' ? '取消发布' : status == 'C' ? '重新发布' : '保存并发布' }}
                </button>
            </view>
        </view>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import navBar from '@/pages/components/navbar/index';
// pages/oneselfCenter/page/addNotice/addNotice.js
//添加公告
import { $http } from '../../../../config/https.js';
const app = getApp();
export default {
    components: {
        navBar
    },
    data() {
        return {
            navbarData: {
                background: '',
                title: '添加公告',
                //导航栏 中间的标题
                height: '100',
                bottom: true,
                isGoBack: true,
                cleanPat: 'Y'
            },
            height: app.globalData.height,
            title: '',
            //标题
            content: '',
            //公告内容
            ID: '',
            //公告ID
            deleteflag: false,
            isLoading: false,
            status: 'N' //发布状态
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (options.title) {
            let { navbarData } = this;
            navbarData.title = '编辑公告';
            this.setData({
                title: options.title,
                //标题
                content: options.content,
                //公告内容
                ID: options.ID,
                //公告ID
                status: options.status,
                navbarData: navbarData
            });
        }
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        /**添加标题 */
        addTitle: function (event) {
            let title = event.currentTarget.dataset.title;
            this.setData({
                title: title
            });
        },

        /**
         * 修改标题
         */
        titleChange: function (event) {
            this.setData({
                title: event.detail.value
            });
        },

        /**
         * 修改公告内容
         * @param {} event
         */
        contentChange: function (event) {
            this.setData({
                content: event.detail.value
            });
        },

        /**
         * 保存公告
         */
        save: function (event) {
            let that = this;
            if (that.isLoading == true) {
                throw SyntaxError();
            }
            that.setData({
                isLoading: true
            }); //请求前禁用标记改为true,防止重复请求
            if (!this.checkData()) {
                return;
            }
            let flag = event.currentTarget.dataset.flag;
            let { title, content, ID } = this;
            const userData = Cache.get('userData');
            let data = {
                params: [
                    {
                        userID: userData.userID,
                        flag: flag,
                        hospID: userData.hospID,
                        locID: userData.locID,
                        docID: userData.userID,
                        title: title,
                        noticeContent: content,
                        ID: ID,
                        status: flag
                    }
                ]
            };
            $http.post('urlDeault', this, {
                code: flag != 'N' && ID != '' ? '03100147' : '03100148',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        uni.showToast({
                            title: flag == 'Y' ? '保存并发布成功!' : '保存成功！',
                            icon: 'none',
                            complete: function () {
                                uni.navigateBack({});
                            }
                        });
                    }
                    setTimeout(() => {
                        that.setData({
                            isLoading: false
                        }); //请求成功禁用标记改回false
                    }, 1000);
                },
                fail: function () {
                    setTimeout(() => {
                        that.setData({
                            isLoading: false
                        }); //请求虽然失败,禁用标记也改回false
                    }, 1000);
                }
            });
        },

        /**
         * 删除公告
         */
        deleteNotice: function () {
            let that = this;
            if (that.deleteflag == true) {
                throw SyntaxError();
            }
            that.setData({
                deleteflag: true
            }); //请求前禁用标记改为true,防止重复请求
            let { ID } = this;
            const userData = Cache.get('userData');
            uni.showModal({
                title: '提示',
                content: '确定删除此公告???',
                success: function (res) {
                    if (res.confirm) {
                        let data = {
                            params: [
                                {
                                    userID: userData.userID,
                                    ID: ID
                                }
                            ]
                        };
                        $http.post('urlDeault', this, {
                            code: '03100146',
                            data: data,
                            success: function (res) {
                                if (+res.errorCode === 0) {
                                    uni.showToast({
                                        title: '删除成功!',
                                        icon: 'none',
                                        complete: function () {
                                            uni.navigateBack({});
                                        }
                                    });
                                }
                                setTimeout(() => {
                                    that.setData({
                                        deleteflag: false
                                    }); //请求成功禁用标记改回false
                                }, 1000);
                            },
                            fail: function () {
                                setTimeout(() => {
                                    that.setData({
                                        deleteflag: false
                                    }); //请求虽然失败,禁用标记也改回false
                                }, 1000);
                            }
                        });
                    } else if (res.cancel) {
                    }
                }
            });
        },

        /**
         * 校验数据
         */
        checkData: function () {
            if (this.title == '') {
                uni.showModal({
                    title: '提示',
                    content: '标题不能为空'
                });
                return false;
            }
            if (this.content == '') {
                uni.showModal({
                    title: '提示',
                    content: '内容不能为空!'
                });
                return false;
            }
            return true;
        }
    }
};
</script>
<style>
/* pages/oneselfCenter/page/addNotice/addNotice.wxss */
.notice {
    width: 100%;
    overflow: hidden;
}

.top {
    width: 100%;
    height: calc(100% - 100rpx - env(safe-area-inset-bottom));
    overflow-y: auto;
}

.row {
    height: 100rpx;
    line-height: 100rpx;
}

.title-name {
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 28rpx;
    color: #000;
    font-weight: 500;
}

.delete {
    color: #ff0000;
    float: right;
    text-align: center;
    font-size: 34rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin: 20rpx 28rpx;
    width: 220rpx;
    border: 1px solid #ff0000;
    border-radius: 30rpx;
}

.titleInput {
    box-sizing: border-box;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 14rpx;
    background: #fff;
    width: 100%;
}

.tips {
    font-size: 32rpx;
    height: 100rpx;
    line-height: 100rpx;
    padding-left: 28rpx;
}

.tip {
    margin: 0 10rpx;
    background: #fff;
    border-radius: 30rpx;
    padding: 10rpx 20rpx;
    color: #1890ff;
    border: 1px solid #1890ff;
}

.content {
    box-sizing: border-box;
    background: #fff;
    font-size: 38rpx;
    /* height: 500rpx; */
    padding: 10px;
    width: 100%;
    overflow-wrap: break-word;
}

.bottom-btn {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
}

.multiBtn-left {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 0 !important;
    background: #fff;
    color: #1890ff;
    min-height: 100rpx;
    line-height: 100rpx;
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}

.multiBtn-left:active {
    background: #f7f7f7;
}

.multiBtn-left::after {
    border-radius: 0 !important;
}

.multiBtn-right {
    flex: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #1890ff;
    color: #fff;
    border-radius: 0 !important;
    min-height: 100rpx;
    line-height: 100rpx;
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}

.multiBtn-right::after {
    border-radius: 0 !important;
}

.multiBtn-right:active {
    background: #0b6fcd;
}
</style>
