<template>
  <div class='sound-container'>

    <div class="topMsg">
      <p>当前选择声部数(个）：{{chioseSoundNum}}</p>
      <p style='margin-left:30px;'>计划招生人数(个）：{{PlannedCount}}</p>
    </div>
    <div class="listWrap">
      <el-table :data='activeSoundList'
                ref="multipleTable"
                :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                highlight-current-row
                @selection-change='handleSelectionChange'
                @row-click='handleclick'>
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column label="声部"
                         align="center"
                         width="80"
                         prop="sound">
        </el-table-column>
        <el-table-column label="计划招生"
                         align="center"
                         width="100"
                         prop="jihua">
          <template slot-scope="scope"
                    width="100">
            <div>
              <el-input v-if='scope.row.type == 1'
                        @mousewheel.native.prevent
                        type='number'
                        style="width:80px"
                        size='mini'
                        v-model.trim="scope.row.jihua"
                        placeholder="请输入"></el-input>
              <!-- <p v-if='scope.row.type == 2'>{{scope.row.jihua}}</p> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程费用"
                         width="100"
                         align="center"
                         prop="yuji">
          <template slot-scope="scope">
            <div>
              <el-input v-if='scope.row.type == 1'
                        @mousewheel.native.prevent
                        type='number'
                        style="width:80px"
                        size='mini'
                        v-model.trim="scope.row.yuji"
                        placeholder="请输入"></el-input>
              <!-- <p v-if='scope.row.type == 2'>{{scope.row.yuji}}</p> -->
            </div>
          </template>

        </el-table-column>
        <el-table-column label="可选乐器规格"
                         align="center"
                         prop="zhonglei"
                         width="300">
          <template slot-scope="scope">
            <!-- 'typeVisible':false,'provideVisible':false,'markVisible':false -->
            <div>
              <span>{{scope.row.zhonglei | zhongleiFilter(scope.row.goodsList)}}</span>
              <el-popover placement="bottom"
                          @show='chioseType(scope.row)'
                          v-model.trim="scope.row.typeVisible"
                          v-if='scope.row.type == 1'>
                <el-button type="text"
                           slot='reference'>
                  修改
                </el-button>
                <!-- zhonglei -->
                <el-select v-model.trim="scope.row.zhonglei"
                           multiple
                           clearable
                           filterable
                           @change="changezhonglei(scope.row)"
                           collapse-tags>
                  <el-option v-for="(item,index) in scope.row.goodsList"
                             :key='index'
                             :label="item.name"
                             :value="item.id"></el-option>
                </el-select>
                <div style="text-align: right; margin-top: 20px">
                  <!-- <el-button size="mini"
                             type="text"
                             @click="closechioseType(scope.row)">取消</el-button> -->
                  <el-button type="primary"
                             size="mini"
                             @click="scope.row.typeVisible  = false">确定</el-button>
                </div>
              </el-popover>

            </div>
          </template>

        </el-table-column>
        <el-table-column label="乐器提供方式"
                         align="center"
                         prop="fangshi">
          <template slot-scope="scope">
            <div>
              <!-- <div class="chiose"
                  >选择</div> -->
              <div style='white-space:pre'
                   v-if="scope.row.fangshi.length >0">{{scope.row.fangshi | fangshiFilter(scope.row)}}</div>
              <i class='el-icon-edit'
                 @click="setGiveMode(scope.row)">
              </i>
              <!-- <el-popover placement="bottom"
                          v-model.trim="scope.row.provideVisible"
                          v-if='scope.row.type == 1'>
                <i class='el-icon-edit'
                   slot='reference'>
                </i>

                <el-select v-model.trim="scope.row.fangshi"
                           clearable>
                  <el-option label="团购"
                             value="GROUP"></el-option>
                  <el-option label="借用"
                             value="LEASE"></el-option>
                  <el-option label="免费"
                             value="FREE"></el-option>
                </el-select>
                <el-input placeholder="请输入费用"
                          v-if='scope.row.fangshi == "LEASE"'
                          v-model.trim="scope.row.fangshiprice"
                          style='width:180px; margin-top:20px'></el-input>
                <div style="text-align: right; margin-top: 20px">
                  <el-button type="primary"
                             size="mini"
                             @click="scope.row.provideVisible  = false">确定</el-button>
                </div>
              </el-popover> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column label="教辅组合"
                         align="center"
                         prop="jiaopu">
          <template slot-scope="scope">
            <div>
              <el-dialog :visible.sync="scope.row.markVisible"
                         style="text-align:left;"
                         width="60%">
                <el-button type='text'
                           @click="addMark(scope.row)">添加教辅</el-button>
                <div class="markWrap">
                  <div class="markItem"
                       v-for="(item, index) in scope.row.markList"
                       :key='index'>
                    <el-form :model="item"
                             :inline="true">
                      <el-form-item label="教辅名称">
                        <el-input type="text"
                                  v-model.trim="item.name"></el-input>
                      </el-form-item>
                      <el-form-item label="教辅商品">
                        <el-select v-model.trim="item.goods"
                                   clearable
                                   filterable
                                   multiple
                                   collapse-tags>
                          <el-option v-for='(item,index) in scope.row.markChioseList'
                                     :key='index'
                                     :label="item.name"
                                     :value="item.id"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="教辅打包价">
                        <el-input type='number'
                                  @mousewheel.native.prevent
                                  v-model.trim="item.price"></el-input>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="danger"
                                   icon="el-icon-delete"
                                   circle
                                   @click='removeMartItem(scope.row,index)'>
                        </el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
                <span slot="footer"
                      class="dialog-footer">
                  <!-- <el-button @click="scope.row.markVisible = false">取 消</el-button> -->
                  <el-button type="primary"
                             @click="scope.row.markVisible = false">确 定</el-button>
                </span>
              </el-dialog>
              <span>
                <span v-for='(item,index) in scope.row.markList'
                      v-if="item.name && scope.row.markChioseList.length>0"
                      :key='index'>{{item.name+':'}}{{item.goods|goodsFilter(scope.row.markChioseList)}}{{' 价格 '+item.price }} </span>
              </span>
              <i class='el-icon-edit'
                 slot='reference'
                 @click="chioseMark(scope.row)">
              </i>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-button v-if='scope.row.type == 2'
                         type="text"
                         @click="savecolumn(scope.row)">编辑</el-button>
              <el-button v-if='scope.row.type == 1'
                         type="text"
                         @click="savecolumn(scope.row)">保存</el-button>
            </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="预览"
                         align="center"
                         prop="sound">
          <template slot-scope="scope">
            <div>
              <el-button type="text"
                         @click="lookPreview(scope.row)">预览</el-button>
            </div>
          </template>
        </el-table-column> -->
      </el-table>
      <div class="floor">
        <div class="remove"
             @click="removeListItem">删除</div>
        <div class='add'
             @click="addListItem">添加</div>
      </div>
    </div>
    <el-dialog title="声部选择"
               :visible.sync="dialogTableVisible"
               :modal-append-to-body="false">
      <div class="soundWrap">
        <div class="itemList">
          <div class="categroy"
               v-for="(item,index) in soundList"
               :key="index">
            <p>{{item.name }}</p>
            <el-checkbox-group v-model.trim="soundLists[index]"
                               @change='changeList'>
              <!--  sound: this.activeSoundList[item].name,  // id
                 jihua: '10', //计划招生人数
                 yuji: '10', // 预计收费
                 zhonglei: [], // 可选乐器种类
                 fangshi: 2, // 乐器提供方式
                 jiaopu: 'jiaopu1', // 教辅组合
                 type: 1, // 操作
                 id: this.activeSoundList[item].id, //声部id
                 visible: false, // 当前乐器提供方式的pop提示框显示隐藏 -->
              <el-checkbox :label="sound.id"
                           @change="checkinlist({'id':sound.id,'sound':sound.name,'jihua':0,'yuji':0,'zhonglei':[],'fangshi':[],'fangshiprice':1500,'jiaopu':'','type':1,'typeVisible':false,'provideVisible':false,'markVisible':false,'goodsList':[],'markList':[],'markChioseList':[]})"
                           v-for="(sound,indexs) in item.subjects"
                           :key="indexs">{{sound.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <p class='soundSubP'>当前选择声部数:{{chioseSoundNum}}</p>
      <div class="btnWraps">
        <div class="dialogBtn"
             @click="generates">确定</div>
      </div>
    </el-dialog>
    <div class="btnWrap">
      <div class="PrevBtn"
           @click="goback">上一步</div>
      <div class="submitBtn"
           v-permission="{child: 'musicGroup/auditSuccess', parent: '/teamBuild/teamAudit/soundMoney'}"
           v-if="teamStatus == 'teamAudit'"
           @click="approval">审核通过</div>

      <div class="submitBtn"
           v-permission="{child: 'musicGroup/auditFailed', parent: '/teamBuild/teamAudit/soundMoney'}"
           v-if="teamStatus == 'teamAudit'"
           @click="refuse">拒绝</div>
      <div class="submitBtn"
           v-permission="{child: 'musicGroup/createGroup', parent: '/teamBuild/soundMoney'}"
           v-if="teamStatus != 'teamAudit'"
           @click="submitInfo(1)">保存</div>
      <div class="submitBtn"
           v-permission="{child: 'musicGroup/createGroup', parent: '/teamBuild/soundMoney'}"
           v-if="teamStatus != 'teamAudit'"
           @click="submitInfo(2)">提交</div>
    </div>
    <el-dialog title="乐团预览"
               :visible.sync="previewVisible"
               width="450px">
      <div class="reductionWrap">
        <header style="background:#14928A;color:#fff">乐团缴费</header>
        <div class="noticeInfo">
          <i class="trumpet_icon"></i>1、为确保声部平衡，请家长确认 注册声部为孩子的最终录取声部。<br />
          2、为保障每个声部人数达标，我们都进行了超员20%的录取，系统将按照提交注册的先后顺序安排名额。超员后 有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，我们将优先调配您的孩子；
        </div>
  <!-- && (courseScheduleStatus || musicGroupSubject.fee > 0) -->
        <div class="section"
             v-if="courseScheduleInfo ">
          <h2 class="title line_bottom">课程</h2>
          <div class="options classInfo">
            <div class="option"
                 v-if="courseScheduleInfo.soundInfo.ischeck">
              <div class="0_hd"><i class="check_default check_active"></i></div>
              <div class="o_bd">乐团声部训练</div>
              <span class="o_ft">
                现价:￥{{ courseScheduleInfo.soundInfo.value ? courseScheduleInfo.soundInfo.value : 0 }}
              </span>
            </div>
            <div class="option"
                 v-if="courseScheduleInfo.allInfo.ischeck">
              <div class="0_hd"><i class="check_default check_active"></i></div>
              <div class="o_bd">乐团合奏训练</div>
              <span class="o_ft">
                现价:￥{{ courseScheduleInfo.allInfo.value ? courseScheduleInfo.allInfo.value : 0 }}
              </span>
            </div>
            <div class="option"
                 v-if="courseScheduleInfo.baseInfo.ischeck">
              <div class="0_hd"><i class="check_default check_active"></i></div>
              <div class="o_bd">基础技能训练</div>
              <span class="o_ft">
                现价:￥{{ courseScheduleInfo.baseInfo.value ? courseScheduleInfo.baseInfo.value : 0 }}
              </span>
            </div>
            <div class="option"
                 v-if="courseScheduleInfo.holidayInfo.ischeck">
              <div class="0_hd"><i class="check_default check_active"></i></div>
              <div class="o_bd">假期集中训练</div>
              <span class="o_ft">
                现价:￥{{ courseScheduleInfo.holidayInfo.value ? courseScheduleInfo.holidayInfo.value : 0 }}
              </span>
            </div>
          </div>
          <div class="options sale"
               v-if="lookPreviewRow&&lookPreviewRow.yuji"
               :class="[courseScheduleStatus?'lines':'']">
            <div class="option">
              <div class="o_bd">课程费用</div>
              <span class="o_ft">
                ￥{{ lookPreviewRow.yuji }}
              </span>
            </div>
          </div>
          <div class="coutInfo"
               v-if="courseScheduleInfo.submit.ischeck">
            <i class="trumpet_icon"></i>{{ courseScheduleInfo.submit.value }}
          </div>
        </div>

        <div class="section"
             v-if="lookPreviewRow&&lookPreviewRow.goodsList.length > 0">
          <h2 class="title line_bottom">乐器</h2>
          <div class="options">
            <!--    @click="instrumentF(con)" -->
            <div v-for="(con, index) in lookPreviewRow.fangshi"
                 :key="index"
              
                 :class="[ lookPreviewRow.fangshi.length > 1 ? 'oc' : '' ]">
              <div class="option" v-if="con.mode.isGROUP">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_"><i class="check_default"
                     ></i></div>
                <div class="o_bd">
                  {{ con.shopName }}
                </div>
                <span class="o_ft"
                      >
                  <del>原价:￥{{ con.mode.price }}</del> 现价:￥{{ (con.mode.price - con.mode.GROUP).toFixed(2) }}
                </span>
              </div>
              <!--   v-if="con.marketPrice" -->
              <div v-if="con.mode.isGROUP" class="configuration"
                 >
                <div class="config">
                  <div class="title"><span>配置参数</span></div>
                  <div class="content">
                    <p>{{ lookPreviewRow.goodsList[index].specification }}</p>
                  </div>
                </div>
              </div>
                 <div class="option"  v-if="(con.mode.isLEASE)">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_"><i class="check_default"
                     ></i></div>
                <div class="o_bd">
                  {{ con.shopName }}
                </div>
                    <template>
                  <span class="o_ft">
                     <del>减免金额:￥{{ con.mode.LEASE }}</del>
                      押金:￥{{ (con.mode.depositFee - con.mode.LEASE).toFixed(2) }}
                  </span>
                 
                </template>
              </div>
              <!--   v-if="con.marketPrice" -->
              <div class="configuration"  v-if="(con.mode.isLEASE)"
                 >
                <div class="config">
                  <div class="title"><span>配置参数</span></div>
                  <div class="content">
                    <p>{{ lookPreviewRow.goodsList[index].specification }}</p>
                  </div>
                </div>
              </div>
                 <div class="option" v-if="con.mode.isFREE">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_"><i class="check_default"
                     ></i></div>
                <div class="o_bd">
                  {{ con.shopName }}
                </div>
                <template >
                  <span class="o_ft">
                    <del>原价:￥{{ con.mode.price }}</del> 
                    免费领用
                  </span>
                </template>
              </div>
              <!--   v-if="con.marketPrice" -->
              <div class="configuration" v-if="con.mode.isFREE"
                 >
                <div class="config">
                  <div class="title"><span>配置参数</span></div>
                  <div class="content">
                    <p>{{ lookPreviewRow.goodsList[index].specification }}</p>
                  </div>
                </div>
              </div>
                
             
            </div>
          </div>
        </div>

        <div class="section"
             v-if="lookPreviewRow&&lookPreviewRow.markList&&lookPreviewRow.markList.length > 0"
             key="accessOries">
          <h2 class="title line_bottom">辅件</h2>
          <div class="options"
               v-for="(instr, index) in lookPreviewRow.markList"
               :key="index">
            <div class="option">
              <div class="o_hd"><i class="check_default"
                   :class="[ instr.checked ? 'check_active' : '' ]"></i></div>
              <div class="o_bd">{{ instr.name }}</div>
              <span class="o_ft">
                <!-- <del>原价:￥{{ instr.marketPrice }}</del> -->
                {{ instr.price == 0 ? '免费' : '现价:￥' + instr.price }}
              </span>
            </div>
            <div class="configuration">
              <div class="config">
                <div class="title"><span>配置</span></div>
                <div class="content"
                     v-for="item in instr.goods"
                     :key="item">
                  <div class="option">
                    <div class="o_bd">{{ item | AccessoryName(lookPreviewRow)}}</div>
                    <span class="o_ft">￥{{ item | AccessoryPrice(lookPreviewRow)}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section"
             v-else-if="accessGoods.length > 0"
             key="accessOries">
          <h2 class="title line_bottom">辅件</h2>
          <div class="options"
               v-for="(instr, index) in accessGoods"
               :key="index">
            <div class="option">
              <div class="o_hd"><i class="check_default"
                   :class="[ instr.checked ? 'check_active' : '' ]"></i></div>
              <div class="o_bd">{{ instr.name }}</div>
              <span class="o_ft">
                <del>原价:￥{{ instr.marketPrice }}</del>
                {{ instr.groupPurchasePrice == 0 ? '免费' : '现价:￥' + instr.groupPurchasePrice }}
              </span>
            </div>
          </div>
        </div>

        <div class="section"
             v-if="otherResult.length > 0"
             key="otherResult">
          <h2 class="title line_bottom">其它</h2>
          <div class="options"
               v-for="(base, index) in otherResult"
               :key="index">
            <div class="option">
              <div class="o_hd"><i class="check_default check_active"></i></div>
              <div class="o_bd">{{ base.name }}</div>
              <span class="o_ft">
                <del>原价:￥{{ base.marketPrice }}</del>
                {{ base.price == 0 ? '免费' : '现价:￥' + base.price }}
              </span>
            </div>
            <div class="configuration">
              <div class="config">
                <div class="title"><span>配置</span></div>
                <div class="content"
                     v-for="(item, index1) in base.goodsList"
                     :key="index1">
                  <div class="option">
                    <div class="o_bd">{{ item.name }}</div>
                    <span class="o_ft">￥{{ item.marketPrice }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section"
             v-else-if="otherGoods.length > 0"
             key="otherResult">
          <h2 class="title line_bottom">其它</h2>
          <div class="options"
               v-for="base in otherGoods"
               :key="base.id">
            <div class="option">
              <div class="o_hd"><i class="check_default check_active"></i></div>
              <div class="o_bd">{{ base.name }}</div>
              <span class="o_ft">
                <del>原价:￥{{ base.marketPrice }}</del>
                {{ base.groupPurchasePrice == 0 ? '免费' : '现价:￥' + base.groupPurchasePrice }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog tilte='请选择乐器的提供方式及减免金额'
               width="800px"
               :visible.sync="reductionVisible">
      <div v-if="editSound&&editSound.fangshi.length >0">
        <div class="reductionWrap"
             v-for="(item,index) in editSound.fangshi"
             :key='index'>
          <div class="lineWrap">
            <div class="item">{{ item.shopName}}</div>
            <div class="item">提供方式</div>
            <div class="item">提供方式对应金额</div>
            <div class="item">减免金额</div>
          </div>

          <div class="lineWrap">
            <div class="item"></div>
            <div class="item">
              <el-checkbox v-model.trim="item.mode.isGROUP"></el-checkbox>
              团购
            </div>
            <div class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        v-model.trim="item.mode.price"
                        disabled></el-input>
            </div>
            <div class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        v-model.trim="item.mode.GROUP"
                        @input='groupInput(item)'></el-input>
            </div>
          </div>

          <div class="lineWrap">
            <div class="item"></div>
            <div class="item">
              <el-checkbox v-model.trim="item.mode.isLEASE"></el-checkbox>
              租赁
            </div>
            <div class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        @input='(val)=>{
                            setDeposiInput(val,item)
                         }'
                        v-model.trim="item.mode.depositFee"></el-input>
            </div>
            <div class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        @input='deposiInput(item)'
                        v-model.trim="item.mode.LEASE"></el-input>
            </div>

          </div>

          <div class="lineWrap">
            <div class="item"></div>
            <div class="item">
              <el-checkbox v-model.trim="item.mode.isFREE"></el-checkbox>
              免费
            </div>
            <div class="item">
              <el-input style="width:80%"
                        disabled></el-input>
            </div>
            <div class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        disabled></el-input>
            </div>

          </div>
        </div>
      </div>

      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="resetSoundItem">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import store from '@/store'
import { getSubject, getDefaultSubject, getGoods, createTeam, getSoundTree, findMusicGroupSubjectInfo, updateSubjectInfo, auditSuccess, auditFailed } from '@/api/buildTeam'
export default {
  name: 'teamSoundMoney',
  data () {
    return {
      reductionVisible: false,
      previewVisible: false, // 乐团预览
      dialogTableVisible: false,
      soundList: [],
      soundLists: [], // 存储选中项的声部id 记录变量
      activeSoundList: [], // 记录存储后的所选中的声部列表
      checkList: [],
      multipleSelection: [], // 列表选择的集合
      isLoop: '', // 是否显示周期循环
      payfor: {},
      topfor: {},
      checkfor: {},
      teamStatus: '',
      teamid: '',
      isNullFangshi: true,
      Fsearch: null,
      Frules: null,
      editSound: null,
      // 预览
      courseScheduleInfo: null, // 课程组信息
      instrumentResult: [], // 乐器信息
      accessOries: [], // 辅件(打包)
      accessGoods: [],
      otherResult: [], // 其它打包
      otherGoods: [], // 其它商品
      lookPreviewRow:null,
      courseScheduleStatus:true // 有没有数据
    }
  },
  created () {
    // 判断是否带缓存参数
    this.init()
  },
  activated () {
    // 判断是否带缓存参
    this.init();
  },
  methods: {
    init () {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules
      }
      getSoundTree().then(res => {
        if (res.code == 200) {
          this.soundList = res.data.rows;
          // // 生成动态的checkList
          for (let key in this.soundList) {
            this.$set(this.soundLists, key, [])
          }
          // 新建团带默认的数据   this.topfor.section
          if (this.teamStatus == 'newTeam') {
            getDefaultSubject({ chargeTypeId: type, organId: this.topfor.section, number: 1 }).then(res => {
              if (res.code == 200) {
                this.activeSoundList = res.data.map(item => {
                  // this.soundLists[0].push(item.subjectId)
                  let obj = { 'id': item.id, 'sound': item.name, 'jihua': item.expectedStudentNum, 'yuji': item.fee, 'zhonglei': [], 'fangshi': [], 'fangshiprice': item.depositFee, 'jiaopu': '', 'type': 1, 'typeVisible': false, 'provideVisible': false, 'markVisible': false, 'goodsList': [], 'markList': [], 'markChioseList': [] }
                  // this.checkinlist(obj);
                  return obj;
                })
                //  = arr;
                this.soundList.forEach((item, i) => {
                  item.subjects.forEach((some, j) => {
                    res.data.forEach((sub, x) => {
                      if (sub.id == some.id) {
                        this.soundLists[i].push(some.id)
                      }
                    })
                  })
                })
                // 并且把所有soundLists 里面
              }
            });
          }
          // 修改带原有团的数据
          if (this.teamStatus == 'teamDraft' || this.teamStatus == 'teamAudit') {
            // 获取第二页的数据
            this.teamid = this.$route.query.id;
            findMusicGroupSubjectInfo({ musicGroupId: this.teamid }).then(res => {
              if (res.code == 200) {
                // console.log(res.data)
                this.activeSoundList = res.data.musicGroupSubjectPlans.map(item => {
                  let fangshi = []
                  res.data.musicGroupSubjectGoodsGroups.forEach(sub => {
                    if (sub.subjectId == item.subjectId && sub.type == 'INSTRUMENT') {
                      let FREE, LEASE, GROUP;
                      let isFREE = false
                      let isLEASE = false
                      let isGROUP = false
                      let depositFee = sub.depositFee
                      let price = sub.price
                      if (sub.kitGroupPurchaseTypeJson) {
                        let expectJson = JSON.parse(sub.kitGroupPurchaseTypeJson);

                        if (expectJson && expectJson.hasOwnProperty("FREE")) {
                          FREE = expectJson.FREE
                          isFREE = true

                        }
                        if (expectJson && expectJson.hasOwnProperty("LEASE")) {
                          LEASE = expectJson.LEASE
                          isLEASE = true;
                        }
                        if (expectJson && expectJson.hasOwnProperty("GROUP")) {
                          GROUP = expectJson.GROUP
                          isGROUP = true
                        }
                      }

                      fangshi.push({
                        shopName: sub.name,
                        id: sub.goodsIdList,
                        mode: {
                          'FREE': FREE || 0,
                          'GROUP': GROUP || 0,
                          'LEASE': LEASE || 0,
                          'depositFee': depositFee || 0, // 保证金
                          'price': price || 0,// 团购价
                          'isFREE': isFREE,
                          'isGROUP': isGROUP,
                          'isLEASE': isLEASE,
                        }
                      })
                    }
                  })
                  let obj = { 'id': item.subjectId, 'sound': item.subName, 'jihua': item.expectedStudentNum, 'yuji': item.fee, 'zhonglei': [], 'fangshi': fangshi, 'fangshiprice': item.depositFee, 'jiaopu': '', 'type': 1, 'typeVisible': false, 'provideVisible': false, 'markVisible': false, 'goodsList': [], 'markList': [], 'markChioseList': [] }
                  this.checkinlist(obj)
                  return obj;
                })
                // this.activeSoundList = arr;
                //   这里.....
                this.soundList.forEach((item, i) => {
                  item.subjects.forEach((some, j) => {
                    this.activeSoundList.forEach((sub, x) => {
                      if (sub.id == some.id) {
                        this.soundLists[i].push(some.id)
                        // this.checkinlist(some)
                        // this.activeSoundList.push(some)
                        // 这里点击勾选
                      }
                    })
                  })
                })
                // 循环列表里的声部 拿取商品
                for (let i in this.activeSoundList) {
                  for (let j in res.data.musicGroupSubjectGoodsGroups) {
                    if (this.activeSoundList[i].id == res.data.musicGroupSubjectGoodsGroups[j].subjectId) {
                      // 
                      if (res.data.musicGroupSubjectGoodsGroups[j].type == 'INSTRUMENT') {
                        this.activeSoundList[i].zhonglei = this.activeSoundList[i].zhonglei.concat(res.data.musicGroupSubjectGoodsGroups[j].goodsIdList)
                        this.activeSoundList[i].zhonglei = this.activeSoundList[i].zhonglei.map(item => {
                          return parseInt(item);
                        })

                        this.activeSoundList[i].goodsList = this.activeSoundList[i].goodsList.concat(res.data.musicGroupSubjectGoodsGroups[j].goodsList);
                        // goodsList
                      }
                      // 拿辅件
                      if (res.data.musicGroupSubjectGoodsGroups[j].type == 'ACCESSORIES') {
                        if (res.data.musicGroupSubjectGoodsGroups[j].goodsList.length >= 0) {
                          this.activeSoundList[i].markList ? this.activeSoundList[i].markList : this.activeSoundList[i].markList = []
                          let obj = {};
                          obj.goods = res.data.musicGroupSubjectGoodsGroups[j].goodsIdList.split(',');
                          obj.goods = obj.goods.map(item => {
                            return parseInt(item);
                          })
                          obj.name = res.data.musicGroupSubjectGoodsGroups[j].name
                          obj.price = res.data.musicGroupSubjectGoodsGroups[j].price;
                          this.activeSoundList[i].markList.push(obj);
                          // this.activeSoundList[i].markList.goodsList.goods = JSON.parse(res.data.musicGroupSubjectGoodsGroups[j].goodsIdList)
                          this.activeSoundList[i].markChioseList = this.activeSoundList[i].markChioseList.concat(res.data.musicGroupSubjectGoodsGroups[j].goodsList);
                        }

                      }
                    }
                  }
                }
              }
            })
          }

        }

      })
      // 拿到刚才的存储的信息
       this.payfor = this.$store.getters.payList;
      this.topfor = this.$store.getters.topinfo;
      this.checkfor = this.$store.getters.checkinfo;
      this.$nextTick(res=>{
        console.log(this.$store.getters.checkinfo )
          this.courseScheduleInfo = this.$store.getters.checkinfo
      //  console.log(this.courseScheduleInfo)
      })
      //  console.log(this.$store.getters.payList)
      //  console.log(this.$store.getters.checkinfo)
     
      let type = this.topfor.type;
      // 判断进来的乐团状态
      this.teamStatus = this.$route.query.type;
    },
    // 改变checkbox
    changeList (e) {
      // console.log(e)
    },
    handleSelectionChange (e) {
      // 点击改变勾选
      this.multipleSelection = e;
    },
    handleclick (e) { },
    handleStatus (data) {
    },
    // 点击添加按钮
    addListItem () {
      this.dialogTableVisible = true;
    },
    // 点击确认按钮生成表单
    generates () {
      this.dialogTableVisible = false;
    },
    removeListItem () {
      this.$confirm(`是否删除该声部?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        for (let i = 0; i < this.activeSoundList.length; i++) {
          for (let j = 0; j < this.multipleSelection.length; j++) {

            if (this.activeSoundList[i].id == this.multipleSelection[j].id) {
              this.activeSoundList.splice(i, 1);
              // 遍历循环所有的group 删除所选id
              for (let key in this.soundLists) {
                if (this.soundLists[key].indexOf(this.multipleSelection[j].id) != -1) {
                  this.soundLists[key].splice(this.soundLists[key].indexOf(this.multipleSelection[j].id), 1)
                }
              }
            }

          }
        }
      }).catch(() => { })

    },
    // 勾选选中框处理数据,存储勾选过的checkbox值
    checkinlist (obj) {
      // console.log(this.activeSoundList)
      let flag = false;
      this.activeSoundList.map(item => {
        if (item.id == obj.id) {
          flag = true
        }
      })
      if (!flag) {
        this.activeSoundList.push(obj)
      } else {
        for (let i = 0; i < this.activeSoundList.length; i++) {
          if (this.activeSoundList[i].id == obj.id) {
            this.activeSoundList.splice(i, 1);
          }
        }
      }
    },
    // 根据声部id获取可选乐器种类
    chioseType (row) {
      // 根据id查询可选类型种类

      let id = row.id;
      // 'subjectId': id, ' type'='INSTRUMENT'
      getGoods({ 'subjectId': id, 'type': 'INSTRUMENT' }).then(res => {
        if (res.code == 200) {
          row.goodsList = res.data;
        }
      })
    },
    // 点击关闭乐器种类
    closechioseType (row) {
      row.typeVisible = false;
    },
    // 更改乐器可选规格重置提供方式
    changezhonglei (row) {
      row.fangshi = []
    },
    // 根据声部id查询可选教辅
    chioseMark (row) {
      row.markVisible = true
      let id = row.id;
      getGoods({ 'subjectId': id, 'type': 'ACCESSORIES' }).then(res => {
        if (res.code == 200) {
          row.markChioseList = res.data;

        }
      })
    },
    // 添加教辅
    addMark (row) {
      row.markList.push({ 'name': '', 'goods': [], 'price': '' })
    },
    // 删除教辅
    removeMartItem (row, index) {
      row.markList.splice(index, 1);
    },
    // 点击保存或编辑
    savecolumn (row) {
      row.type == 1 ? row.type = 2 : row.type = 1
    },
    // 返回上一步
    goback () {
      this.$emit('chiosetab', 0);
    },
    submitInfo (type) {
      this.isNullFangshi = true
      // return;
      let status;
      if (type == 1) {
        // 保存
        status = 'DRAFT'
      } else if (type == 2) {
        // 提交
        status = 'AUDIT'
      }
      // 整理数据提交
      if (this.teamStatus == 'newTeam') {
        let obj = {};

        obj.months = this.payfor.chioseMonth || [];
        let enrollClasses;
        this.topfor.startClass ? enrollClasses = this.topfor.startClass.join(',') : enrollClasses = null;
        obj.musicGroup = {
          settlementType: this.topfor.salary,
          applyExpireDate: this.topfor.time + ' 00:00:01',
          chargeTypeId: this.topfor.type,
          cooperationOrganId: this.topfor.school,
          teamTeacherId: this.topfor.boss,
          educationalTeacherId: this.topfor.teacher,
          enrollClasses,
          name: this.topfor.name,
          organId: this.topfor.section,
          // paymentMonths:obj.months  有待确认
          schoolId: this.topfor.address,
          courseForm: JSON.stringify(this.checkfor),
          expectStartGroupDate: this.topfor.startTime,
          isClassroomLessons: this.topfor.isClass,
          status,
          ownershipType: this.topfor.ownershipType
        }
        obj.musicGroupPaymentEntities = []
        // 添加学校主体付费方式
        if (this.payfor.student.ischeck) {
          obj.musicGroupPaymentEntities.push({
            'paymentMethod': this.payfor.student.chiose,
            'name': '学生'
          })
        }
        if (this.payfor.school.ischeck) {
          obj.musicGroupPaymentEntities.push({
            'amount': this.payfor.school.price,
            'memo': this.payfor.school.value,
            'paymentMethod': this.payfor.school.chiose,
            'name': '学校'
          })
        }
        // 添加公司主体付费方式
        if (this.payfor.company.ischeck) {
          obj.musicGroupPaymentEntities.push({
            'amount': this.payfor.company.price,
            'memo': this.payfor.company.value,
            'paymentMethod': this.payfor.company.chiose,
            'name': '公司'
          })
        }
        let activeSoundList = this.activeSoundList
        // 添加商品以及教辅
        obj.musicGroupSubjectGoodsGroups = []
        obj.musicGroupSubjectPlans = []
        activeSoundList.forEach(active => {
          // 乐器
          active.zhonglei.forEach(zl => {
            let goodsItem = []
            active.goodsList.forEach(goods => {
              if (goods.id == zl) {
                goodsItem = goods
              }
            })
            let kitGroupPurchaseTypeJson = null
            let depositFee, price;
            active.fangshi.forEach(fs => {
              if (fs.id == zl) {
                depositFee = fs.mode.depositFee
                price = fs.mode.price
                let types = {}
                if (fs.mode.isFREE) {
                  types.FREE = fs.mode.FREE
                }
                if (fs.mode.isGROUP) {
                  types.GROUP = fs.mode.GROUP
                }
                if (fs.mode.isLEASE) {
                  types.LEASE = fs.mode.LEASE
                }
                kitGroupPurchaseTypeJson = JSON.stringify(types)
                if (kitGroupPurchaseTypeJson.length <= 0) {
                  kitGroupPurchaseTypeJson = null
                }
              }
            })
            let some = {
              subjectId: active.id,
              type: 'INSTRUMENT',
              goodsIdList: zl,
              name: goodsItem.name,
              price,
              kitGroupPurchaseTypeJson,
              depositFee
            }
            obj.musicGroupSubjectGoodsGroups.push(some);
          })

          // 附件
          active.markList.forEach(mark => {
            if (mark.goods.length >= 1) {
              let some = {
                subjectId: active.id,
                type: 'ACCESSORIES',
                goodsIdList: mark.goods.join(','),
                name: mark.name,
                price: mark.price
              }
              obj.musicGroupSubjectGoodsGroups.push(some);
            }
          })
          let depositFee;
          if (!active.fangshi) {
            this.isNullFangshi = false
          }
          if (active.fangshi == 'LEASE') {
            depositFee = active.fangshiprice;
          } else {
            depositFee = 0;
          }
          // 添加声部
          let item = {
            expectedStudentNum: active.jihua,
            fee: active.yuji,
            // kitGroupPurchaseType: active.fangshi,
            subName: active.sound,
            subjectId: active.id,
            // depositFee// depositFee  只有租赁才有
          }
          obj.musicGroupSubjectPlans.push(item);
        })
        this.$confirm(`确定提交?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          createTeam(obj).then(res => {

            if (res.code == 200) {
              // 成功 跳转到乐团报名详情
              this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
            }
          })
        }).catch(() => { })

      } else {

        // 只提交第二页的数据
        let obj = {};
        let activeSoundList = this.activeSoundList
        // 添加商品以及教辅
        obj.musicGroupId = this.teamid
        obj.musicGroupStatus = status;
        obj.musicGroupSubjectGoodsGroups = []
        obj.musicGroupSubjectPlans = []
        activeSoundList.forEach(active => {
          // 乐器
          active.zhonglei.forEach(zl => {
            let goodsItem = []
            active.goodsList.forEach(goods => {
              if (goods.id == zl) {
                goodsItem = goods
              }
            })
            let kitGroupPurchaseTypeJson = null
            let depositFee, price;
            active.fangshi.forEach(fs => {
              if (fs.id == zl) {
                depositFee = fs.mode.depositFee
                price = fs.mode.price
                let types = {}

                if (fs.mode.isFREE) {
                  types.FREE = fs.mode.FREE
                }
                if (fs.mode.isGROUP) {
                  types.GROUP = fs.mode.GROUP
                }
                if (fs.mode.isLEASE) {
                  types.LEASE = fs.mode.LEASE
                }
                kitGroupPurchaseTypeJson = JSON.stringify(types)
                if (kitGroupPurchaseTypeJson.length <= 0) {
                  kitGroupPurchaseTypeJson = null
                }

              }
            })
            let some = {
              subjectId: active.id,
              type: 'INSTRUMENT',
              goodsIdList: zl,
              name: goodsItem.name,
              kitGroupPurchaseTypeJson,
              depositFee,
              price
            }
            obj.musicGroupSubjectGoodsGroups.push(some);
          })

          // 遍历声部里的教辅
          active.markList.forEach(mark => {
            if (mark.goods.length >= 1) {
              let some = {
                subjectId: active.id,
                type: 'ACCESSORIES',
                goodsIdList: mark.goods.join(','),
                name: mark.name,
                price: mark.price
              }
              obj.musicGroupSubjectGoodsGroups.push(some);
            }
          })
          // 添加声部
          let depositFee;
          // 如果没有提供方式则报错
          if (!active.fangshi) {
            this.isNullFangshi = false
          }
          if (active.fangshi == 'LEASE') {
            depositFee = active.fangshiprice;
          } else {
            depositFee = 0;
          }
          let item = {
            expectedStudentNum: active.jihua,
            fee: active.yuji,
            // kitGroupPurchaseType: active.fangshi,
            subName: active.sound,
            subjectId: active.id,
            // depositFee: depositFee // depositFee  只有租赁才有
          }
          obj.musicGroupSubjectPlans.push(item);
        })
        if (!this.isNullFangshi) {
          this.$message.error('请填写乐器提供方式')
          return
        }
        this.$confirm(`确定提交?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 发请求修改声部信息
          updateSubjectInfo(obj).then(res => {
            if (res.code == 200) {
              this.$message.success('提交成功')
              this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
            }
          })
        }).catch(() => { })
      }
    },
    // 同意
    approval () {
      this.$confirm(`是否审核通过?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditSuccess({ musicGroupId: this.teamid }).then(res => {
          if (res.code == 200) {
            this.$message.success('审核通过')
            this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
          }
        })
      }).catch(() => { })

    },
    // 拒绝
    refuse () {
      // auditFailed
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        //   点击确认  值是value
        if (!value) {
          this.$message.error('请输入拒绝原因')
          return;
        } else {
          auditFailed({ musicGroupId: this.teamid, memo: value }).then(res => {
            if (res.code == 200) {
              this.$message.success('已拒绝')
              this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
            }
          })
        }
      })
    },
    // 设置乐器提供方式
    setGiveMode (row) {
      // goodsList
      if (row.zhonglei.length <= 0) {
        this.$message.error('请先选择乐器规格')
        return
      }
      // row.fangshi = []
      // row.zhonglei
      // row.goodsList
      if (row.fangshi[0] && row.fangshi[0].mode) {
      } else {
        for (let i in row.goodsList) {
          for (let j in row.zhonglei) {

            if (row.goodsList[i].id == row.zhonglei[j]) {
              row.fangshi.push({
                shopName: row.goodsList[i].name,
                id: row.goodsList[i].id,
                mode: {
                  'FREE': 0,
                  'GROUP': 0,
                  'LEASE': 0,
                  'depositFee': 1500, // 保证金
                  'price': row.goodsList[i].groupPurchasePrice,// 团购价
                  'isFREE': false,
                  'isGROUP': false,
                  'isLEASE': false,
                }
              })
            }
          }
        }
      }

      this.editSound = row;
      this.reductionVisible = true
    },
    resetSoundItem () {
      for (let i in this.activeSoundList) {
        if (this.activeSoundList[i].id == this.editSound.id) {
          this.activeSoundList[i].id = this.editSound.id
          this.reductionVisible = false
        }
      }
    },
    groupInput (item) {
      if (item.mode.price - item.mode.GROUP < 0) {
        item.mode.GROUP = item.mode.price
      }
    },
    deposiInput (item) {
      if (item.mode.depositFee - item.mode.LEASE < 0) {
        item.mode.LEASE = item.mode.depositFee
      }

    },
    setDeposiInput (val, item) {
      item.mode.LEASE = 0;
    },
    // 查看预览
    lookPreview (row) {
      console.log(row)
      this.lookPreviewRow = row
      this.previewVisible = true;
    }
  },
  filters: {
    AccessoryName(val,lookPreviewRow){
      if( lookPreviewRow&&lookPreviewRow.markChioseList){
        for(let i in lookPreviewRow.markChioseList){
        if(lookPreviewRow.markChioseList[i].id == val){
          return lookPreviewRow.markChioseList[i].name
        }
        }
      }
        
      
      return ''
    },
    AccessoryPrice(val,lookPreviewRow){
       if( lookPreviewRow&&lookPreviewRow.markChioseList){
      for(let i in lookPreviewRow.markChioseList){
        if(lookPreviewRow.markChioseList[i].id == val){
          return lookPreviewRow.markChioseList[i].marketPrice
        }
      }
       }
      return ''
    },
    zhongleiFilter (val, list) {
      if (list.length <= 0) {
        return;
      }
      let arr = []
      for (let i = 0; i < list.length; i++) {
        for (let j = 0; j < val.length; j++) {
          if (val[j] == list[i].id) {
            arr.push(list[i].name)
          }
        }
      }
      if (arr.length > 0) {
        return arr.join(',')
      } else {
        return ''
      }

    },
    fangshiFilter (val, price) {
      let str = ''
      for (let i in val) {
        str += `${val[i].shopName}:`
        if (val[i].mode.isFREE) {
          str += `免费:减免金额${val[i].mode['FREE']}\n`
        }
        if (val[i].mode.isGROUP) {
          str += `团购:团购价${val[i].mode['price']},减免金额${val[i].mode['GROUP']}\n`
        }
        if (val[i].mode.isLEASE) {
          str += `租赁:${val[i].mode.depositFee},减免金额${val[i].mode['LEASE']}\n`
        }
      }
      // if (val == 'FREE') {
      //   str = '免费'
      //   return str;
      // } else if (val == 'GROUP') {
      //   str = '团购'
      //   return str
      // } else if (val == 'LEASE') {
      //   str = '借用'
      // }
      // str = str.substring(0, str.length - 1)
      return str
    },
    goodsFilter (val, list) {
      if (list.length <= 0) {
        return '';
      }
      let arr = [];
      for (let i = 0; i < val.length; i++) {
        for (let j = 0; j < list.length; j++) {
          if (val[i] == list[j].id) {
            arr.push(list[j].name);
          }
        }
      }
      if (arr.length > 0) {
        return arr.join(',')
      } else {
        return ''
      }
    }
    // markFilter(val){
    //   for
    //   let name = val.name;
    //   let goods = val.goods.join(',');
    //   let price = val.price
    // }
  },
  mounted () {
    this.init();
  },
  watch: {

  },
  computed: {
    // 返回当前选中声部数量
    chioseSoundNum () {
      let num = 0;
      for (let key in this.soundList) {
        num += this.soundLists[key].length;

      }
      return num;
    },
    // 计划招生人数
    PlannedCount () {
      let Count = 0;
      for (let item in this.activeSoundList) {
        Count += parseInt(this.activeSoundList[item].jihua) || 0
      }
      return Count
    }
  },
}
</script>
<style lang="scss"  scoped>
// .el-table__body tr.current-row > td {
//   background-color: #c6cbd4 !important;
// }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #14928a;
  border-color: #14928a;
}
.el-select__tags .el-tag__close.el-icon-close {
  display: inline-block;
}
// .el-dialog__header {
//   padding: 0 32px !important;
//   height: 40px;
//   line-height: 40px;
//   background-color: #14928a;

