<template>
  <div class="stock-page">
    <a-card title="库存信息">
      <a-form-model v-bind="formItemLayoutWithOutLabel">

        <a-form-model-item
          v-bind="formItemLayout"
          label="类型"
        >
          <a-select v-model="form.type">
            <a-select-option
              key="NUMBER"
              value="NUMBER"
            >
              数量
            </a-select-option>
            <a-select-option
              key="PERCENT"
              value="PERCENT"
            >
              百分比
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <a-form-model-item
          v-bind="index === 0 ? formItemLayout : {}"
          v-for="(item,index) in form.content"
          :label="index === 0 ? '库存等级' : ''"
          :key="index"
        >
          <div class="item-wrap">
            <a-input v-model="item.value" placeholder="等级描述，为空表示显示数值"></a-input>
            <a-input
              v-model="item.level"
              placeholder="等级值"
              style="margin-left:5px"
            ></a-input>

            <a-icon
              @click="removeLevel(index)"
              class="dynamic-delete-button"
              type="minus-circle-o"
            />
          </div>

        </a-form-model-item>

        <a-form-model-item v-bind="formItemLayoutWithOutLabel">
          <a-button
            type="dashed"
            style="width: 100%"
            @click="addLevel"
          >
            <a-icon type="plus" /> 新增库存等级
          </a-button>
        </a-form-model-item>

        <a-form-model-item v-bind="formItemLayoutWithOutLabel">
          <a-button type="primary" html-type="submit" @click="submitForm">
            保存
          </a-button>
        </a-form-model-item>
      </a-form-model>

    </a-card>
  </div>
</template>

<script>
import { getStock, setStock } from '@/api/systemSetting/stock'

export default {
  created () {
    this.getStock()
  },
  data () {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 20, offset: 0 },
          sm: { span: 12, offset: 6 }
        }
      },
      form: {
        type: '',
        content: []
      }
    }
  },
  methods: {
    getStock () {
      getStock().then(res => {
        this.form = res.extraInfo.stock_display_strategy
      })
    },
    submitForm () {
      setStock(this.form).then(res => {
        this.$message.success('提交成功')
      })
    },
    removeLevel (index) {
      this.form.content.splice(index, 1)
    },
    addLevel () {
      this.form.content.push({
        level: 0,
        value: ''
      })
    }
  }
}
</script>

<style lang="scss">
.stock-page {
  .ant-form-item-label label {
    display: inline-block;  width: 100px;
  }
  .item-wrap{
      display: flex; justify-content: space-between;align-items: center;
  }
  .dynamic-delete-button{
      top:0; margin-left: 5px;
  }
}

</style>
