<template>
  <view class="container safe-area-inset-bottom">
    <image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>
	<zmm-watermark :column="2" :margin="30" :watermark="watermark"></zmm-watermark>
    <u-notice-bar class="notice-bar" v-if="aspiration && aspiration.tip" :list="[aspiration.tip]"></u-notice-bar>

    <view class="wrap" v-if="step === 1">

      <view class="year-picker">
        <view class="year-picker__title">报考年份</view>
        <u-input class="year-picker__input"
                 v-model="form.year"
                 type="select"
                 :height="60"
                 border
                 border-color="#b2b2b2"
                 :custom-style="{
                   color: '#6c6f70'
                 }"
                 @click="isShowTime = true"></u-input>
      </view>
      <view class="user-form" v-if="false">
        <view class="user-form__input">
          <u-form :model="form" ref="uForm" :label-style="{ 'font-weight': '500' }" label-width="auto">
            <u-form-item label="学生姓名" required prop="name">
              <u-input v-model="form.name" placeholder="请输入" input-align="right" />
            </u-form-item>
            <u-form-item label="准考证" required prop="examination_number">
              <u-input v-model="form.examination_number" placeholder="请输入" input-align="right" />
            </u-form-item>
            <u-form-item label="毕业学校" required prop="finish_school">
              <u-input v-model="form.finish_school" placeholder="请输入" input-align="right" />
            </u-form-item>
          </u-form>
        </view>
      </view>
      <view class="area-pick">
        <view class="area-pick__title">所在区域</view>
        <view class="area-pick__panel">
          <view v-for="(group, groupId) in groupArea" :key="groupId" class="area-item" @click="form.group = groupId">
            {{ groupId }}
            <u-icon class="area-item__tag" v-if="form.group === groupId" name="checkmark-circle-fill" color="#fff" :size="64" />
          </view>
        </view>
      </view>

      <u-button
          shape="circle"
          ripple
          :custom-style="{
            'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
            height: '76rpx',
            'line-height': '76rpx',
            'margin-top': '110rpx',
            'width': '450rpx',
            'color': '#fff'
          }"
          @click="() => {
            if (form.group) {
              stepClick('next')
            } else {
              $u.toast('请选择区域')
            }
          }">下一步</u-button>
    </view>

    <view class="wrap" v-if="step > 1 && step <= (1 + batches.length)">
      <view class="picked-data">
        <view>{{ form.year }}年 {{ currentBatch.name || '-' }}</view>
      </view>

      <view class="card" v-for="item in currentBatchSub" :key="item.id">
        <view class="card__title">
          <view class="batch-sub__title">
            {{ item.name || '-' }}
          </view>
        </view>

        <view class="card__body">
          <view class="batch-sub-school" v-for="school in item.batch_sub_schools" :key="school.id">
            <view class="batch-sub-school__name">
              志愿序号 {{ school.number || '-' }}
            </view>
            <view class="batch-sub-school__form sub-form1">
              <view class="sub-form1__row sub-form1-title">
                <view class="sub-form1__col1">
                  代码
                </view>
                <view class="sub-form1__col2">
                  学校
                </view>
              </view>
              <view class="sub-form1__row">
                <view class="sub-form1__col1">
                  <u-input
                      disabled
                      v-model="flatForm[`${currentBatch.id}-${item.id}-${school.id}-code`]"
                      :height="50"
                      border
                      border-color="#e0e0e0"
                      input-align="center"
                      :clearable="false"
                      @click="forSchoolName = { needSpec: (school.specialty && school.specialty.length > 0), code: `${currentBatch.id}-${item.id}-${school.id}-code`, value: `${currentBatch.id}-${item.id}-${school.id}-value` },getSchools(item.id),isShowSchoolSelect = true"></u-input>
                </view>
                <view class="sub-form1__col2">
                  <u-input
                      disabled
                      v-model="flatForm[`${currentBatch.id}-${item.id}-${school.id}-value`]"
                      :height="50" border border-color="#e0e0e0"
                      input-align="center"
                      :clearable="false"
                      @click="forSchoolName = { needSpec: (school.specialty && school.specialty.length > 0), code: `${currentBatch.id}-${item.id}-${school.id}-code`, value: `${currentBatch.id}-${item.id}-${school.id}-value` },getSchools(item.id),isShowSchoolSelect = true"></u-input>
                </view>
              </view>
            </view>

            <view class="batch-sub-school-specialty sub-form2" v-if="school.specialty && school.specialty.length > 0">
              <view class="sub-form2__row sub-form2-title">
                <view class="sub-form2__col1">
                  序号
                </view>
                <view class="sub-form2__col2">
                  代码
                </view>
                <view class="sub-form2__col3">
                  专业
                </view>
              </view>

              <view class="sub-form2__row" v-for="(spec, specIndex) in school.specialty" :key="spec.number">
                <view class="sub-form2__col1">
                  {{ spec.number || '-' }}
                </view>
                <view class="sub-form2__col2">
                  <u-input
                      disabled
                      v-model="flatForm[`${currentBatch.id}-${item.id}-${school.id}-${specIndex}-code`]"
                      :height="50"
                      border
                      border-color="#e0e0e0"
                      input-align="center"
                      :clearable="false"
                      @click="forSpecName = { code: `${currentBatch.id}-${item.id}-${school.id}-${specIndex}-code`, value: `${currentBatch.id}-${item.id}-${school.id}-${specIndex}-value` },isShowSpecSelect = true"></u-input>
                </view>
                <view class="sub-form2__col3">
                  <u-input
                      disabled
                      v-model="flatForm[`${currentBatch.id}-${item.id}-${school.id}-${specIndex}-value`]"
                      :height="50"
                      border
                      border-color="#e0e0e0"
                      input-align="center"
                      :clearable="false"
                      @click="forSpecName = { code: `${currentBatch.id}-${item.id}-${school.id}-${specIndex}-code`, value: `${currentBatch.id}-${item.id}-${school.id}-${specIndex}-value` },isShowSpecSelect = true"></u-input>
                </view>
              </view>
            </view>

            <view class="batch-sub-is-obey" v-if="item.show_specialty_obey">
              <view>
                其他专业是否服从
              </view>
              <u-radio-group v-model="flatForm[`${currentBatch.id}-${item.id}-specialty`]">
                <u-radio name="1">是</u-radio>
                <u-radio name="0">否</u-radio>
              </u-radio-group>
            </view>
          </view>

          <view class="batch-sub-is-obey" v-if="item.show_school_obey">
            <view>
              其他院校是否服从
            </view>
            <u-radio-group v-model="flatForm[`${currentBatch.id}-${item.id}-school`]">
              <u-radio name="1">是</u-radio>
              <u-radio name="0">否</u-radio>
            </u-radio-group>
          </view>
        </view>
      </view>

      <view class="btns">
        <u-button
            shape="circle"
            ripple
            :custom-style="{
            'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
            height: '76rpx',
            'line-height': '76rpx',
            'margin-top': '110rpx',
            'width': '290rpx',
            'color': '#fff'
          }"
            @click="stepClick('prev')">上一步</u-button>
        <template v-if="step <= (batches.length)">
          <u-button
              shape="circle"
              ripple
              :custom-style="{
            'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
            height: '76rpx',
            'line-height': '76rpx',
            'margin-top': '110rpx',
            'width': '290rpx',
            'color': '#fff',
            'margin-left': '64rpx'
          }"
              @click="stepClick('next')">下一步</u-button>
        </template>
        <template v-else>
          <u-button
              shape="circle"
              ripple
              :custom-style="{
            'background-image': 'linear-gradient(263deg, rgba(31,142,247,0.9) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
            height: '76rpx',
            'line-height': '76rpx',
            'margin-top': '110rpx',
            'width': '290rpx',
            'color': '#fff',
            'margin-left': '64rpx'
          }"
              @click="isShowModal = true">提交</u-button>
        </template>
      </view>
    </view>

    <u-picker
        v-model="isShowTime"
        mode="time"
        :params="{
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				}"
        @confirm="e => form.year = e.year"></u-picker>
    <u-modal v-model="isShowWhite" content="请联系客服为您开通权限" @confirm="$u.route({ type: 'switchTab',url: '/pages/chat/chat'})"></u-modal>
    <u-modal v-model="isShowModal" content="确认提交数据？" show-cancel-button @confirm="submit"></u-modal>

