<template>
	<div class="ticket_container">
		<div v-if="type === 0" class="ticket_add">
			<el-form>
				<el-form-item>
					<el-row>
						<el-col :span="12">
							<el-form-item label="反馈医院：">{{ getUserInfos.client.clientName }}</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="反馈用户：">{{ getUserInfos.userName }}</el-form-item>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
			<!-- <Editor :contentHtml="ticketBody" :isDisabled="true" @getWangEditorValue="getWangEditorValue" /> -->
		</div>
        <el-form v-else v-loading="loading" class="el-form-my">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="工单状态">
                        <el-tag :type="ticketInfo.ticketStatus ? 'success' : ''" size="mini">{{ ticketInfo.ticketStatus ? '已办结' : '已提交' }}</el-tag>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="反馈时间">
                        {{ ticketInfo.ticketSubmitTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="反馈医院：">
                        {{ getUserInfos.client.clientName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="反馈用户：">
                        {{ getUserInfos.userName }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="回复时间">
                        {{ ticketInfo.ticketReplyTime }}
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="工单内容">
                        <div class="text_content" v-html="ticketInfo.ticketBody"></div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="回复内容">
                        <div class="text_content" v-html="ticketInfo.ticketReply"></div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, onMounted } from 'vue';
import { useStore } from '/@/store/index';
// import Editor from '/@/views/PatientManage/wenshuguanli/component/index.vue';
import { ElMessage } from 'element-plus';
import { addTicketApi, ticketInfoApi } from '/@/api/user_ticket/index';
export default defineComponent({
	name: 'Ticket',
	components: { },
	props: {
		// 0新增1只读
		type: {
			type: Number,
			default: 0,
		},
		// 工单id，只读状态才有
		code: {
			type: String,
			default: '',
		},
	},
	setup(props) {
		const store = useStore();

		const ticketBody = ref('');

        const loading = ref(false);

        const ticketInfo = ref({
            ticketBody: '', // 工单内容
            ticketSubmitTime: '', // 提交时间
            ticketStatus: 0, // 工单状态
            ticketReplyTime: '', // 回复时间
            ticketReply: '', // 回复内容
        })

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});

		const getWangEditorValue = (str: string) => {
			ticketBody.value = str;
		};

        /** 添加工单 */
		const add = async () => {
			if (!ticketBody.value) {
				ElMessage.warning('请输入工单内容');
				return false;
			}
			try {
				const params = {
					// @ts-ignore
					clientCode: getUserInfos.value.client.code,
					// @ts-ignore
					userCode: getUserInfos.value.userCode,
					ticketBody: ticketBody.value,
				};
                await addTicketApi(params);
                ElMessage.success('反馈成功，给您带来不便敬请谅解!');
                return true;
			} catch (error) {
				return false;
			}
		};

        const getTicketInfo = async (code: string) => {
            loading.value = true;
            try {
                const { data } = await ticketInfoApi(code);
                console.log(data)
                ticketInfo.value.ticketBody = data.ticketBody;
                ticketInfo.value.ticketReply = data.ticketReply;
                ticketInfo.value.ticketReplyTime = data.ticketReplyTime;
                ticketInfo.value.ticketStatus = data.ticketStatus;
                ticketInfo.value.ticketSubmitTime = data.ticketSubmitTime;
            } finally {
                loading.value = false;
            }
        }

        onMounted(() => {
            if (props.type && props.code) {
                getTicketInfo(props.code);
            }
        })

		return {
			getUserInfos,
			ticketBody,
			getWangEditorValue,
			add,
            ticketInfo,
            loading
		};
	},
});
</script>

<style lang="scss" scoped>
.el-form-my {
    .text_content {
        border: 1px solid #dedede;
        border-radius: 4px;
        padding: 14px;
        min-height: 100px;
        max-height: 400px;
        overflow-y: auto;
    }
}
</style>