<template>
  <div class="listDetail pagex">
    <div class="detail-nav" v-if="detailInfo">
      <span>单号：{{detailInfo.up_sn}}</span>
      <span>文件名：{{detailInfo.file_name}}</span>
      <span>上传时间：{{detailInfo.create_time}}</span>
      <span>状态：
        <span v-if="detailInfo.status==1" class="f-green">待处理</span>
        <span v-else-if="detailInfo.status==2" class="f-yellow1">处理中</span>
        <span v-else-if="detailInfo.status==3">已处理</span>
        <span v-else-if="detailInfo.status==4" class="f-red1">其他失败</span>
      </span>
    </div>
    <div class="data-box" v-if="tableData">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="item_id" label="ID" width="75">
        </el-table-column>
        <el-table-column prop="status" fixed label="状态" width="120">
          <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 fixed prop="goods_sn" label="供应商内部型号编码" width="180">
        </el-table-column>
        <el-table-column fixed prop="goods_name" label="型号" width="180">
        </el-table-column>
        <el-table-column fixed prop="brand_name" label="品牌" width="180">
        </el-table-column>
        <el-table-column prop="stock" label="库存数量" width="150">
        </el-table-column>
        <el-table-column prop="moq" label="起订量" width="150">
        </el-table-column>
        <el-table-column prop="mpq" label="标准包装量" width="150">
        </el-table-column>
        <el-table-column prop="batch_sn" label="批次" width="150">
        </el-table-column>
        <el-table-column prop="cn_delivery_time" label="大陆交期" width="150">
        </el-table-column>
        <el-table-column prop="hk_delivery_time" label="香港交期" width="150">
        </el-table-column>
        <el-table-column prop="spu_brief" label="简短描述" width="150">
        </el-table-column>
        <template v-if="maxPrice.length">
            <template v-for="item in maxPrice">
              <el-table-column :prop="'purchases'+(item+1)" :label="'阶梯数量'+(item+1)" width="150">
              </el-table-column>
              <el-table-column  :prop="'price_cn'+(item+1)"  :label="'国内含税价'+(item+1)" width="150">
              </el-table-column>
              <el-table-column  :prop="'price_us'+(item+1)"  :label="'香港交货价'+(item+1)" width="150">
              </el-table-column>
            </template>  
        </template>








      </el-table>
      <el-pagination layout="prev, pager, next,jumper" :page-size="limit" :total="total"
        @current-change="handleCurrentChange" :current-page="page">
      </el-pagination>
    </div>
    <Menu />
  </div>

</template>
<script>
  import Vue from 'vue';
  import Menu from "@/components/menu.vue";
  import Tool from '../../tool'

  import {
    Table,
    TableColumn,
    Message,
    Pagination
  } from 'element-ui'
  Vue.prototype.$message=Message
  Vue.use(Pagination).use(TableColumn).use(Table)
  export default {
    name: "ListDetail",

    data() {
      return {
        detailInfo: "",
        total: 0,
        limit: 10,
        page: 1,
        tableData: "",
        maxPrice: []
      };
    },
    watch: {
       $route(to, from) {
        if(to.path==from.path){
          this.getInfo()
        this.getList()
        }
       }
    },
    created() {
      this.getInfo()
      this.getList()
    },
    computed: {},

    methods: {
      getInfo() {
        this.$http('get', "/api/uploadSku/info", {
          id: this.$route.query.id
        }).then(res => {
          if (res.err_code === 0) {
            this.detailInfo = res.data
          } else {
            this.$message(res.err_msg);
          }
        })
      },
      getList() {
        this.$http('get', "/api/uploadSku/itemList", {
          page: this.page,
          limit: this.limit,
          up_sn: this.$route.query.sn
        }).then(res => {
          if (res.err_code === 0) {
            var arr = res.data.list || [];
            for (var i = 0; i < arr.length; i++) {
              if (arr[i]['ladder_price']) {
                for (var j = 0; j < arr[i]['ladder_price'].length; j++) {
                  arr[i]['purchases' + (j + 1)] = arr[i]['ladder_price'][j]['purchases']
                  arr[i]['price_cn' + (j + 1)] = arr[i]['ladder_price'][j]['price_cn']
                  arr[i]['price_us' + (j + 1)] = arr[i]['ladder_price'][j]['price_us']
                }
              }
            }
            this.tableData = arr
            this.total = res.data.total || 0;
            var max_= res.data.max_price_count||0;
            for(var g=0;g<max_;g++){
                this.maxPrice.push(g)
            }
          } else {
            this.$message(res.err_msg);
          }
        })
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getList();
      },
    },
    components: {
      Menu
    }
  };
</script>
<style scoped>
  @import "../../assets/css/store/listDetail.min.css";
</style>