<template>
  <div class="course-analysis-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <el-form ref="formInline" :model="formInline" label-width="80px" style="width:50%">
        <el-form-item label="选择地区：">
          <el-cascader
            size="small"
            ref="cascaderRegion"
            :options="optionsRegion"
            v-model="formInline.region"
            @change="handleChange"
            @expand-change="expandChange"
            filterable
            change-on-select
            style="width:330px"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="选择机构：">
          <el-select
            size="small"
            v-model="formInline.organization"
            placeholder="请选择发布状态"
            @change="changeOrganization"
            multiple
            collapse-tags
            :disabled="formInline.region.length !== 3"
            style="width:330px"
          >
            <el-option
              v-for="item in organizationList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="tag-group">
          <el-tag
            v-for="tag in tags"
            :key="tag.value"
            type="info"
            closable
            @close="handleTagClose(tag)"
          >{{ tag.label }}</el-tag>
        </div>
        <el-form-item label>
          <el-checkbox size="small" v-model="formInline.checked">查看原始数据</el-checkbox>
        </el-form-item>
      </el-form>
      <div class="form-button">
        <el-button @click="search()" type="primary">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </div>
      <div class="button-group">
        <el-button type="default" size="small" @click="changeDate">数据修改</el-button>
        <!-- <el-button type="default" size="small" @click="update" v-else>修改范围</el-button> -->
        <el-button type="default" size="small" @click="exportExcel">导出明细</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="参与情况" name="first">
          <part-in
            ref="childPart"
            :formInline="formInline"
            :activeName="activeName"
            :organizationNum="organizationNum"
          ></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" :dialogData="dialogData"></course-analysis>
        </el-tab-pane>
        <el-tab-pane label="考试分析" name="fourth">
          <examination-analysisfrom ref="childCourse" :formInline="formInline" :activeName="activeName" :dialogData="dialogData"></examination-analysisfrom>
        </el-tab-pane>
        <el-tab-pane label="学习效果分析" name="fifth" lazy>
          <learning-effect></learning-effect>
        </el-tab-pane>
      </el-tabs>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" center>
        <p style="text-align:center">文件正在生成，你可以去“我的导出下载”页，下载文件</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">留在当前页</el-button>
          <el-button type="primary" @click="toDownload()">去下载</el-button>
        </span>
      </el-dialog>
      <el-dialog title :visible.sync="dialogUpdate" width="90%" center>
        <!-- <el-button @click="dialogUpdate = false">取 消</el-button> -->
        <data-alignment @closeDialog="dialogUpdate = false" :dialogData="dialogData"></data-alignment>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import CourseAnalysis from "./item-course-analysis.vue";
import CrowdAnalysis from "./item-crowd-analysis.vue";
import PartIn from "./item-part-in.vue";
import ExaminationAnalysisfrom from "./item-examination-analysis.vue";
import LearningEffect from "./item-learning-effect.vue";
import DataAlignment from "./data-alignment.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,
    DataAlignment
  },
  data() {
    return {
      curmbFirst: "学情报告",
      curmbSecond: "项目列表",
      organizationList: [
        {
          label: "全部",
          value: 0
        },
        {
          label: "西湖区第二人民医院",
          value: 66
        },
        {
          label: "杭州市中医院",
          value: 233
        },
        {
          label: "仁济医院",
          value: 999
        }
      ],
      optionsRegion: [],
      formInline: {
        region: [],
        date: "",
        organization: [],
        checked: false,
        pageNo: 1,
        pageSize: 10,
      },
      dialogData: {
        region: '',
        organization: '',
      },
      tags: [],
      activeName: "first",
      organizationNum: 0,
      dialogVisible: false,
      dialogUpdate: false
    };
  },
  computed: {
    ...mapGetters(["_token"])
  },
  watch: {
    tags: function(val) {
      this.setDialogData();
    }
  },
  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 == "first") {
        
      }
      else if (tab.name == "second") {
        this.$refs.childCrowd.$emit("init");
      }
      else if (tab.name == "third") {
        // this.setDialogData();
      }
      else if (tab.name == "fourth") {
      }
    },
    handleChange(value) {
      this.formInline.organization = [];
      this.tags = [];
      // console.log(this.$refs["cascaderRegion"]);
      setTimeout(function() {
        // console.log(vm.$refs["cascaderRegion"].inputValue);
        vm.dialogData.region = vm.$refs["cascaderRegion"].inputValue;
        console.log('vm.dialogData.region',vm.dialogData.region)
      }, 20);
    },
    expandChange(value) {
      // console.log('expand',value)
    },
    changeOrganization(value) {
      // console.log('formInline',this.formInline.organization);
      this.tags = [];
      //选了全部的情况下
      for (let a = 0; a < this.formInline.organization.length; a++) {
        if (this.formInline.organization[a] == 0) {
          //选了全部
          let tagItem = {
            label: "全部",
            value: 0
          };
          this.tags.push(tagItem);
          return;
        }
      }
      //没选全部
      for (let i = 0; i < this.organizationList.length; i++) {
        for (let j = 0; j < value.length; j++) {
          if (value[j] == this.organizationList[i].value) {
            // console.log('value[j]',j,value[j],this.organizationList[i].label )
            let tagItem = {
              label: this.organizationList[i].label,
              value: this.organizationList[i].value
            };
            this.tags.push(tagItem);
          }
        }
      }
    },
    handleTagClose(tag) {
      // console.log(tag);
      //选了全部的情况下
      if (this.tags.length > 0 && this.tags[0].value == 0) {
        this.tags.splice(0, 1);
        this.formInline.organization = [];
        return;
      }
      //没全部的情况下
      for (let i = 0; i < this.tags.length; i++) {
        if (tag.value == this.tags[i].value) {
          this.tags.splice(i, 1);
          this.formInline.organization.splice(
            this.formInline.organization.indexOf(tag.value),
            1
          );
          break;
        }
      }
    },
    getRegionOption() {
      this.optionsRegion = operationData.getRegionOption();
    },
    getOrganizationNum() {
      //选择全部
      let num = 0;
      if (this.tags.length == 0) {
        return;
      }
      if (this.tags[0].value == 0) {
        num = this.organizationList.length - 1;
        return num;
      }
      //没有选择全部
      num = this.tags.length;
      return num;
    },
    search() {
      // console.log(this.formInline,this.activeName);
      if (this.activeName == "first") {
        this.organizationNum = this.getOrganizationNum();
        // console.log('this.organizationNum',this.organizationNum)
        this.$nextTick(function() {
          this.$refs.childPart.$emit("search");
        });
      } 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") {
      }
    },
    //重置
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          region: [],
          date: "",
          organization: [],
          checked: false,
          pageNo: 1,
          pageSize: 10
        }
      );
      vm.tags = [];
    },
    exportExcel() {
      this.dialogVisible = true;
    },
    toDownload() {
      vm.$router.push({ path: "export-download" });
    },
    update() {},
    release() {},
    setDialogData() {
      //传递给dialog数据
      this.dialogData.organization = '';
      for(let x=0;x<this.tags.length;x++) {
        this.dialogData.organization += this.tags[x].label+'、';
      }
      let len = this.dialogData.organization.length;
      this.dialogData.organization = this.dialogData.organization.substring(0,len-1);
    },
    changeDate() {
      this.setDialogData();
      this.dialogUpdate = true;
    }
  }
};
</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;
    }
    .form-button {
      width: 45%;
      top: -120px;
      position: relative;
      left: 50%;
    }
    .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: 65%;
    }
    .tag-group {
      margin-left: 78px;
      .el-tag {
        margin-right: 20px;
      }
    }
  }
}
</style>