<template>
  <KlTabBar v-model="type" :data="tabBar" @change="props.refresh()" />
  <el-table :data="modelValue" style="width: 100%" class="mt-14px">
    <el-table-column prop="date" label="文件信息">
      <template #default="scope">
        <div class="flex items-center">
          <el-image :src="scope.row.iconUrl" fit="cover" alt="" srcset="" class="h-91px w-181px rd-4px" />
          <div class="ml-17px">
            <div class="text-16px text-[#333333] font-normal">{{ scope.row.title }}</div>
            <div class="text-14px text-[#333333] font-normal my-10px!">
              {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
              <span class="ml-10px">{{ scope.row.sizecountry }}</span>
            </div>
            <div class="flex items-center">
              <div class="flex items-center">
                <img src="~/assets/images/look.png" alt="" srcset="" class="h-17px" />
                <span class="ml-4px">{{ scope.row.previewPoint }}</span>
              </div>
              <div class="ml-13px flex items-center">
                <img src="~/assets/images/add.png" alt="" srcset="" class="h-23px" />
                <span class="ml-4px">{{ scope.row.hotPoint }}</span>
              </div>
              <div class="ml-13px flex items-center">
                <img src="~/assets/images/chat.png" alt="" srcset="" class="h-17px" />
                <span class="ml-4px">{{ scope.row.commentsPoint }}</span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="status" label="上传状态" width="180">
      <template #default="scope">
        {{ handleStatus(scope.row.status) }}
      </template>
    </el-table-column>
    <el-table-column prop="address" label="操作" width="100">
      <template #default="scope">
        <el-link v-if="scope.row.status === 4" type="primary" :underline="false" @click="handleXiaJia(scope.row)">下架</el-link>
        <el-link type="primary" :underline="false" @click="handleDelete(scope.row)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  import { offShelf, deleteResource } from '~/api/personal-center'

  import KlTabBar from '~/components/kl-tab-bar/v2/index.vue'
  import dayjs from 'dayjs'
  import { useMessage } from '~/utils/useMessage'
  const message = useMessage()

  const type = defineModel<number | string>('type', {
    required: true,
  }) // 双向绑定的value
  const modelValue = defineModel<any>('modelValue', {
    required: true,
  }) // 双向绑定的value

  const props = defineProps({
    // 刷新
    refresh: {
      type: Function,
      default: () => Function,
    },
  })

  const tabBar = ref([
    {
      label: '图纸',
      value: 1,
    },
    {
      label: '模型',
      value: 3,
    },
    {
      label: '文本',
      value: 2,
    },
    {
      label: '工具箱',
      value: 4,
    },
  ])

  const handleStatus = (status: number) => {
    switch (status) {
      case 1:
        return '草稿'
      case 2:
        return '提交审核'
      case 3:
        return '审核成功'
      case 4:
        return '下架'
      default:
        return ''
    }
  }

  const handleXiaJia = (row: any) => {
    offShelf(row.id).then((res: any) => {
      if (res.code === 0) {
        ElMessage.success('下架成功')
        props.refresh()
      }
    })
  }

  const handleDelete = async (row: any) => {
    const r = await message.confirm('是否删除该资源', '提示')
    if (!r) return
    deleteResource({ id: row.id }).then((res: any) => {
      if (res.code === 0) {
        ElMessage.success('删除成功')
        props.refresh()
      }
    })
  }
</script>

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