<script setup lang="ts">
import type { ExperimentInfo } from '../types'
import { getSearchCriteria, getRecordList } from '../api'
// import Report from '@/modules/market/my/components/Report.vue'

const route = useRoute()

let experimentInfo = $ref<ExperimentInfo>()
getSearchCriteria().then((res: { data: { experiment: ExperimentInfo } }) => {
  if (res?.data) {
    const data = res.data.experiment
    data.teacher_name = data.teacher.reduce((a: any, b: any) => a.push(b.name) && a, []).join(',')
    experimentInfo = data
  }
})

// 列表配置
const listOptions = computed(() => {
  return {
    remote: {
      httpRequest: getRecordList,
      params: { name: '', sno_number: '' },
    },
    filters: [
      { type: 'input', prop: 'name', placeholder: '请输入学生姓名' },
      { type: 'input', prop: 'sno_number', placeholder: '请输入学生学号' },
    ],
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '班级', prop: 'class_name' },
      { label: '学号', prop: 'sno_number' },
      { label: '学生姓名', prop: 'name' },
      {
        label: '营销背景分析',
        computed(row: any) {
          return isComplete(row.row.step_1.is_complete)
        },
      },
      {
        label: '营销渠道选择',
        computed(row: any) {
          return isComplete(row.row.step_2.is_complete)
        },
      },
      {
        label: '用户分析',
        computed(row: any) {
          return isComplete(row.row.step_3.is_complete)
        },
      },
      {
        label: '标签体系设计',
        computed(row: any) {
          return isComplete(row.row.step_4.is_complete)
        },
      },
      {
        label: '用户精准分群',
        computed(row: any) {
          return isComplete(row.row.step_5.is_complete)
        },
      },
      {
        label: '自动化营销旅程设计',
        computed(row: any) {
          return isComplete(row.row.step_6.is_complete)
        },
      },
      {
        label: '营销物料设计',
        computed(row: any) {
          return isComplete(row.row.step_7.is_complete)
        },
      },
      { label: '得分', prop: 'score' },
      { label: '操作', slots: 'table-x', width: 200 },
    ],
  }
})

function isComplete(is: boolean) {
  let n = ''
  is ? (n = '<div style="color: #009b3b; font-size:20px;">✓</div>') : (n = '<div style="font-size:20px;">-</div>')
  return n
}
</script>

<template>
  <AppCard>
    <el-form label-suffix=":" inline class="info">
      <el-form-item label="实验名称">{{ experimentInfo?.name }}</el-form-item>
      <el-form-item label="课程名称">{{ experimentInfo?.course_name }}</el-form-item>
      <el-form-item label="指导教师">{{ experimentInfo?.teacher_name }}</el-form-item>
      <el-form-item label="实验学时">{{ experimentInfo?.length }}</el-form-item>
    </el-form>
    <el-divider />
    <!-- <Report
      :experimentName="11"
      :teacherName="11"
      :studentName="11"
      ref="reportRef" /> -->
    <h2 class="h2-title">营销策划</h2>
    <AppList v-bind="listOptions">
      <template #table-x="{ row }">
        <!-- <el-button text type="primary">查看营销策划报告</el-button> -->
        <router-link
          target="_blank"
          :to="{
            path: '/market/review/view',
            query: {
              id: row.id,
              snoNumber: row.sno_number,
              experiment_id: route.query.experiment_id,
            },
          }"
          ><el-button text type="primary">查看营销策划报告</el-button></router-link
        >
        <router-link
          target="_blank"
          :to="{
            path: '/market/review/score',
            query: {
              id: row.id,
              name: row.name,
              snoNumber: row.sno_number,
              className: row.class_name,
              experiment_id: route.query.experiment_id,
            },
          }"
          ><el-button text type="primary">评分</el-button></router-link
        >
      </template>
    </AppList>
  </AppCard>
</template>

<style lang="scss" scoped>
.info {
  display: flex;
  justify-content: space-between;
}
</style>
