<template>
  <div>
    <h-nav />
    <div class="inner my-1">
      <bread-crumb :arr="arr" />
    </div>
    <!-- <banner :show-page="showPage" /> -->
    <div class="inner ins-box">
      <p class="font-bold-24 item-title" v-if="description">{{ shareName }}</p>
      <div class="font-20" v-if="description">{{ description }}</div>
      <!-- <p class="font-bold-24 item-title" v-if="direction">科研条件：</p>
      <div class="font-20" v-dompurify-html="direction" v-if="direction"></div>-->

      <p class="font-bold-24 item-title" v-if="list[0]">设备列表</p>
      <div class="d-flex flex-wrap" v-if="list[0]">
        <div
          :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
          :key="index"
          class="item-box mb-8"
          v-for="(item, index) in list"
        >
          <img :src="item.visitLocation" style="height: 220px; width: 100%" />
          <p class="font-24 my-4">{{ item.name }}</p>
          <p @click="jump(item.id)" class="font-16 baseColor item-more">了解更多→</p>
        </div>
      </div>
      <div class="mt-5">
        <!-- <a-button>直接申请</a-button> -->
        <intention-model
          :btn-name="btnName"
          :type-data="typeData"
          style="float: left; margin-right: 20px"
        />
        <!-- <a-button type="primary">加入购物车</a-button> -->
        <add-shopping :type-data="typeData" />
      </div>
      <!-- <p
        class="font-bold-24 item-title"
        v-if="teamHead.name !== '' || teamHead.name !== null"
      >人才团队带头人情况</p>
      <div class="d-flex" v-if="teamHead.name !== '' || teamHead.name !== null">
        <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"
          v-if="teamHead.name !== '' || teamHead.name !== null"
        >
          <p style="border-bottom: 1px solid #eee">{{ teamHead.name }}</p>
          <p>
            <span v-if="teamHead.gender - 0 === 1">男</span>
            <span v-else-if="teamHead.gender - 0 === 2">女</span>
          </p>
          <p>{{ teamHead.famousFamily }}</p>
          <p>{{ teamHead.birthday }}</p>
          <p>{{ teamHead.education }}</p>
          <p>{{ teamHead.position }}</p>
          <p>{{ teamHead.major }}</p>
          <p>{{ teamHead.professional }}</p>
          <p>{{ teamHead.teamName }}</p>
          <p>{{ teamHead.workUnit }}</p>
          <p>{{ teamHead.direction }}</p>
        </div>
      </div>-->
      <p class="font-bold-24 item-title" v-if="obj !== null">团队成员信息</p>
      <div style="background: #fff" v-if="obj !== null">
        <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>
        <div v-if="obj.teamMemberList && obj.teamMemberList.length > 0">
          <div :key="index" class="d-flex" v-for="(item, index) in obj.teamMemberList">
            <div class="con-box" style="flex: 1">{{ item.tmName }}</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">{{ 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>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { selInstrumentByRes, teamSearch } from 'config/api';
// import Banner from 'components/Banner/Banner.vue';
import HNav from './../../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
import AddShopping from 'components/Introduce/AddShopping.vue';
import IntentionModel from 'components/Introduce/IntentionModel.vue';

export default {
  name: 'Institute',
  components: { HNav, BreadCrumb, AddShopping, IntentionModel },
  data() {
    return {
      id: 0,
      title: '研究院详情',
      typeOfPlatform: '创新平台',
      showPage: 32,
      arr: [
        { name: '创新平台', url: '/NewPlatform/NewCore' },
        { name: '创新资源平台', url: '/NewPlatform/News' },
        { name: '科技资源开放共享服务平台', url: '/NewPlatform/Share' },
        { name: '研究院详情', url: '' },
      ],
      teamHead: {
        name: '',
        gender: '',
        famousFamily: '',
        birthday: '',
        education: '',
        position: '',
        major: '',
        professional: '',
        teamName: '',
        workUnit: '',
        direction: '',
      },
      obj: null,
      list: [],
      description: '',
      shareName: '',
      direction: '', // 研究方向
      experiments: '', // 科研能力
      projectKind: '', // 项目分类
      vertify: '', // 校验
      typeData: {
        type: 0,
        Id: '',
      },
      btnName: '服务申请',
    };
  },
  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;
    }
    if (this.$route.params.description) {
      this.description = this.$route.params.description;
    }
    if (this.$route.params.name) {
      this.shareName = this.$route.params.name;
    }
    if (this.$route.params.direction) {
      this.direction = this.$route.params.direction;
    }
    if (this.$route.params.experiments) {
      this.experiments = this.$route.params.experiments;
    }
    if (this.$route.params.projectKind) {
      this.projectKind = this.$route.params.projectKind;
    }
    if (this.$route.params.vertify) {
      this.vertify = this.$route.params.vertify;
    }
    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) {
          if (data.list && data.list.length > 0) {
            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.teamHead.name = data[0].name;
          this.teamHead.gender = data[0].gender;
          this.teamHead.famousFamily = data[0].famousFamily;
          this.teamHead.birthday = data[0].birthday;
          this.teamHead.education = data[0].education;
          this.teamHead.position = data[0].position;
          this.teamHead.major = data[0].major;
          this.teamHead.professional = data[0].professional;
          this.teamHead.teamName = data[0].teamName;
          this.teamHead.workUnit = data[0].workUnit;
          this.teamHead.direction = data[0].direction;
          if (data && data[0].teamMemberList.length > 0) {
            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>
