<template>
  <el-dialog title="调整可占用库存" :visible.sync="dialogVisible" width="500px" @close="cancelSubmit()">
    <div v-loading="loading">
      <el-form label-width="130px">
        <el-form-item label="导入券码文件" required>
          <div class="pickup-upload">
            <div>
              <span class="file-style inline-block" style="position:relative">
                <input style="position:absolute;top:3px;opacity:0;width:70px" type="file" name="file" accept=".xlsx,.xls" ref="file" @change="change">
                <el-button class="upload-trigger" @click="upload"><i class="iconfont-components4 icon-cp-shangc upload-icon"></i> 上传</el-button>
              </span>
              <span class="upload-tip inline-block">
                <el-button style="margin-right: 30px" type="text" @click="downloadFile">下载文件模板</el-button>
                <el-popover trigger="hover" placement="right" popper-class="upload-popper">
                  <el-button slot="reference" type="text">查看导入规则</el-button>
                  <div class="upload-tip-text">
                    <p style="margin-bottom:10px">1.填充空缺内容，导出所有项均为必填项;</p>
                    <p style="margin-bottom:10px">2.请勿导入重复的内容，导入的内容在原来基础上增加库存;</p>
                    <p style="margin-bottom:10px">3.上传完整仅支持.xlsx .xls文件的导入，填充数据不超过“10万”条;</p>
                    <p>4.正在异步上传处理中，我们将按照顺序分批次（5000/1批次）更新库存，请稍候刷新查看库存上传结果;</p>
                  </div>
                </el-popover>
              </span>
              <div>{{ file.name }}</div>
            </div>
            <div class="pickup-list" v-if="uploadFile.name">
              <p class="pickup-list-name">
                <i class="iconfont-welfare4 icon-wenjian1 file-icon"></i>
                {{ uploadFile.name }}
              </p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="调整备注" required>
          <el-input type="textarea" style="width:260px" :rows="3" placeholder="请填入调整备注" v-model="textarea" :maxlength="120" show-word-limit></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelSubmit()">取消</el-button>
      <el-button type="primary" @click="submitProNanme()">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import request from '../service/request.js';
import api from '@/api/gift.js';
const { virtualGiftUpload } = api;
export default {
  props: {
    stockData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      textarea: '',
      // uploadAction: window.location.origin + '/api-marketing/upload/upload-image?requestProject=marketing',
      uploadAction: 'https://four.gicdev.com/api-marketing/upload/upload-image?requestProject=welafre',
      // uploadAction: '/api-marketing/upload/upload-image?requestProject=welafre',
      uploadFile: {
        name: ''
      },
      file: {},
      files: []
    };
  },
  mounted() {
    this.dialogVisible = true;
    console.log(this.files);
  },
  methods: {
    change(e){
      // document.getElementById('textfield').value = this.files[0].name;
      // console.log(this.files[0].name);
      console.log(e.target.files[0]);
      console.log(e.target.files[0].name);
      this.file = e.target.files[0];
      console.log(this.file);
    },
    upload(){
      this.change();
    },
    getData(){
      console.log('获取成本数据');
    },
    // beforeUpload(file) {
    //   console.log(file);
    //   this.uploadFile.name = file.name;
    //   // this.file = file;
    // },
    downloadFile() {
      const prev = process.env['NODE_ENV'] === 'development' ? '' : '/welfare'; // eslint-disable-line
      window.open(`${prev}/static/虚拟礼品卡券模板.xlsx`, '_blank');
    },
    submitProNanme() {
      console.log(this.file);
      if(!this.file.name){
        this.$message.error('请选择文件');
        return;
      }
      if(!this.textarea){
        this.$message.error('请完善备注');
        return;
      }
      let params = {
        giftId: this.stockData.id,
        file: this.file,
        remark: this.textarea,
        giftName: this.stockData.giftName
      };
      console.log(params.file);
      this.loading = true;
      virtualGiftUpload(params).then(res =>{
        if(res.code === '0000'){
          this.dialogVisible = false;
          setInterval(() => {
            this.$emit('closeUpdateStock');
          }, 10);
          this.$message.success(res.massage);
        }else{
          this.$message.error(res.message);
        }
      });
    },
    // 取消修改
    cancelSubmit() {
      this.dialogVisible = false;
      setInterval(() => {
        this.$emit('closeUpdateStock');
      }, 10);
    },
    // successUpload(response, file){
    //   console.log(response);
    //   console.log(file);
    //   this.file = file;
    // },
    // 合并单元格，行合并
    getSpanArr(data) {
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1);
          this.pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].color === data[i - 1].color) {
            this.spanArr[this.pos] += 1;
            this.spanArr.push(0);
          } else {
            this.spanArr.push(1);
            this.pos = i;
          }
        }
        // console.log(this.spanArr);
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // if (columnIndex === 0 || columnIndex === 1) {
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        // console.log(`rowspan:${_row} colspan:${_col}`);
        return {
          // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        };
      }
    },
    // 批量修改成本
    handleStock(){
      // for (let item in this.costChangeObj) {
      //   this.costChangeObj[item].costPrice = this.banthCost;
      //   // this.costChangeObj[item].stockType = this.stockType;
      // }
      this.updateList = [];
      // if(this.stockType === 1){
      //   this.tableData.forEach(item => {
      //     // item.stock = Number(item.stock) + Number(this.banthStock);
      //     item.stock = this.banthStock;
      //     item.stockType = this.stockType;
      //     this.updateList.push({ giftSkuId: item.giftSkuId, stock: item.stock, stockType: item.stockType });
      //   });
      // }else{
      //   this.tableData.forEach(item => {
      //     // item.stock = Number(item.stock) - Number(this.banthStock);
      //     item.stock = this.banthStock;
      //     item.stockType = this.stockType;
      //     this.updateList.push({ giftSkuId: item.giftSkuId, stock: item.stock, stockType: item.stockType });
      //   });
      // }
      this.tableData.forEach(item => {
        item.stock = this.banthStock;
        item.stockType = this.stockType;
        this.updateList.push({ giftSkuId: item.giftSkuId, stock: item.stock, stockType: item.stockType });
      });
      console.log(this.updateList);
    },
    changeSingleStock(id, stock, stockType){
      if(!stock){
        this.$message.error('请完善库存');
      }
      if(this.updateList.length > 0){
        let iii;
        let result = this.updateList.some((item, index) =>{
          if(item.giftSkuId == id){
            iii = index;
            return true;
          }
        });
        if(result){ // 如果存在
          this.updateList[iii].stock = stock;
        }else{
          this.updateList.push({ giftSkuId: id, stock: stock, stockType: stockType });
        }
      }else{
        this.updateList.push({ giftSkuId: id, stock: stock, stockType: stockType });
      }
      console.log(this.updateList);
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/colors.scss';
.file-style:hover .upload-trigger {
  border-color: #1890ff;
}
.upload-ele .el-button {
  border: none;
  color: #c0c4cc;
  /* margin-left: 16px; */
}
.upload-ele .el-button--small {
  padding: 0;
}
.uploadText p{
  line-height: 26px;
}
.upload-tip-text{
  font-size: 12px;
  color: #303133;
}
.pickup-upload{
  display: inline-block;
  vertical-align: top;
  // margin-left: 10px;
  .upload-trigger{
    border-style: dashed;
    margin-right: 10px;
    .upload-icon {
      font-size: 14px;
    }
  }
  .pickup-list {
    margin-top: 18px;
    .pickup-list-name {
      font-size: 14px;
      font-weight: 400;
      color: $gray01;
      line-height: 20px;
      .file-icon {
        font-size: 14px;
      }
    }
  }
}
</style>
