<script setup lang="ts">
import type { SystemItemModel } from '@/model/care.model';
import { getConditioningSchemeDetailMethod } from '@/request/api/care.api';
import VxeUI from 'vxe-table';
import { computed } from 'vue';
const props = defineProps<{
  data: SystemItemModel;
}>();
onMounted(async () => {
  try {
    const res = await getConditioningSchemeDetailMethod(props.data);
    Object.assign(props.data, res);
  } catch (error) {
    console.error('获取项目详情失败:', error);
  }
});
function handleVideoPreview() {
  const videoUrl = props.data.itemVideoFirst;
  if (videoUrl) {
    // 创建一个模态框来预览视频
    VxeUI.modal.open({
      title: '视频预览',
      width: 800,
      height: 600,
      escClosable: true,
      destroyOnClose: true,
      slots: {
        default() {
          return h(
            'div',
            {
              style: {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                height: '100%',
              },
            },
            [
              h('video', {
                src: videoUrl,
                controls: true,
                style: {
                  maxWidth: '100%',
                  maxHeight: '100%',
                  borderRadius: '8px',
                },
              }),
            ]
          );
        },
      },
    });
  }
}

const projectApplication = computed(() => {
  const isWrap = props.data.isForWrap === 'Y';
  const isInfer = props.data.isForInfer === 'Y';
  if (isWrap && isInfer) return '服务包项目;调理方案项目';
  if (isWrap) return '服务包项目';
  if (isInfer) return '调理方案项目';
  return '';
});

const hasAnyDerivation = computed(() => {
  const rule = props.data.cpPatientMatchRule;
  if (!rule) return false;
  return Boolean(
    rule.sex ||
      rule.age ||
      (rule.diagnoseDiseaseNames && rule.diagnoseDiseaseNames.length > 0) ||
      (rule.diagnoseSyndromeNames && rule.diagnoseSyndromeNames.length > 0) ||
      (rule.constitutionGroupNames && rule.constitutionGroupNames.length > 0) ||
      (rule.willillStateNames && rule.willillStateNames.length > 0) ||
      (rule.tabooCrowds && rule.tabooCrowds.length > 0)
  );
});

// 商品类型显示文本
const sellTypeText = computed(() => {
  const sellType = (props.data as any).sellType;
  if (sellType === '1') return '实体商品';
  if (sellType === '2') return '线下服务';
  if (sellType === '3') return '线上权益';
  return '';
});

// 建议频率显示文本
const suggestedFrequencyText = computed(() => {
  const frequencyType = (props.data as any).frequencyType; // 天数
  const frequencyMeasure = (props.data as any).frequencyMeasure; // 次数/用量
  const convertUnit = props.data?.cpFixedPricingRule?.convertUnit; // 单位
  const pricingType = props.data?.pricingType;
  
  if (!frequencyType || !frequencyMeasure) return '';
  
  // 如果是一口价模式，使用 convertUnit；如果是按穴位模式，默认使用"次"
  const unit = pricingType === '0' && convertUnit ? convertUnit : (pricingType === '1' ? '次' : '次');
  
  return `每 ${frequencyType} 天 ${frequencyMeasure} ${unit}`;
});
</script>

