<template>
  <ContentWrap>
    <el-tabs v-model="tab" @tab-click="tabClick">
      <el-tab-pane v-for="(k, i) in tabList" :key="i" :label="k.label" :name="k.value"/>
    </el-tabs>
    <div style="display: flex; justify-content: space-between;">
      <div style="display: flex; color: orange; align-items: center;">
        <div v-if="tab !== 10">
          <Icon :size="20" icon="ep:warning" class="mr-3px" />
          图片规格: 
          <span class="m-l-10px">{{ tabList[tab].size }}</span>
        </div>
      </div>
      <div>
        <el-button v-hasPermi="['menduner:system:web-content:query']" @click="getList"><Icon icon="ep:refresh" class="mr-5px" /> 刷 新</el-button>
        <el-button type="primary" @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" v-hasPermi="['menduner:system:web-content:create']" />新 增</el-button>
      </div>
    </div>

    <el-table v-if="tab !== 10" v-loading="loading" :data="info[tabList[tab].key]" :stripe="true">
      <el-table-column label="排序" align="center" prop="sort" />
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="图片" align="center" prop="img" width="200">
        <template #default="scope">
          <el-image v-if="scope.row.img" class="h-150px w-200px" :initial-index="info[tabList[tab].key].findIndex(e => e.mark === scope.row.mark)" :src="scope.row.img" lazy preview-teleported :preview-src-list="info[tabList[tab].key].map(e => e.img)" fit="scale-down" />
        </template>
      </el-table-column>
      <el-table-column label="点击跳转链接" align="center" prop="link">
        <template #default="scope">
          {{ scope.row.link }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <span :style="{'color': scope.row.status === '0' ? '#67c23a': '#f56c6c'}">{{ scope.row.status === '0' ? '启用中' : '停用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" min-width="220">
        <template #default="scope">
          <el-button link type="primary" v-hasPermi="['menduner:system:web-content:update']" @click="handleEdit(scope.row.mark)">编辑</el-button>
          <el-button link type="danger" v-hasPermi="['menduner:system:web-content:delete']" @click="handleDelete(scope.row.mark)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-table v-else v-loading="loading" :data="preferredGroup(info)" :stripe="true">
      <el-table-column label="企业ID" align="center" prop="enterpriseId" />
      <el-table-column label="企业名称" align="center" prop="title" />
      <el-table-column label="操作" align="center" fixed="right" min-width="220">
        <template #default="scope">
          <el-button link type="primary" v-hasPermi="['menduner:system:web-content:update']" @click="handleEditPreferredGroup(scope.row.enterpriseId)">编辑</el-button>
          <el-button link type="danger" v-hasPermi="['menduner:system:web-content:delete']" @click="handleDeletePreferredGroup(scope.row.enterpriseId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <WebContentForm ref="formRef" :enterpriseList="enterpriseList" @success="getList" />

  <!-- 优选集团 -->
  <PreferredGroup ref="preferredGroupRef" :enterpriseList="enterpriseList" @success="getList" />

</template>

<script setup lang="ts">
import { WebContentApi } from '@/api/menduner/system/web'
import WebContentForm from './WebContentForm.vue'
import PreferredGroup from './PreferredGroup.vue'
import { EnterpriseUserBindApi } from '@/api/menduner/system/enterprise/userBind'

/** 页面内容 列表 */
defineOptions({ name: 'WebContent' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
const loading = ref(false)
const tab = ref(0)
let info = reactive({})
const tabList = ref([
  { label: 'PC首页顶部广告图', value: 0, key: 'pcTop', size: '宽1920px*高80px' },
  { label: 'PC首页左侧广告图', value: 1, key: 'pcLeft', size: '宽869px*高1512px' },
  { label: 'PC首页弹窗广告图', value: 2, key: 'pcAdvertisement', size: '宽900px*高530px' },
  { label: 'PC企业弹窗广告图', value: 3, key: 'pcBackendAdvertisement', size: '宽900px*高530px' },
  { label: 'PC首页轮播图', value: 4, key: 'pcHomeCarousel', size: '宽792px*高392px' },
  { label: 'PC首页优选集团', value: 5, key: 'pcHomePreferred', size: '宽378px*高173px' },
  { label: 'PC登录页轮播图', value: 6, key: 'pcLoginCarousel', size: '宽792px*高392px' },
  { label: 'PC登录页背景图', value: 7, key: 'pcLoginBackground', size: '宽1920px*高940px' },
  { label: '小程序首页轮播图', value: 8, key: 'appHomeCarousel', size: '宽750px*高350px' },
  { label: '小程序首页弹窗广告图', value: 9, key: 'appAdvertisement', size: '宽331px*高442px' },
  { label: '优选集团内容', value: 10, key: 'appPreferredGroup' }
])

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await WebContentApi.getWebContent(1)
    info = data
  } finally {
    loading.value = false
  }
}

// 企业列表
const enterpriseList = ref([])
const getEnterpriseListData = async () => {
  try {
    const data = await EnterpriseUserBindApi.getEnterpriseList()
    enterpriseList.value = data
  } catch (err) {}
}
getEnterpriseListData()

// 优选集团
const preferredGroup = computed(() => (data) => {
  const list = []
  for (let i in data.appPreferredGroup) {
    list.push({ title: data.appPreferredGroup[i].title, enterpriseId: i, data: data.appPreferredGroup[i] })
  }
  return list
})

const tabClick = (val) => {
  tab.value = val.paneName
  getList()
}

const handleAdd = () => {
  if (tab.value === 10) return preferredGroupRef.value.open(tabList.value[tab.value].key) // 优选集团
  formRef.value.open('add', tabList.value[tab.value].key, tabList.value[tab.value].label)
}

const formRef = ref()
const handleEdit = (mark: string) => {
  formRef.value.open('edit', tabList.value[tab.value].key, tabList.value[tab.value].label, mark)
}

/** 删除按钮操作 */
const handleDelete = async (mark: string) => {
  const index = info[tabList.value[tab.value].key].findIndex((item) => item.mark === mark)
  if (index === -1) return message.warning('图片不存在')
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    info[tabList.value[tab.value].key].splice(index, 1)
    await WebContentApi.updateWebContent(info)

    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

// 优选集团
const preferredGroupRef = ref()
const handleDeletePreferredGroup = async (id) => {
  if (!info[tabList.value[tab.value].key][id]) return message.warning('数据不存在')

  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    delete info[tabList.value[tab.value].key][id]
    await WebContentApi.updateWebContent(info)

    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
const handleEditPreferredGroup = (id) => {
  preferredGroupRef.value.open(tabList.value[tab.value].key, id)
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>