<script setup lang="ts">
import { VxeUI, type VxeFormProps, type VxeFormListeners } from 'vxe-pc-ui';
import { useRequest } from 'alova/client';
import { supplierEditMethod } from '@/request/api/care.api';
import { notification } from 'ant-design-vue';

interface ProcessFormData {
  processConfig: {
    archiving: boolean;
    tongueDiagnosis: boolean;
    tongueReport: 'full' | 'scan' | 'none';
    pulseDiagnosis: boolean;
    pulseReport: 'full' | 'scan' | 'none';
    inquiry: boolean;
    healthReport: 'full' | 'scan' | 'none';
    conditioningPlan: 'full' | 'scan' | 'none';
  };
  devices: Array<{
    deviceId: string;
    organization: string;
  }>;
}

const defaultModel: ProcessFormData = {
  processConfig: {
    archiving: true,
    tongueDiagnosis: true,
    tongueReport: 'none',
    pulseDiagnosis: true,
    pulseReport: 'none',
    inquiry: true,
    healthReport: 'full',
    conditioningPlan: 'full',
  },
  devices: [
    { deviceId: 'sd394859285923', organization: '杭州六智科技' },
    { deviceId: 'sd394859285922', organization: '杭州六智科技' },
    { deviceId: 'sd394859285903', organization: '杭州六智科技' },
  ],
};

const props = defineProps<{ data?: Partial<ProcessFormData> }>();
const emits = defineEmits<{
  submit: [data?: ProcessFormData];
}>();

const model = ref<ProcessFormData>({ ...defaultModel });

watchEffect(() => {
  if (props.data) {
    model.value = { ...defaultModel, ...props.data };
  }
});

const { loading: submitting, send: submit } = useRequest(supplierEditMethod, { immediate: false }).onSuccess(({ data }) => {
  emits('submit');
});

const formProps = reactive<VxeFormProps>({
  titleAlign: 'right',
  titleColon: true,
  data: computed(() => model.value),
  items: [
    {
      field: 'content',
      title: '',
      span: 24,
      slots: {
        default: 'contentSlot',
      },
    },
    { align: 'center', span: 24, slots: { default: 'active' } },
  ],
});

const formEmits: VxeFormListeners = {
  submit({ data }) {
    submit(data).then(() => {
      notification.success({
        message: '操作成功',
      });
      VxeUI.modal.close('edit-process-config');
    });
  },
};

function cancel() {
  VxeUI.modal.close('edit-process-config');
}

onBeforeMount(async () => {
  if (props.data) {
    model.value = { ...defaultModel, ...props.data };
  }
});
</script>

