<script setup lang="ts">
  import { ref, watch, computed } from 'vue';

  const props = defineProps({
    detail: {
      type: Object,
      default: () => {
        return {
          id: 0,
          name: '',
          mode: '',
          date: '',
          avatar: '',
        };
      },
    },
  });

  const emit = defineEmits(['update:date', 'update:mode']);

  const activeModal = ref(-1);
  const initialDate = ref('--');
  const date = ref('--');
  const showDate = ref(false);

  const dateValues = ref<any[]>([`${new Date().getFullYear()}`, `${new Date().getMonth() + 1 < 10 ? `0${new Date().getMonth() + 1}` : new Date().getMonth() + 1}`, `${new Date().getDate()}`]);

  const minDate = new Date(new Date().getFullYear() - 120, 0, 1);
  const maxDate = (() => {
    const d = new Date();
    d.setDate(1);
    d.setMonth(d.getMonth() + 1);
    d.setDate(Math.min(new Date().getDate(), new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate()));
    d.setHours(0, 0, 0, 0);
    return d;
  })();

  // 模式文本映射
  const getModalText = (mode: number) => {
    if (mode === 1) return '减肥型';
    if (mode === 2) return '其他型';
    return '--';
  };

  const modalText = ref('未选择');
  let hasUserChangedMode = false;
  let hasUserChangedDate = false;
  const showChange = ref(false);
  const showModalText = ref('');

  // 切换模式
  const changeModal = (type) => {
    activeModal.value = type;
    modalText.value = getModalText(type);
    hasUserChangedMode = true;
    maybeEmitMode();
    showModal.value = false;
  };

  let initialModeValue = '';
  let initialDateValue = '';

  // 监听详情赋值
  watch(
    () => props.detail,
    (newDetail) => {
      if (!newDetail) return;

      // 优先级：log.id 存在则用 log.model，否则用外层 model
      let realModel = 0;
      if (newDetail.log && newDetail.log.id > 0) {
        realModel = newDetail.log.model ?? 0;
      } else {
        realModel = newDetail.model ?? 0;
      }

      activeModal.value = realModel;
      modalText.value = getModalText(realModel);
      initialModeValue = modalText.value;

      // 同步日期
      const startDate = newDetail.log?.start_date_str || '--';
      date.value = startDate;
      initialDateValue = startDate;

      if (startDate !== '--') {
        const [year, month, day] = startDate.split('-').map(Number);
        dateValues.value = [String(year), String(month).padStart(2, '0'), String(day).padStart(2, '0')];
      }
    },
    { immediate: true, deep: true },
  );

  // 条件 emit
  const maybeEmitMode = () => {
    if (modalText.value !== initialModeValue) {
      emit('update:mode', modalText.value, date.value);
    }
  };

  const maybeEmitDate = () => {
    if (date.value !== initialDateValue) {
      emit('update:date', date.value, modalText.value);
    }
  };

  const toShowDate = () => {};

  // 日期选择确认
  const onConfirm = ({ selectedValues }) => {
    date.value = `${selectedValues[0]}-${selectedValues[1]}-${selectedValues[2]}`;
    showDate.value = false;
    hasUserChangedDate = true;
    maybeEmitDate();
  };

  const showModal = ref(false);

  // 已执行天数
  const executedDays = computed(() => {
    const startDateStr = props.detail?.log?.start_date_str;
    if (!startDateStr || startDateStr === '--') return 0;

    const startDate = new Date(startDateStr);
    const today = new Date();
    startDate.setHours(0, 0, 0, 0);
    today.setHours(0, 0, 0, 0);

    const diffTime = today.getTime() - startDate.getTime();
    const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
    return Math.max(0, diffDays);
  });
</script>

