<template>
    <view class="page">
        <u--form :model="form" ref="form" labelWidth="80" :borderBottom="false">
            <u-form-item prop="patient_id" label="姓名" :borderBottom="true">
                <view class="input-text">
                    <text>{{ patient.name }}</text>
                </view>
            </u-form-item>
            <u-form-item prop="type_id" label="类别" :required="true" :borderBottom="true" @click="toggleType">
                <u-radio-group v-model="form.type_id" @change="typeChange">
                    <u-radio v-for="item in typeList" :key="item.id" :label="item.name" :name="item.id" />
                </u-radio-group>
            </u-form-item>
            <u-form-item prop="form.treat_at" label="诊疗时间" :required="true" :borderBottom="true" @click="toggleDatePicker('treat_at', 'datetime')">
                <view class="input-text">
                    <text v-if="form.treat_at">{{ form.treat_at | date }}</text>
                    <text v-else class="input-placeholder">请选择诊疗时间</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item prop="form.doctor_id" label="诊疗医生" :required="true" :borderBottom="true" @click="opendAdminUser('doctor')">
                <view class="input-text">
                    <text v-if="form.doctor_id">{{ adminUser.doctor_name }}</text>
                    <text v-else class="input-placeholder">请选择诊疗医生</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item prop="form.origin_price" label="划线价" :required="true" :borderBottom="true">
                <input type="number" v-model="form.origin_price" placeholder="输入划线价" />
            </u-form-item>
             <u-form-item prop="form.sell_price" label="实收价" :required="true" :borderBottom="true">
                <input type="number" v-model="form.sell_price" placeholder="输入实收价" />
            </u-form-item>
            <u-form-item prop="order_status" label="收费情况" :required="true" :borderBottom="true">
                <u-radio-group v-model="form.order_status">
                    <u-radio v-for="item in orderStatus.options" :key="item.value" :label="item.name" :name="item.value" />
                </u-radio-group>
            </u-form-item>
            <u-form-item label="诊疗情况" prop="content" :borderBottom="true" @click="openEditor">
               <view class="input-text">
                    <!-- <rich-text v-if="form.illness" :nodes="form.illness" /> -->
                    <text v-if="form.content">{{ form.content }}</text>
                    <text v-else class="input-placeholder">点击修改</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
			<u-form-item label="图片资料" prop="images" borderBottom>
			    <cu-image ref="images" />
			</u-form-item>
            <u-form-item prop="next_treat_at" label="下次就诊时间" :borderBottom="true" @click="toggleDatePicker('next_treat_at', 'datetime')">
                <view class="input-text">
                    <text v-if="form.next_treat_at">{{ form.next_treat_at | date }}</text>
                    <text v-else class="input-placeholder">请选择下次就诊时间</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item label="开启通知" prop="is_notified" borderBottom>
                <u-switch v-model="form.is_notified" :activeValue="0" :inactiveValue="1" asyncChange @change="updateSwitch" />
            </u-form-item>
            <u-form-item v-if="form.is_notified == 0" prop="notify_user_id" label="通知人" :borderBottom="true" @click="opendAdminUser('notify_user')">
                <view class="input-text">
                    <text v-if="form.notify_user_id">{{ adminUser.notify_user_name }}</text>
                    <text v-else class="input-placeholder">请选择通知人</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <u-form-item v-if="form.is_notified == 0" prop="notify_at" label="通知时间" :borderBottom="true" @click="toggleDatePicker('notify_at', 'date')">
                <view class="input-text">
                    <text v-if="form.notify_at">{{ form.notify_at | date('yyyy-MM-dd') }}</text>
                    <text v-else class="input-placeholder">请选择通知时间</text>
                    <u-icon name="arrow-right" />
                </view>
            </u-form-item>
            <!-- <u-form-item prop="notify_remarks" label="通知备注" :borderBottom="true">
                <u--input v-model="form.notify_remarks" placeholder="请输入通知备注" border="none" />
            </u-form-item> -->
            <u-form-item label="操作人" :borderBottom="true">
                <view class="input-text">{{ currentUser.name }}</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="datePicker.mode"
            :show="datePicker.show"
            :closeOnClickOverlay="true"
            :minDate="datePicker.minDate"
            @close="toggleDatePicker"
            @cancel="toggleDatePicker"
            @confirm="selectDatePicker"
        />
        <select-admin-user ref="select-admin-user" @select="selectAdminUser" />
        <cu-editor ref="editor" @confirm="confirmEditor" />
    </view>
</template>

<script>
import CuEditor from '../../components/cu-editor'
import SelectAdminUser from '../../components/select-admin-user'
import orderStatus from '../../enums/order_status'
import CuImage from '../../components/cu-image'

