<template>
  <el-dialog width="800px" :title="title" v-model="show" append-to-body>
    <el-divider direction="horizontal" content-position="left" style="margin-top: 10px">
      场地班型
    </el-divider>
    <el-table :data="tableList" border stripe size="small">
      <el-table-column type="index" width="50" />
      <el-table-column prop="typeName" label="班型名称" />
      <el-table-column prop="licenseType" label="驾照类型" />
      <el-table-column label="班型备注">
        <template #default="{ row }">
          <el-popover placement="top" width="500px" trigger="click">
            <template #reference>
              <el-button type="primary" style="padding: 0" text>点击查看</el-button>
            </template>
            <div v-dompurify-html="row.remark"></div>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <el-divider direction="horizontal" content-position="left">场地详细信息</el-divider>
    <div v-dompurify-html="detail" class="mb-20px"></div>
  </el-dialog>
</template>

<script setup name="DialogSchoolInfo">
import { getClassTypeList } from '@/api/school/class'
const title = ref('')
const show = ref(false)
const detail = ref('')

const tableList = ref([])
function open(info) {
  title.value = `【${info.schoolName}】详细信息`
  show.value = true
  detail.value = info.introduce || '该驾校暂未配置详细信息'

  getClassTypeList({ placeId: info.placeId, status: 0 }).then((data) => {
    tableList.value = data
  })
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped></style>
