<template>
  <div>
    <el-alert
      title="课程信息设置"
      :closable="false"
      class="alert"
      type="info">
    </el-alert>
    <userBaseinfo
      :form.sync="form"
      :isCommon="isCommon"
      :isUserType="isUserType"
      @getCharges="getCharges"
      :typeList="typeList"
      :charges="charges"
      ref="base"
    />
    <template v-if="!isCommon">
      <el-alert
        title="加课信息设置"
        :closable="false"
        class="alert"
        type="info">
      </el-alert>
      <extraClass
        :form="eclass"
        ref="eclass"
        @create="addExtraClass"
        @remove="removeExtraClass"
      />
    </template>
    <extraClass
      v-else
      :form="eclass"
      ref="eclass"
      @create="addExtraClass"
      @remove="removeExtraClass"
    />
    <template v-if="isUserType">
      <el-alert
        title="缴费设置"
        :closable="false"
        class="alert"
        type="info">
      </el-alert>
      <paymentCycle
        ref="cycle"
        :form.sync="cycle"
      />
    </template>
    <el-alert
      title="其它"
      :closable="false"
      class="alert"
      type="info">
    </el-alert>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$listeners.close">取 消</el-button>
      <el-button
        type="primary"
        @click="submit"
        >下一步</el-button>
    </div>
    <el-dialog
      :title="nextTitle"
      :visible.sync="nextVisible"
      width="600px"
      append-to-body
    >
      <classrooms
        @close="closeNext"
      />
    </el-dialog>
  </div>
</template>
<script>
import { chargeTypeList, musicGroupOrganizationCourseSettingsQueryPage } from '@/api/specialSetting'
import { musicGroupPaymentCalenderAdd } from '../api'
import { getTimes } from '@/utils'
import userBaseinfo from './user-baseinfo'
import paymentCycle from './payment-cycle'
import extraClass from './extra-class'
import classrooms from './classrooms'

export default {
  props: ['type', 'musicGroupId', 'baseInfo'],
  components: {
    userBaseinfo,
    paymentCycle,
    extraClass,
    classrooms,
  },
  data() {
    return {
      options: [],
      form: {
        payUserType: this.type === 'user' ? 'STUDENT' : 'SCHOOL',
        leixing: '0',
      },
      cycles: [{}],
      cycle: {},
      eclass: [{}],
      collapse: [],
      nextVisible: false,
      typeList: [],
      charges: [],
    }
  },
  computed: {
    isCommon() {
      return this.form.leixing === '1'
    },
    isUserType() {
      return this.type === 'user'
    },
    nextTitle() {
      return this.isCommon ? '乐团课程-班级选择' : '临时加课-班级选择'
    },
    chargesById() {
      const data = {}
      for (const item of this.charges) {
        data[item.id] = item
      }
      return data
    },
  },
  watch: {
    eclass() {
      console.log([...this.eclass])
    },
    baseInfo() {
      const chargeTypeId = this.baseInfo?.musicGroup?.chargeTypeId
      this.getCharges(chargeTypeId)
    },
    'form.leixing'() {
      this.cycles = [{}]
      this.collapse = [0]
      this.cycle = {}
    },
    'form.musicGroupOrganizationCourseSettingId'() {
      this.eclass = this.chargesById[this.form.musicGroupOrganizationCourseSettingId]?.details || []
    }
  },
  mounted() {
    this.getChargeTypeList()
  },
  methods: {
    async getChargeTypeList() {
      try {
        const res = await chargeTypeList({
          row: 9999
        })
        this.typeList = res.data.rows
      } catch (error) {}
    },
    async getCharges(chargeTypeId) {
      try {
        const res = await musicGroupOrganizationCourseSettingsQueryPage({
          row: 9999,
          chargeTypeId
        })
        this.charges = res.data.rows
      } catch (error) {}
    },
    addExtraClass() {
      this.eclass.push({})
    },
    removeExtraClass(index) {
      this.eclass[index] = null
      this.eclass = this.eclass.filter(item => !!item)
    },
    addCycle() {
      this.cycles.push({})
      this.collapse.push(this.collapse.length)
    },
    removeCycle(index) {
      this.cycles[index] = null
      this.cycles = this.cycles.filter(item => !!item)
      this.collapse.pop()
    },
    collapseChange(val) {
      this.collapse = val
    },
    closeNext() {
      this.nextVisible = false
    },
    getForms() {
      const { $refs: refs } = this
      return [refs.base, refs.eclass, refs.cycle]
        .filter(item => !!item)
        .map(item => item.$refs.form)
    },
    async submit() {
      const forms = this.getForms()
      console.log(forms)
      const valided = []
      for (const form of forms) {
        form.validate(valid => {
          if (valid) {
            valided.push(form)
          }
        })
      }
      if (valided.length === forms.length) {
        const { paymentDate, paymentValid, leixing, ...rest } = {...this.form, ...this.cycle, musicGroupPaymentCalenderCourseSettingsList: this.eclass}
        const data = {
          ...rest,
          paymentType: leixing,
          musicGroupId: this.musicGroupId,
          ...getTimes(paymentDate, ['startPaymentDate', 'deadlinePaymentDate']),
          ...getTimes(paymentValid, ['paymentValidStartDate', 'paymentValidEndDate']),
        }
        try {
          await musicGroupPaymentCalenderAdd(data)
        } catch (error) {}
        // this.nextVisible = true
      }
    }
  },
};
</script>
<style lang="less" scoped>
  .dialog-footer{
    margin-top: 20px;
    display: block;
    text-align: right;
  }
  .alert{
    margin-bottom: 10px;
  }
  .collapse-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .el-icon-circle-close{
      font-size: 16px;
      margin-right: 10px;
    }
  }
  /deep/ .el-collapse-item__wrap{
    padding-top: 20px;
  }
</style>
