<template>
    <view>
        <mp-halfScreenDialog :show="show" :closabled="false" :maskClosable="false" class="refusel" extClass="extClass1">
            <van-dialog id="van-dialog" />
            <view slot="title">
                <view class="not" @tap.stop.prevent="cancale">取消</view>
                <view class="title">填写拒绝接诊的原因</view>
                <view @tap.stop.prevent="cancaleOK" :class="'ok ' + (btnOkDisabled ? 'btnOkDisabled' : '')">确定</view>
            </view>
            <view slot="desc" class="infoBody">
                <view class="buttonArr" v-for="(item, index) in resonArr" :key="index">
                    <button :class="index == resonIndex ? 'checkReson' : 'refuseReson'" @tap.stop.prevent="checkResonType" :data-index="index">{{ item.descripts }}</button>
                </view>
                <view v-if="resonArr[resonIndex].descripts == '其它'" class="inputDiv">
                    <textarea class="otherInfo" style="border: 1px solid #eeeeee; width: 100%; padding: 10rpx" placeholder="输入您的备注" @input="otherInfoFun"></textarea>
                </view>
            </view>
        </mp-halfScreenDialog>
    </view>
</template>

<script>
import Cache from '../../../../utils/cache';
import { $http } from '../../../../config/https.js';
import Dialog from '../../../../utils/dialog';
import messageUtil from '../../../../utils/message.js';
export default {
    components: {},
    data() {
        return {
            resonArr: [],
            resonIndex: 3,
            show: false,
            otherInfo: '',
            patientData: Cache.get('patientData'),
            userData: Cache.get('userData'),
            buttons: [],
            btnOkDisabled: false,
            B: '',
            descripts: ''
        };
    },
    mixins: [],
    props: {
        showRefusal: String,
        myProperty2: String,
        admID: String // 简化的定义方式
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },
    moved: function () {},
    destroyed: function () {},
    methods: {
        // 组件所在页面的生命周期函数
        handlePageShow: function () {
            this.setData({
                show: this.showRefusal
            });
        },

        handlePageHide: function () {},
        handlePageResize: function () {},

        ready: function () {
            this.loadRefuseArr();
            this.setData({
                show: this.showRefusal,
                patientData: Cache.get('patientData')
            });
        },

        // 私有数据，可用于模板渲染

        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () {},

        open: function () {
            this.setData({
                show: true
            });
        },

        buttontap(e) {
            console.log(e.detail);
        },

        loadRefuseArr: function (e) {
            let data = {
                params: [{}]
            };
            $http.post('urlDeault', this, {
                code: '03100067',
                data: data,
                success: function (res) {
                    console.log(res);
                    if (res.errorCode == '0') {
                        this.setData({
                            resonArr: res.result
                        });
                    }
                }
            });
        },

        refuseReson: function (call) {
            var resonArr = this.resonArr;
            var resonID = resonArr[this.resonIndex].id;
            var userData = Cache.get('userData');
            var patientData = Cache.get('patientData');
            let data = {
                params: [
                    {
                        admID: this.admID ? this.admID : patientData.admID,
                        userID: userData.userID,
                        reasonID: resonID,
                        reasonNote: this.otherInfo,
                        locID: userData.locID,
                        groupID: userData.groupID,
                        hospID: userData.hospID
                    }
                ]
            };
            $http.post(
                'urlDeault',
                this,
                {
                    code: '03100057',
                    data: data,
                    success: function (res) {
                        console.log(res);
                        if (res.errorCode == '0') {
                            this.$emit('selectData');
                            messageUtil.handleSendMessage('R', '医生拒绝接诊，详情请查看接诊记录!');
                            uni.showModal({
                                title: '提示',
                                content: '拒绝接诊成功!',
                                showCancel: false,
                                confirmText: '我知道了',
                                success(res) {}
                            });
                        } else {
                            Dialog.alert({
                                title: '提示',
                                message: res.errorMessage
                            });
                        }
                        call(res.errorMessage);
                    }
                },
                {
                    error: 'Y'
                }
            );
        },

        onOk: function (e) {
            this.$emit('colseRefuse');
            this.setData({
                show: false
            });
        },

        checkResonType: function (e) {
            if (this.resonArr[e.currentTarget.dataset.index].descripts != '其它') {
                this.setData({
                    otherInfo: ''
                });
            }
            this.setData({
                resonIndex: e.currentTarget.dataset.index
            });
        },

        cancale: function (e) {
            this.$emit('colseRefuse');
            this.setData({
                show: false
            });
        },

        cancaleOK: function (e) {
            var resonArr = this.resonArr;
            var resoncode = resonArr[this.resonIndex].code;
            if (resoncode == '04' && this.otherInfo == '') {
                uni.showModal({
                    title: '提示',
                    content: '请填写拒绝原因',
                    showCancel: false,
                    confirmText: '我知道了',
                    success(res) {}
                });
            } else {
                this.setData({
                    btnOkDisabled: true
                });
                this.refuseReson((message) => {
                    this.$emit('colseRefuse', {
                        detail: {
                            message
                        }
                    });
                    this.setData({
                        show: false,
                        btnOkDisabled: false
                    });
                });
            }
        },

        otherInfoFun: function (e) {
            this.setData({
                otherInfo: e.detail.value
            });
        },

        onMyButtonTap: function () {
            this.setData({
                // 更新属性和数据的方法与更新页面数据的方法类似
            });
        },

        // 内部方法建议以下划线开头
        myPrivateMethodFun: function () {
            // 这里将 data.A[0].B 设为 'myPrivateData'
            this.setData({
                'A[0].B': 'myPrivateData'
            });
        },

        propertyChangeFun: function (newVal, oldVal) {}
    },
    created: function () {}
};
</script>
<style>
/* pages/refusal/refusal.wxss */

