<script setup>
import { useMapStore } from '@/stores/map'
import {
  getNameByValue,
  importType,
  requiredType,
  deliveryMode,
  deliveryTime,
  shippingTemplate,
  afterSalesPolicy,
} from '@/utils/dictionary'
import ScoreCard from './ScoreCard.vue'
import ScoreCardLive from './ScoreCardLive.vue'
import Preview from '@/components/Preview.vue'

const statusList = useMapStore().getMapValuesByKey('system_status')

const props = defineProps({
  detail: { type: Object, default: () => ({}) },
})

const scoreDetails = defineModel('scoreDetails', {
  required: true,
  default: () => ({}),
})

// 定义需要的所有 key 及其默认值
const requiredKeys = {
  commodity_type: { score: null, comment: '' },
  commodity_attr: { score: null, comment: '' },
  commodity: { score: null, comment: '' },
  speech: { score: null, comment: '' },
  practice_record1: { score: null, comment: '' },
  improvement_plan: { score: null, comment: '' },
  practice_record2: { score: null, comment: '' },
  report: { score: null, comment: '' },
}

// 确保所有必需的 key 都存在，如果不存在则初始化
watchEffect(() => {
  Object.keys(requiredKeys).forEach((key) => {
    if (!scoreDetails.value[key]) {
      scoreDetails.value[key] = { ...requiredKeys[key] }
    } else if (!scoreDetails.value[key].hasOwnProperty('score') || !scoreDetails.value[key].hasOwnProperty('comment')) {
      // 如果存在但结构不完整（缺少 score 或 comment），则合并默认值
      scoreDetails.value[key] = { ...requiredKeys[key], ...scoreDetails.value[key] }
    }
  })
})

defineEmits(['save'])

const firstLivePractice = computed(() => {
  return props.detail.live_data.practices[0]
})

const firstLivePracticeRecord = computed(() => {
  return firstLivePractice.value?.records[0]
})

const secondLivePractice = computed(() => {
  return props.detail.live_data.practices[1]
})

const secondLivePracticeRecord = computed(() => {
  return secondLivePractice.value?.records[0]
})

// 商品类别
const categoryTableOptions = {
  columns: [
    { label: '商品品类名称', prop: 'name', align: 'left' },
    {
      label: '层级',
      prop: 'level',
      computed({ row }) {
        return parseInt(row.level) + 1
      },
    },
    {
      label: '状态',
      prop: 'status',
      computed({ row }) {
        const color = row.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'
        return `<span style="color: ${color}">${getNameByValue(row.status, statusList)}</span>`
      },
    },
  ],
}

// 商品属性
const attrsTableOptions = {
  columns: [
    { label: '序号', type: 'index', width: 60 },
    { label: '商品属性名称', prop: 'name' },
    { label: '所属商品品类', prop: 'live_commodity_type_full_name' },
    {
      label: '重要性',
      prop: 'is_importance',
      computed({ row }) {
        return getNameByValue(row.is_importance, importType)
      },
    },
    {
      label: '必要性',
      prop: 'is_essential',
      computed({ row }) {
        return getNameByValue(row.is_essential, requiredType)
      },
    },
    {
      label: '状态',
      prop: 'status',
      computed({ row }) {
        const color = row.status === '1' ? 'var(--main-success-color)' : 'var(--main-color)'
        return `<span style="color: ${color}">${getNameByValue(row.status, statusList)}</span>`
      },
    },
    { label: '更新时间', prop: 'updated_time' },
  ],
}

