<template>
  <div>
    <Modal :width="62" title="产品组合" :value.sync="isShow" @on-visible-change="$emit('update:isShow',$event)" @on-cancel="reset">
      <Form :model="form" ref="form">
        <FormItem
          prop="products"
          v-for="(item, index) in form.products"
          :key="index">
          <div class="product">
            <div class="product-content">
              <div style="width: 60px">{{'产品'+item.index}}</div>
            </div>
            <div class="product-content">
              <Select type="text" v-model="item.value" placeholder="选择产品" style="width: 140px;">
                <Option v-for="pro in products" :key="pro.id" :value="pro.id">{{pro.name}}</Option>
              </Select>
            </div>
            <div class="product-content">
              <InputNumber :min="0" v-model="item.num" placeholder="数量" style="width: 80px;"></InputNumber>
            </div>
            <div class="product-content">
              <Input type="text" v-model="item.unit" placeholder="单位" style="width: 80px;"></Input>
            </div>
            <div class="product-content">
              <InputNumber :precision="2" type="text" v-model="item.price" placeholder="价格" style="width: 100px;"></InputNumber>
            </div>
            <template v-if="!item.id">
              <div class="product-content">
                <Button icon="md-add" type="primary" @click="submit(item)" style="width: 80px;">确认</Button>
              </div>
            </template>
            <template>
              <div class="product-content">
                <Button icon="md-remove" type="primary" @click="removeProduct(item.index,item.id)" style="width: 80px;">移除</Button>
              </div>
            </template>
          </div>
        </FormItem>
        <FormItem style="display: flex;justify-content: center;">
          <Button style="width: 200px;" type="dashed"  @click="addProduct" icon="md-add">新增</Button>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>

<script>
import {getItems,getProductTypes,saveItems,deleteItems} from "@/api/package"
import { Message } from 'element-ui'
export default {
  props:{
    isShow:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      id:'',
      productIndex:0,
      products:[],
      form:{
        products:[]
      },
    }
  },
  methods: {
    removeProduct(index,id){
      if(id){
        deleteItems({
          deleting_ids:[{id}]
        }).then(res => {
          Message({
            type:'success',
            message:'移除产品成功'
          })
          this.form.products.map((item,index1)=>{
            if(index == item.index){
              this.form.products.splice(index1,1)
            }
          })
        })
      }else{
        this.form.products.map((item,index1)=>{
          if(index == item.index){
            this.form.products.splice(index1,1)
          }
        })
      }
    },
    addProduct(){
      this.form.products.push({
        value:"",
        index:++this.productIndex,
        num:null,
        unit:"",
        price:null
      })
    },
    reset(){
      this.productIndex = 0
      this.form = {
        products:[]
      }
    },

    async getProducts(){
      const res = await getProductTypes()
      this.products = res
    },

    async getItems(){
      this.form.products = []
      const res = await getItems({package_id:this.id})
      this.form.products.push(...(res.map(item => {
        return {
          id:item.id,
          value:item.product_type_id,
          index:++this.productIndex,
          num:item.num,
          unit:item.unit,
          price:Number(item.price)
        }
      })))
    },

    submit(item){
      saveItems({
        save_rows:[{package_id:this.id,unit:item.unit,num:item.num,product_type_id:item.value,price:item.price}]
        //   this.form.products.map(item => {
        //   return {package_id:this.id,unit:item.unit,num:item.num,product_type_id:item.value,price:item.price}
        // })
      }).then(res => {
        Message({
          type:'success',
          message:'产品组合更改完成'
        })
        this.getItems()
      })
    }
  },
  watch:{
    isShow(newVal){
      if(newVal){
        this.getItems()
      }
    }
  },
  mounted() {
    this.getProducts()
  }

}
</script>

<style scoped lang="scss">
.product{
  min-width: 700px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;

}
::v-deep .ivu-modal-body{
  overflow: scroll;
}
</style>
