<template>
  <div id="index">
    <admin-frame topType="2" @back="back" :rightArrow="false" :usePage="false" :useNav="false">
      <template v-slot:info>
        <van-col span="24" class="one">
          <van-image :src="bj"></van-image>
          <p>省重点实验室</p>
        </van-col>
        <van-col span="24" class="two">
          <van-tabs v-model="active" color="#409eff">
            <van-tab name="0" title="简介">
              <van-col span="24" class="tabs_1" :style="{ height: client.height - 240 + 'px' }" style="overflow-y: auto">
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 概况 </van-divider>
                <info-1 :info="info"></info-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 主任 </van-divider>
                <director-1 :info="info"></director-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 学术委员会 </van-divider>
                <learning-1 :list="learningList" :directionL="directionL"></learning-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 联系人 </van-divider>
                <contacts-1 :info="info"></contacts-1>
              </van-col>
            </van-tab>
            <van-tab name="1" title="实力">
              <van-col span="24" class="tabs_1" :style="{ height: client.height - 240 + 'px' }" style="overflow-y: auto">
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 主要研究方向 </van-divider>
                <direction-1 :list="directionList" :personnelList="personnelList" :userL="userL"></direction-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 承担科研项目 </van-divider>
                <task-1 :list="taskList"></task-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 核心成员（固定人员） </van-divider>
                <personnel-1 :list="personnelList"></personnel-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 仪器设备 </van-divider>
                <equipment-1 :list="equipmentList"></equipment-1>
              </van-col>
            </van-tab>
            <van-tab name="2" title="成果">
              <van-col span="24" class="tabs_1" :style="{ height: client.height - 240 + 'px' }" style="overflow-y: auto">
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 制定标准明细 </van-divider>
                <award-1 :list="awardList" :directionList="directionList" :directionL="directionL"></award-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 论文 </van-divider>
                <paper-1 :list="paperList" :personnelList="personnelList" :userL="userL"></paper-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 奖励 </van-divider>
                <patent-1 :list="patentList" :directionList="directionList" :directionL="directionL"></patent-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 重大成果 </van-divider>
                <outcome-1 :list="outcomeList"></outcome-1>
              </van-col>
            </van-tab>
          </van-tabs>
        </van-col>
      </template>
    </admin-frame>
  </div>
</template>

<script>
import info1 from '@/layout/scientific/laboratory/info-1.vue';
import director1 from '@/layout/scientific/laboratory/director-1.vue';
import learning1 from '@/layout/scientific/laboratory/learning-1.vue';
import contacts1 from '@/layout/scientific/laboratory/contacts-1.vue';
import direction1 from '@/layout/scientific/laboratory/direction-1.vue';
import task1 from '@/layout/scientific/laboratory/task-1.vue';
import personnel1 from '@/layout/scientific/laboratory/personnel-1.vue';
import equipment1 from '@/layout/scientific/laboratory/equipment-1.vue';
import award1 from '@/layout/scientific/laboratory/award-1.vue';
import paper1 from '@/layout/scientific/laboratory/paper-1.vue';
import patent1 from '@/layout/scientific/laboratory/patent-1.vue';
import outcome1 from '@/layout/scientific/laboratory/outcome-1.vue';
import adminFrame from '@common/src/components/mobile-frame/mobile-main.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('basic');
const { mapActions: committee } = createNamespacedHelpers('committee');
const { mapActions: direction } = createNamespacedHelpers('direction');
const { mapActions: science } = createNamespacedHelpers('science');
const { mapActions: fixedpersonnel } = createNamespacedHelpers('fixedpersonnel');
const { mapActions: equipment } = createNamespacedHelpers('equipment');
const { mapActions: tecAward } = createNamespacedHelpers('tecAward');
const { mapActions: paper } = createNamespacedHelpers('paper');
const { mapActions: award } = createNamespacedHelpers('award');
const { mapActions: outcome } = createNamespacedHelpers('outcome');
export default {
  name: 'index',
  props: {},
  components: {
    adminFrame,
    info1,
    director1,
    learning1,
    contacts1,
    direction1,
    task1,
    personnel1,
    equipment1,
    award1,
    paper1,
    patent1,
    outcome1,
  },
  data: function () {
    return {
      // 浏览器高度，宽度
      client: {},
      bj: require('@a/bj.jpg'),
      active: '2',
      // 详细信息
      info: {},
      learningList: [],
      directionList: [],
      taskList: [],
      personnelList: [],
      equipmentList: [],
      awardList: [],
      paperList: [],
      patentList: [],
      outcomeList: [],
      // 研究方向
      directionL: [],
      //固定人员
      userL: [],
    };
  },
  async created() {
    await this.searchOther();
    if (this.id) await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch']),
    ...committee({ cquery: 'query' }),
    ...direction({ dquery: 'query' }),
    ...science({ squery: 'query' }),
    ...fixedpersonnel({ fquery: 'query' }),
    ...equipment({ equery: 'query' }),
    ...tecAward({ tquery: 'query' }),
    ...paper({ pquery: 'query' }),
    ...award({ aquery: 'query' }),
    ...outcome({ oquery: 'query' }),
    async search() {
      let res = await this.fetch(this.id);
      if (res.errcode == '0') this.$set(this, `info`, res.data);
      // 学术委员会
      res = await this.cquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `learningList`, res.data);
      // 主要研究方向
      res = await this.dquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `directionList`, res.data);
      // 承担科研项目
      res = await this.squery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `taskList`, res.data);
      // 核心成员(固定人员)
      res = await this.fquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `personnelList`, res.data);
      // 仪器设备
      res = await this.equery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `equipmentList`, res.data);
      // 制定标准明细
      res = await this.tquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `awardList`, res.data);
      // 论文
      res = await this.pquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `paperList`, res.data);
      // 奖励
      res = await this.aquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `patentList`, res.data);
      //重大成果
      res = await this.oquery({ lab_id: this.id });
      if (res.errcode == '0') this.$set(this, `outcomeList`, res.data);
    },
    // 返回
    back() {
      this.$router.push({ path: '/scientific/laboratory/index' });
    },
    async searchOther() {
      let res = await this.dquery();
      if (res.errcode == '0') this.$set(this, `directionL`, res.data);
      res = await this.fquery();
      if (res.errcode == '0') this.$set(this, `userL`, res.data);
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  mounted() {
    this.client = {
      height: document.documentElement.clientHeight || document.body.clientHeight,
      width: document.documentElement.clientWidth || document.body.clientWidth,
    };
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  height: 150px;
  overflow: hidden;
  position: relative;
  .van-image {
    height: 150px;
    overflow: hidden;
  }
  p {
    position: absolute;
    top: 44%;
    width: 100%;
    text-align: center;
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    font-family: cursive;
    text-shadow: 0 -3px #000;
  }
}
.van-divider {
  margin: 10px 0;
}
.two {
  .tabs_1 {
    background-color: #fff;
  }
}
</style>
