<template>
  <div class="course-analysis-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
        <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
          <el-col :span="5">
            <el-form-item label="选择地区：">
              <el-cascader
                :options="optionsRegion"
                v-model="formInline.region"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择日期：">
              <el-date-picker
                v-model="formInline.date"
                size="small"
                type="daterange"
                placeholder="请选择开始时间"
                range-separator="~"
                value-format="yyyy-MM-dd 00:00:00"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding:0;text-align:right;padding-right:15px;">
            <el-button type="default" size="small" @click="reset">重置</el-button>
            <el-button type="primary" size="small" @click="search" style="margin-left:0;">查询</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form ref="formInline" :model="formInline" label-width="75px" style="width:100%;">
            <el-form-item label="选择机构：">
              <el-select
                size="small"
                v-model="formInline.organization"
                placeholder="请选择发布状态"
                @change="changeOrganization"
              >
                <el-option
                  v-for="item in organizationList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="choose">{{ chooseOrganization }}</div>
      <div class="button-group">
        <el-button type="default" size="small" @click="exportExcel">导出Excel</el-button>
        <el-button type="default" size="small" @click="changeDate" v-if="activeName=='first'">数据调整</el-button>
        <el-button type="default" size="small" @click="update" v-else>修改范围</el-button>
        <el-button type="primary" size="small" @click="release">发布报告</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="参与情况" name="first">
              <part-in></part-in>
            </el-tab-pane>
            <el-tab-pane label="人群分析" name="second">
              <crowd-analysis ref="childCrowd" :formInline="formInline" :activeName="activeName">
              </crowd-analysis>
            </el-tab-pane>
            <el-tab-pane label="课程分析" name="third">
              <course-analysis ref="childCourse" :formInline="formInline" :activeName="activeName">
              </course-analysis>
            </el-tab-pane>
            <el-tab-pane label="考试分析" name="fourth">
              <examination-analysisfrom></examination-analysisfrom>
            </el-tab-pane>
            <el-tab-pane label="学习效果分析" name="fifth" lazy>
              <learning-effect></learning-effect>
            </el-tab-pane>
          </el-tabs>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import CourseAnalysis from "./course-analysis.vue";
import CrowdAnalysis from "./crowd-analysis.vue";
import PartIn   from './part-in.vue';
import ExaminationAnalysisfrom from './examination-analysis.vue';
import LearningEffect from './learning-effect.vue';
import { create } from "domain";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
import { log } from 'util';

let vm = null;
export default {
  components: {
    BreadCrumb,
    CourseAnalysis,
    CrowdAnalysis,
    PartIn,
    ExaminationAnalysisfrom,
    LearningEffect
  },
  data() {
    return {
      curmbFirst: "学情报告",
      curmbSecond: "项目列表",
      organizationList: [
        {
          label: "西湖区第二人民医院",
          value: "1"
        },
        {
          label: "杭州市中医院",
          value: "2"
        }
      ],
      chooseOrganization: "",
      optionsRegion: [],
      formInline: {
        region: [],
        date: "",
        organization: "",
        pageNo: 1,
        pageSize: 10
      },
      activeName: "first"
    };
  },
  computed: {
    ...mapGetters([
      "_token"
      // "idType",
      // "masterAdministratorFlag"
    ])
  },
  created() {
    vm = this;
    this.getRegionOption();
  },
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    handleClick(tab, event) {
      //console.log(tab, event);
      console.log('activeName',this.activeName);
      if(tab.name == "second") {
        
        this.$refs.childCrowd.$emit("init");
      }
    },
    handleChange(value) {
      console.log(value);
    },
    changeOrganization(value) {
      for (let i = 0; i < this.organizationList.length; i++) {
        if (value == this.organizationList[i].value) {
          this.chooseOrganization = this.organizationList[i].label;
        }
      }
    },
    getRegionOption() {
      this.optionsRegion = operationData.getRegionOption();
    },
    search() {
      //console.log(this.formInline,this.activeName);
      if (this.activeName == "first") {
      } else if (this.activeName == "second") {
        this.$refs.childCrowd.$emit("search");
      } else if (this.activeName == "third") {
        this.$refs.childCourse.$emit("search");
      } else if (this.activeName == "fourth") {
      } else if (this.activeName == "fifth") {
      }
    },
    reset() {},
    exportExcel() {
      console.log('excel');
    },
    update() {},
    release() {},
    changeDate() {
      this.$router.push('/data-alignment')
    }
  }
};
</script>
<style lang="scss">
.course-analysis-wrap {
  .component-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .button-group {
      // position: absolute;
      // right: 100px;
      float: right;
      margin-right: 20px;
    }
    .choose {
      font-size: 12px;
      margin-bottom: 20px;
    }
    .el-tabs__item.is-active {
      color: #409eff;
    }
    .el-tabs__header {
      width: 81%;
    }
  }
}
</style>