<template>
  <el-dialog
    :title="boxDialogObj.title"
    :visible.sync="boxDialogObj.show"
    width="80%">
    <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/zone"
                :http-request="uploadFile"
                :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-select v-model="form.min_level" placeholder="请选择" clearable>
                <el-option
                  v-for="item in levelOption"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="title" label="最大等级">
              <el-select v-model="form.max_level" placeholder="请选择" clearable>
                <el-option
                  v-for="item in levelOption"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-transfer
              :titles="['单品列表', '盒子内容']"
              v-model="singleList"
              :filterable="true"
              :props="{
                key: 'id',
                label: 'name'
              }"
              @change="changeTrans"
              :data="data2">
              <span slot-scope="{ option }" style="display: block">
                {{ option.name }}【库存{{option.num}}】
                  <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,editBoxApi,uploadFileApi} 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
        },
        levelOption: [0,1,2,3,4,5,6,7,8,9]
      }
    },
    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=>{
              this.form = {
                title:res.title,
                item_stock_arr:[],
                cover:'',
                min_age:res.min_age,
                max_age:res.max_age,
                min_level:res.min_level,
                max_level:res.max_level
              };
              this.singleList = [];
              this.imageList = [{name:res.cover,url:process.env.IMAGE_URL_HEAD + res.cover}];
              res.detail.forEach(i=>{
                this.singleList.push(i.id);
                if(this.data2.find(a=>{return a.id === i.id}))(this.data2.find(a=>{return a.id === i.id})).checkNum = i.num;
              });
            });
            break;
        }
      },
      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})
        });
        if(this.imageList.length>0){
          this.form.cover = this.imageList[0].name;
        }
        let _json = JSON.parse(JSON.stringify(this.form));
        _json.item_stock_arr = JSON.stringify(_json.item_stock_arr);
        switch (this.boxDialogObj.type) {
          case 0:
            addBoxApi(this.boxDialogObj.category_id,_json).then(res=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.boxDialogObj.show = false;
              this.$emit("reflash",this.boxDialogObj.category_id);
            });
            break;
          case 1:
            editBoxApi(this.boxDialogObj.id,_json).then(res=>{
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.boxDialogObj.show = false;
              this.$emit("reflash",this.boxDialogObj.category_id);
            });
            break;
        }
      },
      changeTrans(a,b,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}]
      },
      uploadFile(a) {
        this.loading = true;
        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
        this.fileUid = a.file.uid;
        uploadFileApi({file:a.file,type:'local'}).then(res=>{
          this.imageList = [{name:res.url,url:process.env.IMAGE_URL_HEAD + res.url}]
          this.loading = false;
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
        }).catch(()=>{
          this.loading = false;
        })
      }
    },
    watch:{
      'boxDialogObj'(value){
        this.initPage()
      }
    }

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

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