<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">导入商品</div>
      <h3 class="cton_h3">剩余次数：{{collect_num}}  <el-button type="primary" @click="dialogDetail = true" size="mini" style="float:right;">购买次数</el-button></h3>
      <div class="cton_text">
      <p>功能介绍：</p>
      <p>
        商品导入是为了商家快速、方便地将其它平台上已有的商品，一键导入到您的云仓平台，不再用手动输入编写商品信息
      </p>
      <p>使用方法：</p>
      <p>
        复制其它电商平台的商品链接，粘贴至商品链接输入框内，为该商品选择对应的商品分类，选择完成后点击立即获取按钮即可
      </p>
      <p>示例：</p>
      <p>京东商品链接如：https://item.jd.com/10684560542.html</p>
      <p>温馨提示：</p>
      <p>商品在获取过程中，请不要进行其它操作</p>
      <p>
        商品抓取后，默认放入到下架商品中，请手动修改商品相关信息，再提交申请上架
      </p>
      <p>请确保不要将多个平台的商品链接混合输入</p>
      <p>每个用户默认拥有1000次商品导入的机会，请慎重使用</p>
      <p>支持平台：</p>
      <p>京东、天猫、淘宝 </p>
      </div>
      <el-form ref="form" :model="form" label-width="180px">
        <el-form-item label="商品链接：">
          <el-input
           style="width:700px;"
            type="textarea"
            v-model="form.desc"
            :autosize="{ minRows: 4, maxRows: 8}"
            placeholder="请输入其它平台商品的链接，单次最多允许输入10条链接，以英文逗号隔开"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类：">
          <el-cascader
            ref="cascaderDom"
            v-model="el_value"
            v-if="el_valuestatus"
            @change="elvalueclick"
            :props="props"
            :options="options"
            placeholder="请选择"
            style="width: 350px;"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即导入</el-button>
        </el-form-item>
      </el-form>

      <el-drawer
      title="客户详情"
      ref="detailDrawer"
      :visible.sync="dialogDetail"
      :direction="direction"
      :withHeader="false"
      :modal="false"
      :modal-append-to-body="false"
      :destroy-on-close="true"
      style="position:absolute; height:100%; overflow: auto;"
      size="100%"
      >
      <import-detail @handleClose="handleClose" ></import-detail>
    </el-drawer>
    </el-card>
  </div>
</template>
<script>
import { MessageBox } from 'element-ui';
import {getShopInf} from "@/api/module/entry"
import { goodsjdAddress,goodsimport} from "@/api/module/goodsgement";
import { NewGetCategoryData } from '@/api/module/goods';
import { dateFormat } from "@/utils";
import ImportDetail from './components/importdetail.vue'

