<template>
  <div class="app-container">
    <div class="config-header">
      <el-button type="primary" @click="handleDefault">默认(M)</el-button>
      <el-button type="success" @click="handleSave">保存(S)</el-button>
      <el-button type="danger" @click="handleClose">关闭(X)</el-button>
    </div>
    
    <el-tabs v-model="activeTab" class="config-tabs">
      <el-tab-pane label="划价收费1" name="tab1">
        <div class="tab-content">划价收费1相关配置</div>
      </el-tab-pane>
      
      <el-tab-pane label="划价收费2" name="tab2">
        <div class="tab-content">划价收费2相关配置</div>
      </el-tab-pane>
      
      <el-tab-pane label="挂号处理" name="tab3">
        <el-form ref="formRef" :model="formData" label-width="120px" class="config-form">
          <!-- 第一行 -->
          <div class="form-row">
            <el-form-item label="病历本费用（元）" prop="medicalRecordFee" style="margin-right: 20px;">
              <el-input v-model="formData.medicalRecordFee" style="width: 180px" />
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-checkbox v-model="formData.medicalRecordFlag">病历费入账标志</el-checkbox>
            </el-form-item>
          </div>
          
          <!-- 第二行 -->
          <div class="form-row">
            <el-form-item label="就诊卡费（元）" prop="patientCardFee" style="margin-right: 20px;">
              <el-input v-model="formData.patientCardFee" style="width: 180px" />
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-checkbox v-model="formData.isNightShift">是否启用晚班</el-checkbox>
            </el-form-item>
          </div>
          
          <!-- 第三行 -->
          <div class="form-row">
            <el-form-item style="margin-right: 40px;">
              <el-checkbox v-model="formData.patientCardFlag">就诊卡记账标志</el-checkbox>
            </el-form-item>
            <el-form-item label="上午接诊起始时间" prop="morningStartTime" style="width: 300px; white-space: nowrap;">
              <el-input v-model="formData.morningStartTime" style="width: 120px" />
            </el-form-item>
          </div>
          
          <!-- 第四行 -->
          <div class="form-row">
            <el-form-item style="margin-right: 40px;">
              <el-checkbox v-model="formData.autoGenerateOutpatientNo">自动产生门诊号</el-checkbox>
            </el-form-item>
            <el-form-item style="margin-right: 40px;">
              <el-checkbox v-model="formData.allowModifyOutpatientNo">建档时是否允许修改门诊号</el-checkbox>
            </el-form-item>
          </div>
          
          <!-- 第五行 -->
          <div class="form-row">
            <el-form-item label="下午起始时间" prop="afternoonStartTime" style="margin-right: 40px;">
              <el-input v-model="formData.afternoonStartTime" style="width: 120px" />
            </el-form-item>
            <el-form-item label="晚上起始时间" prop="eveningStartTime">
              <el-input v-model="formData.eveningStartTime" style="width: 120px" />
            </el-form-item>
          </div>
          
          <!-- 第六行 -->
          <div class="form-row">
            <el-form-item label="挂号有效期" prop="registrationValidity" style="margin-right: 40px;">
              <el-input v-model="formData.registrationValidity" style="width: 120px" />
            </el-form-item>
            <el-form-item label="挂号单据模式" prop="registrationDocumentMode">
              <el-select v-model="formData.registrationDocumentMode" style="width: 150px">
                <el-option label="使用发票" value="使用发票" />
                <el-option label="其他模式" value="其他模式" />
              </el-select>
            </el-form-item>
          </div>
          
          <!-- 第七行 -->
          <div class="form-row">
            <el-form-item style="margin-right: 40px;">
              <el-checkbox v-model="formData.exemptFlag">减免标志</el-checkbox>
            </el-form-item>
            <el-form-item style="margin-right: 40px;">
              <el-checkbox v-model="formData.consultationFlag">义诊标志</el-checkbox>
            </el-form-item>
            <el-form-item style="margin-right: 40px;">
              <el-checkbox v-model="formData.enableHolidayFeeFloat">启用法定节假日挂号费浮动</el-checkbox>
            </el-form-item>
          </div>
          
          <!-- 第八行 -->
          <div class="form-row">
            <el-form-item label="监护人规定年龄" prop="guardianAge" style="margin-right: 40px;">
              <el-input v-model="formData.guardianAge" style="width: 120px" />
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="formData.enableDoubleScreen">门诊挂号启用双屏</el-checkbox>
            </el-form-item>
          </div>
          
          <!-- 第九行 -->
          <div class="form-row">
            <el-form-item>
              <el-checkbox v-model="formData.optionalRegistrationType">挂号类型可选择</el-checkbox>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      
      <el-tab-pane label="挂号预约" name="tab4">
        <div class="tab-content">挂号预约相关配置</div>
      </el-tab-pane>
      
      <el-tab-pane label="打印设置" name="tab5">
        <el-checkbox v-model="formData.isPrint">是否打印挂号单</el-checkbox>
      </el-tab-pane>
      
      <el-tab-pane label="其他选项" name="tab6">
        <div class="tab-content">其他选项相关配置</div>
      </el-tab-pane>
      
      <el-tab-pane label="病人账户" name="tab7">
        <div class="tab-content">病人账户相关配置</div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const router = useRouter();
const formRef = ref(null);
const activeTab = ref('tab1');

