<template>
  <div>
    <div class="info-header">
      <p class="info-title info-title-line">投放信息</p>
    </div>
    <el-divider class="mini-divider-table" />
    <el-form
      ref="form"
      class="dialog-form-inline"
      :model="localFormState"
      :inline="true"
      size="mini"
      label-width="80"
    >
      <template v-for="(form, index) in localFormState.list">
        <div :key="index">
          <el-form-item
            label="投放位置"
            :prop="`list.${index}.location`"
            :rules="[
              { required: true, message:'投放位置不能为空！', trigger: 'blur' }
            ]"
          >
            <select-location v-model="form.location" />
          </el-form-item>
          <el-form-item
            label="投放数量"
            :prop="`list.${index}.num`"
            :rules="[
              { required: true, type: 'number', message:'投放数量不能为空！', trigger: 'blur' },
            ]"
          >
            <el-input-number v-model="form.num" />
          </el-form-item>
          <el-button
            class="options-item-icon"
            size="mini"
            plain
            :disabled="localFormState.list.length >= 3"
            @click="handleAdd(index)"
          > + </el-button>
          <el-popconfirm
            title="是否要删除该位置的投放？"
            :disabled="localFormState.list.length <= 1"
            @confirm="handleRemove(form)"
          >
            <el-button
              slot="reference"
              class="options-item-icon"
              size="mini"
              plain
              :disabled="localFormState.list.length <= 1"
            > - </el-button>
          </el-popconfirm>
        </div>

      </template>
    </el-form>

  </div>
</template>

<script>
import SelectLocation from '@/components/Select/SelectLocation.vue'

const initLocationForm = () => ({
  locationId: '',
  num: '',
  key: Math.random()
})
export default {
  components: { SelectLocation },
  props: {
    locationList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    localFormState() {
      return {
        list: this.locationList
      }
    }
  },
  methods: {
    handleAdd() {
      this.$refs.form.validate(valid => {
        if (valid && this.localFormState.list.length < 3) {
          this.localFormState.list.push(initLocationForm())
        }
      })
    },
    handleRemove(option) {
      this.localFormState.list = this.localFormState.list.filter(k => k !== option.key)
    }
  }
}
</script>
<style scoped lang="scss">

</style>
