<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="24" class="oneText">
              <el-col :span="4" class="left">
                <el-image
                  class="image"
                  v-if="info.logo && info.logo.length > 0"
                  :src="info.logo[0].url"
                  fit="fill"
                />
              </el-col>
              <el-col :span="20" class="right">
                <el-col :span="24" class="right_1">
                  <el-col :span="6">
                    <el-tooltip effect="dark" :content="info.name" placement="top">
                      <span class="name textOver">{{ info.name || '暂无名称' }}</span>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="10" class="tags">
                    <el-tag :type="[info.companyStatus == '0' ? 'success' : 'info']">{{
                      getDict(info.companyStatus, 'status')
                    }}</el-tag>
                  </el-col>
                  <el-col :span="8" class="button">
                    <el-col :span="24" class="one_1">
                      <el-col
                        :span="6"
                        class="file"
                        @click="toCollection(0)"
                        v-if="info.is_collection"
                      >
                        <el-icon :size="16"><StarFilled /></el-icon>
                        <span>已收藏</span>
                      </el-col>
                      <el-col :span="5" class="file" @click="toCollection(1)" v-else>
                        <el-icon :size="16"><Star /></el-icon>
                        <span>收藏</span>
                      </el-col>
                      <el-col :span="8" class="file">
                        <a-button type="primary" @click="toChat">
                          <template #icon>
                            <MessageOutlined />
                          </template>
                          在线洽谈
                        </a-button>
                      </el-col>
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="24" class="right_2">
                  <el-col :span="24" class="right_2">
                    <el-tag type="primary">{{ getDict(info.pattern, 'pattern') }}</el-tag>
                    <el-tag type="primary">{{ getDict(info.scale, 'scale') }}</el-tag>
                  </el-col>
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="8" class="info">
                    统一社会信用代码：{{ info.code || '暂无' }}
                  </el-col>
                  <el-col :span="8" class="info">电话：{{ info.phone || '暂无' }}</el-col>
                  <el-col :span="8" class="info">所属行业：{{ getDict(info.type, 'type') }}</el-col>
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="8" class="info"
                    >法定代表人：{{ info.representative || '暂无' }}</el-col
                  >
                  <el-col :span="8" class="info">邮箱：{{ info.email || '暂无' }}</el-col>
                  <el-col :span="8" class="info">员工人数：{{ info.person || '暂无' }}人</el-col>
                </el-col>
                <el-col :span="24" class="right_3">
                  <el-col :span="8" class="info">
                    注册资本：{{ info.register || '暂无' }}万元
                  </el-col>
                  <el-col :span="8" class="info">成立日期：{{ info.create_time || '暂无' }}</el-col>
                  <el-col :span="8" class="info">地址：{{ info.address || '暂无' }}</el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="twoText">
              <el-col :span="24" class="title">公司简介</el-col>
              <el-col :span="24" class="brief">{{ info.brief || '暂无相关简介' }}</el-col>
            </el-col>
            <el-col :span="24" class="twoText">
              <el-col :span="24" class="title">相关成果</el-col>
              <el-col :span="24" class="content">
                <a-list :loading="loading" :grid="{ gutter: 16, column: 4 }" :data-source="list">
                  <template #renderItem="{ item }">
                    <el-col :span="24" class="list">
                      <el-col :span="24" class="name textOver">
                        <el-tooltip effect="dark" :content="item.name" placement="top">
                          {{ item.name || '暂无名称' }}
                        </el-tooltip>
                      </el-col>
                      <el-col :span="24" class="two_1">
                        <span>技术领域：</span>{{ getDict(item.field, 'field') }}
                      </el-col>
                      <el-col :span="24" class="two_1">
                        <span>成果地区：</span>{{ getArea(item.area) }}
                      </el-col>
                      <el-col :span="24" class="two_1">
                        <span>单位：</span>{{ item.userName || '暂无单位' }}
                      </el-col>
                      <el-col :span="24" class="bottom">
                        <a-button size="small" type="primary" @click="toView(item)">
                          查看详情
                        </a-button>
                      </el-col>
                    </el-col>
                  </template>
                </a-list>
                <el-col :span="24" class="page">
                  <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>
              </el-col>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 基础
