<template>
  <div>
    <div v-for="(music,index) in item.chioseMusic" :key="index">

      <el-row class="chioseMusic">
      <el-col>
        <div class="flexRow">
          <p class="title">可选乐器{{index+1}}:</p>
          <el-select style="width:180px"
                     v-model="music.musical"
                     @change="(val)=>{chioseMusic(val,music)}">
            <el-option v-for="(item,index) in item.goodsList"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
          <el-checkbox-group v-model="music.type"
                             class="marginLeft10">
            <el-checkbox label="GROUP">团购</el-checkbox>
            <el-checkbox label="LEASE">租赁</el-checkbox>
            <el-checkbox label="FREE">免费</el-checkbox>
          </el-checkbox-group>
        </div>
      </el-col>
      <el-col :xs="24"
              :sm="24"
              :md="18"
              :lg="12">
        <div class="flexRow">
          <p class="title">团购价:</p>
          <el-input type="number"
                    v-if="music.type&&music.type.length>0?music.type.includes('GROUP'):false"
                    v-model="music.groupPrice"
                    disabled
                    style="width:180px"> <template slot="append">元</template></el-input>
          <el-input value="--"
                    v-else
                    disabled
                    style="width:180px"> <template slot="append">元</template></el-input>
          <p class="title">租赁押金:</p>
          <el-input type="number"
                    v-if="music.type&&music.type.length>0?music.type.includes('LEASE'):false"
                    v-model="music.borrowPrice"
                    style="width:180px"> <template slot="append">元</template></el-input>
          <el-input value="--"
                    v-else
                    disabled
                    style="width:180px"> <template slot="append">元</template></el-input>
          <i class="el-icon-close marginLeft10"
             v-if="item.chioseMusic.length >1"
             @click="deleteMusic(music)"
             style="font-size:20px; cursor: pointer;"></i>
        </div>

      </el-col>
      </el-row>
    </div>
    <div class="coreItemRow">
      <p class="title"></p>
      <el-button type="info"
                 plain
                 style="width:558px"
                 size="mini"
                 icon="el-icon-plus"
                 @click="addMusic">新增可选乐器</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['item'],
  data () {
    return {
      radio: '',
      goods: ''
    }
  },
  created () { console.log(this.item) },
  mounted () {

  },
  methods: {
    chioseMusic (val, music) {
      this.item.goodsList.map((some, index) => {
        if (some.id == val) {
          music.groupPrice = some.groupPurchasePrice
          console.log(music)
        }
      })
    },
    addMusic () {
      this.item.chioseMusic.push({ musical: '', type: ['GROUP'], groupPrice: null, borrowPrice: 1500 })
      this.$emit('lookMusic')
    },
    deleteMusic (music) {

      this.item.chioseMusic.forEach((element, index) => {
        if (element.musical == music.musical) {
          this.item.chioseMusic.splice(index, 1)
        }
      });
    }
  }

}
</script>
<style lang="scss" scoped>
.chioseMusic {
  width: 100%;
}
.coreItemRow {
  padding-left: 20px;
  height: 50px;
  line-height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
}
p {
  margin-right: 10px;
}
.title {
  width: 100px;
  text-align: right;
  margin-right: 10px;
}
.marginLeft10 {
  margin-left: 10px;
}
.flexRow {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 20px;
  margin-top: 10px;
}
</style>