<template>
  <el-dialog
    :title="boxDialogObj.title"
    :visible.sync="boxDialogObj.show"
    width="950px">
    <div v-loading="loading">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="title" label="盒子名称">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item prop="title" label="盒子首图">
              <el-upload
                action="/api/public/upload"
                :class="{disabled:!uploadShow}"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :file-list="imageList"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="title" label="最小年龄">
              <el-input-number v-model="form.min_age"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="title" label="最大年龄">
              <el-input-number v-model="form.max_age"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="title" label="最小等级">
              <el-input-number v-model="form.min_level"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="title" label="最大等级">
              <el-input-number v-model="form.max_level"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-transfer
              :titles="['单品列表', '盒子内容']"
              v-model="singleList"
              :props="{
                key: 'id',
                label: 'name'
              }"
              @change="changeTrans"
              :data="data2">
              <span slot-scope="{ option }" style="display: block">
                {{ option.name }}
                  <el-input-number style="float: right" size="mini" v-model="option.checkNum"></el-input-number>
              </span>
            </el-transfer>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="boxDialogObj.show = false">取 消</el-button>
        <el-button type="primary" @click="sub">确 定</el-button>
      </span>
    </div>
  </el-dialog>
</template>

<script>
  import {getSingleListApi,addBoxApi,getBoxDetailApi} from "../../service/api";
  export default {
    name: "boxDialog",
    props:[
      "boxDialogObj"
    ],
    data(){
      return {
        loading:false,
        rules:{},
        data2:[],
        singleList:[],
        uploadShow: true,
        imageList: [],
        form:{
          title:"",
          item_stock_arr:[],
          cover:'',
          min_age:0,
          max_age:0,
          min_level:0,
          max_level:0
        }
      }
    },
    mounted(){

    },
    methods:{
      initPage(){
        getSingleListApi().then(res=>{
          res.list.forEach(i=>{
            i.checkNum = 1;
          });
          this.data2 = res.list
        });
        switch (this.boxDialogObj.type) {
          case 0:
            this.form = {
              title:"",
              item_stock_arr:[],
              cover:'',
              min_age:0,
              max_age:0,
              min_level:0,
              max_level:0
            };
            this.imageList = [];
            this.singleList = [];
            break;
          case 1:
            getBoxDetailApi(this.boxDialogObj.id).then(res=>{

            })
        }
      },
      sub(){
        this.singleList.forEach(i=>{
          let x = this.data2.find(a=>{
            return a.id === i
          });
          this.form.item_stock_arr.push({stock_id:x.id,num:x.checkNum})
        });
        this.form.item_stock_arr = JSON.stringify(this.form.item_stock_arr)
        if(this.imageList.length>0){
          this.form.cover = this.imageList[0].name;
        }
        switch (this.boxDialogObj.type) {
          case 0:
            addBoxApi(this.boxDialogObj.category_id,this.form).then(res=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.boxDialogObj.show = false;
              this.$emit("reflash",this.boxDialogObj.category_id);
            })
        }
      },
      changeTrans(a,b,c){
        console.log(c)
      },
      beforeAvatarUpload(){
        this.uploadShow = false
      },
      handleRemove(){
        this.uploadShow = true
      },
      handleAvatarSuccess(res) {
        this.imageList = [{name:res.data.url,url:process.env.IMAGE_URL_HEAD + res.data.url}]
      },
    },
    watch:{
      'boxDialogObj'(value){
        this.initPage()
      }
    }

  }
</script>
<style scoped lang="less">

</style>
<style>
  .el-transfer-panel{
    width: 400px;
  }
</style>