import moment from 'moment'
import { get } from 'lodash-es'
const $checkRes = inject('$checkRes')
import { MessageOutlined } from '@ant-design/icons-vue'
// 接口
import { CompanyStore } from '@/store/api/user/company'
import { AchievementStore } from '@/store/api/platform/achievement'
import { CollectionStore } from '@/store/api/platform/collection'
import { DictDataStore } from '@/store/api/system/dictData'
const achievementStore = AchievementStore()
const store = CompanyStore()
const dictDataStore = DictDataStore()
const collectionStore = CollectionStore()
import { UserStore } from '@/store/user'
const userStore = UserStore()
const user = computed(() => userStore.user)
// 路由
const route = useRoute()
const router = useRouter()
// 加载中
const loading = ref(false)
const info = ref({})
// 字典表
const fieldList = ref([])
const statusList = ref([])
const patternList = ref([])
const scaleList = ref([])
const IndustryList = ref([])
// 成果列表
const list = ref([])
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 请求
onMounted(async () => {
  loading.value = true
  await searchOther()
  await search()
  await searchAchieve({ skip, limit })
  loading.value = false
})
const search = async () => {
  let id = route.query.id
  if (id) {
    let res = await store.detail(id)
    if (res.errcode == '0') info.value = res.data
  }
}
const searchAchieve = async (query = { skip: 0, limit }) => {
  const info = {
    skip: query.skip,
    limit: query.limit,
    is_use: '0',
    status: '1'
  }
  const res = await achievementStore.list(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: 'companyStatus', is_use: '0' })
  if ($checkRes(result)) statusList.value = result.data
  // 企业类型
  result = await dictDataStore.query({ code: 'companyType', is_use: '0' })
  if ($checkRes(result)) patternList.value = result.data
  // 企业规模
  result = await dictDataStore.query({ code: 'companyScale', is_use: '0' })
  if ($checkRes(result)) scaleList.value = result.data
  // 企业所属行业
  result = await dictDataStore.query({ code: 'companyIndustry', is_use: '0' })
  if ($checkRes(result)) IndustryList.value = result.data
}
// 字典数据转换
const getDict = (data, model) => {
  let res
  if (model == 'field') res = fieldList.value.find((f) => f.value == data)
  else if (model == 'status') res = statusList.value.find((f) => f.value == data)
  else if (model == 'type') res = IndustryList.value.find((f) => f.value == data)
  else if (model == 'pattern') res = patternList.value.find((f) => f.value == data)
  else if (model == 'scale') res = scaleList.value.find((f) => f.value == data)
  return get(res, 'label')
}
// 地区
const getArea = (data) => {
  if (data) return data.join(',')
  else return '暂无地区'
}
// 在线洽谈
const toChat = () => {
  router.push({ path: '/chat', query: { id: info.value.user } })
}
// 收藏
const toCollection = async (status) => {
  if (user.value._id) {
    let res
    let message
    const data = {
      user: user.value._id,
      source: info.value._id,
      type: 'company',
      time: moment().format('YYYY-MM-DD')
    }
    if (status == '1') {
      message = '收藏成功'
      res = await collectionStore.create(data)
    } else {
      message = '取消收藏成功'
      res = await collectionStore.cancel(data)
    }
    if (res.errcode === 0) {
      ElMessage({
        message,
        type: 'success'
      })
      await search()
    }
  } else {
    ElMessage({
      message: '未登录无法进行收藏 请登录',
      type: 'warning'
    })
  }
}
// 查看
const toView = (item) => {
  router.push({ path: '/achievement/detail', query: { id: item.id || item._id } })
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  searchAchieve({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  console.log(limits)
  limit = limits
  currentPage.value = 1
  searchAchieve({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  background: #f7f7f7;
  .one {
    margin: 10px 0;
    background-color: #fff;
    padding: 24px;
    border-top: 6px solid #2374ff;
    overflow: hidden;
    border-radius: 0 0 5px 5px;

    .oneText {
      display: flex;
      padding: 20px;
      margin: 10px 0;
      border-radius: 10px;
      border: 1px solid #edeff2;
      .left {
        .image {
          width: 150px;
          height: 150px;
          border-radius: 90px;
        }
      }
      .right {
        padding: 5px;
        .right_1 {
          display: flex;
          align-items: center;
          .name {
            margin: 0 10px 0 0;
            word-break: break-all;
            font-size: 18px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            font-weight: 500;
            line-height: 24px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
          .tags {
            grid-gap: 0.5rem;
            gap: 0.5rem;
            display: flex;
          }
          .time {
            font-size: 14px;
            font-family:
              PingFangSC-Regular,
              PingFang SC;
            color: #666;
          }
          .button {
            .one_1 {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              .file {
                display: flex;
                align-items: center;
                font-family: PingFangSC-Regular;
                font-size: 14px;
                color: #2374ff;
                span {
                  margin: 0 0 0 5px;
                }
              }
            }
          }
        }
        .right_2 {
          grid-gap: 0.5rem;
          gap: 0.5rem;
          display: flex;
          margin: 5px 0 0 0;
        }
        .right_3 {
          display: flex;
          margin: 10px 0;
          font-size: 14px;
          font-family:
            PingFangSC-Regular,
            PingFang SC;
          color: #666;
          .info {
            span {
              color: #2171f6;
            }
          }
        }
      }
    }
    .twoText {
      padding: 20px;
      border-radius: 10px;
      margin: 10px 0;
      border: 1px solid #edeff2;

      .title {
        font-size: 20px;
        color: #383b40;
        letter-spacing: 0;
        line-height: 20px;
        font-weight: 600;
        margin-bottom: 30px;
      }
      .content {
        margin-top: 20px;

        .list {
          border: 1px solid #edeff2;
          background: #fff;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
          border-radius: 2px;
          width: 270px;
          height: 180px;
          margin-bottom: 15px;
          cursor: pointer;
          transition: all 0.3s;
          padding: 15px;
          .name {
            font-size: 16px;
            color: #121834;
            height: 16px;
            line-height: 13px;
            font-weight: 500;
            margin: 10px 0;
          }

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

          .two_1 {
            font-size: 12px;
            text-align: justify;
            line-height: 12px;
            font-weight: 400;
            letter-spacing: 0;
            color: #8f97a3;
            margin-top: 15px;

            span:last-child {
              color: #525a68;
            }
          }
          .bottom {
            margin: 10px 0 0 0;
            text-align: right;
          }
        }

        .list:hover {
          background: #f0f7ff;
          box-shadow: 0 0 16px rgba(205, 205, 205, 0.6);
        }

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