<script setup>
import { ref } from 'vue'
import { useGetImagesList } from '@/api/interview'
import { useCompanyStore } from '@/stores'
import { Delete } from '@element-plus/icons-vue'
import AddImageDialog from './components/AddImageDialog.vue'
import DeleteImageDialog from './components/DeleteImageDialog.vue'

const loading = ref(false)

const imageList = ref([])

const companyStore = useCompanyStore()

const getImagesList = async () => {
  loading.value = true
  const res = await useGetImagesList(companyStore.encoding)
  imageList.value = res.data.data
  loading.value = false
}

getImagesList()

const addImageDialog = ref()
const onAddEdit = () => {
  console.log('添加')
  addImageDialog.value.open()
}
const deleteImageDialog = ref()
const handleDelete = (row) => {
  // console.log(row.id)
  deleteImageDialog.value.openDialog(row)
}
</script>
<template>
  <page-container title="面试官形象管理">
    <template #extra>
      <el-button type="primary" @click="onAddEdit">添加面试官形象 </el-button>
    </template>
    <el-table v-loading="loading" :data="imageList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="200" />
      <el-table-column prop="picName" label="名称" width="200" />
      <el-table-column prop="image" label="形象图片" width="900">
        <template #default="{ row }">
          <el-popover
            :width="300"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px; width:450px; height:550px;"
          >
            <template #reference>
              <el-image :src="row.image" style="height: 100px; width: 100px" />
            </template>
            <el-image :src="row.image" style="height: 500px; width: 400px" />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button
            type="danger"
            :icon="Delete"
            @click="handleDelete(row)"
            circle
            plain
          ></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <AddImageDialog
      ref="addImageDialog"
      @getImagesList="getImagesList"
    ></AddImageDialog>
    <DeleteImageDialog ref="deleteImageDialog" @getImagesList="getImagesList">
    </DeleteImageDialog>
  </page-container>
</template>
