dy-admin-manager/src/views/teamBuild/components/teamSoundMoney.vue

<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>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="乐团课程费用"
                         width="120"
                         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>
            </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="乐器提供方式"
                         width="300"
                         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>
            </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 type="primary"
                             @click="scope.row.markVisible = false">确 定</el-button>
                </span>
              </el-dialog>
              <span>
                <span v-if="scope.row.markChioseList.length>0&&item.name"
                      v-for="(item,index) in scope.row.markList"
                      :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"
               :close-on-click-modal="false"
               @close="onPreviewClose"
               width="450px">
      <div class="reductionWrap1 reductionWrap">
        <header style="background:#14928A;color:#fff">乐团缴费</header>
        <div class="noticeInfo">
          <h2>缴费说明</h2>
          1、为确保声部平衡，请家长确认 注册声部为孩子的最终录取声部。<br />
          2、为保障每个声部人数达标，我们都进行了超员20%的录取，系统将按照提交注册的先后顺序安排名额。超员后 有可能出现无法注册的情况，请您理解。如果其他声部仍有名额，我们将优先调配您的孩子；
          <div class="line_bottom"
               style="margin: 20px 0 0;"></div>
        </div>
        <!-- && (courseScheduleStatus || musicGroupSubject.fee > 0) -->
        <div class="section"
             v-if="courseScheduleInfo ">
          <h2 class="title"
              style="padding: 0 16px;">乐团课程</h2>
          <div class="options classInfo"
               style="padding:8px 16pxm 0;">
            <div class="option"
                 v-if="courseScheduleInfo.soundInfo.ischeck"
                 @click="onCourseChange(courseScheduleInfo.soundInfo)">
              <div class="o_hd"><i class="check_radio"></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"
                 @click="onCourseChange(courseScheduleInfo.allInfo)">
              <div class="o_hd"><i class="check_radio"></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.holidayInfo.ischeck"
                 @click="onCourseChange(courseScheduleInfo.holidayInfo)">
              <div class="o_hd"><i class="check_radio"></i></div>
              <div class="o_bd">假期集中训练</div>
              <span class="o_ft">
                价格:￥{{ courseScheduleInfo.holidayInfo.value ? courseScheduleInfo.holidayInfo.value : 0 }}
              </span>
            </div>
            <div class="option"
                 v-if="courseScheduleInfo.networkInfo && courseScheduleInfo.networkInfo.ischeck"
                 @click="onCourseChange(courseScheduleInfo.networkInfo)">
              <div class="o_hd"><i class="check_radio"></i></div>
              <div class="o_bd">乐团云课堂</div>
              <span class="o_ft">
                价格:￥{{ courseScheduleInfo.networkInfo.value ? courseScheduleInfo.networkInfo.value : 0 }}
              </span>
            </div>
            <div class="option"
                 v-if="courseScheduleInfo.baseInfo.ischeck"
                 @click="onCourseChange(courseScheduleInfo.baseInfo)">
              <div class="o_hd"><i class="check_radio"></i></div>
              <div class="o_bd">网络基础训练</div>
              <span class="o_ft">
                价格:￥{{ courseScheduleInfo.baseInfo.value ? courseScheduleInfo.baseInfo.value : 0 }}
              </span>
            </div>

          </div>
          <div class="options sale"
               style="padding: 8px 16px 10px;"
               v-if="lookPreviewRow&&lookPreviewRow.yuji"
               :class="[courseScheduleStatus?'lines':'']">
            <div class="option">
              <div class="o_bd"></div>
              <span class="o_ft">现价￥{{ orderInfo.coursePrice }}</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="newStudentfor.baseInfo.ischeck">
          <h2 class="title">新生专享</h2>
          <div class="options classInfo">
            <div class="option"
                 v-if="newStudentfor.baseInfo.ischeck"
                 @click="onCourseChange(newStudentfor.baseInfo)">
              <div class="o_hd"><i class="check_default"
                   :class="[newStudentfor.baseInfo.isStatus ? 'check_active' : '']"></i></div>
              <div class="o_bd">网络基础训练</div>
              <span class="o_ft">
                价格:￥{{ newStudentfor.baseInfo.nowValue ? newStudentfor.baseInfo.nowValue : 0 }}
              </span>
            </div>
          </div>
          <div class="options sale"
               style="padding: 8px 16px 10px;"
               v-if="lookPreviewRow&&lookPreviewRow.yuji"
               :class="[courseScheduleStatus?'lines':'']">
            <div class="option">
              <div class="o_bd"></div>
              <!-- 以后要加课程这里得计算课程 -->
              <span class="o_ft">现价￥{{ newStudentfor.baseInfo.value }}</span>
            </div>
          </div>
          <div class="coutInfo"
               style="width:100%">
            <i class="trumpet_icon"></i>
            该课程不支持退款
          </div>
        </div>
        <div class="section"
             v-if="lookPreviewRow&&lookPreviewRow.fangshi.length > 0">
          <h2 class="title ">乐器</h2>
          <div class="options">
            <div v-for="(con, index) in lookPreviewRow.fangshi"
                 @click="instrumentF(con)"
                 :key="index"
                 :class="[ lookPreviewRow.fangshi.length > 1 ? 'oc' : '' ]">
              <div class="option"
                   v-if="con.mode.isGROUP"
                   @click="con.chiosetype='GROUP'">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_">
                  <i class="check_default"
                     :class="[ con.chiosetype=='GROUP'&&con.checked ? 'check_active' : '' ]"></i>
                </div>
                <div class="o_bd">{{ con.shopName }}</div>
                <span class="nowPrice">
                  价格:<del>￥{{ con.mode.marketPrice }}</del>
                  <!-- <del></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 config_line">
                  <div class="title">
                    <span>配置参数</span>
                  </div>
                  <div class="content">
                    <template v-for="(goods, index) in lookPreviewRow.goodsList">
                      <p :key="goods.id"
                         v-if="con.id == goods.id">{{ lookPreviewRow.goodsList[index].specification }}</p>
                    </template>
                  </div>
                </div>
                <div class="nowMoney">
                  <span class="title">现价</span> <span class="dot">￥</span>{{ (con.mode.price - con.mode.GROUP).toFixed(2) }}
                </div>
                <!-- // 现价 -->
              </div>
              <div class="option"
                   v-if="(con.mode.isLEASE)"
                   @click="con.chiosetype='LEASE'">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_">
                  <i class="check_default"
                     :class="[ con.chiosetype=='LEASE'&&con.checked ? 'check_active' : '' ]"></i>
                </div>
                <div class="o_bd">{{ con.shopName }}</div>
                <template>
                  <!-- <span class="o_ft">
                    押金:￥{{ (con.mode.depositFee).toFixed(2) }}
                  </span> -->
                </template>

              </div>
              <div class="option"
                   v-if="(con.mode.isNull)"
                   @click="con.chiosetype='Null'">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_">
                  <i class="check_default"
                     :class="[ con.chiosetype=='Null'&&con.checked ? 'check_active' : '' ]"></i>
                </div>
                <div class="o_bd">自备</div>
                <template>
                  <!-- <span class="o_ft">
                    押金:￥{{ (con.mode.depositFee).toFixed(2) }}
                  </span> -->
                </template>

              </div>

              <!--   v-if="con.marketPrice" -->
              <div class="configuration"
                   v-if="(con.mode.isLEASE)">
                <div class="config config_line">
                  <div class="title">
                    <span>配置参数</span>
                  </div>
                  <div class="content">
                    <!-- <p>{{ lookPreviewRow.goodsList[index].specification }}</p> -->
                    <template v-for="(goods, index) in lookPreviewRow.goodsList">
                      <p :key="goods.id"
                         v-if="con.id == goods.id">{{ lookPreviewRow.goodsList[index].specification }}</p>
                    </template>
                  </div>
                </div>
                <div class="nowMoney">
                  <span class="title">押金</span> <span class="dot">￥:</span> {{ parseFloat(con.mode.depositFee).toFixed(2) }}
                </div>
              </div>

              <!-- 免费 -->
              <div class="option"
                   v-if="con.mode.isFREE"
                   @click="con.chiosetype='FREE'">
                <!-- :class="[ con.checked ? 'check_active' : '' ]" -->
                <div class="o_">
                  <i class="check_default"
                     :class="[ con.chiosetype=='FREE'&&con.checked ? 'check_active' : '' ]"></i>
                </div>
                <div class="o_bd">{{ con.shopName }}</div>
                <template>
                  <span class="nowPrice">
                    价格:<del>￥{{ con.mode.marketPrice }}</del>

                  </span>
                </template>
              </div>
              <!--   v-if="con.marketPrice" -->
              <div class="configuration"
                   v-if="con.mode.isFREE">
                <div class="config config_line">
                  <div class="title">
                    <span>配置参数</span>
                  </div>
                  <div class="content">
                    <!-- <p>{{ lookPreviewRow.goodsList[index].specification }}</p> -->
                    <template v-for="(goods, index) in lookPreviewRow.goodsList">
                      <p :key="goods.id"
                         v-if="con.id == goods.id">{{ lookPreviewRow.goodsList[index].specification }}</p>
                    </template>
                  </div>

                </div>
                <div class="nowMoney">
                  免费领用
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="section"
             v-if="lookPreviewRow&&lookPreviewRow.markList&&lookPreviewRow.markList.length > 0"
             key="accessOries">
          <h2 class="title">辅件</h2>
          <div class="options"
               style="padding:0 16px;"
               v-for="(instr, index) in lookPreviewRow.markList"
               :key="index"
               @click="onAuxiliarie(instr)">
            <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 config_other">
                <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"
               style="padding:0 16px;"
               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"
               style="padding:0 16px;"
               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 config_other">
                <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 class="section">
          <div class="needprice markerprice">
            <del>价格</del>
            <del>￥{{ orderInfo.marketPrice }}</del>
          </div>
          <!-- <div class="needprice markerprice">
            <p>现价</p>
            <p>￥{{ orderInfo.groupPurchasePrice }}</p>
          </div> -->
          <!-- <div class="needprice markerprice" v-if="orderInfo.couponPrice > 0">
            <p>优惠</p>
            <p>￥{{ orderInfo.couponPrice }}</p>
          </div> -->
          <div class="needprice grouopprice">
            <span>仅需支付</span>
            <span>￥{{ orderInfo.amount }}</span>
          </div>
        </div>

        <div class="buy">
          <div class="price">
            <p class="use_price">
              <img class="logo"
                   src="@/assets/images/mycard.png"
                   alt />
              <span>￥{{ needPrice }}</span>
            </p>
          </div>
          <a class="btn-submit"
             @click="previewVisible=false">购买</a>
        </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 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 class="item">
              <el-input style="width:80%"
                        type="number"
                        @mousewheel.native.prevent
                        v-model.trim="item.mode.courseGroup"
                        @input="groupCourseInput(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"
                        disabled
                        @mousewheel.native.prevent
                        @input="deposiInput(item)"
                        v-model.trim="item.mode.LEASE"></el-input>
            </div>
            <div class="item">
              <el-input style="width:80%"
                        disabled
                        type="number"></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 class="item">
              <el-input style="width:80%"
                        disabled
                        type="number"></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, // 课程组信息
      newStundentInfo: null,
      instrumentResult: [], // 乐器信息
      accessOries: [], // 辅件(打包)
      accessGoods: [],
      otherResult: [], // 其它打包
      otherGoods: [], // 其它商品
      lookPreviewRow: null,
      courseScheduleStatus: true, // 有没有数据
      orderInfo: {
        marketPrice: 0,
        amount: 0, // 现价总金额
        goodsGroupIds: null,
        goodsIds: null,
        contractGoodsIds: null, // 选中所有商品ID
        couponPrice: 0, //
        groupPurchasePrice: 0
      }, // 金额列表，金额计算
      needPrice: 0,
      instr: { ischeck: false }
    };
  },
  created () {
    // 判断是否带缓存参数
    this.init();
  },
  // activated () {
  //   // 判断是否带缓存参
  //   this.init();
  // },
  methods: {
    onCourseChange (item) {
      // 判断用户是否可以选择
      if (item.checkBuy) {
        item.isStatus = !item.isStatus
      }
      this.calcPrice()
    },
    init () {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules;
      }
      getSoundTree({ tenantId: 1 }).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") {
            // console.log({
            //   chargeTypeId: type,
            //   organId: this.topfor.section,
            //   number: 1
            // })
            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) {
                  this.activeSoundList = res.data.musicGroupSubjectPlans.map(
                    item => {

                      let fangshi = [];
                      res.data.musicGroupSubjectGoodsGroups.forEach(sub => {
                        if (
                          sub.subjectId == item.subjectId &&
                          sub.type == "INSTRUMENT"
                        ) {
                          let FREE, courseFree, LEASE, courseLease, GROUP, courseGroup;
                          let isFREE = false;
                          let isLEASE = false;
                          let isGROUP = false;
                          let depositFee = sub.depositFee;
                          let price = sub.price;
                          let marketPrice = sub.goodsList[0].marketPrice;
                          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;
                            }
                          }
                          if (sub.coursePurchaseTypeJson) {
                            let courseJson = JSON.parse(sub.coursePurchaseTypeJson)
                            if (courseJson && courseJson.hasOwnProperty("FREE")) {
                              courseFree = courseJson.FREE;
                            }
                            if (courseJson && courseJson.hasOwnProperty("LEASE")) {
                              courseLease = courseJson.LEASE;
                            }
                            if (courseJson && courseJson.hasOwnProperty("GROUP")) {
                              courseGroup = courseJson.GROUP;
                            }
                          }
                          fangshi.push({
                            shopName: sub.name,
                            id: sub.goodsIdList,
                            mode: {
                              courseFree: courseFree || 0,
                              courseLease: courseLease || null,
                              courseGroup: courseGroup || 0,
                              yuji: item.fee,
                              FREE: FREE || 0,
                              GROUP: GROUP || 0,
                              LEASE: LEASE || null,
                              depositFee: depositFee || 0, // 保证金
                              price: price || 0, // 团购价
                              marketPrice: marketPrice || 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.newStudentfor = this.$store.getters.newStudentinfo

      this.$nextTick(res => {


        let tempInfo = this.$store.getters.checkinfo
        // 默认课程都选中
        for (let i in tempInfo) {
          if (tempInfo[i] && !tempInfo[i].isNew) {
            tempInfo[i].isStatus = true
          } else {
            tempInfo[i].isStatus = false
          }
        }
        for (let i in this.newStudentfor) {
          if (this.newStudentfor[i] && this.newStudentfor[i].isNew) {
            this.newStudentfor[i].isStatus = true
          } else {
            this.newStudentfor[i].isStatus = false
          }
        }
        this.courseScheduleInfo = tempInfo;
      });


      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: "", marketPrice: 0 });
    },
    // 删除教辅
    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) {

      let isJihua = true;
      let isMusic = true;
      this.activeSoundList.forEach(item => {
        if (item && !item.jihua) {
          isJihua = false;
        }
        if (item && !item.yuji) {
          isMusic = false;
        }
      })
      if (!isJihua) {
        this.$message.error('请填写预计招生人数')
        return
      }
      if (!isMusic) {
        this.$message.error('请填写乐团课程费用')
        return
      }
      this.isNullFangshi = true;
      // return;
      let status;
      let titleStr = "";
      if (type == 1) {
        // 保存
        status = "DRAFT";
        titleStr = "确定保存？";
      } else if (type == 2) {
        // 提交
        status = "AUDIT";
        titleStr = "确定提交";
      }
      // 整理数据提交
      if (this.teamStatus == "newTeam") {
        let obj = {};
        // 解析数据 
        let courseJson = {};
        for (let i in this.checkfor) {
          if (this.checkfor[i].ischeck) {
            courseJson[i] = this.checkfor[i]
          }
        }
        for (let j in this.newStudentfor) {
          if (this.newStudentfor[j].ischeck) {
            courseJson[j] = this.newStudentfor[j]
          }
        }
        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(courseJson),
          expectStartGroupDate: this.topfor.startTime,
          isClassroomLessons: this.topfor.isClass,
          status,
          ownershipType: this.topfor.ownershipType,
          repairUserId: this.topfor.repairUserId,
          feeType: this.topfor.feeType
        };
        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;
            let coursePurchaseTypeJson = null;
            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 ? fs.mode.FREE : 0;
                }
                if (fs.mode.isGROUP) {
                  types.GROUP = fs.mode.GROUP ? fs.mode.GROUP : 0;
                }
                if (fs.mode.isLEASE) {
                  types.LEASE = fs.mode.LEASE ? fs.mode.LEASE : 0;
                }
                kitGroupPurchaseTypeJson = JSON.stringify(types);
                if (kitGroupPurchaseTypeJson.length <= 0) {
                  kitGroupPurchaseTypeJson = null;
                }

                let courseTypes = {}
                if (fs.mode.courseFree) {
                  courseTypes.FREE = fs.mode.courseFree ? fs.mode.courseFree : 0
                }
                if (fs.mode.courseGroup) {
                  courseTypes.GROUP = fs.mode.courseGroup ? fs.mode.courseGroup : 0
                }
                if (fs.mode.courseLease) {
                  courseTypes.LEASE = fs.mode.courseLease ? fs.mode.courseLease : 0
                }
                coursePurchaseTypeJson = JSON.stringify(courseTypes)
                if (coursePurchaseTypeJson.length <= 0) {
                  coursePurchaseTypeJson = null;
                }
              }
            });
            let some = {
              subjectId: active.id,
              type: "INSTRUMENT",
              goodsIdList: zl,
              name: goodsItem.name,
              price,
              kitGroupPurchaseTypeJson,
              coursePurchaseTypeJson,
              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,
                marketPrice: mark.marketPrice
              };
              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(titleStr, "提示", {
          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;
            let coursePurchaseTypeJson = null;
            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 ? fs.mode.FREE : 0;
                }
                if (fs.mode.isGROUP) {
                  types.GROUP = fs.mode.GROUP ? fs.mode.GROUP : 0;
                }
                if (fs.mode.isLEASE) {
                  types.LEASE = fs.mode.LEASE ? fs.mode.LEASE : 0;
                }
                kitGroupPurchaseTypeJson = JSON.stringify(types);
                if (kitGroupPurchaseTypeJson.length <= 0) {
                  kitGroupPurchaseTypeJson = null;
                }

                let courseTypes = {}
                if (fs.mode.courseFree) {
                  courseTypes.FREE = fs.mode.courseFree ? fs.mode.courseFree : 0
                }
                if (fs.mode.courseGroup) {
                  courseTypes.GROUP = fs.mode.courseGroup ? fs.mode.courseGroup : 0
                }
                if (fs.mode.courseLease) {
                  courseTypes.LEASE = fs.mode.courseLease ? fs.mode.courseLease : 0
                }
                coursePurchaseTypeJson = JSON.stringify(courseTypes)
                if (coursePurchaseTypeJson.length <= 0) {
                  coursePurchaseTypeJson = null;
                }
              }
            });
            let some = {
              subjectId: active.id,
              type: "INSTRUMENT",
              goodsIdList: zl,
              name: goodsItem.name,
              kitGroupPurchaseTypeJson,
              coursePurchaseTypeJson,
              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,
                marketPrice: mark.marketPrice
              };
              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
      const tyuji = row.yuji
      if (row.fangshi[0] && row.fangshi[0].mode) {
        row.fangshi.forEach(item => {
          item.mode.yuji = tyuji
        })
      } 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: {
                  yuji: tyuji,
                  FREE: 0,
                  GROUP: 0,
                  LEASE: 0,
                  courseFree: 0,
                  courseLease: null,
                  courseGroup: 0,
                  depositFee: 1500, // 保证金
                  price: row.goodsList[i].groupPurchasePrice, // 团购价
                  marketPrice: row.goodsList[i].marketPrice, // 原价
                  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;
      }
    },
    groupCourseInput (item) {
      let mode = item.mode
      if (mode.yuji - mode.courseGroup < 0) {
        mode.courseGroup = mode.yuji
      }
    },
    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) {
      this.lookPreviewRow = row;
      // 判断商品里的最高价 选中
      console.log(this.lookPreviewRow)
      this.previewVisible = true;
      this.setChioseMusic(this.lookPreviewRow)
      this.calcPrice()
    },
    setChioseMusic (row) {
      let flag = true;
      row.fangshi.forEach(item => {
        if (item.id == -1) {
          flag = false;
        }
        if (item.mode.isGROUP) {
          item.chiosetype = 'GROUP'
          item.checked = true
          return
        } else if (item.mode.isLEASE) {
          item.chiosetype = 'isLEASE'
          item.checked = true
          return
        } else if (item.mode.isFREE) {
          item.chiosetype = 'isFREE'
          item.checked = true
          return
        }
      })
      row.markList.forEach(item => {
        item.checked = true
      })
      if (flag) {
        row.fangshi.push({
          checked: false,
          id: -1,
          mode: {
            isFREE: false,
            isGROUP: false,
            isLEASE: false,
            isNull: true,
            yuji: 0,
            FREE: 0,
            GROUP: 0,
            LEASE: 0,
            courseGroup: 0,
            courseLease: 0,
            depositFee: 0,
            marketPrice: 0,
            price: 0
          },
          shopName: "自备"
        })
      }
    },
    onAuxiliarie (item) {
      // 辅件切换状态
      item.checked = !item.checked;
      // 重新计算金额
      this.calcPrice();
    },
    instrumentF (item) {
      // 乐器切换状态

      this.lookPreviewRow.fangshi.forEach(item => {
        item.checked = false;
      });
      item.checked = true;
      // 重新计算金额
      this.calcPrice();
    },
    onPreviewClose () {
      this.lookPreviewRow.fangshi.forEach(item => {
        item.checked = false;
      });

      this.lookPreviewRow.markList.forEach(item => {
        item.checked = false;
      })
    },
    calcPrice () {

      let amount = 0,
        marketPrice = 0,
        goodsGroupIds = {},
        couponPrice = 0, // 优惠金额
        goodsIds = [],
        contractGoodsIds = ""; // 合同所需要的商品Id （只需要乐器编号）
      // 课程 this.topfor payfor checkfor
      let mgs = this.lookPreviewRow.yuji;


      let coursePrice = Number(mgs)
      let csi = this.checkfor;
      let newStudent = this.newStudentfor
      // 加上判断是否有课程信息
      if (mgs) {
        console.log(csi)
        // amount += parseFloat(mgs);s
        const sbaseInfo = newStudent.baseInfo
        if (sbaseInfo.ischeck && sbaseInfo.isStatus) {
          const value = Number(parseFloat(sbaseInfo.nowValue ? sbaseInfo.nowValue : 0))
          marketPrice += value;
          amount += Number(parseFloat(sbaseInfo.value ? sbaseInfo.value : 0))
        }
        const allInfo = csi.allInfo
        if (allInfo.ischeck) {
          const value = Number(parseFloat(allInfo.value ? allInfo.value : 0))
          if (allInfo.isStatus) {
            marketPrice += value;
          }
          if (allInfo.isStatus && allInfo.checkBuy) {
            coursePrice += parseFloat(allInfo.checkBuy ? value : 0)
          }
        }
        const baseInfo = csi.baseInfo
        if (baseInfo.ischeck) {
          const value = parseFloat(baseInfo.value ? baseInfo.value : 0)
          if (baseInfo.isStatus) {
            marketPrice += value;
          }
          if (baseInfo.isStatus && baseInfo.checkBuy) {
            coursePrice += parseFloat(baseInfo.checkBuy ? value : 0)
          }
        }
        const holidayInfo = csi.holidayInfo
        if (holidayInfo.ischeck) {
          const value = parseFloat(holidayInfo.value ? holidayInfo.value : 0)
          if (holidayInfo.isStatus) {
            marketPrice += value
          }
          if (holidayInfo.isStatus && holidayInfo.checkBuy) {
            coursePrice += parseFloat(holidayInfo.checkBuy ? value : 0)
          }
        }
        const soundInfo = csi.soundInfo
        if (soundInfo.ischeck) {
          const value = parseFloat(soundInfo.value ? soundInfo.value : 0)
          if (soundInfo.isStatus) {
            marketPrice += value;
          }
          if (soundInfo.isStatus && soundInfo.checkBuy) {
            coursePrice += parseFloat(soundInfo.checkBuy ? value : 0)
          }
        }
        const networkInfo = csi.networkInfo
        if (networkInfo.ischeck) {
          const value = parseFloat(networkInfo.value ? networkInfo.value : 0)
          if (networkInfo.isStatus) {
            marketPrice += value;
          }
          if (networkInfo.isStatus && networkInfo.checkBuy) {
            coursePrice += parseFloat(networkInfo.checkBuy ? value : 0)
          }
        }
      }

      let ir = this.lookPreviewRow.fangshi;
      console.log(ir)
      let courseCouponPrice = 0
      if (ir.length > 0) {
        ir.forEach(item => {
          if (item.checked) {
            // if (item.name != "自备") {
            //   contractGoodsIds += item.goodsIdList;
            // }
            if (item.chiosetype == "FREE") {
              // 免费
              amount += 0;
              couponPrice = 0; // 优惠金额
              courseCouponPrice = 0
            } else if (item.chiosetype == "LEASE") {
              // 租赁
              // couponPrice = parseFloat(item.mode.LEASE); // 优惠金额
              // courseCouponPrice = parseFloat(item.mode.courseLease || 0)
              amount += parseFloat(item.mode.depositFee);
              marketPrice += parseFloat(item.mode.depositFee);

            } else {
              //团购
              amount += parseFloat(item.mode.price);
              couponPrice = parseFloat(item.mode.GROUP);
              courseCouponPrice = parseFloat(item.mode.courseGroup)
            }
            marketPrice += parseFloat(item.mode.marketPrice)
          }
        });
      }
      if (coursePrice - Number(courseCouponPrice) >= 0) {
        coursePrice = Number((coursePrice - courseCouponPrice).toFixed(2))
      } else {
        coursePrice = 0
      }
      amount += parseFloat(coursePrice);
      // console.log(this.lookPreviewRow.markList)
      // 辅件
      if (this.lookPreviewRow.markList.length > 0) {
        this.lookPreviewRow.markList.forEach(item => {
          if (item.checked) {
            amount += parseFloat(item.price);
            let tempPrice = 0
            item.goods.forEach(item => {
              tempPrice += this.getAccessoryPrice(item)
            })
            marketPrice += parseFloat(tempPrice);
            // if (item.goodsList && item.goodsList.length > 0) {
            //   item.goodsList.forEach(childGoods => {
            //     marketPrice += parseFloat(childGoods.marketPrice);
            //   });
            // }
            // goodsGroupIds.push(item.id)
            // goodsGroupIds[item.id] = "ACCESSORIES";
            // contractGoodsIds += ',' + item.goodsIdList
          }
        });
      }

      // 其它
      // if (this.otherResult.length > 0) {
      //   this.otherResult.forEach(item => {
      //     amount += parseFloat(item.price);
      //     marketPrice += parseFloat(item.marketPrice);
      //     // goodsGroupIds.push(item.id)
      //     goodsGroupIds[item.id] = "OTHER";
      //     // contractGoodsIds += ',' + item.id
      //   });
      // } else if (this.otherGoods) {
      //   this.otherGoods.forEach(item => {
      //     amount += parseFloat(item.groupPurchasePrice);
      //     marketPrice += parseFloat(item.marketPrice);
      //     goodsIds.push(item.id);
      //     // contractGoodsIds += ',' + item.id
      //   });
      // }
      let tempGroupPurchasePrice = amount || 0
      // 判断减去优惠金额，是否大于0(这里有可能出现负数)
      if (amount - couponPrice >= 0) {
        amount = Number((amount - couponPrice).toFixed(2));
        this.errorPrice = false;
      } else {
        amount = 0;
        this.errorPrice = true; // 订单金额是否异常
      }
      // 计算是否使用过余额
      if (this.payType) {
        let tempPrice = Number((amount - this.balance).toFixed(2));
        if (tempPrice > 0) {
          this.needPrice = tempPrice;
        } else {
          this.needPrice = 0;
        }
      } else {
        this.needPrice = Number(amount.toFixed(2));
      }
      let check = [];
      for (let i in this.checkfor) {
        if (this.checkfor[i] && i != 'submit') {
          check.push(this.checkfor[i].ischeck)
        }
      }
      let checkFlag = false
      check.forEach(item => {
        checkFlag = checkFlag || item
      })
      console.log(mgs, couponPrice, 'yuji')
      if (!checkFlag) {
        marketPrice += Number(parseFloat(coursePrice))
        //  
      }
      this.orderInfo = {
        amount: Number(amount.toFixed(2)),
        marketPrice: Number(marketPrice.toFixed(2)),
        groupPurchasePrice: Number(tempGroupPurchasePrice.toFixed(2)),
        couponPrice: couponPrice,
        goodsGroupIds: goodsGroupIds,
        goodsIds: goodsIds.join(","),
        contractGoodsIds: contractGoodsIds,
        coursePrice: coursePrice
      };
    },
    getAccessoryPrice (val) {
      const lookPreviewRow = this.lookPreviewRow
      if (lookPreviewRow && lookPreviewRow.markChioseList) {
        for (let i in lookPreviewRow.markChioseList) {
          if (lookPreviewRow.markChioseList[i].id == val) {
            return lookPreviewRow.markChioseList[i].marketPrice;
          }
        }
      }
      return 0;
    },
  },
  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) {
        let vals = val[i]
        str += `${vals.shopName}:`;
        if (vals.mode.isFREE) {
          str += `免费:减免金额${vals.mode["FREE"]},课程减免${vals.mode['courseFree'] ? vals.mode['courseFree'] : 0}\n`;
        }
        if (vals.mode.isGROUP) {
          str += `团购:团购价${vals.mode["price"]},减免金额${vals.mode["GROUP"] ? vals.mode["GROUP"] : 0},课程减免${vals.mode['courseGroup'] ? vals.mode['courseGroup'] : 0}\n`;
        }
        if (vals.mode.isLEASE) {
          str += `租赁:${vals.mode.depositFee},减免金额${vals.mode["LEASE"] ? vals.mode["LEASE"] : 0},课程减免${vals.mode['courseLease'] ? vals.mode['courseLease'] : 0}\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: {
    previewVisible (val) {
      if (!val) {
        this.orderInfo = {
          marketPrice: 0,
          groupPurchasePrice: 0,
          amount: 0, // 现价总金额
          goodsGroupIds: null,
          goodsIds: null,
          contractGoodsIds: null, // 选中所有商品ID
          couponPrice: 0 //
        };
        this.needPrice = 0;
      }
    }
  },
  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;
// }
.nowPrice {
  color: #1a1a1a;
  font-size: 16px;
}
.nowMoney {
  height: 50px;
  // border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  line-height: 50px;
  text-align: right;
  color: #ff0000;
  font-size: 20px;
  font-weight: bold;
  .title {
    font-size: 16px;
  }
  .dot {
    font-size: 16px;
  }
}
.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;
}
.use_price {
  line-height: 52px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;

  img {
    padding-right: 8px;
  }
  span {
    font-size: 16px;
  }
}
.reductionWrap1 {
  background-color: #ededed;
}
.reductionWrap {
  width: 100%;
  margin-bottom: 60px;

  .lineWrap {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    .item {
      width: 25%;
      text-align: left;
      .el-checkbox {
        margin-right: 5px;
      }
    }
  }
  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;
  }

  .noticeInfo {
    h2 {
      font-size: 18px;
      color: #1a1a1a;
      // padding-bottom: 10px;
    }
    position: relative;
    // margin-bottom: .1rem;
    background: #fff;
    padding: 15px 15px 10px;
    font-size: 14px;
    color: #808080;
    border-bottom: 1px solid #eaeaea;
  }
  .protocolbtn {
    margin: 35px 0;
    background: #14928a;
    color: #fff;
    font-size: 18px;
    border-radius: 50px;
    text-align: center;
    width: 100%;
  }

  .section {
    padding: 16px 0 10px;
    background: #fff;
    margin-bottom: 10px;
    .line_bottom {
      border-bottom: 1px solid #ededed;
    }
    > .title {
      font-size: 20px;
      line-height: 28px;
      font-weight: bold;
      margin-bottom: 0px;
      padding: 0px 16px;
      // 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: 14px;
      color: #905319;
      text-align: left;
      border-top: 1px solid #ededed;
      padding: 12px 16px 12px 31px;
      position: relative;
      background-color: #ffe9d4;
      .trumpet_icon {
        width: 14px;
        height: 12px;
        background: url("../../../assets/images/icon_smallBell.png") no-repeat
          center;
        background-size: contain;
        position: absolute;
        left: 14px;
        top: 16px;
      }
    }
  }

  .options {
    padding-top: 8px;
    .oc {
      padding: 0 16px;
      &:last-child {
        // border-top: 1px solid #ededed;
        margin-top: 8px;
        padding-top: 9px;
      }
    }
    .protocol {
      padding-left: 20px;
      font-size: 10px;
      line-height: 14px;
    }
    &.classInfo {
      padding: 0 16px;
      .option .o_ft {
        color: #444444;
      }
    }
    &.lines {
      margin-top: 5px;
      // border-top: 1px solid #ededed;
      border-bottom: 1px solid #ededed;
    }
    &.sale {
      .option {
        .o_bd,
        .o_ft {
          font-size: 16px;
          color: #ff0000;
          font-weight: bold;
        }
      }
    }
    .option {
      line-height: 26px;
      font-size: 15px;
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;
      margin-bottom: 9px;
      .o_bd {
        flex: 1;
        .c {
          font-size: 12px;
        }
      }
      .o_ft {
        font-size: 14px;
        color: #ff0000;
        del {
          color: #aaaaaa;
          font-size: 12px;
        }
      }
      .check_radio {
        margin-right: 8px;
        width: 18px;
        height: 18px;
        background: url("../../../assets/images/icon_radio.png") no-repeat
          center;
        background-size: contain;
        display: inline-block;
        position: relative;
        top: 2px;
      }
      .check_default {
        margin-right: 8px;
        display: block;
        width: 18px;
        height: 18px;
        background-color: #e9eaef;
        border-radius: 50%;
        &.check_active {
          background: url("../../../assets/images/icon_checkbox.png") no-repeat
            center;
          background-size: contain;
        }
      }
    }
  }

  .configuration {
    padding-bottom: 9px;

    .config {
      min-height: 40px;
    }
    .config_line {
      display: flex;
      justify-content: space-between;
      .content {
        width: 70%;
        text-align: right;
      }
      .title {
        font-size: 14px;
        color: #808080;
        span {
          padding-left: 26px;
        }
      }
    }
    .config_other {
      .title {
        background: rgba(246, 246, 246, 1);
        height: 1px;
        position: relative;
        margin: 15px 0;
        span {
          position: absolute;
          left: 12px;
          top: -4px;
          display: inline-block;
          background-color: #fff;
          font-size: 12px;
          padding: 0 40px;
        }
      }
    }
    .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;
        padding: 0;
      }
    }
  }
  .needprice {
    display: flex;
    justify-content: space-between;
    del {
      font-size: 14px;
      color: #aaa;
      font-weight: bold;
    }
    span {
      font-size: 18px;
      color: #f85043;
      font-weight: bold;
    }
  }
  .buy {
    position: absolute;
    margin: 0 auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    width: 440px;
    display: flex;
    flex-direction: row;
    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>