<template>
  <el-dialog :model-value="modelValue" class="report-remark-dialog" top="15vh" :close-on-click-modal="false"
    @update:model-value="(v) => $emit('update:modelValue', v)" @open="onOpen">
    <div class="body-wrap">
      <div class="body-header">
        <div class="body-title">编辑备注</div>
        <img src="@/assets/image/close-btn.svg" alt="" class="close-btn" @click="closeDialog" />
      </div>

      <el-form :model="form" class="remark-form">
        <el-form-item label="报告信息">
          <el-input :model-value="reportInfo" disabled readonly />
        </el-form-item>

        <el-form-item label="发送状态">
          <el-select v-model="form.sent" placeholder="请选择" style="width: 100%">
            <el-option label="已发客户" :value="true" />
            <el-option label="待发客户" :value="false" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注内容">
          <el-input v-model="form.remark" type="textarea" :rows="5" placeholder="请输入备注内容" maxlength="500"
            show-word-limit />
        </el-form-item>
      </el-form>
    </div>

    <div class="body-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="onSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
import { updateAdminReportRemark } from "@/service/modular/admin";

const { t: $t } = useI18n();

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  reportRow: { type: Object, default: null },
});
const emit = defineEmits(["update:modelValue", "saved"]);

const form = reactive({ remark: "", sent: "" });
const submitting = ref(false);
const reportInfo = ref("");

const reset = () => {
  form.remark = "";
  form.sent = "";
  reportInfo.value = "";
};

const buildReportInfo = (row) => {
  const hospital = row?.hospital;
  const period = row?.period || "";
  const typeText = row?.type === "annual" ? "报告" : " 季度报告";
  return `${hospital} - ${period}${typeText}`;
};

const onOpen = () => {
  if (!props.reportRow) return;
  reset();
  const row = props.reportRow;
  console.log('row',row);
  
  form.remark = row?.remark ?? "";
  form.sent = row?.sent ?? "";
  reportInfo.value = buildReportInfo(row);
};

watch(
  () => props.modelValue,
  (v) => {
    if (v) onOpen();
    else reset();
  },
);

const closeDialog = () => emit("update:modelValue", false);

const onSubmit = async () => {
  const reportId = props.reportRow?.id || "";
  if (!reportId) {
    ElMessage.warning("报告不存在");
    return;
  }
  submitting.value = true;
  try {
    await updateAdminReportRemark(reportId, {
      remark: form.remark,
      sent: form.sent,
    });
    ElMessage.success('备注更新成功');
    emit("saved");
    closeDialog();
  } finally {
    submitting.value = false;
  }
};
</script>

<style lang="scss">
.report-remark-dialog {
  width: 800px;

  .el-form-item:last-child {
    margin-bottom: 0;
  }

  .remark-form {
    .el-form-item__label {
      font-weight: 500;
      color: #1d2129;
    }
  }
}
</style>