<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"></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"></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"></award-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 论文 </van-divider>
                <paper-1 :list="paperList"></paper-1>
                <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 10px' }"> 奖励 </van-divider>
                <patent-1 :list="patentList"></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('laboratory');
// 学术委员会
const { mapActions: committee } = createNamespacedHelpers('committee');
// 研究方向
const { mapActions: direction } = createNamespacedHelpers('direction');
// 承担科研项目
const { mapActions: task } = createNamespacedHelpers('task');
// 核心成员(固定人员)
const { mapActions: personnel } = createNamespacedHelpers('personnel');
// 仪器设备
const { mapActions: equipment } = createNamespacedHelpers('equipment');
// 专利
const { mapActions: award } = createNamespacedHelpers('award');
// 论文
const { mapActions: paper } = createNamespacedHelpers('paper');
// 奖励
const { mapActions: patent } = createNamespacedHelpers('patent');
// 重要成果
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: [
        {
          age: null,
          createBy: '1',
          createTime: '2021-09-17 13:36:25',
          delFlag: '0',
          directionId: '生物钟异常与癫痫病机理',
          id: 'c6c020e1d88643f59db9a2f7b0c533cb',
          job: null,
          name: '李培军',
          params: {},
          remark: null,
          searchValue: null,
          title: null,
          type: '2',
          unit: '温州医科大学附属第二医院、育英儿童医院',
          updateBy: null,
          updateTime: null,
        },
      ],
      // 主要研究方向
      directionList: [
        {
          createBy: '1',
          createTime: '2021-09-24 15:10:01',
          delFlag: '0',
          id: 'direction001',
          name: '开创视觉光刺激治疗癫痫研究',
          params: {},
          personId: 'person001',
          personName: '王江涛',
          persons: [
            {
              createBy: null,
              createTime: '2021-10-11 19:57:29',
              direction: 'direction001',
              id: '2896b42a57ec49b4aa2102d324fca81e',
              params: {},
              personId: 'person435',
              personName: '张洪波',
              remark: null,
              searchValue: null,
              updateBy: null,
              updateTime: null,
            },
            {
              createBy: null,
              createTime: '2021-10-11 19:57:29',
              direction: 'direction001',
              id: '39ec9611c3814f738cf8118522e00c7a',
              params: {},
              personId: 'person1119',
              personName: '李国亮',
              remark: null,
              searchValue: null,
              updateBy: null,
              updateTime: null,
            },
          ],
          remark: null,
          searchValue: null,
          updateBy: '1',
          updateTime: '2021-10-11 19:57:28',
        },
      ],
      // 承担科研项目
      taskList: [
        {
          cooperativeunit: '中心',
          createBy: '1',
          createTime: '2021-09-23 10:30:01',
          delFlag: '0',
          direction: 'direction001',
          directionName: '开创视觉光刺激治疗癫痫研究',
          fzuser: 'person001',
          id: '6db0514ae17443e0a6017a30381df660',
          labname: null,
          laiyuancontent: '横向合作<横向合作',
          money: 105,
          name: '名称',
          params: {},
          participants: null,
          persons: [
            {
              createBy: null,
              createTime: '2021-10-09 09:52:14',
              delFlag: '0',
              id: '30501382e525433bba47df3ecc0789db',
              params: {},
              projectid: '6db0514ae17443e0a6017a30381df660',
              remark: null,
              searchValue: null,
              updateBy: null,
              updateTime: null,
              userName: '张彤',
              userid: 'person004',
            },
            {
              createBy: null,
              createTime: '2021-10-09 09:52:14',
              delFlag: '0',
              id: '4637ac39b76545dfb27718e9d8d169a0',
              params: {},
              projectid: '6db0514ae17443e0a6017a30381df660',
              remark: null,
              searchValue: null,
              updateBy: null,
              updateTime: null,
              userName: '王江涛',
              userid: 'person001',
            },
          ],
          projectlevelone: 'xm666sss',
          projectsource: '5',
          projectsourcetwo: '21',
          remark: null,
          searchValue: null,
          state: null,
          statemoney: 5,
          time: '2021-09-22',
          updateBy: null,
          updateTime: '2021-10-09 09:52:14',
          userName: '王江涛',
          usernum: '10',
          userproportion: '30%',
        },
      ],
      // 核心成员
      personnelList: [
        {
          age: null,
          createBy: '1',
          createTime: '2021-09-17 00:00:00',
          delFlag: '0',
          educationale: null,
          id: 'person001',
          job: null,
          make: null,
          name: '王江涛',
          params: {},
          remark: null,
          searchValue: null,
          unit: '吉林大学第一医院小儿神经科',
          updateBy: 'userid001',
          updateTime: '2021-09-23 13:26:37',
        },
        {
          age: null,
          createBy: '2',
          createTime: '2021-09-17 00:00:00',
          delFlag: '0',
          educationale: null,
          id: 'person002',
          job: null,
          make: '1',
          name: '刘光耀',
          params: {},
          remark: null,
          searchValue: null,
          unit: '吉林大学中日联谊医院',
          updateBy: 'userid002',
          updateTime: '2021-09-17 10:35:10',
        },
      ],
      // 仪器设备
      equipmentList: [
        {
          count1: null,
          count2: null,
          count3: null,
          count4: null,
          count5: null,
          count6: null,
          createBy: '1',
          createTime: '2021-10-17 16:14:42',
          delFlag: '0',
          equipmentMoney: 50,
          equipmentNumb: null,
          id: '42d852f2bc9944feaca6671630b38aa0',
          instrumentsNumb: 'Y',
          name: '特种设备3',
          params: {},
          rate: 0.07778,
          remark: null,
          researchHour: 60,
          searchValue: null,
          servicesHour: 80,
          updateBy: '特种设备3',
          updateTime: '2021-10-17 16:25:37',
        },
      ],
      // 专利
      awardList: [],
      // 论文
      paperList: [],
      // 奖励
      patentList: [],
      // 重大成果
      outcomeList: [],
    };
  },
  async created() {
    if (this.id) await this.search();
  },
  methods: {
    ...mapActions(['fetch']),
    ...committee({ committeeQuery: 'query' }),
    ...direction({ directionQuery: 'query' }),
    ...task({ taskQuery: 'query' }),
    ...personnel({ personnelQuery: 'query' }),
    ...equipment({ equipmentQuery: 'query' }),
    ...award({ awardQuery: 'query' }),
    ...paper({ paperQuery: 'query' }),
    ...patent({ patentQuery: 'query' }),
    ...outcome({ outcomeQuery: 'query' }),
    async search() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) this.$set(this, `info`, res.data);
      // 学术委员会
      res = await this.committeeQuery();
      if (this.$checkRes(res)) console.log(res);
      // 主要研究方向
      res = await this.directionQuery();
      if (this.$checkRes(res)) console.log(res);
      // 承担科研项目
      // 核心成员(固定人员)
      // 仪器设备
      // 专利
      // 论文
      // 奖励
      // 重大成果
    },
    // 返回
    back() {
      this.$router.push({ path: '/scientific/laboratory/index' });
    },
  },
  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>
