<script setup>
import AppList from '@/components/base/AppList.vue'
import { getExperimentScoreDetail } from '../api'
import { gradeRule } from '@/utils/dictionary'
import Preview from '@/components/Preview.vue'
import { useAppConfig } from '@/composables/useAppConfig'
const appConfig = useAppConfig()

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

let datalist = $ref([])

function fetchInfo() {
  getExperimentScoreDetail({
    experiment_id: props.data.id,
    type: props.row.type,
  }).then((res) => {
    datalist = res.data
  })
}
watchEffect(() => {
  fetchInfo()
})

const title = computed(() => {
  return '查看' + gradeRule[props.row.type]
})

// 列表配置
const listOptions = computed(() => {
  let columns = []
  switch (props.row.type) {
    case 6:
      // 用户标签
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '标签名称', prop: 'tag_name' },
        { label: '操作', prop: 'status', slots: 'table-x' },
      ]
      break
    case 7:
      // 用户群组
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '群组名称', prop: 'group_name' },
        { label: '操作', prop: 'status', slots: 'table-x' },
      ]
      break
    case 9:
      // 营销资料
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '资料名称', prop: 'material_name' },
        {
          label: '资料类型',
          prop: 'type_name',
          computed() {
            return '文本'
          },
        },
        { label: '评语', prop: 'comment' },
        { label: '操作', prop: 'status', slots: 'table-x' },
      ]
      break
    case 12:
      // 事件数据
      columns = [
        { label: '序号', type: 'index', width: 60 },
        { label: '事件名称', prop: 'event_name' },
        { label: '操作', prop: 'status', slots: 'table-x' },
      ]
      break
    default:
      break
  }
  return {
    columns,
    data: datalist,
  }
})

function getOperationUrl(row) {
  const type = props.row.type
  const dmlURL = appConfig.dmlURL || import.meta.env.VITE_DML_URL
  if (type === 6) {
    // 用户标签
    return `${dmlURL}/label?experiment_id=${props.data.id}&student_id=${props.data.student.id}&id=${row.tag_id}&name=${row.tag_name}`
  } else if (type === 7) {
    // 用户群组
    return `${dmlURL}/group?experiment_id=${props.data.id}&student_id=${props.data.student.id}&id=${row.group_id}&name=${row.group_name}`
  } else if (type === 9) {
    // 营销资料
    return `${dmlURL}/material?experiment_id=${props.data.id}&student_id=${props.data.student.id}&id=${row.material_id}&name=${row.material_name}`
  } else if (type === 12) {
    const url = row.file.url
    // 事件数据
    return ['pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(url)
      ? `https://view.officeapps.live.com/op/view.aspx?src=${url}`
      : url
  }
}
</script>

<template>
  <el-dialog :title="title" width="800px">
    <template v-if="row.type === 11">
      <Preview v-for="(item, index) in datalist" :key="index" :url="item.file.url"></Preview>
    </template>
    <AppList v-bind="listOptions" ref="appList" v-else>
      <template #table-x="{ row }">
        <el-button type="primary" link>
          <a :href="getOperationUrl(row)" target="_blank">查看</a>
        </el-button>
      </template>
    </AppList>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
