<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="search">
          <el-image class="image" :src="searchOne" fit="fill" />
          <div class="input" v-if="route.query.type == 'search'">
            <a-input v-model:value="searchValue" placeholder="请输入想要搜索的内容">
              <template #suffix>
                <SearchOutlined
                  @click="toChange(activeKey)"
                  :style="{ fontSize: '30px', color: '#ffffff' }"
                />
              </template>
            </a-input>
          </div>
        </el-col>
        <el-col :span="24" class="one">
          <a-tabs v-model:activeKey="activeKey" centered @change="toChange">
            <a-tab-pane v-for="item in actList" :key="item.value" :tab="item.label">
              <News v-if="item.value == 'news'"></News>
              <List v-else></List>
            </a-tab-pane>
          </a-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 基础
import { get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import List from './parts/list.vue'
import News from './parts/news.vue'
import { SearchOutlined } from '@ant-design/icons-vue'
// 接口
import { ToolStore } from '@/store/api/platform/tool'
import { DictDataStore } from '@/store/api/system/dictData'
const toolStore = ToolStore()
const dictDataStore = DictDataStore()
// 图片引入
import searchOne from '/images/search.jpeg'
// 路由
const router = useRouter()
const route = useRoute()
// 加载中
const loading = ref(false)
const activeKey = ref('achievement')
const actList = ref([
  { label: '成果', value: 'achievement' },
  { label: '需求', value: 'demand' },
  { label: '项目', value: 'project' },
  { label: '赛事', value: 'match' },
  { label: '资讯', value: 'news' },
  { label: '单位', value: 'unit' },
  { label: '企业', value: 'company' },
  { label: '专家', value: 'expert' }
])
const searchValue = ref('')
// 字典表
const fieldList = ref([])
const statusList = ref([])
const typeList = ref([
  { value: '0', label: '供给' },
  { value: '1', label: '需求' }
])
const fields = ref([])
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const currentPage = ref(1)
// 请求
onMounted(async () => {
  loading.value = true
  searchValue.value = route.query.searchValue || ''
  await searchField()
  await searchOther()
  if (route.query && route.query.type == 'collection') await searchActive()
  else await searchTotal()
  loading.value = false
})
const searchField = async () => {
  if (activeKey.value == 'achievement') {
    fields.value = [
      { label: '成果名称', model: 'name', type: 'name' },
      { label: '技术领域：', model: 'field', type: 'dict' },
      { label: '成果地区：', model: 'area', type: 'area' },
      { label: '参考价格：', model: 'money' }
    ]
  } else if (activeKey.value == 'demand') {
    fields.value = [
      { label: '需求名称', model: 'name', type: 'name' },
      { label: '技术领域：', model: 'field', type: 'dict' },
      { label: '类型：', model: 'type', type: 'dict' },
      { label: '需求地区：', model: 'area', type: 'area' }
    ]
  } else if (activeKey.value == 'project') {
    fields.value = [
      { label: '项目名称', model: 'name', type: 'name' },
      { label: '技术领域：', model: 'field', type: 'dict' },
      { label: '项目地区：', model: 'area', type: 'area' },
      { label: '发布时间：', model: 'time' }
    ]
  } else if (activeKey.value == 'match') {
    fields.value = [
      { label: '比赛名称', model: 'name', type: 'name' },
      { label: '比赛金额：', model: 'money' },
      { label: '比赛日期：', model: 'time', type: 'time' },
      { label: '赛事状态：', model: 'match_status', type: 'dict' }
    ]
  } else if (activeKey.value == 'company') {
    fields.value = [
      { label: '企业名称', model: 'name', type: 'name' },
      { label: '法定代表人：', model: 'representative' },
      { label: '企业地区：', model: 'area', type: 'area' },
      { label: '成立时间：', model: 'create_time' }
    ]
  } else if (activeKey.value == 'expert') {
    fields.value = [
      { label: '专家姓名', model: 'name', type: 'name' },
      { label: '技术领域：', model: 'field', type: 'dict' },
      { label: '所在地区：', model: 'area', type: 'area' },
      { label: '研究方向：', model: 'direction' }
    ]
  } else if (activeKey.value == 'news') {
    fields.value = [
      { label: '资讯标题', model: 'title', type: 'name' },
      { label: '发布人：', model: 'person' },
      { label: '发布时间：', model: 'time' },
      { label: '浏览量：', model: 'number' }
    ]
  } else if (activeKey.value == 'unit') {
    fields.value = [
      { label: '单位名称', model: 'name', type: 'name' },
      { label: '技术领域：', model: 'field', type: 'dict' },
      { label: '所在地区：', model: 'area', type: 'area' },
      { label: '研究方向：', model: 'direction' }
    ]
  }
}
const searchTotal = async () => {
  const menu = await toolStore.total({
    ...{ searchValue: searchValue.value },
    is_use: '0',
    status: '1'
  })
  if (menu.errcode == '0') actList.value = menu.data
  await search({ skip, limit })
}
const search = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    type: activeKey.value,
    ...{ searchValue: searchValue.value },
    is_use: '0',
    status: '1'
  }
  const res = await toolStore.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const searchActive = async () => {
  const menu = await toolStore.getTotal()
  if (menu.errcode == '0') actList.value = menu.data
  await searchCollection({ skip, limit })
}
const searchCollection = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    type: activeKey.value
  }
  const res = await toolStore.getCollection(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
const searchOther = async () => {
  let result
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
  // 赛事状态
  result = await dictDataStore.query({ code: 'matchStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'field') res = fieldList.value.find((f) => f.value == data)
  if (model == 'type') res = typeList.value.find((f) => f.value == data)
  if (model == 'match_status') res = statusList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 地区显示
const getArea = (data) => {
  if (data) return data.join(',')
  else return '暂无地区'
}
// 时间
const getTime = (data) => {
  if (data) return `${data[0]} 至 ${data[1]}`
}
// 查看
const toView = (item) => {
  let path
  if (activeKey.value == 'achievement') path = '/achievement/detail'
  else if (activeKey.value == 'demand') path = '/demand/detail'
  else if (activeKey.value == 'project') path = '/project/detail'
  else if (activeKey.value == 'match') path = '/innovation/detail'
  else if (activeKey.value == 'company') path = '/company/detail'
  else if (activeKey.value == 'expert') path = '/expert/detail'
  router.push({ path, query: { id: item.id || item._id } })
}
// 切换标签页
const toChange = (key) => {
  activeKey.value = key
  if (route.query && route.query.type == 'collection') searchCollection({ skip, limit })
  else searchTotal()
  searchField()
}
// 分页
const changePage = (page = currentPage.value) => {
  if (route.query && route.query.type == 'collection')
    searchCollection({ skip: (page - 1) * limit, limit: limit })
  else search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  if (route.query && route.query.type == 'collection') searchCollection({ skip, limit })
  else search({ skip, limit })
}
watch(route, (newVal) => {
  if (newVal && newVal.query && newVal.query.type) {
    if (newVal.query && newVal.query.type == 'collection') searchActive()
    else searchTotal()
  }
})
// provide
provide('fields', fields)
provide('list', list)
provide('toView', toView)
provide('getArea', getArea)
provide('getDict', getDict)
provide('getTime', getTime)
provide('limit', limit)
provide('total', total)
provide('currentPage', currentPage)
provide('sizeChange', sizeChange)
provide('changePage', changePage)
</script>
<style scoped lang="scss">
.main {
  .search {
    position: relative;

    .image {
      width: 100%;
      height: 200px;
    }

    .input {
      width: 900px;
      position: absolute;
      left: 30%;
      bottom: 40%;

      :deep(.ant-input-affix-wrapper) {
        background-color: transparent;
        border: 3px solid #fff !important;
      }

      :deep(.ant-input) {
        height: 45px;
        line-height: 45px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        padding-right: 24px;
        color: #fff;
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 0 !important;
        text-shadow: 0 0 0 0 !important;
        background-color: transparent !important;

        &::placeholder {
          color: #ffffff !important;
        }
      }
    }
  }
}
</style>
