<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" :content="teamName"></el-page-header>
    </h2>
    <div class="m-core">
      <p class="msg" :class="team_status">
        <img
          :src="stepImgs[team_status]"
          alt=""
        />
        {{ musicGroupType[team_status] }}
      </p>
      <!-- navMenu -->
      <tab-router v-model.trim="activeIndex" type="card" ref="tab">
        <el-tab-pane
          label="基本信息"
          lazy
          v-if="permission('/resetTeaming/teamBaseInfo')"
          name="1"
        >
          <teamBaseInfo
            v-if="activeIndex == 1"
            @getBaseInfo="getBaseInfo"
            :baseInfo="baseInfo"
            @getName="getName"
          />
        </el-tab-pane>
        <el-tab-pane
          label="声部设置"
          lazy
          v-if="permission('/resetTeaming/resetSound')"
          name="2"
        >
          <resetSound v-if="activeIndex == 2" />
        </el-tab-pane>
        <el-tab-pane lazy label="预报名信息" name="9">
          <!--         v-if="
            team_status == 'PRE_APPLY' ||
            team_status == 'PRE_BUILD_FEE' ||
            team_status == 'FEE_AUDIT' ||
            team_status == 'APPLY'
          " -->
          <forecastName
            v-if="activeIndex == '9'"
            :isedit="team_status == 'PRE_APPLY'"
          />
        </el-tab-pane>
        <el-tab-pane lazy label="乐器清单" name="10">
          <musicOrder />
        </el-tab-pane>
        <el-tab-pane
          label="老师列表"
          v-if="permission('/teamDetails/teacherList')"
          name="4"
        >
          <teacherList :teamid="teamid" v-if="activeIndex == 4" />
        </el-tab-pane>
        <el-tab-pane
          label="学生列表"
          v-if="permission('/teamDetails/studentList')"
          name="7"
        >
          <studentList :teamid="teamid" v-if="activeIndex == 7" />
        </el-tab-pane>

        <el-tab-pane
          label="班级列表"
          lazy
          v-if="permission('/resetTeaming/resetClass')"
          name="5"
        >
          <resetClass
            v-if="activeIndex == 5 && musicGroupInfo"
            :musicGroupInfo="musicGroupInfo"
          />
        </el-tab-pane>
        <el-tab-pane
          label="课表详情"
          lazy
          v-if="permission('/teamDetails/courseList')"
          name="8"
        >
          <courseList v-if="activeIndex == '8'" :teamid="teamid" />
        </el-tab-pane>
        <el-tab-pane
          label="学员缴费设置"
          lazy
          v-if="permission('/resetTeaming/resetPayList')"
          name="3"
        >
          <resetPayList
            :baseInfo="baseInfo"
            v-if="activeIndex == 3 && baseInfo"
            @changeActive="handleClick"
          />
        </el-tab-pane>
        <el-tab-pane
          label="学校缴费设置"
          lazy
          v-if="permission('/resetTeaming/resetPayList')"
          name="6"
        >
          <resetPayListSchool
            :baseInfo="baseInfo"
            v-if="activeIndex == 6 && baseInfo"
            @changeActive="handleClick"
          />
        </el-tab-pane>
  <!--   v-if="permission('/resetTeaming/coursePlan')" -->
        <el-tab-pane label="乐团日志"

                     name="11">
          <teamJournal :teamid='teamid'
                      v-if="activeIndex == 11" />
        </el-tab-pane>
        <!-- <el-tab-pane label="新增小班课"
                     name="5">
          <improvement :teamid='teamid' />
        </el-tab-pane> 1-->
        <!-- 啦啦啦 -->
      </tab-router>
    </div>
  </div>
