<template>
  <div class="bulkImport">
    <div class="head-title">
        批量导入
        <!-- <el-button style="float:right;margin-top: -5px;margin-left:20px;" size="small" type="primary">分类导入历史</el-button> -->
    </div>
    <div style="background:#fff;margin-top:10px;padding:20px">
        <el-tabs v-model="activeName">
            <el-tab-pane :dataId="0" label="商品导入" name="first"></el-tab-pane>
            <!-- <el-tab-pane :dataId="1" label="分类导入" name="second"></el-tab-pane> -->
        </el-tabs>
        <div style="margin-top:20px;">
            <el-steps style="width:900px;margin-left: 20px;" :active="activestep">
                <el-step title="选择文件"></el-step>
                <el-step title="导入数据"></el-step>
                <el-step title="导入完成"></el-step>
            </el-steps>
            <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px" style="margin-top: 30px;width: 600px;">
               
                <el-form-item label="状态" prop="GoodsStatus" v-if="activeName=='first'">
                    <el-radio v-model="addMsg.GoodsStatus" :label="1">暂不上架</el-radio>
                    <el-radio v-model="addMsg.GoodsStatus" :label="2">立即上架</el-radio>
                </el-form-item>
                <el-form-item class="tooltiplabel" label="上传数据" prop="resource">
                    <el-tooltip class="item" effect="dark" content="仅支持上传csv,xls格式" placement="top"
                    style="position: absolute;left: -22px;top:12px">
                    <i class="el-tooltip el-icon-info"></i>
                    </el-tooltip>
                    <span>{{addMsg.FileName}}</span>
                    <el-upload
                        class="upload-demo"
                        ref="upload"
                        :action="importFileUrl"
                        :multiple="true" 
                        :on-success="successUpload"
                        :show-file-list="false"
                        accept=".csv, .xlsx,.xls">
                        <span class="blue">选择本地文件</span>
                    </el-upload>
                </el-form-item>
                <el-form-item label="商品分类" prop="CategoryList" v-if="activeName=='first'">
                    <template v-if="CategoryList && CategoryList.length>0">
                    <el-tag type="warning" style="margin-right:10px;" @close="exitCheck(item,index)"
                        v-for="(item,index) in CategoryList" :key="index" closable>{{item.CategoryName}}</el-tag>
                    </template>
                    <el-button type="primary" @click="flDig=true,keepCategoryList=CategoryList"
                    style="margin:0 10px;" size="small">选择分类</el-button>
                </el-form-item>
                <el-form-item label="是否启用" v-if="activeName!='first'">
                    <el-switch
                        v-model="addMsg.Enabled"
                        active-color="#409EFF"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item label="是否显示" v-if="activeName!='first'">
                    <el-switch
                        v-model="addMsg.Enabled"
                        active-color="#409EFF"
                        :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </el-form-item>
                <el-form-item>
                    <el-button @click="save('addMsg')" type="primary" style="margin:0 10px;" size="small">一键导入</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <!-- 选择分类 -->
    <el-dialog custom-class="app-add-cat" title="选择分类" :visible.sync="flDig" width="1100px">
      <el-row>
        <el-col :span="8" style="padding:0 10px;box-sizing:border-box">
          <h3 style="padding:15px 0">一级分类</h3>
          <div class="app-goods-cat-list active">
            <el-checkbox-group v-model="CategoryList" @change="handleCheckChange">
              <div v-for="(item,index) in fenleiData" :key="index" flex="dir:left box:first" class="cat-item">
                <el-checkbox :label="item">
                  <span style="display: none;">{{item.Name}}</span>
                </el-checkbox>
                <div flex="box:last cross:center">
                  <span>{{item.Name}}</span>
                  <i v-if="item.ChildList.length>0" @click="getChild2(item.ChildList)" class="el-icon-arrow-right"></i>
                </div>
              </div>
            </el-checkbox-group>

          </div>
        </el-col>
        <el-col v-show="childList2.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
          <h3 style="padding:15px 0">二级分类</h3>
          <div class="app-goods-cat-list active">
            <el-checkbox-group v-model="CategoryList" @change="handleCheckChange">
              <div v-for="(item,index) in childList2" :key="index" flex="dir:left box:first" class="cat-item">
                <el-checkbox :label="item">
                  <span style="display: none;">{{item.Name}}</span>
                </el-checkbox>
                <div flex="box:last cross:center">
                  <span>{{item.Name}}</span>
                  <i v-if="item.ChildList.length>0" @click="getChild3(item.ChildList)" class="el-icon-arrow-right"></i>
                </div>
              </div>
            </el-checkbox-group>

          </div>
        </el-col>
        <el-col v-show="childList3.length>0" :span="8" style="padding:0 10px;box-sizing:border-box">
          <h3 style="padding:15px 0">三级分类</h3>
          <div class="app-goods-cat-list active">
            <el-checkbox-group v-model="CategoryList" @change="handleCheckChange">
              <div v-for="(item,index) in childList3" :key="index" flex="dir:left box:first" class="cat-item">
                <el-checkbox :label="item">
                  <span style="display: none;">{{item.Name}}</span>
                </el-checkbox>
                <div flex="box:last cross:center">
                  <span>{{item.Name}}</span>
                  <i class="el-icon-arrow-right"></i>
                </div>
              </div>
            </el-checkbox-group>

          </div>
        </el-col>
      </el-row>
      <div class="tag-box">
        <el-tag @close="exitCheck(item)" v-for="(item,index) in CategoryList" :key="index" type="warning"
          closable style="margin-right:5px">{{item.Name}}</el-tag>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="flDig=false,CategoryList=keepCategoryList">取 消</el-button>
        <el-button @click="flDig = false" size="small" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: "bulkImport",
    data(){
        return{
            activeName:"first",
            activestep:0,
            addMsg:{
                FileName:'',
                FilePath:'',
                GoodsStatus:1,
                CategoryList:[],
            },
            rules:{
                GoodsStatus: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
            },
            flDig:false,
            fenleiData: [],
            checkList: [],
            childList2: [],
            childList3: [],
            CategoryList:[],
            keepCategoryList: [],
            importFileUrl: this.domainManager().UploadFileUrl,

            dataId:0,
        }
    },
    created(){
        this.getTree();
    },
    methods:{
        save(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                if(this.addMsg.FilePath==''){
                    this.Error("请上传文件");
                    return;
                }
                if(this.CategoryList.length==0){
                    this.Error("请选择商品分类");
                    return;
                }
                this.addMsg.CategoryList=[];
                this.CategoryList.forEach(item=>{
                    this.addMsg.CategoryList.push(item.Id);
                })
                
                this.apipost("/api/product/SetGoodsBatchImport", this.addMsg, res => {
                if (res.data.resultCode == 1) {
                    this.Success(res.data.message)
                    this.addMsg={
                        FileName:'',
                        FilePath:'',
                        GoodsStatus:1,
                        CategoryList:[],
                    }
                    this.CategoryList=[];
                    this.keepCategoryList=[];
                    this.activestep=3;
                } else {
                    this.Error(res.data.message)
                }

                })
            } else {
                return false;
            }
            });
        },
        handleClick(val){
            this.dataId=val.$attrs.dataId;
        },
        successUpload(file){
            this.addMsg.FileName=file.data.Name;
            this.addMsg.FilePath=file.data.Path;
            this.activestep=1;
        },
        getChild3(ChildList) {
            this.childList3 = ChildList;
        },
        getChild2(ChildList) {
            this.childList2 = ChildList;
        },
        handleCheckChange() {
            this.addMsg.CategoryList.forEach((item, k) => {
                item.CategoryId = item.Id;
            })
        },
        exitCheck(item, index) {
            this.addMsg.CategoryList.forEach((list, k) => {
            if (list.Id == item.Id) {
                this.addMsg.CategoryList.splice(k, 1);
            }
            })
        },
        getTree() {
        let msg1 = {
          Id: 0,
          Name: '',
          Tier: 0,
          ParentId: 0,
          Enabled: 1,
          IsShow: 1,
        }
        this.apipost("/api/product/GetProductCategoryTreeList", msg1, res => {
          if (res.data.resultCode == 1) {
            let pageData = res.data.data;
            this.fenleiData = pageData;
            this.fenleiData.forEach(item => {
                item.CategoryName = item.Name;
                item.ChildList.forEach(item2=>{
                    item2.CategoryName = item2.Name;
                    item2.ChildList.forEach(item3=>{
                        item3.CategoryName = item3.Name;
                    })
                })
              
            })
          }

        })
      },
    },
};
</script>

<style>
.bulkImport .el-step__title.is-finish {
    position: absolute;
    left: -18px;
    width: 200px;
}
.bulkImport .el-step__title.is-wait {
    position: absolute;
    left: -18px;
    width: 200px;
}
.bulkImport .el-step__title.is-process {
    position: absolute;
    left: -18px;
}
.bulkImport .tooltiplabel .el-form-item__label{
    padding-right:26px;
}
.app-add-cat .el-checkbox-group {
    font-size: 14px !important;
  }

  .app-add-cat .el-checkbox {
    margin-right: 0;
  }

  .app-add-cat .el-dialog__body {
    padding: 10px 20px !important;
  }

  .app-add-cat .tag-box .tag-item {
    margin-right: 5px;
  }

  .app-add-cat .tag-box {
    margin: 20px 0;
  }

  .app-add-cat .app-goods-cat-list .active {
    background: #FAFAFA;
  }

  .app-add-cat .app-goods-cat-list .cat-item {
    cursor: pointer;
    padding: 5px 10px;
  }

  .app-add-cat .app-goods-cat-list {
    border: 1px solid #E8EAEE;
    border-radius: 5px;
    margin-top: -5px;
    padding: 10px 0;
    overflow: scroll;
    height: 400px;
  }
</style>