<!--    <u-select v-model="isShowSchoolSelect" mode="mutil-column-auto" :list="schoolList" @confirm="schoolListConfirm" @cancel="schoolListCancel"></u-select>-->
    <u-select v-model="isShowSchoolSelect" :list="schoolList" @confirm="schoolListConfirm" @cancel="schoolListCancel"></u-select>
    <u-select v-model="isShowSpecSelect" :list="specList" @confirm="specListConfirm" @cancel="specListCancel"></u-select>
  </view>
</template>

<script>
import zmmWatermark from '@/uni_modules/zmm-watermark/components/zmm-watermark/zmm-watermark.vue';
import imglogo from '@/static/waterlogo.png';
export default {
  components:{
	  zmmWatermark
  },
  data() {
    return {
	  watermark:`<img style="width:60px" src="${imglogo}" />`,
      isShowWhite: false,
      isShowModal: false,
      step: 1,
      isShowTime: false,
      areaList: [],
      groupArea: {},
      forSchoolName: {
        code: '',
        value: '',
        needSpec: false,
      },
      isShowSchoolSelect: false,
      schoolList: [],
      schoolMap: new Map(),
      isShowSpecSelect: false,
      forSpecName: {
        code: '',
        value: '',
      },
      specList: [],
      form: {
        name: "",
        finish_school: "",
        examination_number: "",
        group: "",
        area_id: "",
        year: new Date().getFullYear().toString(),
        aspiration_id: ""
      },
      config: null,

      currentBatchId: "",
      aspiration: {},
      batchSub: {},

      subForm: [],
      flatForm: {},
    };
  },
  methods: {
    specListCancel() {
      if (this.forSpecName.code) {
        this.flatForm[this.forSpecName.code] = ''
      }
      if (this.forSpecName.value) {
        this.flatForm[this.forSpecName.value] = ''
      }
    },
    specListConfirm(e) {
      const { label, value, extra } = e[0]
      if (this.forSpecName.code) {
        this.flatForm[this.forSpecName.code] = value
      }
      if (this.forSpecName.value) {
        this.flatForm[this.forSpecName.value] = label
      }
    },
    schoolListCancel() {
      if (this.forSchoolName.code) {
        this.flatForm[this.forSchoolName.code] = ""
      }
      if (this.forSchoolName.value) {
        this.flatForm[this.forSchoolName.value] = ""
      }

      this.forSchoolName.needSpec = false
    },
    schoolListConfirm(e) {
      console.log(e)
      if (e[0]) {
        const { label, value, extra } = e[0]
        const findSameSchoolName = Object.entries(this.flatForm).filter(([key, val]) => val === label)
        let flag = false
        const comparePrefix = (str1, str2) => {
          const parts1 = str1.split('-');
          const parts2 = str2.split('-');

          return parts1[0] === parts2[0] && parts1[1] === parts2[1];
        }
        findSameSchoolName.forEach(([key, value]) => {
          if (comparePrefix(key, this.forSchoolName.value)) {
            flag = true
          }
        })
        if (flag) {
          this.$u.toast("选择学校重复")
          return
        }
        if (this.forSchoolName.code) {
          this.flatForm[this.forSchoolName.code] = value
        }
        if (this.forSchoolName.value) {
          this.flatForm[this.forSchoolName.value] = label
        }

        if (this.forSchoolName.needSpec) {
          this.getSpecialties(extra)
        }
      }
    },
    async getSpecialties(school_id) {
      try {
        const { list } = await this.$u.api.specialtyList({
          page: 1,
          page_size: 9999,
          school_id
        })
        this.specList = list.map(i => ({ label: i.name, value: i.code, extra: i.id }))
      } catch (err) {
        console.error(err)
      }
    },
    async getSchools(batchSubId) {
      try {
        this.schoolList = this.schoolMap.get(batchSubId)?.map(school => ({
          value: school.code,
          label: school.name,
          extra: school.id
        })) || []
        // const { list } = await this.$u.api.schoolList({
        //   page: 1,
        //   page_size: 9999,
        //   group: this.aspiration.group
        // })
        // this.schoolList = list.data.map(school => ({
        //   value: school.code,
        //   label: school.name,
        //   extra: school.id
        // }))
        // this.schoolList = this.areaList.map(area => ({
        //   id: area.id,
        //   value: area.id,
        //   label: area.name,
        //   children: list.data.filter(school => school.area_id === area.id)?.map(i => ({
        //     value: i.code,
        //     label: i.name,
        //     extra: i.id
        //   }))
        // }))
      } catch (err) {
        console.error(err)
      }
    },
    async getBatchSub(batchId) {
      if (!this.subForm.find(i => i.batchId === batchId)) {
        this.subForm.push({
          batchId,
          name: this.batches.find(j => j.id === batchId)?.name,
          batchSubs: []
        })
      }
      if (this.batchSub.hasOwnProperty(batchId) && this.batchSub[batchId]) {

      } else {
        try {
          const { batchSubs } = await this.$u.api.batchDetail({ id: batchId })
          this.batchSub[batchId] = batchSubs
          batchSubs.forEach(batchSub => {
            this.schoolMap.set(batchSub.id, batchSub.school_details)
          })

          const formBatch = this.subForm.find(i => i.batchId === batchId)
          formBatch.batchSubs = batchSubs.map(resSub => ({
            batchSubId: resSub.id,
            name: resSub.name,
            batchSubSchools: resSub.batch_sub_schools.map(subSchool => ({
              batchSubSchoolId: subSchool.id,
              name: subSchool.number,
              code: "",
              value: "",
              specialties: subSchool.specialty?.map((spec, specIndex) => ({
                specialtyId: specIndex,
                name: spec.number,
                code: "",
                value: ""
              }))
            })),
            [resSub.show_specialty_obey ? 'specialtyObey' : 'notShowSpecialtyObey']: "1",
            [resSub.show_school_obey ? 'schoolObey' : 'notShowSchoolObey']: "1"
          }))
        } catch (err) {
          console.error(err)
        }
      }
      this.currentBatchId = batchId

      const resolveData = (batch) => {
        const myBatchId = batch.batchId
        if (batch.batchSubs && batch.batchSubs.length > 0) {
          batch.batchSubs.forEach(batchSub => {
            const myBatchSubId = batchSub.batchSubId
            if (!this.flatForm.hasOwnProperty(`${myBatchId}-${myBatchSubId}-specialty`)) {
              this.flatForm[`${myBatchId}-${myBatchSubId}-specialty`] = "1"
            }
            if (!this.flatForm.hasOwnProperty(`${myBatchId}-${myBatchSubId}-school`)) {
              this.flatForm[`${myBatchId}-${myBatchSubId}-school`] = "1"
            }

            if (batchSub.batchSubSchools && batchSub.batchSubSchools.length > 0) {
              batchSub.batchSubSchools.forEach(batchSubSchool => {
                const myBatchSubSchoolId = batchSubSchool.batchSubSchoolId
                if (!this.flatForm.hasOwnProperty(`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-value`)) {
                  this.flatForm[`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-value`] = ''
                }
                if (!this.flatForm.hasOwnProperty(`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-code`)) {
                  this.flatForm[`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-code`] = ''
                }

                if (batchSubSchool.specialties && batchSubSchool.specialties.length > 0) {
                  batchSubSchool.specialties.forEach(specialty => {
                    const mySpecialtyId = specialty.specialtyId
                    if (!this.flatForm.hasOwnProperty(`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-${mySpecialtyId}-value`)) {
                      this.flatForm[`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-${mySpecialtyId}-value`] = ''
                    }
                    if (!this.flatForm.hasOwnProperty(`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-${mySpecialtyId}-code`)) {
                      this.flatForm[`${myBatchId}-${myBatchSubId}-${myBatchSubSchoolId}-${mySpecialtyId}-code`] = ''
                    }
                  })
                }
              })
            }
          })
        }
      }
      this.subForm.forEach(batch => resolveData(batch))
    },
    async getConfig () {
      try {
        const { list } = await this.$u.api.batchIndex({
          group: this.form.group,
          year: this.form.year
        })
        if (list.length > 0) {
          this.form.aspiration_id = list[0].id

          this.aspiration = list[0]

          if (this.aspiration.image_id && this.aspiration.image) {
            this.$u.route({
              url: '/package_sub/pages/LoadImage/LoadImage',
              params: {
                src: this.aspiration.image.url
              }
            })
            return
          }
          this.setTitle()
        } else {
          this.$u.toast("系统开发中，敬请期待")
          return 1
        }
      } catch (err) {
        console.error(err)
      }
    },
    async stepClick(type='next') {
      if (type === 'next') {
        let notConfig
        if (this.step === 1 && !this.config) {
          notConfig = await this.getConfig()
          // await this.getSchools()
        }
        if (this.step < (1 + this.batches.length) && !notConfig) {
          this.step = this.step + 1
        }
      } else if (type === 'prev') {
        if (this.step === 1) {
          this.form.group = ''
          this.aspiration = null
          this.config = null
        }
        else if (this.step > 1) {
          this.step = this.step - 1
        }
      }
      if (this.step > 1) {
		  console.log("this.batches[this.step-2]?.id",this.step,this.batches[this.step-2]['batch_subs'][0].id)
		let id = this.batches[this.step-2]?this.batches[this.step-2]['batch_subs'][0].id:''
        await this.getBatchSub(this.batches[this.step-2]?.id)
		// await this.getBatchSub(id)
      }
    },
    setTitle() {
      uni.setNavigationBarTitle({
        title: `志愿模拟填报 - Step ${this.step}${ this.step !== 1 ? ('/'+(this.batches.length+1)) : '' }`
      })
    },
    async getArea() {
      try {
        const res = await this.$u.api.area()
        this.areaList = res.list
        this.groupArea = res.list?.filter(i => i.group)?.reduce((acc, item) => {
          const key = item.group;
          if (!acc[key]) {
            acc[key] = [];
          }
          acc[key].push(item);
          return acc;
        }, {})
      } catch (err) {
        console.error(err)
      }
    },

    submit() {
      const idName = ['batchId', 'batchSubId', 'batchSubSchoolId', 'specialtyId'];
      const linkName = ['batchSubs', 'batchSubSchools', 'specialties'];

      const updateTargetProperty = (target, key, property) => {
        if (target && target.hasOwnProperty(property)) {
          target[property] = this.flatForm[key];
        }
      };

      for (const key in this.flatForm) {
        let target = null;
        const keys = key.split('-');

        keys.forEach((val, i) => {

          if (i === 2) {
            if (/school$/.test(key)) {
              updateTargetProperty(target, key, 'schoolObey');
            } else if (/specialty$/.test(key)) {
              updateTargetProperty(target, key, 'specialtyObey');
            }
          }

          if (isNaN(Number(val))) {
            if (i === 3 || i === 4) {
              if (val === 'code' || val === 'value') {
                updateTargetProperty(target, key, val);
              }
            }
          } else {
            target = (target && target[linkName[i - 1]])
                ? target[linkName[i - 1]].find(j => j[idName[i]] === Number(val))
                : this.subForm.find(j => j[idName[i]] === Number(val));
          }
        });
      }
      this.$u.api.batchSubmit({
        aspiration_id: this.aspiration.id,
        data: this.subForm,
        name: this.form.name,
        finish_school: this.form.finish_school,
        examination_number: this.form.examination_number,
      }).then(_ => {
        this.$u.route({
          url: '/package_sub/pages/FormSuccess/FormSuccess',
          params: {
            title: "志愿填报",
            redirect: '/pages/list/list',
            type: 'switchTab'
          }
        });
      });
    }
  },
  computed: {
    formArea() {
      return this.areaList?.find(i => i.id === this.form.area_id)?.name
    },
    batches() {
      return this.aspiration.batchs || []
    },
    currentBatchSub() {
      return this.batchSub[this.currentBatchId]
    },
    currentBatch() {
      return this.batches.find(i => i.id === this.currentBatchId) ?? {}
    }
  },
  watch: {
    step() {
      this.setTitle()
    }
  },
  onShow() {
    this.setTitle()
    if (!this.vuex_user.white) {
      this.isShowWhite = true
    }
  },
  created() {
    this.getArea().then(_ => {
      // this.getSchools()
    })
  },
}
</script>