</template>
<script>
import teamBaseInfo from "@/views/teamBuild/components/teamBaseInfo";
// import resetSound from "@/views/resetTeaming/components/resetSoundv2";
import resetSound from "@/views/teamBuild/components/teamSoundSet"
import resetClass from "@/views/teamDetail/components/resetClass";
// import coursePlan from '@/views/teamBuild/teamSeting/components/coursePlan'
// import lookCourse from '@/views/teamBuild/teamSeting/components/lookCourse'
// import improvement from '@/views/teamBuild/teamSeting/components/improvementClass'
import resetPayList from "@/views/resetTeaming/components/resetPayList";
import resetPayListSchool from "@/views/resetTeaming/components/resetPayListSchool";
import studentPayBase from "@/views/resetTeaming/components/studentPayBase";
import studentList from "@/views/teamDetail/components/studentList";
import teacherList from "@/views/teamDetail/components/teacherList";
import courseList from "@/views/teamDetail/components/courseList";
import forecastName from "@/views/teamBuild/forecastName";
import musicOrder from "@/views/teamDetail/teamDetailedList";
import teamJournal from "@/views/teamBuild/components/teamJournal"
import { permission } from "@/utils/directivePage";
import { getTeamBaseInfo } from "@/api/buildTeam";
import { musicGroupType} from '@/constant'
export default {
  components: {
    teamBaseInfo,
    resetSound,
    resetClass,
    resetPayList,
    resetPayListSchool,
    studentPayBase,
    studentList,
    teacherList,
    courseList,
    forecastName,
    musicOrder,
    teamJournal
  },
  name: "resetTeaming",
  data() {
    return {
      activeIndex: "1",
      teamid: "",
      baseInfo: null,
      // permissionStatus: {
      //   teamBaseInfo: true,
      //   resetSound: true,
      //   resetClass: true,
      //   resetSound: true,
      //   coursePlan: true,
      // }
      name: null,
      teamName: "乐团修改",
      musicGroupInfo: null,
      musicGroupType,
      team_status: "",
      stepImgs: {
        AUDIT_FAILED: require("@/assets/images/base/end.png"),
        CANCELED: require("@/assets/images/base/end.png"),
        CLOSE: require("@/assets/images/base/end.png"),
        PAUSE: require("@/assets/images/base/end.png"),
        PROGRESS: require("@/assets/images/base/ing.png"),
        DRAFT: require("@/assets/images/base/ing.png"),
        AUDIT: require("@/assets/images/base/ing.png"),
        PRE_APPLY: require("@/assets/images/base/ing.png"),
        PRE_BUILD_FEE: require("@/assets/images/base/ing.png"),
        FEE_AUDIT: require("@/assets/images/base/ing.png"),
        APPLY: require("@/assets/images/base/clock.png"),
        PAY: require("@/assets/images/base/pay.png"),
        PREPARE: require("@/assets/images/base/ing.png"),
      },
    };
  },
  created() {
    // this.__init()
  },
  beforeDestroy() {
    // sessionStorage.setItem('setStep', 0)
    // sessionStorage.setItem('resetCode', 1)
  },
  mounted() {
    // let obj = {}
    // obj.name = this.activeIndex
    // console.log(this.activeIndex)
    // this.handleClick(obj)
    this.__init();
  },
  // activated () {
  //   let obj = {}
  //   obj.name = this.activeIndex
  //   this.handleClick(obj)
  //   this.__init()
  // },
  methods: {
    __init() {
      // this.activeIndex = sessionStorage.getItem('resetCode') || '1';
      this.teamid = this.$route.query.id;
      this.team_status = this.$route.query.team_status;
      if (this.$route.query.tabrouter != 1) {
        getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
          if (res.code == 200) {
            this.getBaseInfo(res.data);
          }
        });
      }
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/business/teamDetail" });
    },
    getBaseInfo(baseInfo) {
      this.baseInfo = baseInfo;
      this.teamName = baseInfo?.musicGroup?.name;
      this.musicGroupInfo = baseInfo?.musicGroup;
    },
    handleClick(val) {
      // this.activeIndex = val.name
      this.$refs.tab.tab(val);
    },
    permission(str) {
      return permission(str);
    },
    getName(val) {
      // this.name = val
    },
  },
};
</script>
<style lang="scss" scoped>
// AUDIT_FAILED: require("@/assets/images/base/end.png"),
//         CANCELED: require("@/assets/images/base/end.png"),
//         CLOSE: require("@/assets/images/base/end.png"),
//         PAUSE: require("@/assets/images/base/end.png"),


//         PROGRESS: require("@/assets/images/base/ing.png"),
//         DRAFT: require("@/assets/images/base/ing.png"),
//         AUDIT: require("@/assets/images/base/ing.png"),
//         PRE_APPLY: require("@/assets/images/base/ing.png"),
//         PRE_BUILD_FEE: require("@/assets/images/base/ing.png"),
//         FEE_AUDIT: require("@/assets/images/base/ing.png"),
//         APPLYL: require("@/assets/images/base/clock.png"),
//         PAY: require("@/assets/images/base/pay.png"),
//         PREPARE: require("@/assets/images/base/ing.png"),
.msg.PAY{
 color: #f85043;
}
.msg.APPLY{
 color: #f97215;
}
.msg.AUDIT_FAILED,.msg.CANCELED,.msg.CLOSE,.msg.PAUSE {
    color: #777;
}
.msg {
  color: #14928a;
  text-align: right;
  // color: #777;
  font-size: 32px;
  font-weight: bold;
  position: absolute;
  right: 40px;
  top: -33px;
  img {
    width: 36px;
    height: 36px;
    position: relative;
    top: 5px;
    margin-right: 8px;
  }
}
</style>
