<script setup lang="ts">
import AddVideoDialog from '../stepTwoComponents/AddVideoDialog.vue'
const emit = defineEmits<Emits>()

const dataList: any = ref([])
const isShowAddDialog = ref(false)
interface Emits {
  (e: 'information', dataList: any): void
}
const props = defineProps({
  data: {
    type: Array,
    required: true
  },
  id: {
    type: String
  }
})
watch(
  () => props.data,
  value => {
    if (value?.length > 0) {
      dataList.value = [...props.data]
    } else {
      dataList.value = []
    }
  },
  { immediate: true }
)
watch(
  () => dataList.value,
  value => {
    if (value?.length > 0) {
      emit('information', dataList.value)
    }
  }
)

const handleAddData = () => {
  isShowAddDialog.value = true
}
const handleAdd = (val: any) => {
  dataList.value.push({ id: val.id, name: val.name, can_download: val.can_download, url: val.url, type: val.type })
  emit('information', dataList.value)
}
const listOptions = $computed(() => {
  return {
    columns: [
      { label: '资料名称', prop: 'name', slots: 'table-name' },
      { label: '操作', slots: 'table-operate', align: 'center', width: 200, fixed: 'right' }
    ],
    data: dataList.value.length > 0 ? dataList.value : []
  }
})
const handleDetail = (row: any) => {
  window.open(row.url)
}
const handleDel = (row: any) => {
  const index = dataList.value.findIndex((item: any) => item.id === row.id)
  dataList.value.splice(index, 1)
  emit('information', dataList.value)
}
const imgUrl = (val: any) => {
  if (val.type === 'zip') {
    return '/center_resource/zip_img.png'
  } else if (val.type === 'pdf') {
    return '/center_resource/pdf_img.png'
  } else if (val.type === 'png' || val.type === 'jpeg' || val.type === 'jpg') {
    return '/center_resource/jpg_img.png'
  } else if (val.type === 'xls' || val.type === 'xlsx') {
    return '/center_resource/xls_img.png'
  } else if (val.type === 'docx' || val.type === 'doc') {
    return '/center_resource/docx_img.png'
  } else if (val.type === 'mp4') {
    return '/center_resource/mp4_img.png'
  } else if (val.type === 'mp3') {
    return '/center_resource/mp3_img.png'
  } else if (val.type === 'rar') {
    return '/center_resource/rar_img.png'
  } else if (val.type === 'pptx' || val.type === 'ppt') {
    return '/center_resource/pptx_img.png'
  }
}
</script>

<template>
  <div>
    <el-button type="primary" @click="handleAddData">添加课程资料</el-button>
    <AppList v-bind="listOptions" ref="appList">
      <template #table-name="{ row }">
        <img :src="imgUrl(row)" alt="" style="width: 13px; height: 100%; margin-right: 13px" />
        <span class="node_type">资料</span>
        <span class="node_title">{{ row.name }}</span>
      </template>
      <template #table-operate="{ row }">
        <el-button plain @click="handleDetail(row)">查阅</el-button>
        <el-button type="primary" plain @click="handleDel(row)">删除</el-button>
      </template>
    </AppList>
    <!-- 添加资源 -->
    <AddVideoDialog
      v-if="isShowAddDialog === true"
      v-model:isShowAddDialog="isShowAddDialog"
      :chapterName="''"
      :chapterID="''"
      :course_id="'0'"
      :btnInfo="{ btn_name: '课程资料', resource_type: '4' }"
      @create="handleAdd"
    />
  </div>
</template>
<style>
.node_type {
  background: #bf9d6b;
  border-radius: 20px;
  line-height: 1;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  padding: 4px 8px;
  margin-right: 14px;
}
</style>
