<template>
    <el-dialog :title="title" :close-on-click-modal="false" visible top="0" class="task-dialog" @close="handleClose">
        <!-- 选择任务类型 -->
        <div v-if="!taskTypeId && !radio" class="select-type">
            <el-card shadow="hover" @click.native="radio = 1">
                患者任务
            </el-card>
            <el-card shadow="hover" @click.native="radio = 2">
                随访任务
            </el-card>
        </div>
        <template v-else>
            <PatientTask v-if="(taskTypeId > 20000 && taskTypeId < 30000) || (radio === 1)" ref="form" v-bind="$props"/>
            <FollowerTask v-if="(taskTypeId < 20000 && taskTypeId > 10000) || (radio === 2)" ref="form" v-bind="$props"/>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">{{ ruleTaskId ? '确认修改' : '确认创建' }}</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script>
import { mapActions } from 'vuex';
import storeTask from 'src/store/modules/task.js';
import FollowerTask from './follower-task';
import PatientTask from './patient-task';

export default {
    name: 'CreateTask',
    components: {
        FollowerTask,
        PatientTask,
    },
    props: {
        // 任务类型ID
        taskTypeId: {
            type: Number,
        },
        // 任务ID
        ruleTaskId: {
            type: Number,
        },
        // 服务ID
        commodityId: {
            type: Number,
        },
    },
    data() {
        return {
            // 默认为空  患者1 随访人员 2
            radio: 0,
        };
    },
    computed: {
        // 弹窗标题
        title() {
            const { taskTypeId, ruleTaskId, radio } = this;
            if (taskTypeId) {
                if (taskTypeId < 20000 && taskTypeId > 10000) {
                    return ruleTaskId ? '修改随访任务' : '创建随访任务';
                }
                if (taskTypeId > 20000 && taskTypeId < 30000) {
                    return ruleTaskId ? '修改患者任务' : '创建患者任务';
                }
                return '创建任务';
            }
            if (radio) {
                if (radio === 1) {
                    return '创建患者任务';
                }
                if (radio === 2) {
                    return '创建随访任务';
                }
            }
            return '选择创建任务的类型';
        },
    },
    methods: {
        ...mapActions(storeTask.name, ['getPatientTaskList']),
        // 提交
        async handleSubmit() {
            try {
                await this.$refs.form.handleSubmit();
                // 更新任务列表
                await this.getPatientTaskList({ patientId: +this.$route.query.patientId });
                this.$message.success('保存成功');
                this.handleClose();
            } catch (e) {
                this.$message.error(e);
                console.log(e);
            }
        },
        // 预览患者端样式
        handlePreview() {
            this.$refs.form.handlePreview();
        },
        // 关闭弹窗
        handleClose() {
            window._createTask_component_close();
        },
    },
};
</script>
<style lang="less" scoped>
@import './style.less';
.select-type {
    margin-top: 40px;
    .el-card {
        width: 100%;
        margin-bottom: 30px;
        font-size: 16px;
        cursor: pointer;
        height: 80px;
        line-height: 40px;
    }
}
</style>