<script setup>
import empty from '/images/empty.png'
import edit from '/images/edit.png'
import spjj1 from '/images/spjj1.png'
import spjj2 from '/images/spjj2.png'
import spjj3 from '/images/spjj3.png'
import deleteImg from '/images/delete.png'
import download from '/images/download.png'
import enter from '/images/enter.png'
import power from '/images/power.png'
import { getTime, getFileType } from '~/utils/helper'

const props = defineProps({
  to: String,
  url: String,
  deleteUrl: String,
  fields: Object,
  d: Object,
  showCheck: Boolean,
  checkAll: Boolean,
})

const emits = defineEmits(['checkValue', 'edit', 'download', 'enter'])

const auditStatus = ref("2");

const limit = ref(Number(props.d.limit) || 6)
const page = ref(1)
const total = ref(0)
const resultData = ref([])
const checkData = ref([])
function init() {
  limit.value = Number(props.d.limit) || 6
  page.value = 1
  total.value = 0
  resultData.value = []
  checkData.value = []
}

async function initData() {
  const { code, data } = await request({ url: props.to ? `/aimooc/${props.to}/index` : props.url, data: { limit: limit.value, page: page.value, ...props.d } })
  if (code === '1') {
    data.page_data.forEach((item) => {
      if (props.fields.status && props.fields.uploadValue && item[props.fields.status] === props.fields.uploadValue) {
        item.unFinished = true;
      }
      if (props.fields.audit && item[props.fields.audit] == auditStatus.value) {
        item.auditing = true;
      }
      item.checked = false
      checkData.value.forEach((value) => {
        if (item[props.fields.id] === value[[props.fields.id]])
          item.checked = true
      })

      if (!item[props.fields.img]) {
        const type = getFileType(item[props.fields.file])
        if (type === 'image')
          item.empty = spjj2
        else if (type === 'audio')
          item.empty = spjj3
        else
          item.empty = spjj1
      }
    })
    resultData.value = [...data.page_data]
    total.value = Number(data.total_rows)
  }
}

function handleCurrentChange(val) {
  page.value = val
  initData()
}


watch(
  () => [props.to, props.url, props.d], (val) => {
    if (val[0]) {
      init()
      initData()
    }
  },
  { immediate: true, deep: true },
)

watch(
  () => props.checkAll, (val) => {
    resultData.value.forEach((item) => {
      item.checked = val || false
      handelChange(item)
    })
  },
)


function handleEdit(data) {
  emits('edit', data)
}

function handleDownload(data) {
  emits('download', data)
}

function handleEnter(data) {
  emits('enter', data)
}

function handlePower(data) {
  emits('power', data)
}

function handleDelete(data) {
  ElMessageBox.confirm('确定要删除该数据吗？', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      const { code } = await request({ url: props.to ? `/aimooc/${props.to}/delete` : props.deleteUrl, data: { [props.fields.id]: data[props.fields.id] } })
      if (code === '1') {
        ElMessage.success('删除成功！')
        initData()
      }
    })
    .catch(() => { })
}

function handelChange(data) {
  if (data.checked)
    checkData.value.push(data)
  else
    checkData.value = checkData.value.filter(item => item[props.fields.id] !== data[props.fields.id])

  emits('checkValue', checkData.value)
}

defineExpose({ initData })

</script>