export default {
  name: "freight",
  data() {
    return {
      collect_num:0,
      form: {
        desc: "",
      },
      el_valuestatus: true,
      el_value: [], //地址
      options: [],
      dialogDetail: false,
        direction: 'rtl',
      props: {
          expandTrigger: 'click',
          lazy: true,
          lazyLoad: this.lazyLoad,
          value: "id",
          label: 'title',
          leaf: 'leaf'
      },
     
    };
  },
  components: {
    ImportDetail
  },
  created() {
    this.info()
  },
  watch: {},
  methods: {
    handleClose(){
      this.dialogDetail = false
      this.info()
    },
    info() {
      getShopInf().then(res => {
        if (res.code == 1) {
          this.collect_num = res.data.collect_num
        }
      })
    },
    onSubmit() {
      if (this.collect_num <= 0) {
        this.$message({type: 'warning', message: '您好，您的导入次数已用完，请您联系我们的工作人员操作充值'});
        return;
      }

      let urlarr
      if (this.form.desc) {
        urlarr = this.form.desc.split(',')
        //debugger
        if (urlarr.length > 0 && urlarr.length <= 10) {
          if( Number(urlarr.length) > Number(this.collect_num)) {
            this.$message({type: 'warning',message:'您好，准备导入的商品条数过多，当前剩余次数不足，请重新输入'});
            return;
          }
        } else if (urlarr.length > 10) {
          this.$message({
            message: '您单次输入的链接数量超过10条！',
            type: 'warning'
          });
          return false
        } else {
          this.$message.error('请填写需要导入的商品链接！');
          return false
        }
      } else {
        this.$message.error('请填写需要导入的商品链接！');
        return false
      }


      if (this.el_value.length == 3) {
        //  this.$message.error('商品分类！');
      } else {
        this.$message.error('请选择商品分类！');
        return false
      }

      let data = {
        category_id: this.el_value[2],
        third_url: urlarr
      }
      goodsimport(data).then(res => {
        let sucCount = 0;
        let allCount = Number(urlarr.length);
        //let failCount = 0;
        let msg = '';
        if (res.code === 1) {
          // 单条导入 提示语
          if( allCount === 1 ) {
            if( Number(res.data) === 1 ) {
              this.$message({ type:'success', message: '您好，商品已导入成功，请在仓库中进行编辑后申请上架' });
            } else {
              this.$message({ type:'error', message: '您好，商品导入失败，请您重新导入' });
            }
          } else if ( allCount > 1) {
            sucCount = Number( res.data );
            //failCount = this.minus( allCount, sucCount )
            msg = "您好，一共导入" + allCount + "条商品，" + sucCount + "条导入成功，请在仓库中进行编辑后申请上架";
            this.$message({ type:'warning', message: msg })
          }

          this.el_value = []
          this.$refs.cascaderDom.$refs.panel.activePath = []
          this.form.desc = ''
        } else {
          msg = res.message ? res.message : '导入失败'
          this.$message({ type:'error', message: msg })
        }
        this.info()

      })
    },
    // 自定义高精度浮点数运算
    // 加法
    add(arg1, arg2) {
      let r1, r2, m, result;
      try {
        //取小数位长度
        r1 = arg1.toString().split(".")[1].length;
        r2 = arg2.toString().split(".")[1].length;
      } catch (e) {
        r1 = 0;
        r2 = 0;
      }
      m = Math.pow(10, Math.max(r1, r2));		//计算因子
      result = (arg1 * m + arg2 * m) / m;
      result = result.toFixed(2);
      return result;
    },
    // 减法
    minus(arg1, arg2) {
      return this.add(arg1, -arg2);
    },
    elvalueclick() {
      //   this.goodsonly()
    },
    lazyLoad(node, resolve) {
        this.SSQList = [];
        this.SSQStr = '';
        this.getArea(node, resolve);
        if(this.SSQList && this.SSQList.length > 0) {
          this.isNextStep = false
        }else {
          this.isNextStep = true
        }
      },
      getArea(node, resolve) {
   
        const level = node.level;
        let limboNode = {};
        if(level === 0) {
          limboNode = {parent_id: 0}
        }
        if(level > 0) {
          limboNode = { parent_id: node.value };
        }
      

        NewGetCategoryData(limboNode).then(res => {
          let result = {};
          result = res.data
  
            result.forEach(item => {
              item.value = item.id;
              item.label = item.label;
              item.children = [];
              item.leaf = level>=2; 
              // 可以控制 是否有下级   值为true都不行，必须等于0
            })

         
        
          resolve(result)

        });
      },
  }, //methods结束
};
</script>
<style scoped lang="scss" type="text/stylus">
.freightTemplate-add {
  ::v-deep .el-dialog {
    height: 80%;
    overflow: hidden;
  }
  ::v-deep .el-dialog__body {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
.radiomodels .el-radio-button {
  margin: 0 10px;
}
::v-deep  .radiomodels .el-radio-button .el-radio-button__inner {
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px !important;
}
::v-deep 
  .radiomodels
  .el-radio-button
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  box-shadow: none;
}
.queryFormInline {
  padding-bottom: 20px;
}
.cton_h3{
  margin-left:170px;
  color: #1890ff;
}
.cton_text{
  width:80%;
  margin:0 0 30px 170px;
}
.cton_text p{
  font-size: 14px;
  padding:0;
  margin:5px 0;
}
::v-deep  .el-card__body {
    height: calc(100% - 40px);
    overflow-y: auto;
}
/deep/ .el-drawer {
    height: 100%;
    overflow: auto;
  }

</style>