export default {
    components: {SelectAdminUser, CuEditor, CuImage},
    data() {
        return {
            id: '',
            info: {},
            form: {
                patient_id: '',
                type_id: '',
                doctor_id: '',
                treat_at: Math.floor((new Date).getTime() / 1000),
                origin_price: '',
                sell_price: '',
                order_status: orderStatus.success.value,
                content: '',
                next_treat_at: '',
                notify_user_id: '',
                notify_at: '',
                notify_remarks: '',
                is_notified: 1,
            },
            typeList: [],
            patient: {},
            datePicker: {
                mode: 'datetime',
                show: false,
                name: '',
                value: (new Date).getTime(),
                minDate: (new Date('1900/1/1')).getTime()
            },
            adminUser: {
                key: ''
            },
            orderStatus: orderStatus,
            currentUser: {},
        }
    },
    onLoad(e) {
        this.id = e.id
        this.form.patient_id = e.patient
        this.form.type_id = e.type
        this.init()
    },
    methods: {
        async init() {
            let res
            res = await this.$ajax.get('/admin-api/category', { params: {_action: 'getData'}})
            if (res.status == 0) {
                this.typeList = res.data.items
                let type_id = this.form.type_id
                if (!type_id) {
                    type_id = uni.getStorageSync('medical_record_treat_type_id')
                }
                if (type_id) {
                    this.form.type_id = parseInt(type_id)
                    this.typeChange(type_id)
                }
            }
            res = await this.$ajax.get('/admin-api/current-user')
            if (res.status == 0) {
                this.currentUser = res.data
                this.form.doctor_id = this.currentUser.id
                this.adminUser.doctor_name = this.currentUser.name
                this.form.notify_user_id = this.currentUser.id
                this.adminUser.notify_user_name = this.currentUser.name
            }
            if (this.id) {
                uni.setNavigationBarTitle({
                    title: '修改病历'
                })

                res = await this.$ajax.get(`/admin-api/record/${this.id}`, { params: {_action: 'getData'}})
                if (res.status == 0) {
                    this.info = res.data
                    this.patient = res.data.patient
                    this.form = {
                        patient_id: this.info.patient_id,
                        type_id: this.info.type_id,
                        doctor_id: this.info.doctor_id,
                        treat_at: this.info.treat_at ? this.info.treat_at.replaceAll('-', '/') : '',
                        origin_price: this.info.origin_price,
                        sell_price: this.info.sell_price,
                        order_status: this.info.order_status,
                        content: this.info.content,
                        next_treat_at: this.info.next_treat_at ? this.info.next_treat_at.replaceAll('-', '/') : '',
                        notify_user_id: this.info.notify_user_id,
                        notify_at: this.info.notify_at ? this.info.notify_at.replaceAll('-', '/') : '',
                        notify_remarks: this.info.notify_remarks
                    }
                }
            } else {
                uni.setNavigationBarTitle({
                    title: '添加病历'
                })
                if (!this.form.patient_id) {
                    return uni.showModal({
                        title: '请选择病人',
                        showCancel: false,
                        success: () => {
                            uni.navigateBack()
                        }
                    })
                }
                const params = { _action: 'getData' }
                res = await this.$ajax.get(`/admin-api/patient/${this.form.patient_id}`, { params })
                if (res.status == 0) {
                    this.patient = res.data
                }
            }
        },
        submit() {
			this.form.images = this.$refs['images'].getList().map(item => item.url)
            uni.showLoading()
            if (this.id) {
                this.update()
            } else {
                this.create()
            }
        },
        update() {
            this.form.id = this.id
            this.$ajax.put(`/admin-api/record/${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/record', this.form).then(res => {
                if (res.status == 0) {
                    uni.showToast({
                        title: '提交成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1500);
                }
            })
        },
        toggleDatePicker(name, mode) {
            if (name) {
                this.datePicker.name = name
                this.datePicker.value = this.form[name] ? Math.floor(this.form[name] * 1000) : (new Date).getTime()
            }
            if (mode) {
                this.datePicker.mode = mode
            }
            this.datePicker.show = !this.datePicker.show
        },
        selectDatePicker(e) {
            this.form[this.datePicker.name] = Math.floor(e.value / 1000)
            this.toggleDatePicker()
        },
        opendAdminUser(name) {
            this.adminUser.key = name
            this.$refs['select-admin-user'].open()
        },
        closeAdminUser() {
            this.adminUser.key = ''
            this.$refs['select-admin-user'].close()
        },
        selectAdminUser(e) {
            const key = this.adminUser.key
            this.form[`${key}_id`] = e.id
            this.adminUser[`${key}_name`] = e.name
            this.closeAdminUser()
        },
        typeChange(e) {
            this.typeList.forEach(item => {
                if (item.id == e) {
                    this.form.content = item.content
                }
            })
        },
        openEditor() {
            this.$refs['editor'].open(this.form.content)
        },
        confirmEditor(e) {
            this.form.content = e
        },
        updateSwitch(e) {
            this.form.is_notified = e
        }
    }
}
</script>
<style scoped>
    .page {
        padding: 20px;
        background: white;
    }
    .input-text {
        color: #303133;
        font-size: 15px;
        padding: 6px 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .input-placeholder {
        color: #c0c0c0;
    }
    .button {
        width: 100%;
        margin-top: 20px;
    }
    .page ::v-deep .u-radio-group .u-radio:nth-child(even) {
        margin-left: 10px;
    }
</style>