<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    @ok="handleSubmit"
    :title="getTitle"
    width="900px"
    :min-height="600"
    :max-height="1000"
    scrollable
    destroyOnClose
    :bodyStyle="{ padding: '20px' }"
  >
    <!-- 查看模式 -->
    <div class="que-container" v-if="mode === 'view'">
      <div class="que-status">
        <div>矿井状态：</div>
        <div>
          <span :class="getStatusClass(currentRecord?.mineLinkStatus)" class="status-dot">
            {{ getStatusText(currentRecord?.mineLinkStatus) }}
          </span>
        </div>
      </div>
      <div 
        class="que-item" 
        v-for="(item, index) in queList" 
        :key="index"
      >
        <div class="que-details">
          <div class="que-field">
            <span class="que-value que-goafName">{{ item.goafName || '-' }}</span>
          </div>
          <div class="que-field">
            <span class="que-label">问题描述：</span>
            <span class="que-value">{{ item.queCon || '-' }}</span>
          </div>
          <div class="que-field time-field">
            <span class="que-label">时间：</span>
            <span class="que-value">{{ formatDate(item.startTime) || '-' }}</span>
            <span class="time-separator">-----</span>
            <span class="que-value">{{ formatDate(item.endTime) || '-' }}</span>
          </div>
          <div class="que-field">
            <span class="que-label">参数：</span>
            <span class="que-value">{{ (item.param || '-').replace(/,/g, ' ') }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 编辑/新增模式 -->
    <div v-else class="edit-container">
      <!-- 动态渲染topFormSchema字段（编辑/新增模式） -->
      <div class="mine-base-info">
        <div class="form-item" v-for="schema in topFormSchema" :key="schema.field">
          <div class="form-label">{{ schema.label }}：</div>
          <component 
            :is="getComponent(schema.component)"
            v-model:value="currentRecord[schema.field]" 
            :disabled="mode === 'edit' && schema.field === 'mineCode'" 
            v-bind="schema.componentProps"
            :placeholder="`请输入${schema.label}`"
            style="width: 100%"
          />
        </div>
      </div>

      <!-- 问题项编辑区 -->
      <div 
        class="que-item" 
        v-for="(item, index) in queList" 
        :key="item.orderNum || index"
      >
        <div class="que-index">问题 {{ index + 1 }}</div>
        <div class="edit-fields">
          <template v-for="schema in formSchema" :key="schema.field">
            <div class="form-item">
              <div class="form-label">{{ schema.label }}：</div>
              <component 
                :is="getComponent(schema.component)"
                v-model:value="item[schema.field]"
                v-bind="schema.componentProps"
                :placeholder="`请输入${schema.label}`"
                style="width: 100%"
              />
            </div>
          </template>
          <div class="form-actions">
            <a-button 
              type="text" 
              danger 
              @click="removeItem(index)"
              :disabled="queList.length <= 1"
            >
              删除
            </a-button>
          </div>
        </div>
      </div>

      <a-button 
        type="dashed" 
        class="add-btn"
        @click="addNewItem"
      >
        <plus-outlined /> 新增问题
      </a-button>
    </div>
  </BasicModal>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { formSchema, topFormSchema } from '../dataQuality.data';
import { Button as AButton, Select, Input, DatePicker } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import dayjs, { Dayjs } from 'dayjs';
// 请根据实际项目路径调整 MineCascader 引入路径
import MineCascader from '/@/components/Form/src/jeecg/components/MineCascader/MineCascader.vue';

// 组件映射表
const componentMap = {
  Input,
  DatePicker,
  Select,
  MineCascader
};

// 定义事件发射
const emit = defineEmits(['success']);

// 模态框模式：查看/编辑/新增
const mode = ref<'view' | 'edit' | 'add'>('view');
// 当前记录数据
const currentRecord = ref<any>({
  mineCode: '',
  mineLinkStatus: '0',
  queJson: [],
  isOk: false,
  updateTime: '',
  createTime: ''
});
// 问题列表
const queList = ref<any[]>([]);

// 根据组件名获取对应组件
const getComponent = (componentName: string) => {
  return componentMap[componentName as keyof typeof componentMap];
};

// 日期格式化方法
const formatDate = (date: string | Dayjs | null) => {
  if (!date) return '';
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
};

// 根据状态值获取显示文本（在线/离线）
const getStatusText = (status: string | number) => {
  return status === '1' || status === 1 ? '在线' : '离线';
};

// 根据状态值获取样式类
const getStatusClass = (status: string | number) => {
  return status === '1' || status === 1 ? 'status-online' : 'status-offline';
};

// 注册模态框并初始化数据
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  
  // 接收模式参数
  mode.value = data?.mode || 'view';
  // 初始化当前记录
  currentRecord.value = data?.record ? { ...data.record } : {
    mineCode: '',
    mineLinkStatus: '0',
    queJson: [],
    isOk: false,
    updateTime: '',
    createTime: ''
  };
  
  // 初始化问题列表
  if (mode.value === 'add') {
    // 新增模式：初始化一条空数据
    queList.value = [{
      orderNum: '1',
      goafName: '',
      queCon: '',
      startTime: null,
      endTime: null,
      param: ''
    }];
  } else {
    // 编辑/查看模式：解析已有问题数据
    try {
      const rawData = currentRecord.value?.queJson 
        ? (typeof currentRecord.value.queJson === 'string' 
          ? JSON.parse(currentRecord.value.queJson) 
          : currentRecord.value.queJson)
        : [];
      // 转换日期格式为dayjs对象（适配DatePicker）
      queList.value = rawData.map((item: any) => ({
        ...item,
        startTime: item.startTime ? dayjs(item.startTime) : null,
        endTime: item.endTime ? dayjs(item.endTime) : null
      }));
    } catch (error) {
      console.error('解析问题数据失败:', error);
      queList.value = [{
        orderNum: '1',
        goafName: '',
        queCon: '',
        startTime: null,
        endTime: null,
        param: ''
      }];
    }
  }
});

