<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">商品导入</div>
      <h3 class="cton_h3">已使用次数：{{collect_num}} / 1000次</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>
      </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
            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-card>
  </div>
</template>
<script>
import {getShopInf} from "@/api/module/entry"
import { goodsjdAddress,goodsimport} from "@/api/module/goodsgement";
import { dateFormat } from "@/utils";

export default {
  name: "freight",
  data() {
    return {
      collect_num:0,
      form: {
        desc: "",
      },
      el_valuestatus: true,
      el_value: [], //地址
      options: [],
      props: {
        checkStrictly: false,
        expandTrigger: "click",
        emitPath: true,
        value: "id",
        label: "label",
      },
    };
  },
  components: {},
  created() {
    this.getData();
    this.info()
  },
  watch: {},
  methods: {
    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) > 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
      }

      console.log(this.el_value)
      let data = {
        category_id: this.el_value[2],
        third_url: urlarr
      }
      goodsimport(data).then(res => {
        if (res.code == 1) {
          this.$message({
            message: res.message,
            type: 'success'
          });
          this.el_value = []
          this.form.desc = ''
          this.info()
        }
      })
    },
    elvalueclick() {
      //   this.goodsonly()
    },
    getData() {
      goodsjdAddress().then((res) => {
        if (res.code == 1) {
          this.options = res.data;
        }
      });
    },
  }, //methods结束
};
</script>
<style scoped lang="scss" type="text/stylus">
.freightTemplate-add {
  /deep/.el-dialog {
    height: 80%;
    overflow: hidden;
  }
  /deep/.el-dialog__body {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
.radiomodels .el-radio-button {
  margin: 0 10px;
}
/deep/ .radiomodels .el-radio-button .el-radio-button__inner {
  border: 1px solid #dcdfe6 !important;
  border-radius: 4px !important;
}
/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;
}
/deep/ .el-card__body {
    height: calc(100% - 40px);
    overflow-y: auto;
}
</style>