// 表单数据
const formData = reactive({
  medicalRecordFee: '1',
  patientCardFee: '1',
  medicalRecordFlag: true,
  patientCardFlag: false,
  autoGenerateOutpatientNo: true,
  allowModifyOutpatientNo: false,
  enableHolidayFeeFloat: true,
  enableDoubleScreen: true,
  isNightShift: false,
  exemptFlag: false,
  consultationFlag: false,
  optionalRegistrationType: false,
  morningStartTime: '08:00',
  afternoonStartTime: '13:00',
  eveningStartTime: '22:00',
  registrationValidity: '5',
  registrationDocumentMode: '使用发票',
  guardianAge: '16',
  isPrint: false,
});

// 默认按钮点击事件
const handleDefault = () => {
  // 重置为默认值
  Object.assign(formData, {
    medicalRecordFee: '1',
    patientCardFee: '1',
    medicalRecordFlag: true,
    patientCardFlag: false,
    autoGenerateOutpatientNo: true,
    allowModifyOutpatientNo: false,
    enableHolidayFeeFloat: true,
    enableDoubleScreen: true,
    isNightShift: false,
    exemptFlag: false,
    consultationFlag: false,
    optionalRegistrationType: false,
    morningStartTime: '08:00',
    afternoonStartTime: '13:00',
    eveningStartTime: '22:00',
    registrationValidity: '5',
    registrationDocumentMode: '使用发票',
    guardianAge: '16',
    isPrint: false,
  });
  ElMessage.success('已恢复默认值');
};

// 保存按钮点击事件
const handleSave = async () => {
  try {
    // 这里可以添加表单验证逻辑
    if (formRef.value) {
      await formRef.value.validate();
    }
    
    // 将表单数据转换为系统配置格式
    const configData = [
      { configKey: 'medicalRecordFee', configValue: formData.medicalRecordFee, configName: '病历本费用' },
      { configKey: 'patientCardFee', configValue: formData.patientCardFee, configName: '就诊卡费' },
      { configKey: 'medicalRecordFlag', configValue: formData.medicalRecordFlag ? '1' : '0', configName: '病历费入账标志' },
      { configKey: 'isNightShift', configValue: formData.isNightShift ? '1' : '0', configName: '是否启用晚班' },
      { configKey: 'patientCardFlag', configValue: formData.patientCardFlag ? '1' : '0', configName: '就诊卡记账标志' },
      { configKey: 'morningStartTime', configValue: formData.morningStartTime, configName: '上午接诊起始时间' },
      { configKey: 'autoGenerateOutpatientNo', configValue: formData.autoGenerateOutpatientNo ? '1' : '0', configName: '自动产生门诊号' },
      { configKey: 'allowModifyOutpatientNo', configValue: formData.allowModifyOutpatientNo ? '1' : '0', configName: '建档时是否允许修改门诊号' },
      { configKey: 'afternoonStartTime', configValue: formData.afternoonStartTime, configName: '下午起始时间' },
      { configKey: 'eveningStartTime', configValue: formData.eveningStartTime, configName: '晚上起始时间' },
      { configKey: 'registrationValidity', configValue: formData.registrationValidity, configName: '挂号有效期' },
      { configKey: 'registrationDocumentMode', configValue: formData.registrationDocumentMode, configName: '挂号单据模式' },
      { configKey: 'exemptFlag', configValue: formData.exemptFlag ? '1' : '0', configName: '减免标志' },
      { configKey: 'consultationFlag', configValue: formData.consultationFlag ? '1' : '0', configName: '义诊标志' },
      { configKey: 'enableHolidayFeeFloat', configValue: formData.enableHolidayFeeFloat ? '1' : '0', configName: '启用法定节假日挂号费浮动' },
      { configKey: 'guardianAge', configValue: formData.guardianAge, configName: '监护人规定年龄' },
      { configKey: 'enableDoubleScreen', configValue: formData.enableDoubleScreen ? '1' : '0', configName: '门诊挂号启用双屏' },
      { configKey: 'optionalRegistrationType', configValue: formData.optionalRegistrationType ? '1' : '0', configName: '挂号类型可选择' },
      { configKey: 'isPrint', configValue: formData.isPrint ? '1' : '0', configName: '是否打印挂号单' },
    ];
    
    // 调用系统配置API保存每个参数
    for (const config of configData) {
      // 先查询是否存在该配置
      const existingConfig = await getConfigKey(config.configKey);
      if (existingConfig.data) {
        // 如果存在则更新
        await updateConfig({ ...config, configId: existingConfig.data.configId });
      } else {
        // 如果不存在则新增
        await addConfig(config);
      }
    }
    
    ElMessage.success('保存成功');
  } catch (error) {
    console.error('保存失败:', error);
    ElMessage.error('保存失败，请重试');
  }
};

// 关闭按钮点击事件
const handleClose = () => {
  router.back();
};
</script>

<style scoped>
.app-container {
  padding: 5px;
}

.config-header {
  margin-bottom: 5px;
}

.config-header .el-button {
  margin-right: 10px;
}

.config-tabs {
  margin-top: 0;
}

.config-form {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.config-form .el-form-item {
  margin-bottom: 0;
  margin-right: 0;
}

.config-form .el-form-item__label {
  font-weight: 500;
  width: 120px;
  text-align: right;
}

.config-form .el-form-item--medium .el-form-item__content {
  line-height: 28px;
}

.tab-content {
  padding: 10px;
  color: #606266;
  text-align: center;
  line-height: 60px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>