<script setup lang="ts">
import AppEditor from '@/components/base/AppEditor.vue'
import { getScore, updateScore } from '../api'
import { ElMessage } from 'element-plus'

const route = useRoute()

let data = $ref<any>([])
getScore({ record_id: route.query.id }).then((res) => {
  console.log(res.data, 'res.data')
  data = res.data.map((item: any) => {
    item.score = item.score === '' ? 0 : parseInt(item.score)
    return item
  })
})
// 列表配置
const listOptions = computed(() => {
  return {
    columns: [
      { type: 'index', width: 60 },
      { label: '', prop: 'name' },
      {
        label: '',
        prop: 'is_complete',
        computed(row: any) {
          return isComplete(row.row.is_complete)
        },
      },
      { label: '', prop: 'percent' },
      {
        label: '',
        prop: 'score',
        slots: 'table-input',
      },
      { slots: 'table-x', width: 200 },
    ],
    ['show-header']: false,
    border: true,
    data: data,
  }
})

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
}

const editorText = ref('')

const dialogVisible = ref(false)

const commentId = ref()
const handleComment = function (row: any) {
  commentId.value = row.id
  editorText.value = row.comment
  dialogVisible.value = true
}

const handleBtn = function () {
  const item = data.find((i: any) => i.id === commentId.value)
  item.comment = editorText.value
  editorText.value = ''
  dialogVisible.value = false
}

const handleSubmit = function () {
  updateScore({
    experiment_id: route.query.experiment_id,
    record_id: route.query.id,
    score: JSON.stringify(data),
  }).then(() => {
    ElMessage.success('保存成功')
  })
}
</script>

<template>
  <AppCard>
    <el-form label-suffix=":" inline class="info">
      <el-form-item label="姓名">{{ route.query.name }}</el-form-item>
      <el-form-item label="学号">{{ route.query.snoNumber }}</el-form-item>
      <el-form-item label="班级">{{ route.query.className }}</el-form-item>
    </el-form>
    <el-divider />
    <h2 class="h2-title">营销策划评分</h2>
    <AppList v-bind="listOptions" ref="appList">
      <template #table-input="{ row }">
        <el-input-number style="width: 150px; text-align: center" v-model="row.score" :min="0" :max="100" />
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" @click="handleComment(row)">评语</el-button>
      </template>
    </AppList>
    <div style="display: flex; justify-content: center">
      <el-button type="primary" @click="handleSubmit">保&nbsp;&nbsp;&nbsp;存</el-button>
    </div>
  </AppCard>
  <el-dialog v-model="dialogVisible" width="700px" title="评语">
    <AppEditor v-model="editorText"></AppEditor>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleBtn"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

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