<template>
  <div class="overflow-hidden rounded-8px bg-white common_list">
    <el-scrollbar view-class="h-full">
      <slot name="search" />
      <div v-if="resultData.length === 0" class="pt-30px text-center">
        <img :src="empty" alt="" class="m-auto mb-15px">
        <div>暂无数据</div>
      </div>
      <div v-else>
        <div class="grid grid-cols-3 gap-8 py-30px px-20px" >
          <div v-for="(item, index) in resultData" :key="index">
            <div class="imgDiv relative h-200px rounded-8px">
              <div class="h-full" v-if="item[fields.img]">
                <img v-if="props.to!=='xnszr_make'" :src="item[fields.img]" alt="" class="h-full w-full rounded-8px" />
                <!-- <div v-if="props.to==='xnszr_make'" class="h-full bg-cover rounded-8px bg-hex-efefef" :style="{backgroundImage: `url(${item.axm_img})`}"> -->
                <img v-if="props.to==='xnszr_make'" :src="item[fields.img]" alt="" class="h-full m-auto" />
                <!-- </div> -->
              </div>
              <div v-else class="flex items-center justify-center h-full bg-hex-797979 rounded-8px">
                <img :src="item.empty" alt="" />
              </div>
              <div v-if="showCheck" class="checkDiv absolute left-10px top-10px">
                <el-checkbox v-model="item.checked" :disabled="item.auditing || item.unFinished" @change="handelChange(item)" />
              </div>
              <div v-if="item.auditing" class="absolute z-1 top-0 right-0 rounded-tr-8px rounded-bl-8px bg-hex-b5e4ca text-hex-1a1d1f text-14px px-15px py-8px">审核中</div>
              <div v-if="d.public_space == '1' && item.as_zy_shzt_v2 == '1'" class="absolute z-1 top-0 right-0 rounded-tr-8px rounded-bl-8px bg-hex-b5e4ca text-hex-1a1d1f text-14px px-15px py-8px">通过</div>
               <div v-else-if="d.public_space == '1' && item.as_zy_shzt_v2 == '2'" class="absolute z-1 top-0 right-0 rounded-tr-8px rounded-bl-8px bg-hex-ec725d text-hex-1a1d1f text-14px px-15px py-8px text-white">不通过</div>
               <div v-else-if="d.public_space == '1' && item.as_zy_shzt_v2 == '3'" class="absolute z-1 top-0 right-0 rounded-tr-8px rounded-bl-8px bg-hex-E4DBB5 text-hex-1a1d1f text-14px px-15px py-8px">待审核</div>
              <div v-if="to!=='spjj' || (to==='spjj' && !item.auditing)" class="modal absolute left-0px top-0px h-full w-full flex items-center justify-center rounded-8px">
                <template v-if="item.unFinished">
                  <div class="flex items-center justify-center text-white text-sm">
                    <img class="mr-10px" src="/images/loading.png" alt="" />
                    正在生成中
                  </div>
                </template>
                <template v-else-if="item.auditing">
                  <div class="img-item" @click="handleEnter(item)">
                    <img :src="enter" alt="">
                  </div>
                </template>
                <template v-else-if="d.public_space == '1'">
                    <div>
                      <div class="img-item" @click="handleDownload(item)">
                        <img :src="download" alt="">
                      </div>
                      <div class="img-item" @click="handleDelete(item)">
                        <img :src="deleteImg" alt="">
                      </div>
                    </div>
                    <div>
                      <div class="img-item" @click="handleEnter(item)">
                        <img :src="enter" alt="">
                      </div>
                      <div class="img-item" @click="handlePower(item)">
                        <img :src="power" alt="">
                      </div>
                    </div>
                </template>
                <template v-else>
                  <div>
                    <div class="img-item" @click="handleEdit(item)">
                      <img :src="edit" alt="">
                    </div>
                    <div class="img-item" @click="handleDownload(item)">
                      <img :src="download" alt="">
                    </div>
                  </div>
                  <div>
                    <div class="img-item" @click="handleDelete(item)">
                      <img :src="deleteImg" alt="">
                    </div>
                    <div class="img-item" @click="handleEnter(item)">
                      <img :src="enter" alt="">
                    </div>
                  </div>
                </template>
              </div>
            </div>
            <div v-if="fields.page == 'grzx'" class="mt-15px">
              <div class="text-15px mb-5px leading-24px">{{item.as_title}}</div>
              <div class="flex justify-between items-center text-14px">
                <div class="text-gray-500">{{item.as_zy_syxm_v2}}</div>
                <div class="flex  w-1/2 min-h-30px" v-if="d.public_space == ''">
                  <div class="flex items-center w-1/2"><img class="h-20px mr-5px" src="/images/zan.png" alt="" />{{Number(item.as_zy_dzs_v2) > 9999 ? Number(item.as_zy_dzs_v2).toFixed(1)+'w' :item.as_zy_dzs_v2 }}</div>
                  <div class="flex items-center"><img class="h-14px mr-5px" src="/images/view.png" alt="" />{{Number(item.as_zy_gks_v2) > 9999 ? Number(item.as_zy_gks_v2).toFixed(1)+'w' :item.as_zy_gks_v2 }} </div>
                </div>
              </div>
            </div>
            <div v-else>
              <div class="mb-20px mt-10px">
                {{ item[fields.name] }}
              </div>
              <div class="time">
                {{ getTime(item[fields.time]) }}
              </div>
            </div> 
          </div>
        </div>
        <div class="flex justify-end px-80px pb-30px">
          <el-pagination v-model:current-page="page" v-model:page-size="limit" layout="total, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
@use "~/styles/checkbox.scss";
.imgDiv {
  .modal {
    opacity: 0;
    background: rgba($color: #111315, $alpha: 0.8);
    transition: all linear 0.2s;
    .img-item {
      width: 36px;
      height: 36px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      margin: 20px 10px;
    }
  }
  &:hover {
    .modal {
      opacity: 1;
    }
  }
}
.time {
  font-size: 14px;
  color: #6f767e;
}
:deep() {
  .el-pagination {
    li.is-active {
      color: green;
    }
    li:hover {
      color: rgba($color: green, $alpha: 0.8);
    }
    .el-input__wrapper {
      background: #f7f7f7;
      box-shadow: none;
    }
  }
}
</style>