<template>
  <div class="enter pagex">
    <div class="enter-con">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="状态">
          <el-select v-model="formInline.status" placeholder="全部">
            <el-option label="全部" value=""></el-option>
            <el-option label="待处理" value="1"></el-option>
            <el-option label="处理中" value="2"></el-option>
            <el-option label="已处理" value="3"></el-option>
            <el-option label="失败" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="更新日期">
          <el-date-picker v-model="formInline.date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="btn-nav clr">
        <el-upload class="upload-demo fl" :data="fileData" :action="uploadUrl" :on-change="handleChange" multiple>
          <div class="fl dcg">导入</div>
        </el-upload>
        <a :href="downHref" ref="downs" target="_blank" style="display:none">下载</a>
        <a class="fl dcg" :href="downUrl" target="_blank">下载模版</a>
        <div class="fl dcg delbtn" @click="del">删除</div>
      </div>
      <div class="data-box th-all" v-if="tableData">
        <el-table :data="tableData" border max-height="600" @selection-change="handleSelectionChange">
          <el-table-column fixed type="selection" width="40"></el-table-column>
          <el-table-column label="单号" min-width="20%">
            <template slot-scope="scope">
              <a :href="'/#/listDetail?sn='+scope.row.up_sn+'&id='+scope.row.id" class="f-blue">{{ scope.row.up_sn }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="file_name" label="文件名字" min-width="20%">
          </el-table-column>
          <el-table-column prop="status" label="状态" min-width="20%">
            <template slot-scope="scope">
              <span v-if="scope.row.status==1" class="f-green">待处理</span>
              <span v-else-if="scope.row.status==2" class="f-yellow1">处理中</span>
              <span v-else-if="scope.row.status==3">已处理</span>
              <span v-else-if="scope.row.status==4" class="f-red1">失败</span>
            </template>
          </el-table-column>
          <el-table-column prop="latest_notice" label="最新上传状态" min-width="20%">
          </el-table-column>
          <el-table-column prop="create_time" label="上传时间" width="160">
          </el-table-column>
        </el-table>
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 200]" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"></el-pagination>
      </div>
    </div>

    <Menu/>
  </div>

</template>
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import Tool from '../../tool'
import {NODE_ENVS} from "../../ajax";
import {Button, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, MessageBox, Option, Pagination, Select, Table, TableColumn, Upload} from 'element-ui'

Vue.prototype.$message = Message
Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Pagination)
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Upload)
export default {
  name: "enter",
  data() {
    return {
      total: 0,
      limit: 10,
      page: 1,
      downHref: "",
      uploadUrl: NODE_ENVS + '/api/uploadSku/import',
      fileData: {token: Tool.getCookie('token')},
      downUrl: NODE_ENVS + '/api/uploadSku/downUploadCsv?token=' + Tool.getCookie('token'),
      formInline: {
        status: '',
        date: ''
      },
      tableData: "",
      multipleSelection: []
    };
  },
  watch: {
    'formInline.date'(val) {
      if (!val) {
        this.formInline.date = []
      }
    }
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    getData() {
      this.$http('get', "/api/uploadSku/list", {
        page: this.page,
        limit: this.limit,
        status: this.formInline.status,
        action_time: this.formInline.date[0],
        end_time: this.formInline.date[1]
      }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list || [];
          this.total = Number(res.data.total) || 0;
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      })
    },
    submit() {
      this.page = 1;
      this.getData();
    },
    handleChange(file, fileList) {
      if (!file.response) {
        return false;
      }
      if (file.response.code === 0) {
        this.$message({
          message: '导入成功',
          type: 'success'
        });
        this.page = 1;
        this.getData();
      } else {
        this.$message(file.response.msg);
      }

    },
    checkdr() {
      if (this.multipleSelection.length > 1) {
        this.$message({
          message: '只能选择一条数据导入',
          type: 'warning'
        });
        return
      }
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请至少选择一条数据导入',
          type: 'warning'
        });
        return
      }
      this.downHref = NODE_ENVS + '/api/uploadSku/downResult?id=' + this.multipleSelection[0]['id'] + '&token=' + Tool.getCookie('token')
      setTimeout(() => {
        this.$refs.downs.click()
      }, 10)

    },
    del() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请至少选择一条数据',
          type: 'warning'
        });
        return;
      }
      var arr = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        arr.push(this.multipleSelection[i]['id'])
      }
      MessageBox.confirm('确认到删除当前勾选数据吗？', {
        type: 'error'
      }).then(() => {
        this.$http('get', "/api/uploadSku/del", {
          log_ids: arr.join(",")
        }).then(res => {
          if (res.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getData()
          } else {
            this.$message({
              message: res.msg,
              type: 'warning'
            });
          }
        })
      }).catch(() => {

      })
    },
    handleSizeChange(val) {
      this.limit = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val || [];
    }
  },
  components: {
    Menu
  }
};
</script>
<style scoped>
@import "../../assets/css/store/enter.min.css";
</style>