<template>
  <div class="boxDel">
    <div class="upload-main">
      <div class="upload-container">
        <el-upload action="" accept=".xls,.xlsx" :show-file-list="false" :http-request="handleImport">
          <div>
            <div style="position:relative">
              <el-input v-model="import_name" type="span" class="input" placeholder="点击上传文件">
                <i slot="append" class="el-icon-upload2" />
              </el-input>
              <i class="block" />
            </div>
          </div>
        </el-upload>
      </div>
      <!-- <div class="upload-container">
        <el-button size="small" style="margin: 0 10px" type="primary" @click="importTempChaiDan">导入</el-button>
        <el-button size="small" @click="resetImport">重置</el-button>
      </div> -->
    </div>
    <div v-if="show" class="btn"><el-button type="danger" @click="batch">批量删除</el-button></div>
    <el-table
      ref="multipleTable"
      :data="list"
      :header-cell-style="{ background: '#f8fbfc' }"
      border
      stripe
      style="margin: 20px 0"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        prop="express_number"
        label="快递单号"
        align="center"
      />
      <el-table-column
        prop="express_com"
        label="快递名称"
        align="center"
      />
      <el-table-column
        label="订单号"
        align="center"
      >
        <template
          slot-scope="{ row }"
        >
          {{ row.get_order && row.get_order.order_num }}
        </template>
      </el-table-column>
      <el-table-column
        prop="created_at"
        label="创建时间"
        align="center"
      />
      <el-table-column
        prop="note"
        label="尺码"
        align="center"
      />
      <el-table-column
        prop="total"
        label="数量"
        align="center"
      />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="danger" size="small" @click="batchd(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { GetDelExpressInfo, DelExpressInfo } from '@/api/order/list'
export default {
  data() {
    return {
      multipleSelection: [],
      import_name: '',
      import_file: null,
      list: [],
      show: false,
      ids: []
    }
  },
  methods: {
    // 选择框
    handleSelectionChange(val) {
      this.multipleSelection = val.map(item => {
        return item.id
      })
    },
    batch() {
      if (this.multipleSelection.length === 0) {
        this.$message.error('请选择需要批量删除的单号！')
        return false
      }
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const id = this.multipleSelection
          DelExpressInfo({ id }).then(res => {
            if (res.code === 200) {
              var list = this.list
              for (var i = 0; i < id.length; i++) {
                const index = list.findIndex(item => item.id === id[i])
                list.splice(index, 1)
              }
              this.list = list
              this.$message.success('删除成功')
            } else {
              this.$message.error(res.message || '删除失败')
            }
          })
        })
        .catch(() => {
          this.$refs.multipleTable.clearSelection()
        })
    },
    batchd(id) {
      this.ids = [id]
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const id = this.ids
          DelExpressInfo({ id }).then(res => {
            if (res.code === 200) {
              const index = this.list.findIndex(item => item.id === id)
              this.list.splice(index, 1)
              this.$message.success('删除成功')
            } else {
              this.$message.error(res.message || '删除失败')
            }
          })
        })
        .catch(() => {})
    },
    // 导入
    handleImport(params) {
      const file = params.file
      if (!file) return
      this.import_name = file.name
      this.import_file = file
      const formdata = new FormData()
      formdata.append('file', this.import_file)
      this.loadingFull = true
      try {
        this.$request(GetDelExpressInfo(formdata), (list) => {
          var arr = []
          for (var i = 0; i < list.length; i++) {
            arr = arr.concat(list[i])
          }
          this.list = arr
          this.show = true
        })
      } catch (e) {
        this.$message.error('上传失败')
      } finally {
        this.loadingFull = false
      }
    }
    // importTempChaiDan() {
    //   if (!this.import_file) {
    //     this.$message.error('请上传导入文件')
    //     return false
    //   }
    //   const formdata = new FormData()
    //   formdata.append('file', this.import_file)
    //   this.loadingFull = true
    //   try {
    //     this.$request(GetDelExpressInfo(formdata), (list) => {
    //       var arr = []
    //       for (var i = 0; i < list.length; i++) {
    //         arr = arr.concat(list[i])
    //       }
    //       this.list = arr
    //       this.show = true
    //     })
    //   } catch (e) {
    //     this.$message.error('上传失败')
    //   } finally {
    //     this.loadingFull = false
    //   }
    // },
    // // 重置导入
    // resetImport() {
    //   this.import_name = ''
    //   this.import_file = null
    // }
  }
}
</script>
<style lang="scss" scoped>
  .boxDel {
    padding: 30px;
    .btn {
      margin: 20px 0 0 0;
      width: 200px;
    }
  }
  .upload-main {
    display: flex;
    // justify-content: center;
    // flex-direction: column;
  }
  .upload-container {
    display: flex;
  .download {
    width: 100px;
    text-align: right;
    margin-right: 12px;
  }
  .input {
    width: 400px;
    .el-input__inner {
    border: none !important;
    }
  }
  .block {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #DCDFE6;
  }
  .block:hover{
    border-color: #409EFF;
   }
}
</style>
