<template>
    <view class="page">
        <u--form :model="form" ref="form" labelWidth="70">
            <u-form-item prop="name" label="姓名" :required="true">
                <u--input v-model="form.name" border="bottom" placeholder="请输入姓名" />
            </u-form-item>
            <u-form-item prop="sex" label="性别" @click="toggleGender">
                <view class="input-text">
                    <text>{{ genderSelect }}</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item prop="phone" label="联系方式">
                <u--input v-model="form.phone" border="bottom" placeholder="请输入联系方式" />
            </u-form-item>
            <u-form-item prop="address" label="地址">
                <u--input v-model="form.address" border="bottom" placeholder="请输入地址" />
            </u-form-item>
            <u-form-item prop="birthday" label="出生年月" @click="toggleBirthday('birthday')">
                <view class="input-text">
                    <text v-if="form.birthday">{{ form.birthday | date('yyy-MM-dd') }}</text>
                    <text v-else class="input-placeholder">请选择出生日期</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item prop="treat_at" label="初诊日期" @click="toggleBirthday('treat_at')">
                <view class="input-text">
                    <text v-if="form.treat_at">{{ form.treat_at | date('yyy-MM-dd') }}</text>
                    <text v-else class="input-placeholder">请选择初诊日期</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item prop="doctor_id" label="坐诊医生" @click="opendDoctor">
                <view class="input-text">
                    <text v-if="form.doctor_id">{{ doctor.text }}</text>
                    <text v-else class="input-placeholder">请选择坐诊医生</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item label="病情描述" prop="illness" @click="openEditor">
                <view class="input-text">
                    <rich-text v-if="form.illness" :nodes="form.illness" />
                    <text v-else class="input-placeholder">点击填写病情描述</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <view class="button">
                <u-button text="提交" type="primary" @click="submit"></u-button>
            </view>
        </u--form>
        <u-datetime-picker
            v-model="datePicker.value"
            mode="date"
            :show="datePicker.show"
            :closeOnClickOverlay="true"
            :minDate="datePicker.minDate"
            @close="toggleBirthday"
            @cancel="toggleBirthday"
            @confirm="selectBirthday"
        />
        <select-admin-user ref="select-admin-user" @select="selectDoctor" />
        <u-action-sheet
            :show="genderShow"
            :actions="gender.options"
            :closeOnClickOverlay="true"
            @close="toggleGender"
            @select="selectGender"
        />
        <cu-editor ref="editor" placeholder="请输入病情描述" @confirm="confirmEditor" />
    </view>
</template>

<script>
import gender from '../../enums/gender'
import SelectAdminUser from '../../components/select-admin-user'
import CuEditor from '../../components/cu-editor'

export default {
    components: {SelectAdminUser, CuEditor},
    data() {
        return {
            id: '',
            form: {
                name: '',
                sex: gender.none.value,
                phone: '',
                birthday: '',
                address: '',
                treat_at: '',
                doctor_id: '',
                illness: ''
            },
            rules: {
                name: {
                    required: true,
                    message: '姓名必填',
				    trigger: ['blur', 'change']
                }
            },
            gender: gender,
            genderShow: false,
            genderSelect: gender.none.text,
            datePicker: {
                show: false,
                name: '',
                value: (new Date).getTime(),
                minDate: (new Date('1900-1-1')).getTime()
            },
            doctor: {
                text: '',
                value: '',
            }
        }
    },
    onLoad(e) {
        if (!e.id) {
            uni.setNavigationBarTitle({
                title: '添加病人'
            })
        } else {
            this.id = e.id
            uni.showLoading()
            this.$ajax.get(`/admin-api/patient/${e.id}`, {_action: 'getData'}).then(res => {
                if (res.status == 0) {
                    this.form = {
                        id: res.data.id,
                        name: res.data.name,
                        sex: res.data.sex,
                        phone: res.data.phone,
                        birthday: res.data.birthday,
                        address: res.data.address,
                        treat_at: res.data.treat_at,
                        doctor_id: res.data.doctor_id,
                        illness: res.data.illness
                    }
                    this.genderSelect = res.data.sex_text
                    if (res.data.doctor) {
                        this.doctor = {
                            text: res.data.doctor.name,
                            value: res.data.doctor.id,
                        }
                    }
                    uni.setNavigationBarTitle({ title: this.form.name })
                }
            })
        }
    },
    onReady() {
        this.$refs['form'].setRules(this.rules)
    },
    methods: {
        toggleGender() {
            this.genderShow = !this.genderShow
        },
        toggleBirthday(name) {
            if (name) {
                this.datePicker.name = name
                this.datePicker.value = this.form[name] ? Math.floor(this.form[name] * 1000) : (new Date).getTime()
            }
            this.datePicker.show = !this.datePicker.show
        },
        selectGender(e) {
            this.genderSelect = e.name
            this.form.sex = e.value
        },
        selectBirthday(e) {
            this.form[this.datePicker.name] = Math.floor(e.value / 1000)
            this.toggleBirthday()
        },
        opendDoctor() {
            this.$refs['select-admin-user'].open()
        },
        closeDoctor() {
            this.$refs['select-admin-user'].close()
        },
        selectDoctor(e) {
            this.form.doctor_id = e.id
            this.doctor = {
                value: e.id,
                text: e.name
            }
            this.closeDoctor()
        },
        openEditor() {
            this.$refs['editor'].open(this.form.illness)
        },
        confirmEditor(e) {
            this.form.illness = e.html
        },
        submit() {
            this.$refs['form'].validate().then(res => {
                uni.showLoading()
                if (this.id) {
                    this.update()
                } else {
                    this.create()
                }
            }).catch(error => {})
        },
        update() {
            this.$ajax.put(`/admin-api/patient/${this.id}`, this.form).then(res => {
                if (res.status == 0) {
                    uni.showToast({
                        title: '保存成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500);
                }
            })
        },
        create() {
            this.$ajax.post('/admin-api/patient', this.form).then(res => {
                if (res.status == 0) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500);
                }
            })
        }
    }
}
</script>

<style scoped>
    .page {
        padding: 0 20px;
        background: white;
        position: absolute;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    .input-text {
        color: #303133;
        font-size: 15px;
        padding: 6px 9px;
        border-bottom: 1px solid #dadbde;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .input-placeholder {
        color: #c0c0c0;
    }
    .button {
        width: 100%;
        margin-top: 20px;
    }
</style>