<template>
  <div class="template-open-wrap">
      <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"></bread-crumb>
    
      <div class="add-content screenSet" id="screenSet">
        <div class="top-lin"></div>
        <el-row class="step-content">
          <el-col :span="14">
            <el-steps :active="active" simple class>
              <span class="step-num" v-bind:class="{ 'on-step': active==0 }">1</span>
              <el-step title="选择项目模板">1</el-step>
              <span class="step-num" v-bind:class="{ 'on-step': active==1 }">2</span>
              <el-step title="填写项目信息">2</el-step>
              <span class="step-num" v-bind:class="{ 'on-step': active==2 }">3</span>
              <el-step title="选择学员范围">3</el-step>
            </el-steps>
          </el-col>
          <el-col :span="5" :offset="5">
            <div v-if="!canNext" class="dis-btn">下一步</div>
            <el-button v-if="active!=0" size="small" @click="save">暂存</el-button>
            <el-button v-if="active!==2 && canNext" size="small" type="primary" @click="nextStep">下一步</el-button>
            <el-button v-if="active==2" size="small" type="primary" @click="complete">完成</el-button>
          </el-col>
        </el-row>
        <!-- 模板列表 -->
        <div v-if="active == 0" class="tpl-main">
           <template-list @checkFn="checkFn"></template-list>
        </div>

        <!-- 填写项目信息-->
        <template-message
          ref="templateMessage"
          v-if="active == 1"
          :openTemplateId="openTemplateId"
          :projectId="projectId"
          :editor="editor"
          @next="next"
          @backSelectVue="backSelectVue"
        />
      
         <!-- 选择学员 -->
        <div class="three-step" v-if="active === 2">
          <el-tabs v-model="activeName" @tab-click="handleClickTabs">
            <el-tab-pane label="设定行政范围" name="first">
              <select-region ref="selectRegion" :projectId="projectId"></select-region>
            </el-tab-pane>
            <el-tab-pane label="设定机构" name="second">
              <set-organization ref="setOrganization"></set-organization>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

      <dialog-componet :dialogObj="dialogObj" @hide="hide"></dialog-componet>
  </div>
</template>

<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import templateMessage from "../../components/education/template/templateMessage";
import selectTemplate from "../../components/education/template/selectTemplate";
import selectRegion from "../../components/education/template/selectRegion";
import setOrganization from "../../components/education/template/setOrganization";
import templateList from "../../components/education/template/templateList";
import dialog from "../../components/education/template/dialog";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
let vm = null;
export default {
  data() {
    return {
      curmbFirst: "教培项目",
      curmbSecond: "项目管理",
      curmbThird: '发起项目',
      active: 0,
      formTemplate: {
        component: [],
        configure: 2,
        certificate: ""
      },
      activeName: "first",
      canNext: false,
      openTemplateId: 0, // 开放模板ID
      projectId: '', // 项目id
      status: 10, // 0正常10没有加入机构11审核中12审核失败20存在进行中项目21数量已达上限
      editor: false, // 是否为编辑状态
      dialogObj: {
        visible: false,
        title: '',
        message: '',
        hideMsg: ''
      },
      statusObj: {
        status_10: {
          title: '您暂未加入机构',
          message: '请前往云鹊医App-个人中心完善机构信息，加入机构后，可创建项目',
          hideMsg: '我知道了'
        },
        status_11: {
          title: '您创建的机构正在审核中',
          message: '请前往云鹊医App-个人中心查看审核进度，审核通过后，可创建机构',
          hideMsg: '我知道了'
        },
        status_12: {
          title: '您创建的机构审核不通过',
          message: '请前往云鹊医App-个人中心完善机构信息，加入机构后，可创建项目',
          hideMsg: '我知道了'
        },
        status_20: {
          title: '该项目正在进行中',
          message: '不能重复创建，请选择其他模版或者下架正在进行中的项目',
          hideMsg: '确定'
        },
        status_21: {
          title: '该项目创建数量已上限',
          message: '本年度免费创建数已达',
          hideMsg: '确定'
        }
      }
    }
  },
  components: {
    BreadCrumb,
    templateMessage,
    selectTemplate,
    selectRegion,
    setOrganization,
    templateList,
    dialogComponet:dialog
  },
  created() {
    vm = this;
  },
  mounted() {
    commonUtil.resizeHeight();
  },
  methods: {
    // 下一步
    nextStep() {
      if (this.active == 0) {
        // let flag = this.checkSelectTemplate();
        let flag = true;
        if (flag) {
          this.active = 1;
        }
        return;
      }
      if (this.active == 1) {
        this.$refs.templateMessage.nextStep();
        return;
      }
    },
    // 填写项目信息组件的下一步回调
    next(id) {
      this.projectId = id;
      this.active = 2;
    },
    // 暂存
    save() {
      if (this.active == 1) {
        this.$refs.templateMessage.save();
      } else if (this.active == 2) {
        this.regionComplete();
      }
    },
    // 完成
    complete() {
      this.regionComplete(this.changeStatus());
    },
    // 选择学元范围暂存
    regionComplete(fishFn) {
      let req = {
        projectId: this.projectId,
        scopeOfAdministrative:  this.$refs.selectRegion.setScope(),
        scopeOfDepartment: 99999999,
        flag: fishFn ? 3 : 1, //0：下一步 1：暂存
      };
      openLoading(vm);
      vm.POST("portal/new/scope", req).then(res => {
        closeLoading(vm);
        if(res.code == '000000' && fishFn) {
          fishFn();
        }
        if (!fishFn) {
          vm.$message({
            type: "info",
            message: res.message
          });
        }
      });
    },
    // 完成后更改状态
    changeStatus() {
      let req = {
        projectId: this.projectId,
        changeStatus: 3 //待审核
      };
      vm.POST("portal/portalInfo/changeStatus", req)
        .then(res => {
          vm.$message({
            type: "info",
            message: res.message
          });
        })
        .catch(() => {
          vm.$message({
            type: "warning",
            message: res.message
          });
        })
    },
     //切换tabs
    handleClickTabs(tab, event) {
      if (tab.name == 'second') {
        this.setRegion();
      }
    },
    // 模板列表选中
    checkFn(id) {
      this.canNext = true;
      this.openTemplateId = id;
    },
    //选中模板后点击下一步时检测(机构和进行中的项目)
    checkSelectTemplate() {
      openLoading(vm);
      vm.GET(`portal/openTemplateProject/checkAfterSelectOneOpenTemplate/${vm.openTemplateId}`)
        .then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
              if (res.data.status == 0) {
                return true;
              } else {
                this.dialogObj = Object.assign(this.dialogObj, this.statusObj[`status_${res.data.status}`]);
                this.dialogObj.visible = true;
                return false;
              }
          } else {
            vm.$message.info(res.message);
          }
        })
        .catch((err) => {
          closeLoading(vm);
          vm.$message.warning('请稍后重试');
        });
    },
    // 隐藏弹框
    hide() {
      this.dialogObj.visible = false;
    },
    // 获取行政范围
    setRegion() {
      this.getOrganizationList(this.$refs.selectRegion.getScope());
    },
    // 查询行政范围的设定机构列表
    getOrganizationList(r) {
      this.$refs.setOrganization.getOrganization(r);
    },
    // 返回选择模板页
    backSelectVue() {
      this.active = 0;
    }
  }
}
</script>

