<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col :span="24" class="iachievement">
          <el-image class="image" :src="achievement" fit="fill" />
        </el-col>
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-row class="one_1" v-for="(val, indexs) in searchList" :key="indexs">
              <el-col :span="3" class="left">{{ val.title }}</el-col>
              <el-col :span="21" class="right">
                <a-button
                  class="title"
                  v-for="(item, index) in val.list"
                  :key="index"
                  type="link"
                  size="samll"
                  >{{ item.label }}</a-button
                >
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24" class="two">
            <el-col
              :span="24"
              class="list"
              v-for="(item, index) in list"
              :key="index"
              @click="toView(item)"
            >
              <el-col :span="24" class="name">
                <el-tooltip effect="dark" :content="item.name" placement="top">
                  {{ item.name || '暂无成果名称' }}
                </el-tooltip>
              </el-col>
              <el-row class="other">
                <el-col :span="8" class="other_1">
                  <span>技术领域：</span>
                  {{ getDict(item.field || '暂无技术领域', 'field') }}
                </el-col>
                <el-col :span="8" class="other_1">
                  <span>成果地区：</span>
                  {{ getArea(item.area) }}
                </el-col>
                <el-col :span="8" class="other_1">
                  <span>单位：</span>
                  {{ item.user || '暂无单位' }}
                </el-col>
              </el-row>
              <el-col :span="24" class="brief textOver">
                {{ item.brief || '没有更多成果简介' }}
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24" class="thr">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :page-sizes="[10, 20, 50, 100, 200]"
              :total="total"
              :page-size="limit"
              v-model:current-page="currentPage"
              @current-change="changePage"
              @size-change="sizeChange"
            >
            </el-pagination>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { get } from 'lodash-es'
const $checkRes = inject('$checkRes')
// 接口
import { AchievementStore } from '@/store/api/platform/achievement'
import { DictDataStore } from '@/store/api/system/dictData'
const store = AchievementStore()
const dictDataStore = DictDataStore()
// 路由
const router = useRouter()
// 图片引入
import achievement from '@/assets/home.jpg'
// 加载中
const loading = ref(false)
const searchForm = ref({})
// 列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
const searchList = ref([
  {
    title: '行业分市场',
    list: [
      { value: '0', label: '全部' },
      { value: '1', label: '碳中和' },
      { value: '2', label: '水利科技' },
      { value: '3', label: '物联网' },
      { value: '4', label: '产业计量' },
      { value: '5', label: '卫生健康' },
      { value: '6', label: '时尚轻纺' },
      { value: '7', label: '农业科技' },
      { value: '8', label: '智能化' },
      { value: '9', label: '海洋科技' }
    ]
  },
  {
    title: '技术领域',
    list: [
      { value: '0', label: '全部' },
      { value: '1', label: '先进制造' },
      { value: '2', label: '地球、空间与海洋' },
      { value: '3', label: '新材料' },
      { value: '4', label: '新能源与节能' },
      { value: '5', label: '核应用技术' },
      { value: '6', label: '环境保护' },
      { value: '7', label: '现代交通' },
      { value: '8', label: '现代农业' },
      { value: '9', label: '生物医药与医疗器械' },
      { value: '10', label: '电子信息' },
      { value: '11', label: '航空航天' }
    ]
  },
  {
    title: '成熟度',
    list: [
      { value: '0', label: '全部' },
      { value: '1', label: '正在研发' },
      { value: '2', label: '已有样品' },
      { value: '3', label: '通过小试' },
      { value: '4', label: '通过中试' }
    ]
  },
  {
    title: '出让方式',
    list: [
      { value: '0', label: '全部' },
      { value: '1', label: '转让' },
      { value: '2', label: '许可' },
      { value: '3', label: '作价入股' },
      { value: '4', label: '其他' },
      { value: '4', label: '免费许可/先用后转' }
    ]
  },
  {
    title: '交易价格',
    list: [
      { value: '0', label: '全部' },
      { value: '1', label: '面议' },
      { value: '2', label: '1-10万元' },
      { value: '3', label: '10-20万元' },
      { value: '4', label: '20-100万元' },
      { value: '5', label: '100-500万元' },
      { value: '6', label: '500-1000万元' },
      { value: '7', label: '1000万元以上' }
    ]
  },
  {
    title: '成果地区',
    list: [
      { value: '0', label: '北京市' },
      { value: '1', label: '天津市' },
      { value: '2', label: '河北省' },
      { value: '3', label: '山西省' },
      { value: '4', label: '内蒙古自治区' },
      { value: '5', label: '辽宁省' },
      { value: '6', label: '吉林省' },
      { value: '7', label: '上海市' },
      { value: '8', label: '江苏省' },
      { value: '9', label: '浙江省' },
      { value: '10', label: '安徽省' },
      { value: '11', label: '福建省' },
      { value: '0', label: '江西省' },
      { value: '1', label: '山东省' },
      { value: '2', label: '河南省' },
      { value: '3', label: '湖北省' },
      { value: '4', label: '湖南省' },
      { value: '5', label: '广东省' },
      { value: '6', label: '广西壮族自治区' },
      { value: '7', label: '海南省' },
      { value: '8', label: '重庆市' },
      { value: '9', label: '四川省' },
      { value: '10', label: '贵州省' },
      { value: '11', label: '云南省' }
    ]
  }
])
// 字典表
const fieldList = ref([])
// 查看
const toView = (item) => {
  router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
}
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search({ skip, limit })
  loading.value = false
})
const searchOther = async () => {
  let result
  // 技术领域
  result = await dictDataStore.query({ code: 'field', is_use: '0' })
  if ($checkRes(result)) fieldList.value = result.data
}
const search = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    ...searchForm.value,
    is_use: '0',
    status: '1'
  }
  const res = await store.query(info)
  if (res.errcode == '0') {
    list.value = res.data
    total.value = res.total
  }
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'field') res = fieldList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 地区显示
const getArea = (data) => {
  if (data) return data.join(',')
  else return '暂无地区'
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style lang="scss" scoped>
.main {
  background: rgb(248, 248, 248);

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

  .one {
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;
    margin: 10px 0 0 0;

    .one_1 {
      display: flex;
      align-items: center;
      padding: 10px 0;
      border-bottom: #9d9898 1px dashed;

      .left {
        background: #2280ff;
        border-radius: 15px;
        line-height: 26px;
        color: #fff;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-family: PingFangSC-Medium;
      }

      .right {
        .title {
          color: #666;
          font-size: 14px;
          line-height: 15px;
          margin: 0 10px;
          display: inline-block;
          overflow: hidden;
          text-decoration: none;
        }

        .title:hover {
          color: #2374ff;
        }
      }
    }
  }

  .two {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 10px;
    padding: 15px;

    .list {
      margin-bottom: 10px;
      border-bottom: 1px solid #ebebeb;
      padding-bottom: 10px;

      .name {
        color: #337ab7;
        font-size: 18px;
        font-weight: bold;
        display: inline-block;
        margin: 10px 0;
      }

      .name:hover {
        color: #2374ff;
      }

      .other {
        padding: 5px 0;

        .other_1 {
          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial,
            sans-serif;
          font-size: 12px;
          font-weight: normal;
        }

        .other_1:hover {
          color: #2374ff;
        }
      }

      .brief {
        line-height: 30px;
        color: #666;
        font-size: 14px;
      }
    }
  }

  .thr {
    display: flex;
    flex-direction: row-reverse;
    padding: 20px;
  }
}
</style>
