<template>
  <div>
    <rotation />
    <h-nav />
    <div class="inner">
      <bread-crumb :arr="arr" />
    </div>
    <div class="inner ins-box">
      <p class="font-bold-24 item-title">设备列表</p>
      <div class="d-flex flex-wrap">
        <div v-for="(item, index) in list" :key="index" class="item-box" :class="(index + 1) % 4 === 0 ? 'margin-0' : ''">
          <img :src="item.imgUrl" style="height: 220px; width: 100%; border: 1px solid #ccc" />
          <p class="font-24 my-4">{{ item.name }}</p>
          <p class="font-16 baseColor item-more" @click="jump(item.id)">了解更多→</p>
        </div>
      </div>
      <p class="font-bold-24 item-title">人才团队带头人情况</p>
      <div class="d-flex">
        <div class="header-box" style="flex: 1">
          <p style="background: #11b7ce; color: #fff">姓名</p>
          <p>性别</p>
          <p>民族</p>
          <p>出生年月</p>
          <p>学历</p>
          <p>职称</p>
          <p>所学专业</p>
          <p>从事专业</p>
          <p>团队名称</p>
          <p>工作单位</p>
          <p>研究方向</p>
        </div>
        <div class="header-box" style="flex: 5; background: #fff">
          <p style="border-bottom: 1px solid #eee">{{ obj.name }}</p>
          <p><span v-if="obj.gender - 0 === 1">男</span> <span v-else-if="obj.gender - 0 === 2">女</span></p>
          <p>{{ obj.famousFamily }}</p>
          <p>{{ obj.birthday }}</p>
          <p>{{ obj.education }}</p>
          <p>{{ obj.position }}</p>
          <p>{{ obj.major }}</p>
          <p>{{ obj.professional }}</p>
          <p>{{ obj.teamName }}</p>
          <p>{{ obj.workUnit }}</p>
          <p>{{ obj.direction }}</p>
        </div>
      </div>
      <p class="font-bold-24 item-title">团队成员信息</p>
      <div style="background: #fff">
        <div class="d-flex">
          <div class="h-box" style="flex: 1">姓名</div>
          <div class="h-box" style="flex: 1">性别</div>
          <!-- <div class="h-box" style="flex: 1">所在单位</div> -->
          <div class="h-box" style="flex: 1">出生年月</div>
          <div class="h-box" style="flex: 1">学历学位</div>
          <div class="h-box" style="flex: 1">职称职务</div>
          <div class="h-box" style="flex: 1">研究方向</div>
        </div>
        <div class="d-flex" v-for="(item, index) in obj.teamMemberList" :key="index">
          <div class="con-box" style="flex: 1">{{ item.name }}</div>
          <div class="con-box" style="flex: 1">
            <span v-if="item.gender - 0 === 1">男</span>
            <span v-else-if="item.gender - 0 === 2">女</span>
          </div>
          <!-- <div class="con-box" style="flex: 1">???????????????</div> -->
          <div class="con-box" style="flex: 1">{{ item.birthday }}</div>
          <div class="con-box" style="flex: 1">{{ item.education }}</div>
          <div class="con-box" style="flex: 1">{{ item.position }}</div>
          <div class="con-box" style="flex: 1">{{ item.direction }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { selInstrumentByRes, teamSearch } from 'config/api';
import Rotation from 'components/Rotation/Rotation.vue';
import HNav from './../../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
export default {
  name: 'Institute',
  components: { Rotation, HNav, BreadCrumb },
  data() {
    return {
      id: 0,
      title: '研究院详情',
      typeOfPlatform: '创新平台',
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '/NewPlatform/News' },
        { name: '科技资源开放共享服务平台', url: '/NewPlatform/Share' },
        { name: '研究院详情', url: '' },
      ],
      obj: {},
      list: [],
    };
  },
  computed: mapState('home', ['LabId']),
  created() {
    if (this.$route.params.id) {
      this.setLabId(this.$route.params.id);
      this.id = this.$route.params.id;
    } else {
      this.id = this.LabId;
    }
    this.getData();
    this.getTeam();
  },
  methods: {
    ...mapMutations('home', ['setLabId']),

    // 获取当前研究院（实验室）下的仪器列表
    async getData() {
      try {
        const params = {
          param: {
            id: this.id,
            pageNum: 1,
            pageSize: 6,
          },
        };
        const res = await selInstrumentByRes(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.list = data.list;
          this.total = parseInt(data.total);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取当前研究院（实验室）下的团队详情
    async getTeam() {
      try {
        const params = { param: { instituteId: this.id } };
        const res = await teamSearch(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.obj = data[0];
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 查看 研究院/仪器 详情
    jump(id) {
      this.$router.push({
        path: '/NewPlatform/Share/InsDet',
        name: 'InsDet',
        params: { id },
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.inner {
  margin: 10px auto 15px;
}

.ins-box {
  min-height: 500px;
  height: auto;
  margin: 40px auto;
}

.pagination {
  margin: 40px 0;
  text-align: right;
}

.item-more {
  right: 10px;
  bottom: 0px;
  cursor: pointer;
  position: absolute;
}

.item-box {
  position: relative;
  width: 20.5%;
  margin-right: 6%;
  border-radius: 4px;
  padding-bottom: 40px;
}

.margin-0 {
  margin-right: 0 !important;
}

.item-title {
  color: rgba(0, 0, 0, 0.85);
  margin-top: 60px;
}

.header-box {
  text-align: center;

  p {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.66);
    height: 56px;
    line-height: 56px;
    margin-bottom: 0 !important;
  }
}

.h-box {
  text-align: center;
  font-size: 22px;
  color: #096DD9;
  height: 56px;
  line-height: 56px;
}

.con-box {
  text-align: center;
  font-size: 18px;
  height: 46px;
  line-height: 46px;
  color: rgba(112, 112, 112, 0.66);
}
</style>