//   .el-dialog__title {
//     color: #fff;
//     font-size: 16px;
//   }
// }
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
.sound-container {
  .chioseWrap {
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    padding: 0 25px;
    p {
      font-size: 14px;
      margin-right: 30px;
    }
  }
  .topMsg {
    padding: 0 25px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
  }
  .subTitle {
    // width: 1203px;
    height: 40px;
    line-height: 40px;
    background-color: #fefceb;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
  }
  .floor {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    height: 48px;
    line-height: 48px;
    background: rgba(237, 238, 240, 1);
    font-size: 14px;
    color: #444;
    align-items: center;
    position: relative;
    z-index: 1;
    .remove {
      width: 98px;
      height: 32px;
      background: rgba(248, 80, 67, 1);
      border-radius: 3px;
      color: #fff;
      line-height: 32px;
      text-align: center;
      margin-left: 164px;
      cursor: pointer;
    }
    .add {
      width: 98px;
      height: 32px;
      background: rgba(20, 146, 138, 1);
      border-radius: 3px;
      color: #fff;
      line-height: 32px;
      text-align: center;
      margin-left: 20px;
      cursor: pointer;
    }
  }
  .xuanze {
    width: 71px;
  }
  .chiose {
    width: 65px;
    height: 24px;
    line-height: 24px;
    border: 1px solid rgba(151, 151, 151, 1);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
  }
}
.soundWrap {
  width: 100%;
  overflow: auto;
  .itemList {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-grow: 1;
    height: 300px;
    max-height: 300px;
    overflow: auto;
    .categroy {
      width: 150px;
      min-width: 150px;
      .el-checkbox {
        height: 30px;
        line-height: 30px;
        display: block;
        padding-left: 20px;
      }
      p {
        height: 40px;
        line-height: 40px;
        background-color: #edeef0;
        margin-bottom: 15px;
        text-align: center;
      }
    }
  }
}
.soundSubP {
  height: 40px;
  line-height: 40px;
  background-color: #edeef0;
  padding-left: 25px;
}
.btnWraps {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 150px;
  .dialogBtn {
    width: 188px;
    height: 40px;
    background: rgba(249, 114, 21, 1);
    border-radius: 4px;
    line-height: 40px;
    color: #fff;
    text-align: center;
    cursor: pointer;
  }
}
.btnWrap {
  margin-top: 40px;
  .PrevBtn {
    background-color: #444444;
    width: 120px;
  }
  .submitBtn {
    background-color: #f85043;
    width: 120px;
  }
}
.el-icon-plus {
  cursor: pointer;
}
.baseRight {
  width: 375px;
  margin-left: 25px;
  header {
    width: 375px;
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 14px;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
    text-align: center;
    margin-bottom: 6px;
  }
  .section {
    width: 375px;
    padding:  0 22px ;
    background: #fff;
    margin-bottom: 10px;
    .line_bottom {
      border-bottom: 1px solid #ededed;
    }
    > .title {
      font-size: 20px;
      line-height: 28px;
      font-weight: bold;
    }
    .indate {
      font-size: 12px;
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      span {
        color: #fa101d;
      }
    }

    .coutInfo {
      font-size: 14px;
      color: #f85043;
      text-align: left;
      border-top: 1px solid #ededed;
      padding: 12px 0 0 25px;
      margin-top: 10px;
      position: relative;
      .trumpet_icon {
        width: 14px;
        height: 12px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
          no-repeat center;
        background-size: contain;
        position: absolute;
        left: 0;
        top: 14px;
      }
    }
  }

  .options {
    padding-top: 8px;
    .oc {
      &:last-child {
        border-top: 1px solid #ededed;
        margin-top: 8px;
        padding-top: 9px;
      }
    }
    .protocol {
      padding-left: 20px;
      font-size: 10px;
      line-height: 14px;
    }
    .option {
      width: 100%;
      line-height: 26px;
      font-size: 15px;
      display: flex;
      align-items: center;
      position: relative;
      .o_bd {
        flex: 1;
        .c {
          font-size: 12px;
        }
      }
      .o_ft {
        font-size: 12px;
        color: #fa101d;
        del {
          color: #aaaaaa;
          font-size: 11px;
        }
      }
      .check_default {
        margin-right: 8px;
        display: block;
        width: 14px;
        height: 14px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=)
          no-repeat center;
        background-size: contain;
        &.check_active {
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==)
            no-repeat center;
          background-size: contain;
        }
      }
    }
  }

  .configuration {
    padding-right: 5px;
    padding-bottom: 9px;
    .title {
      background: rgba(246, 246, 246, 1);
      height: 1px;
      position: relative;
      margin: 15px 0;
      span {
        position: absolute;
        left: 12px;
        top: -9px;
        display: inline-block;
        background-color: #fff;
        font-size: 10px;
        padding: 0 4px;
      }
    }

    .content {
      font-size: 12px;
      padding-left: 16px;
      line-height: 22px;
      color: #acacac;
    }

    .options {
      padding-top: 0;
      padding-left: 16px;
      .option {
        font-size: 14px;
        color: #6f6f6f;
      }
    }
  }

  .buy {
    margin-top: 200px;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-top: 1px solid #ffe9e9e9;
    color: #000000;
    font-size: 12px;
    background: #fff;
    .price {
      flex: 1;
      font-size: 14px;
    }
    font-size: 14px;
    span {
      color: #fa101d;
    }
    .text {
      font-size: 12px;
      width: 60px;
      display: inline-block;
      color: #000;
    }
    del {
      color: #b5b5b5;
      &.text {
        color: #b5b5b5;
      }
    }

    a {
      display: inline-block;
      font-size: 18px;
      color: #fff;
      background: #f1111b;
      border-radius: 4px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
      padding: 8px 28px;
    }
  }
}
.reductionWrap {
  width: 100%;
  .lineWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    .item {
      width: 25%;
      text-align: left;
    }
  }
  header {
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 17px;
    background: #fff;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
    text-align: center;
    margin-bottom: 6px;
  }

  .noticeInfo {
    position: relative;
    margin-top: 7px;
    // margin-bottom: 10px;
    background: #fff;
    padding: 10px 22px 10px 32px;
    font-size: 12px;
    line-height: 14px;
    color: #fa101d;
    .trumpet_icon {
      width: 14px;
      height: 12px;
      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
        no-repeat center;
      background-size: contain;
      position: absolute;
      left: 10px;
      top: 12px;
    }
  }
  .protocolbtn {
    margin: 35px 0;
    background: #14928a;
    color: #fff;
    font-size: 18px;
    border-radius: 50px;
    text-align: center;
    width: 100%;
  }

  .section {
    padding: 0 22px;
    background: #fff;
    margin-bottom: 10px;
    .line_bottom {
      border-bottom: 1px solid #ededed;
    }
    > .title {
      font-size: 20px;
      line-height: 28px;
      font-weight: bold;
      padding-bottom: 5px;
      &::before {
        content: " ";
        width: 4px;
        height: 15px;
        background: #14928a;
        display: inline-block;
        margin-right: 7px;
        border-radius: 8px;
      }
    }
    .indate {
      font-size: 14px;
      padding: 6px 0;
      display: flex;
      // justify-content: space-between;
      justify-content: flex-end;
      span {
        color: #fa101d;
      }
    }

    .coutInfo {
      font-size: 12px;
      color: #f85043;
      text-align: left;
      border-top: 1px solid #ededed;
      padding: 12px 0 0 15px;
      margin-top: 10px;
      
      position: relative;
      .trumpet_icon {
        width: 14px;
        height: 12px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
          no-repeat center;
        background-size: contain;
        position: absolute;
        left: 0;
        top: 12px;
      }
    }
  }

  .options {
    padding-top: 8px;
    .oc {
      &:last-child {
        border-top: 1px solid #ededed;
        margin-top: 8px;
        padding-top: 9px;
      }
    }
    .protocol {
      padding-left: 20px;
      font-size: 10px;
      line-height: 14px;
    }
    &.classInfo {
      .option .o_ft {
        color: #444444;
      }
    }
    &.lines {
      margin-top: 5px;
      border-top: 1px solid #ededed;
    }
    &.sale {
      .option {
        .o_bd,
        .o_ft {
          font-size: 16px;
          color: #f85043;
          font-weight: bold;
        }
      }
    }
    .option {
      line-height: 26px;
      font-size: 15px;
      display: flex;
      align-items: center;
      position: relative;
      .o_bd {
        flex: 1;
        .c {
          font-size: 12px;
        }
      }
      .o_ft {
        font-size: 14px;
        color: #fa101d;
        del {
          color: #aaaaaa;
          font-size: 12px;
        }
      }
      .check_default {
        position: relative;
        margin-right: 8px;
        display: block;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 1px solid #d0cfcf;
        &::before {
          position: absolute;
          top: 1px;
          left: 1px;
          content: " ";
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #d0cfcf;
          border-radius: 50%;
        }
        &.check_active {
          border: 1px solid #f1111b;
          &::before {
            background: #f1111b;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .configuration {
    padding-right: 5px;
    padding-bottom: 9px;
    .title {
      background: rgba(246, 246, 246, 1);
      height: 1px;
      position: relative;
      margin: 15px 0;
      span {
        position: absolute;
        left: 12px;
        top: -9px;
        display: inline-block;
        background-color: #fff;
        font-size: 12px;
        padding: 0 4px;
      }
    }

    .content {
      font-size: 12px;
      padding-left: 16px;
      line-height: 22px;
      color: #acacac;
      .o_ft {
        color: #aaaaaa;
        font-size: 12px;
      }
    }

    .options {
      padding-top: 0;
      padding-left: 16px;
      .option {
        font-size: 14px;
        color: #6f6f6f;
      }
    }
  }

  .buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    border-top: 1px solid #ffe9e9e9;
    color: #000000;
    font-size: 12px;
    background: #fff;
    .price {
      flex: 1;
      font-size: 16px;
    }
    font-size: 16px;
    span {
      color: #fa101d;
    }
    .text {
      font-size: 12px;
      width: 60px;
      display: inline-block;
      color: #000;
    }
    del {
      color: #b5b5b5;
      &.text {
        color: #b5b5b5;
      }
    }

    .btn-submit {
      display: inline-block;
      font-size: 18px;
      color: #fff;
      background: #f85043;
      border-radius: 10px;
      box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
      padding: 8px 46px;
    }
  }
  .iframe {
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
    border-top: none !important;
    min-height: calc(100vh - 41px);
  }
}
</style>