<template>
  <div class="form-container">
    <vxe-form v-bind="formProps" v-on="formEmits" :loading="submitting">
      <template #contentSlot>
        <div class="content-layout">
          <!-- 左侧：流程配置 -->
          <div class="left-section">
            <div class="section-title">流程配置</div>
            <div class="process-config">
              <!-- 建档 -->
              <div class="config-item">
                <span class="config-label">建档:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.archiving" 
                      :value="true"
                      :checked="model.processConfig.archiving"
                    />
                    <span>有</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.archiving" 
                      :value="false"
                      :checked="!model.processConfig.archiving"
                    />
                    <span>无</span>
                  </label>
                </div>
              </div>

              <!-- 舌面诊 -->
              <div class="config-item">
                <span class="config-label">舌面诊:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.tongueDiagnosis" 
                      :value="true"
                      :checked="model.processConfig.tongueDiagnosis"
                      disabled
                    />
                    <span>有</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.tongueDiagnosis" 
                      :value="false"
                      :checked="!model.processConfig.tongueDiagnosis"
                    />
                    <span>无</span>
                  </label>
                </div>
                <span class="report-label">舌面分析报告:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.tongueReport" 
                      value="full"
                      :checked="model.processConfig.tongueReport === 'full'"
                    />
                    <span>完整展示</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.tongueReport" 
                      value="scan"
                      :checked="model.processConfig.tongueReport === 'scan'"
                    />
                    <span>扫码查看</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.tongueReport" 
                      value="none"
                      :checked="model.processConfig.tongueReport === 'none'"
                    />
                    <span>无</span>
                  </label>
                </div>
              </div>

              <!-- 脉诊 -->
              <div class="config-item">
                <span class="config-label">脉诊:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.pulseDiagnosis" 
                      :value="true"
                      :checked="model.processConfig.pulseDiagnosis"
                    />
                    <span>有</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.pulseDiagnosis" 
                      :value="false"
                      :checked="!model.processConfig.pulseDiagnosis"
                    />
                    <span>无</span>
                  </label>
                </div>
                <span class="report-label">脉象分析报告:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.pulseReport" 
                      value="full"
                      :checked="model.processConfig.pulseReport === 'full'"
                    />
                    <span>完整展示</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.pulseReport" 
                      value="scan"
                      :checked="model.processConfig.pulseReport === 'scan'"
                    />
                    <span>扫码查看</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.pulseReport" 
                      value="none"
                      :checked="model.processConfig.pulseReport === 'none'"
                    />
                    <span>无</span>
                  </label>
                </div>
              </div>

              <!-- 问诊 -->
              <div class="config-item">
                <span class="config-label">问诊:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.inquiry" 
                      :value="true"
                      :checked="model.processConfig.inquiry"
                    />
                    <span>有</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.inquiry" 
                      :value="false"
                      :checked="!model.processConfig.inquiry"
                    />
                    <span>无</span>
                  </label>
                </div>
              </div>

              <!-- 健康分析报告 -->
              <div class="config-item">
                <span class="config-label">健康分析报告:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.healthReport" 
                      value="full"
                      :checked="model.processConfig.healthReport === 'full'"
                    />
                    <span>完整展示</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.healthReport" 
                      value="scan"
                      :checked="model.processConfig.healthReport === 'scan'"
                    />
                    <span>扫码查看</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.healthReport" 
                      value="none"
                      :checked="model.processConfig.healthReport === 'none'"
                    />
                    <span>无</span>
                  </label>
                </div>
              </div>

              <!-- 调理方案 -->
              <div class="config-item">
                <span class="config-label">调理方案:</span>
                <div class="radio-group">
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.conditioningPlan" 
                      value="full"
                      :checked="model.processConfig.conditioningPlan === 'full'"
                    />
                    <span>完整展示</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.conditioningPlan" 
                      value="scan"
                      :checked="model.processConfig.conditioningPlan === 'scan'"
                    />
                    <span>扫码查看</span>
                  </label>
                  <label class="radio-item">
                    <input 
                      type="radio" 
                      v-model="model.processConfig.conditioningPlan" 
                      value="none"
                      :checked="model.processConfig.conditioningPlan === 'none'"
                    />
                    <span>无</span>
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧：设备列表 -->
          <div class="right-section">
            <div class="section-title">待修改设备</div>
            <div class="table-container">
              <table class="devices-table">
                <thead>
                  <tr>
                    <th>设备ID</th>
                    <th>组织</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(device, index) in model.devices" :key="index">
                    <td>{{ device.deviceId }}</td>
                    <td>{{ device.organization }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </template>

      <template #active>
        <div class="button-container">
          <vxe-button content="取消" :disabled="submitting" @click="cancel"></vxe-button>
          <vxe-button type="submit" status="warning" content="确定" :loading="submitting"></vxe-button>
        </div>
      </template>
    </vxe-form>
  </div>
</template>

<style scoped lang="scss">
.form-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.content-layout {
  display: flex;
  gap: 40px;
  margin-bottom: 20px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #e8e8e8;
    transform: translateX(-50%);
  }

  .left-section,
  .right-section {
    flex: 1;
    
    .section-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 16px;
      color: #333;
    }
  }
}

.process-config {
  .config-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 8px;

    .config-label {
      font-weight: bold;
      min-width: 80px;
      color: #333;
    }

    .report-label {
      margin-left: 40px;
      color: #666;
      margin-right: 10px;
    }

    .radio-group {
      display: flex;
      align-items: center;
      gap: 30px;

      .radio-item {
        display: flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;

        input[type="radio"] {
          margin: 0;
          cursor: pointer;
          width: 16px;
          height: 16px;
        }

        span {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}

.table-container {
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  overflow: hidden;

  .devices-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #e8e8e8;

    thead {
      background-color: #fafafa;

      th {
        padding: 12px 16px;
        text-align: left;
        font-weight: 500;
        color: #333;
        border-bottom: 1px solid #e8e8e8;
        border-right: 1px solid #e8e8e8;
        font-size: 14px;
        
        &:last-child {
          border-right: none;
        }
      }
    }

    tbody {
      tr {
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        td {
          padding: 12px 16px;
          color: #666;
          font-size: 14px;
          border-right: 1px solid #f0f0f0;
          
          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 150px;
  padding-top: 20px;
  position: sticky;
  bottom: 0;
  background-color: #fff;
  padding-bottom: 20px;

  .vxe-button {
    min-width: 80px;
    height: 36px;
    font-size: 14px;
    border-radius: 6px;

    &:first-child {
      background-color: #fff;
      border: 1px solid #d9d9d9;
      color: #666;

      &:hover {
        border-color: #40a9ff;
        color: #40a9ff;
      }
    }

    &:last-child {
      background-color: #fa8c16;
      border: 1px solid #fa8c16;
      color: #fff;

      &:hover {
        background-color: #ff9c2a;
        border-color: #ff9c2a;
      }

      &:disabled {
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        color: #bfbfbf;
      }
    }
  }
}
</style>