<template>
  <div class="menu-setting-top" @click="showModal = false">
    <div class="menu-setting-card">
      <img class="menu-setting-card-bg" src="https://images.health.ufutx.com/202511/18/fb38114f13f3065021c3bd6843d06989.png" alt="" />
      <div class="menu-setting-message-box">
        <img :src="detail.avatar || 'https://image.fulllinkai.com/202203/09/cc1c73eb1a4941fef25a15cd1ff2f9df.png'" alt="" class="menu-setting-message-avatar" />
        <div class="menu-setting-message-name text-center">{{ detail.name || '未知用户' }}</div>
        <div class="menu-setting-message-sub">ID· {{ 52330000 + detail.id }}</div>
      </div>

      <div class="menu-setting-message-list">
        <div class="menu-setting-message-item" @click.stop="showModal = !showModal">
          <div>当前模式</div>
          <div class="menu-setting-message-item-right">
            <div>{{ modalText }}</div>
            <svg class="menu-setting-message-item-r-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none">
              <path d="M12 2L7 7L2 2" stroke="#66676C" stroke-width="1.5" stroke-linecap="round" />
            </svg>
          </div>

          <div v-if="showModal" class="menu-setting-message-modal" @click.stop>
            <div class="menu-setting-message-m-item" :class="{ 'menu-setting-message-m-i-active': activeModal === 1 }" @click.stop="changeModal(1)">
              <div class="menu-setting-message-m-i-title">
                <div>减肥型</div>
                <svg v-if="activeModal === 1" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M5.2998 12L9.16254 15.8627L16.5498 8.47547" stroke="#18CA6E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </div>
              <div class="menu-setting-message-m-i-sub">适用减脂需求，强化热量缺口与代谢调节</div>
              <div v-if="activeModal === 1" class="menu-setting-message-m-i-default">当前选中</div>
            </div>

            <div class="menu-setting-message-m-item" :class="{ 'menu-setting-message-m-i-active': activeModal === 2 }" @click.stop="changeModal(2)">
              <div class="menu-setting-message-m-i-title">
                <div>其他型</div>
                <svg v-if="activeModal === 2" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M5.2998 12L9.16254 15.8627L16.5498 8.47547" stroke="#18CA6E" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
              </div>
              <div class="menu-setting-message-m-i-sub">按照特殊规则在一定范围内生成</div>
              <div v-if="activeModal === 2" class="menu-setting-message-m-i-default">当前选中</div>
            </div>
          </div>
        </div>

        <div class="menu-setting-message-item">
          <div>方案周期</div>
          <div class="menu-setting-message-i-two">共49天 已执行{{ executedDays }}天</div>
        </div>

        <div class="menu-setting-message-item" @click="showDate = true">
          <div>开始时间</div>
          <div class="menu-setting-message-item-right" @click="toShowDate">
            <div>{{ date }}</div>
            <svg class="menu-setting-message-item-r-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9" fill="none">
              <path d="M12 2L7 7L2 2" stroke="#66676C" stroke-width="1.5" stroke-linecap="round" />
            </svg>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model:show="showDate" round position="bottom" :duration="0.5">
      <van-date-picker v-model="dateValues" title="选择日期" :min-date="minDate" :max-date="maxDate" @cancel="showDate = false" @confirm="onConfirm" />
    </van-popup>
  </div>
</template>

<style scoped lang="scss">
  .menu-setting-top {
    border-radius: 0 0 16px 16px;
    background: #fff;
  }
  .menu-setting-card {
    position: relative;
    margin: 51px 10px 0;
    z-index: 10;
    flex-shrink: 0;
    .menu-setting-card-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
  }
  .menu-setting-message-box {
    padding: 40px 6px 0;
  }
  .menu-setting-message-avatar {
    position: absolute;
    left: 50%;
    top: -30px;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 2px solid #fff;
  }
  .menu-setting-message-name {
    margin-top: 10px;
    margin-bottom: 3px;
    color: #0e0e0e;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
  .menu-setting-message-sub {
    margin-bottom: 20px;
    color: #66676c;
    text-align: center;
    font-size: 12px;
  }
  .menu-setting-message-list {
    padding: 10px 16px 16px;
    .menu-setting-message-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      color: #0e0e0e;
      font-size: 14px;
      border-bottom: 1px solid #f2f2f2;
      .menu-setting-message-item-right {
        display: flex;
        align-items: center;
        .menu-setting-message-item-r-icon {
          margin-left: 10px;
        }
      }
      .menu-setting-message-i-two {
        color: #18ca6e;
        font-weight: bold;
      }
      .menu-setting-message-modal {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        width: 311px;
        padding: 16px;
        flex-direction: column;
        gap: 16px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.25);
        z-index: 1;
        .menu-setting-message-m-item {
          display: flex;
          padding: 16px;
          flex-direction: column;
          gap: 6px;
          border-radius: 10px;
          background: #f8f8f8;
          .menu-setting-message-m-i-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
          }
          .menu-setting-message-m-i-sub {
            color: #66676c;
            font-size: 14px;
          }
          .menu-setting-message-m-i-default {
            padding: 3px 6px;
            color: #18ca6e;
            font-size: 14px;
            border-radius: 6px;
            background: #e8faf1;
          }
        }
        .menu-setting-message-m-i-active {
          background: #fff;
          border: 0.3px solid #18ca6e;
        }
      }
    }
    .menu-setting-message-item:nth-child(1) {
      padding-top: 0;
    }
    .menu-setting-message-item:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
</style>