// 商品管理
const productList = computed(() => {
  return props.detail.live_data?.commodities?.map((item) => {
    try {
      item.info = JSON.parse(item.info)
      item.info.delivery_mode_name = getNameByValue(item.info.delivery_mode, deliveryMode)
      item.info.delivery_time_name = getNameByValue(item.info.delivery_time, deliveryTime)
      item.info.shipping_template_name = getNameByValue(item.info.shipping_template, shippingTemplate)
      item.info.after_sales_policy_name = getNameByValue(item.info.after_sales_policy, afterSalesPolicy)
      item.live_commodity_attrs = JSON.parse(item.live_commodity_attrs)
      item.picture_34_addreses = JSON.parse(item.picture_34_addreses)
      item.picture_addreses = JSON.parse(item.picture_addreses)
    } catch (error) {
      console.log(error)
    }
    console.log(item)
    return item
  })
})
const productTableOptions = {
  columns: [
    {
      type: 'expand',
      slots: 'table-expand',
    },
    { label: '序号', type: 'index', width: 60 },
    { label: '商品标题', prop: 'title' },
    { label: '所属商品品类', prop: 'live_commodity_type_full_name' },
    { label: '参考价(¥)', prop: 'info.reference_price' },
    { label: '发货模式', prop: 'info.delivery_mode_name' },
    { label: '发货时效', prop: 'info.delivery_time_name' },
    { label: '运费模板', prop: 'info.shipping_template_name' },
    { label: '售后政策', prop: 'info.after_sales_policy_name' },
  ],
}
// 商品规格
const productSpecsTableOptions = {
  columns: [
    { label: '规格名称', prop: 'name' },
    {
      label: '规格值',
      prop: 'value',
      computed({ row }) {
        return row.values.join(' / ')
      },
    },
  ],
}
// 商品sku
const productSkuTableOptions = {
  columns: [
    {
      label: '规格',
      prop: 'name',
      computed({ row }) {
        return row.specs?.join(' / ')
      },
    },
    { label: '价格(¥)', prop: 'price' },
    { label: '库存', prop: 'stock' },
  ],
}

// 直播话术
const talkTableOptions = {
  columns: [
    { type: 'expand', slots: 'table-expand' },
    { label: '序号', type: 'index', width: 60 },
    { label: '直播话术名称', prop: 'name' },
    { label: '直播主题标题', prop: 'live_commodity_title' },
    {
      label: '话术时长',
      prop: 'duration',
      computed({ row }) {
        return `${row.duration}分钟`
      },
    },
    { label: '所属直播主题品类', prop: 'live_commodity_type_full_name' },
  ],
}
const activeTab = ref(1)