// 模态框标题计算属性
const getTitle = computed(() => {
  const titleMap = {
    view: '质量问题详情',
    edit: '编辑质量问题',
    add: '新增质量问题'
  };
  return titleMap[mode.value];
});

// 新增问题项
const addNewItem = () => {
  const newItem = {
    orderNum: (queList.value.length + 1).toString(),
    goafName: '',
    queCon: '',
    startTime: null,
    endTime: null,
    param: ''
  };
  queList.value.push(newItem);
};

// 删除问题项
const removeItem = (index: number) => {
  queList.value.splice(index, 1);
  queList.value.forEach((item, i) => {
    item.orderNum = (i + 1).toString();
  });
};

// 提交表单处理
async function handleSubmit() {
  try {
    setModalProps({ confirmLoading: true });
    // 1. 处理问题列表数据（空日期字段置空，避免空字符串）
    const submitQueList = queList.value.map((item) => ({
      ...item,
      startTime: item.startTime ? item.startTime.format('YYYY-MM-DD HH:mm:ss') : null,
      endTime: item.endTime ? item.endTime.format('YYYY-MM-DD HH:mm:ss') : null,
    }));
    // 2. 构造完整提交数据（修正 createTime/updateTime 逻辑）
    const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
    const result = {
      ...currentRecord.value,
      queJson: JSON.stringify(submitQueList),
      // 新增模式：创建时间=当前时间，状态=未解决；编辑模式：保留原有创建时间
      createTime: mode.value === 'add' ? now : (currentRecord.value.createTime || now),
      // 无论新增/编辑，更新时间都为当前时间
      updateTime: now,
      // 新增模式默认未解决，编辑模式保留原有状态
      isOk: mode.value === 'add' ? false : currentRecord.value.isOk,
    };
    console.log('最终提交数据：', result);
    emit('success', result);
    closeModal();
  } catch (error) {
    console.error('提交失败：', error);
  } finally {
    setModalProps({ confirmLoading: false });
  }
}
</script>

<style scoped>
.que-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.que-status {
  display: flex;
  width: 100%;
  background-color: #f8f9fc;
  padding: 8px 16px;
  align-items: center;
  border: 1px solid #cad2e0;
  border-radius: 5px;
}

.mine-info {
  padding: 12px 16px;
  border: 1px solid #cad2e0;
  border-radius: 5px;
  background-color: #f8f9fc;
}

.mine-field {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.status-dot {
  position: relative;
  padding-left: 12px;
  font-weight: 500;
}

.status-dot::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: inherit;
}

.status-online {
  color: #10952c;
  font-weight: 500;
}

.status-offline {
  color: #f5222d;
  font-weight: 500;
}

.status-online.status-dot::before {
  background-color: #10952c;
}

.status-offline.status-dot::before {
  background-color: #f5222d;
}

.que-item {
  padding: 8px 16px;
  border: 1px solid #cad2e0;
  border-radius: 8px;
  background-color: #f8f9fc;
}

.que-index {
  font-size: 16px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e8e8e8;
}

.que-details {
  width: 100%;
}

.que-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  margin-bottom: 10px;
}

.que-label {
  font-size: 16px;
  color: #868789;
  white-space: nowrap;
}

.que-value {
  font-size: 16px;
  color: #838486;
  word-break: break-all;
}

.que-goafName {
  color: #4c4c4e;
  font-size: 20px;
}

.time-field {
  flex: 1;
  min-width: 420px;
}

.time-separator {
  color: #999;
  margin: 0 8px;
}

.edit-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mine-base-info {
  padding: 12px 16px;
  border: 1px solid #cad2e0;
  border-radius: 5px;
  background-color: #f8f9fc;
}

.edit-fields {
  width: 100%;
}

.form-item {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.form-label {
  width: 20%;
  color: #666;
  font-size: 14px;
}

.add-btn {
  margin-top: 8px;
  width: 100%;
}

.form-actions {
  display: flex;
  justify-content: end;
  margin-bottom: 8px;
}
</style>