<template>
  <div>
    <el-dialog :title="exData.id ? '编辑': '新增'"
               :visible.sync="dialog"
               width="600px"
               :close-on-click-modal="false"
               top="50px">
      <el-form ref="form"
               :model="form"
               :rules="formRules"
               label-width="80px">
        <el-form-item>
          <h4>设置 {{ plan_author_name }} {{ plan_start_time + '至' + plan_end_time }} 的演唱歌单</h4>
        </el-form-item>
        <el-form-item v-for="(song, index) in form.songs"
                      :label="(index + 1).toString()"
                      :key="index"
                      :prop="'songs.' + index + '.song_id'"
                      :rules="{required: true, trigger: ['blur', 'change'], message:'该项为必填项'}">
          <el-select class="af-el-select"
                     v-model="song.song_id"
                     filterable
                     placeholder="请选择歌曲"
                     @change="handleChange(index, song.song_id)">
            <el-option
              v-for="item in musicData"
              :key="item.id"
              :label="item.song_name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-button type="warning"
                     :disabled="form.songs.length <= 1"
                     @click.prevent="removeSong(song)">删除
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer text-center">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button @click="addSong">新增歌曲</el-button>
        <el-button type="primary" :disabled="booLock" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: Boolean,
      default: true
    },
    exData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      dialog: !!this.value,
      form: {
        plan_id: '',
        songs: [
          {
            song_id: '',
            song_name: '',
            song_price: '',
            song_auth_name: ''
          }
        ]
      },
      plan_author_name: '', // 歌手名
      plan_start_time: '', // 演唱日期
      plan_end_time: '',
      musicData: [],
      booLock: false
    }
  },
  methods: {
    removeSong (item) {
      var index = this.form.songs.indexOf(item)
      if (index !== -1) {
        this.form.songs.splice(index, 1)
      }
    },
    addSong () {
      this.form.songs.push({
        song_id: '',
        song_name: '',
        song_price: '',
        song_auth_name: ''
      })
    },
    handleChange (index, value) {
      const result = this.musicData.find(item => item.id === value)

      this.form.songs[index] = {
        song_id: result.id,
        song_name: result.song_name,
        song_price: result.song_price,
        song_auth_name: result.song_auth_name
      }
    },
    // 获取歌手当天演出歌曲列表
    async fetchSongDetail (planId) {
      const api = '/v1/bar/show/plan/song/detail'
      const { code, data } = await this.$fetch(api, {
        plan_id: planId
      }, 'get')
      if (code === 200) {
        if (Array.isArray(data) && data.length) {
          this.form.songs = data.map(item => ({
            song_id: item.song_id,
            song_name: item.song_name,
            song_price: item.song_price,
            song_auth_name: item.song_auth_name
          }))
        }
      }
    },
    // 获取歌手曲库
    async fetchMusicList (id) {
      const api = '/v1/user/song/list'
      const { code, data } = await this.$fetch(api, {
        page: 1,
        page_size: 10000,
        id: id
      }, 'get')
      if ((data.data || data.list) && code === 200) {
        this.musicData = data.data || data.list
      }
    },
    handleSubmit () {
      const url = this.exData.id ? '/v1/bar/show/plan/song/add' : '/v1/bar/show/plan/song/add'
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.booLock = true
          const data = await this.$fetch(url, {
            ...this.form
          })
          this.booLock = false
          if (data.code === 200) {
            this.$message.success('提交成功')
            this.$emit('success')
            this.dialog = false
          }
        }
      })
    }
  },
  mounted () {
    if (this.exData.id) {
      this.plan_author_name = this.exData.plan_author_name
      this.plan_start_time = this.exData.plan_start_time
      this.plan_end_time = this.exData.plan_end_time
      this.$set(this.form, 'plan_id', this.exData.id)

      this.fetchMusicList(this.exData.user_id)
      this.fetchSongDetail(this.exData.id)
    }
  },
  watch: {
    dialog (val) {
      if (!val) this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.af-el-select {
  width: 360px;
  margin-right: 10px;
}
</style>