const handleNext = () => {
  activeTab.value++
}
</script>
<template>
  <el-tabs stretch v-model="activeTab" class="score-tabs">
    <el-tab-pane label="商品品类管理" :name="1">
      <ScoreCard
        :maxScore="5"
        v-model:score="scoreDetails.commodity_type.score"
        v-model:comment="scoreDetails.commodity_type.comment"
        @save="$emit('save')"
        @next="handleNext">
        <AppList
          v-bind="categoryTableOptions"
          row-key="id"
          :data="detail.live_data.commodity_types"
          default-expand-all />
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="商品属性管理" :name="2" lazy>
      <ScoreCard
        :maxScore="5"
        v-model:score="scoreDetails.commodity_attr.score"
        v-model:comment="scoreDetails.commodity_attr.comment"
        @save="$emit('save')"
        @next="handleNext">
        <AppList v-bind="attrsTableOptions" :data="detail.live_data.commodity_attrs" />
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="商品管理" :name="3" lazy>
      <ScoreCard
        :maxScore="15"
        v-model:score="scoreDetails.commodity.score"
        v-model:comment="scoreDetails.commodity.comment"
        @save="$emit('save')"
        @next="handleNext">
        <AppList v-bind="productTableOptions" :data="productList" default-expand-all>
          <template #table-expand="{ row }">
            <div class="table-expand-box">
              <el-form label-position="top">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="主图">
                      <el-image
                        :src="item.url"
                        v-for="item in row.picture_addreses"
                        :key="item.url"
                        fit="cover"
                        preview-teleported
                        :preview-src-list="row.picture_addreses.map((item) => item.url)"
                        style="width: 100px; height: 100px; margin-right: 10px"></el-image>
                    </el-form-item>
                    <el-form-item label="主图3:4">
                      <el-image
                        :src="item.url"
                        v-for="item in row.picture_34_addreses"
                        :key="item.url"
                        fit="cover"
                        preview-teleported
                        :preview-src-list="row.picture_addreses.map((item) => item.url)"
                        style="width: 100px; height: 134px; margin-right: 10px"></el-image>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="主图视频">
                      <video
                        :src="row.video_url"
                        controls
                        style="width: 100%; height: 282px"
                        v-if="row.video_url"></video>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="商品规格">
                  <AppList v-bind="productSpecsTableOptions" :data="row.info?.specs" style="width: 100%"></AppList>
                </el-form-item>
                <el-form-item label="价格与库存">
                  <AppList v-bind="productSkuTableOptions" :data="row.info?.sku" style="width: 100%"></AppList>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </AppList>
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="直播话术管理" :name="4" lazy>
      <ScoreCard
        :maxScore="15"
        v-model:score="scoreDetails.speech.score"
        v-model:comment="scoreDetails.speech.comment"
        @save="$emit('save')"
        @next="handleNext">
        <AppList v-bind="talkTableOptions" :data="detail.live_data.speeches" default-expand-all>
          <template #table-expand="{ row }">
            <div class="table-expand-box">
              <el-form label-position="top">
                <el-form-item label="直播主题卖点">
                  <div class="form-box" v-html="row.selling_point"></div>
                </el-form-item>
                <el-form-item label="营销活动">
                  <div class="form-box" v-html="row.marketing_campaign"></div>
                </el-form-item>
                <el-form-item label="直播话术内容">
                  <div class="form-box" v-html="row.content"></div>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </AppList>
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="首次直播演练" :name="5" lazy>
      <ScoreCard
        :maxScore="20"
        v-model:score="scoreDetails.practice_record1.score"
        v-model:comment="scoreDetails.practice_record1.comment"
        @save="$emit('save')"
        @next="handleNext">
        <ScoreCardLive
          :livePracticeId="firstLivePractice.id"
          :recordId="firstLivePracticeRecord.id"
          v-if="firstLivePracticeRecord" />
        <el-empty v-else />
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="直播复盘分析" :name="6" lazy>
      <ScoreCard
        :maxScore="10"
        v-model:score="scoreDetails.improvement_plan.score"
        v-model:comment="scoreDetails.improvement_plan.comment"
        @save="$emit('save')"
        @next="handleNext">
        <el-form label-position="top" v-if="firstLivePracticeRecord?.improvement_plan">
          <el-form-item label="改进方案">
            <div class="form-box" v-html="firstLivePracticeRecord?.improvement_plan"></div>
          </el-form-item>
        </el-form>
        <el-empty v-else />
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="二次直播演练" :name="7" lazy>
      <ScoreCard
        :maxScore="15"
        v-model:score="scoreDetails.practice_record2.score"
        v-model:comment="scoreDetails.practice_record2.comment"
        @save="$emit('save')"
        @next="handleNext">
        <ScoreCardLive
          :livePracticeId="secondLivePractice.id"
          :recordId="secondLivePracticeRecord.id"
          v-if="secondLivePracticeRecord" />
        <el-empty v-else />
      </ScoreCard>
    </el-tab-pane>
    <el-tab-pane label="直播总结汇报" :name="8" lazy>
      <ScoreCard
        :maxScore="15"
        :hasNextButton="false"
        v-model:score="scoreDetails.report.score"
        v-model:comment="scoreDetails.report.comment"
        @save="$emit('save')"
        @next="handleNext">
        <template v-if="detail.live_data.reports.length > 0">
          <div v-for="item in detail.live_data.reports" :key="item.report_url" style="height: 600px">
            <Preview :url="item.report_url" />
          </div>
        </template>
        <el-empty v-else />
      </ScoreCard>
    </el-tab-pane>
  </el-tabs>
</template>

<style lang="scss" scoped>
.score-tabs {
  :deep(.el-tabs__header) {
    width: 1000px;
    margin: 0 auto 20px;
  }
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
}
.score-header {
  display: flex;
  align-items: center;
  .el-form {
    flex: 1;
  }
}
.score-box {
  width: 100px;
  border: 1px solid #dcdfe6;
  padding: 10px;
  border-radius: 10px;
  font-size: 30px;
  color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-expand-box {
  border: 1px solid #dcdfe6;
  padding: 20px;
  border-radius: 10px;
}
.form-box {
  width: 100%;
  border: 1px solid #dcdfe6;
  padding: 10px;
  border-radius: 6px;
}
</style>