<style lang="scss">

.container {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  background: #eaf8fe;

  .notice-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
  }

  .bkg {
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
  }

  .wrap {
    z-index: 3;
    position: relative;
    padding-top: 40rpx;

    .year-picker {
      background: #fff;
      display: flex;
      align-items: center;
      margin: 0 24rpx;
      padding: 32rpx 75rpx 32rpx 60rpx;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208, 209, 209, 0.3));

      &__title {
        font-size: 30rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: 500;
      }

      &__input {
        flex: 1;
        margin-left: 32rpx;
      }
    }
    .user-form {
      background: #fff;
      display: flex;
      align-items: center;
      margin: 40rpx 24rpx 0;
      padding: 32rpx 75rpx 32rpx 46rpx;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208, 209, 209, 0.3));

      &__title {
        font-size: 30rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: 500;
      }

      &__input {
        flex: 1;
        margin-left: 32rpx;
      }
    }

    .area-pick {
      margin: 0 24rpx;

      &__title {
        font-size: 30rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: 500;
        padding: 42rpx 0 38rpx 60rpx;
      }

      &__panel {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 22rpx 28rpx;

        $colors: linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
        linear-gradient(0deg, #309cfe 0%, #58e5ff 100%),
        linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
        linear-gradient(0deg, #2f69fd 0%, #51bcfe 100%),
        linear-gradient(0deg, #2941fc 0%, #587bff 100%),
        linear-gradient(0deg, #2941fc 0%, #587bff 100%),
        linear-gradient(0deg, #280bb7 0%, #5776fe 100%),
        linear-gradient(0deg, #280bb7 0%, #5776fe 100%);

        .area-item {
          border-radius: 15rpx;
          font-size: 46rpx;
          text-transform: uppercase;
          color: #ffffff;
          font-weight: 500;
          text-align: center;
          padding: 60rpx 0;
          filter: drop-shadow(0 4rpx 2rpx rgba(0, 0, 0, 0.3));
          position: relative;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;

          &::before {
            content: '';
            opacity: 0.302;
            width: 192rpx;
            height: 192rpx;
            border-radius: 96rpx;
            background-image: linear-gradient(0deg, #309cfe 0%, #58c2ff 100%);
            position: absolute;
            top: -140rpx;
            right: -38rpx;
          }

          &::after {
            content: '';
            opacity: 0.149;
            width: 192rpx;
            height: 192rpx;
            border-radius: 96rpx;
            background-color: #b9e1fd;
            position: absolute;
            bottom: -148rpx;
            left: -44rpx;
          }

          &__tag {
            z-index: 4;
            position: absolute;
            top: 10rpx;
            right: 10rpx;
          }
        }

        @for $i from 1 through length($colors) {
          .area-item:nth-child(n + #{$i}) {
            background: nth($colors, $i);
          }
        }
      }
    }
    .picked-data {
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
      background-color: rgba(255, 255, 255, 0.5);
      margin: 20rpx 24rpx 0;
      padding: 26rpx;

      & > view {
        word-break: break-word;
        flex: 1;
        text-align: center;
        font-size: 32rpx;
        text-transform: uppercase;
        color: #333333;
        font-weight: bold;
        // white-space: nowrap;
      }
      & > view + view {
        margin-left: 10rpx;
      }
    }

    .card {
      margin: 28rpx 24rpx 0;
      border-radius: 20rpx;
      filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
      background-color: #ffffff;

      &__title {
        background: #fbf1e8;
        border-radius: 20rpx 20rpx 0 0;
        padding: 0 16rpx;
      }
      &__body {
        padding: 48rpx 30rpx 70rpx 30rpx;
      }
    }
    .batch-sub {

      &__title {
        text-align: center;
        font-size: 28rpx;
        text-transform: uppercase;
        color: #e77817;
        font-weight: 500;
        padding: 30rpx 20rpx;
      }

      &-is-obey {
        display: flex;
        align-items: center;
        margin-top: 40rpx;

        & > view:nth-child(1) {
          font-size: 24rpx;
          text-transform: uppercase;
          color: #333333;
          font-weight: 500;
          margin-right: 110rpx;
        }
      }
    }
  }
}
.btns {
  display: flex;
  align-items: center;
  justify-content: center;
}
.batch-sub-school {
  margin-top: 40rpx;

  &:nth-child(1) {
    margin-top: 0;
  }
  &__name {
    font-size: 28rpx;
    line-height: 36rpx;
    text-transform: uppercase;
    color: #333333;
    font-weight: 500;
  }
  .sub-form1 {
    &-title {
      font-size: 24rpx;
      line-height: 36rpx;
      text-transform: uppercase;
      color: #333333;
      font-weight: 500;
      margin: 28rpx 0;
      text-align: center;
    }
    &__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &__col1 {
      flex-basis: 29%;
    }
    &__col2 {
      flex-basis: 67.5%;
    }
  }

  .sub-form2 {
    &-title {
      font-size: 24rpx;
      line-height: 36rpx;
      text-transform: uppercase;
      color: #333333;
      font-weight: 500;
      margin: 28rpx 0;
      text-align: center;
    }
    &__row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &__col1 {
      flex-basis: 14.8%;
      font-size: 28rpx;
      text-transform: uppercase;
      color: #333333;
      text-align: center;
    }
    &__col2 {
      flex-basis: 29%;
    }
    &__col3 {
      flex-basis: 48.9%;
    }
  }
  .sub-form2__row + .sub-form2__row {
    margin-top: 22rpx;
  }
}

</style>
