<template>
  <div>
    <el-dialog
      title="班级排课"
      append-to-body
      width="800px"
      :visible.sync="transPlanVisible"
    >
      <div v-if="transPlanVisible">
        <el-collapse v-model="activeNames" class="statisticsCollapse" accordion>
          <el-collapse-item
            name="1"
            v-for="(item, index) in form.classList"
            :key="index"
          >
            <template slot="title">
              <div class="titleWrap">
                <div class="titleWrapText">
                  <p>{{ item.name }}</p>
                  <p class="secend">
                    已拍课<span style="color: red">{{
                      item.courseScheduleList.length
                    }}</span
                    >节
                  </p>
                </div>

                 <el-button class="gotoPlan" type="text" @click.stop="gotoPlan(item)">排课</el-button>
              </div>
            </template>
            <tranCourseItem
              :details="item.courseScheduleList"
              class="tranCourseItem"
            />

          </el-collapse-item>
        </el-collapse>
        <courseItem v-if="activeRow"  :surplustime="form.courseConvertSum.courseMinute" :activeType="'HIGH_ONLINE'"   :teacherList="teacherList"  :cooperationList="teacherList" :coreid="activeRow.coreTeacher" :type='"HIGH_ONLINE"'  :prices="prices"
            :holidays="holidays"/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transClassVisible = false">取 消</el-button>
        <el-button type="primary" @click="gotoNext">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tranCourseItem from "./tranCourseItem";
import courseItem from '../modals/classroom-setting-item.vue'
import { getSysTenantConfig } from "@/views/courseRulersManager/api";
import { queryByOrganIdAndCourseType } from "@/views/resetTeaming/api";
export default {
  props: ["form",'teacherList'],
  components: {
    tranCourseItem,
    courseItem
  },
  data() {
    return {
      transPlanVisible: false,
      activeNames: [],
      activeRow:null,
      prices:[],
      holidays:[]
    };
  },
  mounted() {},
  methods: {
    async openDialog() {
      // 获取列表
      this.init()
      this.transPlanVisible = true;

    },
    async init() {
      try {
        await MusicStore.dispatch("getBaseInfo", {
          data: { musicGroupId: this.musicGroupId },
        });
        const res = await queryByOrganIdAndCourseType({
          organId: this.musicGroup.organId,
        });
        const res1 = await getSysTenantConfig({
          group: "holiday",
        });

        this.holidays = JSON.parse(
          res1.data[0].paranValue ? res1.data[0].paranValue : "[]"
        );
        this.prices = res.data;
        let arr = [];
        if (JSON.stringify(this.prices) == "{}") {
          // 课程时长
          arr.push("teamCourseTimer");
        }
        if (this.holidays.length <= 0) {
          arr.push("holiday");
        }
        //
        if (arr.length > 0) {
          this.$bus.$emit("showguide", arr);
          return;
        }
      } catch (error) {
        console.log(error);
      }
    },
    gotoNext() {},
    gotoPlan(item){
      // 判断一下 如果班级数大于1 就进入次数排课
      this.activeRow = item;
    },
  },
};
</script>
<style lang="scss" scoped>
.statisticsCollapse {
  margin-bottom: 20px;
}
::v-deep .el-collapse-item__header {
  background: rgb(237, 238, 240);
  border-bottom: none !important;
}

// ::v-deep .el-collapse {
//   border-top:none!important;
//   border-bottom:none!important
// }

// ::v-deep .el-collapse-item__arrow {
//   display: none!important;
// }
.titleWrap{
  padding-left: 20px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  .titleWrapText {
    padding-right: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    .secend {
      margin-left: 20px;
      font-weight: 400;
    }
  }
  .gotoPlan {
    margin-right: 20px;
  }
}

.tranCourseItem {
  margin-top: 10px;
}
</style>