.not {
    font-size: 28rpx;
    text-align: center;
    color: dodgerblue;
    float: left;
    margin-left: 10rpx;
    height: 60rpx;
    line-height: 60rpx;
    width: 130rpx;
    border: 1px solid dodgerblue;
    border-radius: 10rpx;
}

.ok {
    font-size: 28rpx;
    text-align: center;
    color: dodgerblue;
    float: right;
    margin-right: 10rpx;
    height: 60rpx;
    line-height: 60rpx;
    width: 130rpx;
    border: 1px solid dodgerblue;
    border-radius: 10rpx;
}

.title {
    font-size: 28rpx;
    text-align: center;
    float: left;
    height: 60rpx;
    line-height: 60rpx;
    width: calc(100% - 300rpx);
}

.titleLine {
    width: 100%;
}

.diaog {
    width: 100%;
    z-index: 99;
}

.refuseReson {
    width: auto !important;
    height: 60rpx;
    font-size: 28rpx;
    color: #999999;
    background-color: white;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
    padding: 1rpx 20rpx 70rpx 20rpx !important;
    font-weight: 500;
    margin-left: 10rpx;
}

.checkReson {
    width: auto !important;
    height: 60rpx;
    font-size: 28rpx;
    color: white;
    background-color: dodgerblue;
    border: 1px solid #e9e9e9;
    border-radius: 20px;
    padding: 1rpx 20rpx 70rpx 20rpx !important;
    font-weight: 500;
    margin-left: 10rpx;
}

.refusel {
    height: 400rpx;
}

.buttonArr {
    float: left;
    margin-left: 6rpx;
    padding-bottom: 12rpx;
}

.otherInfo {
    float: left;
    width: 80%;
    height: 120rpx;
    margin-left: 14rpx;
    border: 1pd solid black;
}

.inputDiv {
    width: 89%;
    border: 1pd solid #999999;
}

.btnOkDisabled {
    display: none;
}
</style>