<template>
  <div class="service-detail">
    <div class="detail-item">
      <div class="label">项目名称：</div>
      <div class="content">{{ data.name }}</div>
    </div>
    <div class="detail-item">
      <div class="label">方案类型：</div>
      <div class="content">{{ data.conditioningProgramType }}</div>
    </div>
    <div class="detail-item" v-if="data?.isForWrap || data?.isForInfer">
      <div class="label">项目应用：</div>
      <div class="content">{{ projectApplication }}</div>
    </div>
    <div class="detail-item" v-if="sellTypeText">
      <div class="label">商品类型：</div>
      <div class="content">{{ sellTypeText }}</div>
    </div>
    <div class="detail-item">
      <div class="label">计价规则：</div>
      <div class="content">{{ data.pricingType === '0' ? '一口价' : '按穴位/脉络/部位计价' }}</div>
    </div>

    <div class="flex" v-if="data?.pricingType === '0'">
      <div class="detail-item mr-10">
        <div class="label">单价：</div>
        <div class="content">{{ data?.cpFixedPricingRule?.unitPrice }}元</div>
      </div>
      <div class="detail-item">
        <div class="label">计价单位：</div>
        <div class="flex">
          <div class="content mr-10">{{ data?.cpFixedPricingRule?.pricingUnit }}</div>
          <div class="content">
            相当于 {{ data?.cpFixedPricingRule?.convertDose }} {{ data?.cpFixedPricingRule?.convertUnit ? data?.cpFixedPricingRule?.convertUnit : '次' }}（使用单位）
          </div>
        </div>
      </div>
    </div>
    <div class="flex" v-if="data?.pricingType === '1'">
      <div class="detail-item">
        <div class="label">计价说明：</div>
        <div class="content font-extrabold">
          {{
            data?.pricingType === '1'
              ? `当"穴位/经络/部位 ≤${data?.cpDynamicPricingRule ? data?.cpDynamicPricingRule[1]?.max || 0 : 0}个时，
          ${data?.cpDynamicPricingRule ? data?.cpDynamicPricingRule[0]?.priceType === 0 ? '单价' : '一口价' : 0}为${data?.cpDynamicPricingRule ? data?.cpDynamicPricingRule[0]?.price || 0 : 0}元，
          当"穴位/经络/部位 ＞${data?.cpDynamicPricingRule ? data?.cpDynamicPricingRule[1]?.max || 0 : 0}个时，
          ${data?.cpDynamicPricingRule ? data?.cpDynamicPricingRule[1]?.priceType === 0 ? '单价' : '一口价' : 0}为${data?.cpDynamicPricingRule ? data?.cpDynamicPricingRule[1]?.price || 0 : 0}元`
              : ''
          }}
        </div>
      </div>
    </div>
    <div class="detail-item" v-if="suggestedFrequencyText">
      <div class="label">建议频率：</div>
      <div class="content">{{ suggestedFrequencyText }}</div>
    </div>
    <div class="detail-item" v-if="(data as any)?.offlineDuration">
      <div class="label">服务所需时间：</div>
      <div class="content">{{ (data as any).offlineDuration }} 分钟</div>
    </div>
    <div class="detail-item" v-if="data?.cpMedicines?.length > 0 && data?.cpMedicines[0]?.name">
      <div class="label">组成：</div>
      <div class="content" v-for="item in data?.cpMedicines" :key="item.id">{{ item.name }} {{ item.dosage ? `${item.dosage}g` : '' }};</div>
    </div>
    <div class="detail-item" v-if="data?.attrFirst">
      <div class="label">特色：</div>
      <div class="content font-extrabold">{{ data?.attrFirst }}</div>
    </div>
    <div class="detail-item" v-if="data?.attrSecond">
      <div class="label">功效：</div>
      <div class="content font-extrabold">{{ data?.attrSecond }}</div>
    </div>
    <div class="detail-item" v-if="data?.attrThird">
      <div class="label">制法：</div>
      <div class="content font-extrabold">{{ data?.attrThird }}</div>
    </div>
    <div class="detail-item" v-if="data?.attrFourth">
      <div class="label">用法：</div>
      <div class="content font-extrabold">{{ data?.attrFourth }}</div>
    </div>
    <div class="detail-item" v-if="data?.attrFifth">
      <div class="label">操作方法：</div>
      <div class="content font-extrabold">{{ data?.attrFifth }}</div>
    </div>
    <div class="detail-item" v-if="data?.itemImgFirst">
      <div class="label">操作图片：</div>
      <div class="content">
        <a-image :width="100" :height="100" :src="data?.itemImgFirst" class="service-image" />
      </div>
    </div>
    <div class="detail-item" v-if="data?.photo">
      <div class="label">商品图片：</div>
      <div class="content">
        <a-image :width="100" :height="100" :src="data?.photo" class="service-image" />
      </div>
    </div>
    <div class="detail-item" v-if="data?.itemVideoFirst">
      <div class="label">操作视频：</div>
      <div class="video-preview-container">
        <div class="video-thumbnail">
          <video :src="data.itemVideoFirst" preload="metadata" class="video-preview" />
          <div class="video-overlay">
            <a-button type="primary" size="small" @click.stop="handleVideoPreview()"> 预览 </a-button>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-item" v-if="data?.attrSixth">
      <div class="label">疗程说明：</div>
      <div class="content font-extrabold">{{ data?.attrSixth }}</div>
    </div>
    <div class="detail-item" v-if="data?.attrSeventh">
      <div class="label">使用注意：</div>
      <div class="content font-extrabold">{{ data?.attrSeventh }}</div>
    </div>
    <div class="detail-item" v-if="hasAnyDerivation">
      <div class="label">推导逻辑：</div>
      <div style="cursor: pointer">
        <div class="derivation-container">
          <div v-if="data.cpPatientMatchRule.sex" class="derivation-item">
            <span class="derivation-label">性别限制：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.sex }}</span>
          </div>
          <div v-if="data.cpPatientMatchRule.age" class="derivation-item">
            <span class="derivation-label">年龄限制：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.age }}</span>
          </div>
          <div v-if="data.cpPatientMatchRule.diagnoseDiseaseNames && data.cpPatientMatchRule.diagnoseDiseaseNames.length > 0" class="derivation-item">
            <span class="derivation-label">专病：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.diagnoseDiseaseNames.join('、') }}</span>
          </div>
          <div v-if="data.cpPatientMatchRule.diagnoseSyndromeNames && data.cpPatientMatchRule.diagnoseSyndromeNames.length > 0" class="derivation-item">
            <span class="derivation-label">证型：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.diagnoseSyndromeNames.join('、') }}</span>
          </div>
          <div v-if="data.cpPatientMatchRule.constitutionGroupNames && data.cpPatientMatchRule.constitutionGroupNames.length > 0" class="derivation-item">
            <span class="derivation-label">体质：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.constitutionGroupNames.join('、') }}</span>
          </div>
          <div v-if="data.cpPatientMatchRule.willillStateNames && data.cpPatientMatchRule.willillStateNames.length > 0" class="derivation-item">
            <span class="derivation-label">欲病状态：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.willillStateNames.join('、') }}</span>
          </div>
          <div v-if="data.cpPatientMatchRule.tabooCrowds && data.cpPatientMatchRule.tabooCrowds.length > 0" class="derivation-item">
            <span class="derivation-label">禁忌人群：</span>
            <span class="derivation-content">{{ data.cpPatientMatchRule.tabooCrowds.join('、') }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="detail-item" v-if="data?.attrEighth"> 
      <div class="label">购买链接：</div>
      <div class="content">{{ data?.attrEighth }}</div>
    </div>
    <div class="detail-item" v-if="data?.attrNinth">
      <div class="label">跳转类型：</div>
      <div class="content">{{ data?.attrNinth }}</div>
    </div>
    <div class="detail-item" v-if="data?.institutionName">
      <div class="label">机构名称：</div>
      <div class="content">{{ data?.institutionName }}</div>
    </div>
    <div class="detail-item" v-if="data?.conditioningProgramSupplierName">
      <div class="label">供应商：</div>
      <div class="content">{{ data?.conditioningProgramSupplierName }}</div>
    </div>
    <div class="detail-item" v-if="data?.isDelivery === 'Y' || data?.isDelivery === 'N'">
      <div class="label">配送：</div>
      <div class="content">{{ data?.isDelivery === 'Y' ? '支持' : '不支持' }}</div>
    </div>
    <div class="detail-item" v-if="data?.addType === 'itemsList'">
      <div class="label">启用状态：</div>
      <div class="content">{{ data?.status === '0' ? '启用' : '停用' }}</div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.service-detail {
  padding: 20px;
  color: black;
  .detail-item {
    display: flex;
    margin-bottom: 20px;

    .label {
      //   width: 80px;
      margin-right: 10px;
    }

    .content {
      //   flex: 1;

      .service-image {
        max-width: 200px;
        height: auto;
      }
    }
  }
}
.derivation-label {
  font-weight: 500;
  color: #222;
  margin-right: 8px;
  white-space: nowrap;
  font-size: 13px;
}
.derivation-item {
  display: flex;
  align-items: center;
  min-width: 200px;
  max-width: 300px;
  padding: 6px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
}
.derivation-content {
  color: #555;
  font-size: 13px;
  flex: 1;
  word-break: break-all;
}
.derivation-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}
.video-preview-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // width: 100%;
  width: 120px;
  height: 100%;
  padding: 10px;
  background: #fafafa;
  border-radius: 8px;
}

.video-thumbnail {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.video-thumbnail .video-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-preview-container:hover .video-overlay {
  opacity: 1;
}

.video-overlay .ant-btn {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: #333;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  min-width: 40px;
  height: 28px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.video-overlay .ant-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.05);
}

.video-overlay .ant-btn-danger {
  background: rgba(255, 77, 79, 0.95);
  color: #fff;
}

.video-overlay .ant-btn-danger:hover {
  background: rgba(255, 77, 79, 1);
}

.video-info {
  text-align: center;
  font-size: 11px;
  color: #666;
}

.video-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 2px;
}

.video-size {
  color: #999;
  font-size: 10px;
}
</style>
