<template lang="html">
    <el-form ref="form" :model="form" :rules="rules" :disabled="!ableForm" label-position="top" class="form" size="small">
        <el-form-item label="药物名称" prop="drugName">
            <el-autocomplete
                v-model="form.drugName"
                :fetch-suggestions="queryDrugNameAsync"
                :disabled="!!form.treatId"
                suffix-icon="el-icon-search"
                placeholder="请输入内容"
                @select="handleDrugNameSelect"
            />
        </el-form-item>
        <el-form-item label="开始治疗时间" prop="treatStartDate">
            <RelaxedDatePicker :date.sync="form.treatStartDate"/>
        </el-form-item>
        <el-form-item label="当前是否已结束治疗" prop="hasDrugTreatEnd">
            <el-radio-group v-model="form.hasDrugTreatEnd">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
                <el-radio :label="3">未知</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.hasDrugTreatEnd === 1" label="结束治疗时间" prop="treatEndDate">
            <RelaxedDatePicker :date.sync="form.treatEndDate" />
        </el-form-item>
        <el-form-item label="服药方式" prop="drugUseMethod">
            <el-select v-model="form.drugUseMethod">
                <el-option
                    v-for="item in drugUseMethods"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
            </el-select>
        </el-form-item>
        <el-form-item label="药物治疗目的" prop="drugTreatAim">
            <el-select v-model="form.drugTreatAim" multiple>
                <el-option
                    v-for="(item, index) in useDrugAimList"
                    :key="index"
                    :label="item"
                    :value="item"
                />
            </el-select>
        </el-form-item>
        <el-button type="primary" @click="onSubmitForm">保存</el-button>
    </el-form>
</template>
<script>
import { getDrugByNameApi } from 'src/fetchs/associative';
import { saveDrugTreatFormApi } from './fetch';
import Mixin from './mixin';

export default {
    name: 'InquiryForm001',
    mixins: [Mixin],
    data() {
        return {
            form: {
                treatId: null,
                drugId: 0,
                drugName: '',
                treatStartDate: '',
                hasDrugTreatEnd: 3,
                treatEndDate: '',
                drugUseMethod: 5,
                drugTreatAim: [],
            },
            drugUseMethods: [
                {
                    value: 1,
                    label: '口服',
                },
                {
                    value: 2,
                    label: '注射',
                },
                {
                    value: 3,
                    label: '外用',
                },
                {
                    value: 4,
                    label: '喷剂',
                },
                {
                    value: 5,
                    label: '未知',
                },
            ],
            useDrugAimList: [],
            rules: {
                drugName: [{ required: true, message: '请输入药物名称', trigger: 'change' }],
                treatStartDate: [{ required: true, message: '请选择开始治疗时间', trigger: 'change' }],
                treatEndDate: [{ required: true, validator: this.handleEndDateValidate, trigger: 'change' }],
                hasDrugTreatEnd: [{ required: true, message: '请选择当前是否已结束治疗', trigger: 'change' }],
                drugUseMethod: [{ required: true, message: '请选择服药方式', trigger: 'change' }],
                drugTreatAim: [{ type: 'array', required: true, message: '请选择药物治疗目的', trigger: 'change' }],
            },
        };
    },
    methods: {
        // 初始化表单
        async initForm(form) {
            try {
                const results = await getDrugByNameApi(form.drugName);
                this.useDrugAimList = results[0].useDrugAimList;
                this.form = Object.assign({}, this.form, form);
                this.form.drugTreatAim = form.drugTreatAim.map(x => x.drugTreatAim);
            } catch (e) {
                this.$message.error('获取药物名称失败');
            }
        },
        // 获取药物名称列表
        async queryDrugNameAsync(qs = '', callback) {
            try {
                const results = await getDrugByNameApi(qs);
                callback(results.map(({ id, drugName, useDrugAimList }) => ({ value: drugName, id, useDrugAimList })));
            } catch (e) {
                this.$message.error('获取药物名称失败');
            }
        },
        // 选中药物
        handleDrugNameSelect({ id, value, useDrugAimList }) {
            this.form.drugId = id;
            this.form.drugName = value;
            this.form.drugTreatAim = [];
            this.useDrugAimList = useDrugAimList || [];
        },
        // 处理要提交的表单数据
        handleFormatFormData() {
            const { patientId } = YB.getPageUrlSearchParam();
            const { drugId, hasDrugTreatEnd, treatStartDate, treatEndDate } = this.form;
            const drugTreatAim = this.form.drugTreatAim.map(i => ({
                patientId: +patientId,
                drugListId: drugId,
                drugTreatAim: i,
            }));
            const { start, end } = this.parseFormatDate(treatStartDate, treatEndDate, hasDrugTreatEnd === 1);
            return {
                ...this.form,
                drugTreatAim,
                treatStartDate: start,
                treatEndDate: end,
                patientId: +patientId,
            };
        },
        // 校验结束时间
        handleEndDateValidate(rule, value, callback) {
            if (value) {
                this.handleDateValidate(this.form.treatStartDate, value, callback);
            } else {
                callback(new Error('请选择结束治疗时间'));
            }
        },
        // 点击保存按钮，先保存表单，然后暂存任务
        async onSubmitForm() {
            try {
                await this.$refs.form.validate();
                const data = this.handleFormatFormData();
                try {
                    const { treatId } = await saveDrugTreatFormApi(data.patientId, data);
                    this.form.treatId = treatId;
                    await this.handleSave();
                } catch (e) {
                    this.$message.error(e);
                    console.log(e);
                }
            } catch (e) {
                this.$message.error('有必填项未填');
                console.log(e);
            }
        },
    },
};
</script>
<style lang="less" scoped>
@import './style.less';
</style>