<template>
  <div>
    <el-alert
      :title="'班级' + (index + 1)"
      type="info"
      :closable="false"
      class="alert"
    >
    </el-alert>
    <el-row>
      <el-col :span="12">
        <p class="classTitle">
          班级: <span>{{ className }}</span>
        </p>
      </el-col>
      <el-col :span="12">
        <div class="rightBtn">
          <el-button
            type="text"
            @click="studentListModalVisible = true"
            :disabled="!item.classId"
            class="studentTitle"
            >学员列表>></el-button
          >
        </div></el-col
      >
    </el-row>
    <div class="infomsg">
      <div class="left" v-if="Object.keys(item.courseList).length > 0">
        剩余课时:
        <div v-for="(val, key) in item.courseList" :key="key">
          <p style="margin-right: 5px">
            {{ key | courseTypeFormat }}:<span>{{ val }}</span
            >节
          </p>
        </div>
      </div>
      <div class="left" v-else>
        <div>暂无剩余课时</div>
      </div>
      <div class="right">
        已选学员:
        <p>
          <span>{{ item.studentList.length }}</span
          >人
        </p>
      </div>
    </div>
    <extraClass
      v-if="Object.keys(payItem).length > 0"
      :form="corusePayList"
      class="extraClass"
      ref="eclass"
      :isUserType="true"
      :isCommon="false"
      :isDisabled="true"
      :courseUnitPriceSettingsByType="courseTypesByType"
      @priceChange="priceChange"
      @moneyChange="syncAllMoney"
    />
    <paymentCycle
      v-if="Object.keys(payItem).length > 0"
      ref="cycle"
      :form="cycle"
      :isUserType="true"
      :isCommon="true"
      :isDisabled="true"
    />
    <otherform
      v-if="Object.keys(payItem).length > 0"
      :form="other"
      ref="other"
    />
    <p v-if="!(Object.keys(payItem).length > 0)" class="noMore">
      无需增加缴费周期
    </p>
    <el-dialog
      title="学员列表"
      width="700px"
      :visible.sync="studentListModalVisible"
      append-to-body
      destroy-on-close
    >
      <viewStudentList
        :list="item.studentList"
        v-if="studentListModalVisible"
        :showOk="true"
        :isChiose="false"
        @close="studentListModalVisible = false"
      />
    </el-dialog>
  </div>
</template>
<script>
import { getTimes } from "@/utils";
import paymentCycle from "@/views/resetTeaming/modals/payment-cycle";
import extraClass from "../../../resetTeaming/modals/extra-class";
import viewStudentList from "./view-student-list";
import otherform from "@/views/resetTeaming/modals/other";
export default {
  props: ["item", "index", "payInfo", "courseTypesByType"],
  components: { viewStudentList, paymentCycle, extraClass, otherform },
  data() {
    return {
      corusePayList: [],
      eclass: [],
      className: "",
      studentListModalVisible: false,
      isNoCourse: false,
      payItem: {},
      cycle: {
        paymentAmount: null,
        paymentPattern: null,
      },
      other: {},

    };
  },
  mounted() {
    this.musicGroupId = this.$route.query.id;
    let idList = this.item?.classList?.map((classes) => {
      if (classes.id == this.item.classId) {
        this.className = classes.name;
      }
      return classes.id;
    });
    for (let key in this.payInfo) {
      if (this.payInfo.hasOwnProperty(key)) {
        if (this.item.classId == key) {
          this.payItem = this.payInfo[key];
          // console.log(this.payItem);
          break;
        }
      }
    }
    if (Object.keys(this.payItem).length > 0) {
      this.corusePayList = [];
      for (let key in this.payItem) {
        if (this.payItem.hasOwnProperty(key)) {
          this.corusePayList.push(this.payItem[key]);
        }
      }
    }
    // this.syncAllMoney();
  },
  methods: {
    priceChange(item, index) {
      const _ = [...this.corusePayList];
      console.log('_',_)
      const active =
        this.organizationCourseUnitPriceSettingsByType[item.courseType] || {};
      const price = (
        (item.courseTotalMinuties || 1) * (active.unitPrice || 1)
      ).toFixed(2);
      item.courseCurrentPrice = price;
      item.courseOriginalPrice = price;
      _[index] = item;
      this.corusePayList = [..._];
      this.syncAllMoney();
    },
    syncAllMoney() {
      let money = 0;
      for (const item of this.corusePayList) {
        money += item.courseCurrentPrice;
      }

      this.cycle = {
        ...this.cycle,
        paymentAmount: money,
      };
    },
    getForms() {
      const { $refs: refs } = this;
      // [refs.base, refs.eclass, refs.cycle, ...(refs.cycles || []), refs.other, refs.payment]
      return [refs.eclass, refs.cycle, refs.other]
        .filter((item) => !!item)
        .map((item) => item.$refs.form || item);
    },
    getData() {
      const forms = this.getForms();
      const valided = [];
      for (const form of forms) {
        form.validate((valid) => {
          if (valid) {
            valided.push(form);
          }
        });
      }
      // if (this.eclass.length < 1) {
      //   return this.$message.error("请至少选择一条加课信息");
      // }
      console.log(valided.length,forms.length)
      if (valided.length === forms.length) {
        if(Object.keys(this.payItem).length > 0){
           const { leixing, ...rest } = {
          ...this.form,
          ...this.other,
          musicGroupPaymentCalenderCourseSettingsList: this.corusePayList,
        };

        if (this.$refs.cycle) {

          const {
            paymentDate,
            paymentValid,
            paymentPattern,
            ...other
          } = this.cycle;
          rest.paymentPattern = paymentPattern;
          rest.payUserType = "STUDENT";
          rest.paymentType = "ADD_COURSE";
          rest.studentIds = this.item?.studentList?.map(stu=>{return stu.userId}).join(',');
          rest.musicGroupPaymentDateRangeList = [
            {
              ...other,
              ...getTimes(paymentDate, [
                "startPaymentDate",
                "deadlinePaymentDate",
              ]),
              ...getTimes(paymentValid, [
                "paymentValidStartDate",
                "paymentValidEndDate",
              ]),
            },
          ];
        }
        const data = {
          ...rest,
          isGiveMusicNetwork: false,
          musicGroupId: this.musicGroupId,
        };
        return data;
        }else{
          return null
        }
        // 说明验证通过

      } else {
        this.$message.error("请填写必要信息");
        return 'error';
      }
    },

  },
   watch:{
      'payInfo':{
        deep:true,
        immediate:true,
         handler(newName, oldName) {
           console.log('调用了change方法')
          this.syncAllMoney();
          // this.priceChange()
        },
      }
    }
};
</script>
<style lang="scss" scoped>
.infomsg {
  background-color: #f5faf9;
  height: 34px;
  line-height: 34px;
  padding: 0 25px;
  color: #333;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 20px;
  div {
    display: flex;
    flex-direction: row;
    p {
      color: #1a1a1a;
      font-weight: bold;
      span {
        color: #3b7f7a;
      }
    }
  }
}
.classTitle {
  line-height: 40px;
  font-size: 16px;
  padding: 0 25px;
  color: #333;
  span {
    font-weight: bold;
  }
}
.rightBtn {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0 25px;
}
.extraClass {
  margin-bottom: 20px;
}
.noMore {
  text-align: center;
  margin: 60px;
}
</style>