<style lang="scss">
.template-open-wrap {
  .el-step.is-simple:not(:last-of-type) .el-step__title {
    max-width: 100%;
  }
  .top-lin {
    position: fixed;
    height: 30px;
    background: #F0F2F5;
    right: 30px;
    left: 285px;
    z-index: 1001;
    top: 125px;
  }
  .step-content {
    background: #fff;
    z-index: 1001;
    background: #fff;
    position: fixed;
    right: 30px;
    left: 285px;
    overflow: hidden;
    height: 60px;
    // margin-top: 66px;
    padding: 15px 0 50px 0;
    border-bottom: 1px solid #efefef;
    background: #fff;
    .is-text {
      display: none;
    }
    .el-steps--simple {
      background: #fff;
    }
    .button-green {
      color: #ffffff;
      background: #449284;
      border-color: #bfdad5;
      border-radius: 2px;
    }
    .button-white {
      color: #606266;
      background: #ffffff;
      border-color: #ecedf1;
      border-radius: 2px;
    }
    .step-num {
      display: block;
      // margin-top: 1.5px;
      font-size: 12px;
      border: 1px solid #999 !important;
      border-radius: 50%;
      width: 25px;
      height: 18px;
      line-height: 16px;
      text-align: center;
      color: #999;
    }
    .el-step__title.is-wait {
      color: #999;
    }
    .el-step__title.is-process {
      color: #449284;
    }
    .is-finish {
      color: #999 !important;
    }
    .on-step {
      color: #449284;
      border: 1px solid #449284 !important;
    }
    .dis-btn {
      width:78px;
      height:34px;
      background:rgba(240,242,245,1);
      border-radius:3px;
      font-size:14px;
      font-family:PingFangSC-Regular,PingFang SC;
      font-weight:400;
      color:rgba(144,147,153,1);
      line-height:34px;
      text-align: center;
      cursor: pointer;
    }
  }
  .add-content {
    background: #fff;
  }
  .three-step {
    padding-top: 64px;
    margin: 10px 0 0 20px;
    .area-p {
      margin-bottom: 15px;
      font-size: 14px;
    }
    .span_ecology {
      line-height: 45px;
      margin-left: 8px;
    }
    .dialog-p {
      text-align: center;
      span {
        color: #449284;
      }
    }
    //隐藏树展开
    .table-empty {
      img {
        width: 100px;
      }
      p {
        margin-top: -50px;
      }
    }
    .el-tree-node__expand-icon {
      display: none;
    }
    .department {
      margin-top: 20px;
      border: 1px solid #dddddd;
    }
    .el-tabs__nav-wrap::after {
      display: none;
    }
    .el-tabs__active-bar {
      display: none;
    }
    #tab-first,
    #tab-second,
    #tab-third {
      padding-right: 0px;
    }
    #tab-first::after {
      color: #c7cbd2;
      margin-left: 20px;
      content: "•";
    }
    .el-tabs__item.is-active {
      color: #fff;
    }
    .el-tag {
      margin: 0 10px 10px 0;
      border: 1.3px solid #48a8fe;
      color: #1e92fe;
      background-color: #e7f6fe;
      .el-icon-close {
        width: 13px;
        height: 13px;
        line-height: 13px;
        font-size: 12px;
        background-color: #0486fe;
        border-radius: 50%;
        color: #d4edfe;
      }
    }
    .down-button {
      margin-left: 10px;
    }
    .down-button-close {
      margin-left: 100px;
      float: left;
    }
    .dialog-success {
      p {
        text-align: center;
        .upload-text{
          color: #449284;
        }
      }
    }
    .dialog-fail {
      .fail-type {
        p {
          margin-top: 10px;
        }
        .fail-num {
          color: #db3f52;
        }
        .fail-notice {
          color: #e3e3e3;
          font-size: 13px;
        }
        .fail-link {
          text-align: center;
          color: #449284;
          cursor: pointer;
        }
      }
    }
    
  }
  .tpl-main {
    padding-top: 60px;
  }
}
</style>
