<template>
	<el-drawer title="知识纠错" v-model="drawerVisible" size="40%" destroy-on-close @close="close">
		<el-form :model="state.ruleForm" label-width="110px" ref="ruleFormRef">
			<el-row>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="知识标题"> {{state.ruleForm.title}} </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="知识创建部门："> {{state.ruleForm.creatorOrgName}}  </el-form-item>
				</el-col>
				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
					<el-form-item label="知识创建人："> {{state.ruleForm.creatorName}}  </el-form-item>
				</el-col>
        <template v-if="isReply">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="纠错人部门："> {{ state.ruleForm.orgName }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="纠错人："> {{ state.ruleForm.name }} </el-form-item>
          </el-col>
        </template>
        <template v-else>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="纠错人部门："> {{ userInfos.orgName }} </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="纠错人："> {{ userInfos.name }} </el-form-item>
          </el-col>
        </template>
				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="纠错内容" prop="opinion" :rules="[{ required: true, message: '请填写纠错内容', trigger: 'blur' }]">
						<el-input
							type="textarea"
							v-model="state.ruleForm.opinion"
							placeholder="请填写纠错内容"
							:autosize="{ minRows: 6, maxRows: 8 }"
              :disabled="isReply"
						></el-input>
					</el-form-item>
				</el-col>
<!--				<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
					<el-form-item label="附件" prop="additions" :rules="[{ required: false, message: '请填写诉求内容', trigger: 'change' }]">
						<annex-list ref="annexListRef" classify="知识纠错上传" />
					</el-form-item>
				</el-col>-->
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="isReply">
          <el-divider/>
          <el-form-item label="答复内容" prop="replyContent" :rules="[{ required: true, message: '请填写答复内容', trigger: 'blur' }]">
            <el-input
                type="textarea"
                v-model="state.ruleForm.replyContent"
                placeholder="请填写答复内容"
                :autosize="{ minRows: 6, maxRows: 8 }"
            ></el-input>
          </el-form-item>
        </el-col>
			</el-row>
		</el-form>
    <template #footer v-if="isReply">
			<span class="dialog-footer">
				<el-button @click="drawerVisible = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onReply(ruleFormRef)" :loading="state.loading">答 复</el-button>
			</span>
    </template>
    <template #footer v-else>
			<span class="dialog-footer">
				<el-button @click="drawerVisible = false" class="default-button">取 消</el-button>
				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading">提 交</el-button>
			</span>
    </template>
	</el-drawer>
</template>
<script setup lang="ts" name="knowledgeErrorAdd">
import { ref, defineAsyncComponent, reactive } from 'vue';
import {ElMessage, FormInstance} from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '@/stores/userInfo';
import { correctionAdd,correctionReply,correctionDetail } from '@/api/knowledge/error';

const emit = defineEmits(['submitSuccess'])

const state = reactive<any>({
	ruleForm: {
		title: '', // 标题
		content: '', // 内容
		additions: [], // 附件
	},
	loading: false, // 加载状态
});

const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const drawerVisible = ref<boolean>(false);
const storesUserInfo = useUserInfo();
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息

// 提交
const ruleFormRef = ref<RefType>();
const annexListRef = ref<RefType>(); // 附件列表
const isReply = ref<boolean>(false); // 是否答复
// 打开弹窗
const openDialog = (row:any,reply = false) => {
  isReply.value = reply;
  if (reply) {
    correctionDetail(row.id)
        .then((res) => {
          state.ruleForm = res.result;
          state.ruleForm.opinion = state.ruleForm.content;
          state.ruleForm.title = state.ruleForm.knowledge?.title;
          state.ruleForm.creatorOrgName = state.ruleForm.knowledge?.creatorOrgName; //知识创建人
          state.ruleForm.creatorName = state.ruleForm.knowledge?.creatorName; // 知识创建人
          state.ruleForm.name = state.ruleForm.creatorName; // 提问人
          state.ruleForm.orgName = state.ruleForm.creatorOrgName; // 提问人部门
          drawerVisible.value = true;
        })
        .catch(() => {
          ElMessage.error('获取详情失败');
        });
  } else {
    state.ruleForm = row;
    drawerVisible.value = true;
  }
};
// 关闭弹窗
const closeDialog = () => {
  drawerVisible.value = false;
};
const close = () => {
  ruleFormRef.value?.resetFields();
  ruleFormRef.value?.clearValidate();
};
// 提交
const onSubmit = async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (!valid) return;
    const request = {
      knowledgeId: state.ruleForm.id,
      content: state.ruleForm.opinion,
      files: annexListRef.value?.fileList,
    };
    correctionAdd(request).then(()=>{
      ElMessage.success('操作成功');
      closeDialog();
      emit('submitSuccess')
    })
	});
};
// 答复
const onReply = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: boolean) => {
    if (!valid) return;
    const request = {
      id: state.ruleForm.id,
      replyContent: state.ruleForm.replyContent,
    };
    correctionReply(request).then(() => {
      ElMessage.success('操作成功');
      closeDialog();
      emit('submitSuccess');
    });
  });
};
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style scoped lang="scss"></style>
