<template>

  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="120px"
        >
          <el-form-item label="批次号：">
            <el-input
              style="width: 203px"
              v-model="listQuery.id"
              placeholder="请输入批次号"
            ></el-input>
          </el-form-item>
          <el-form-item label="备查货号：">
            <el-input
              style="width: 203px"
              v-model="listQuery.selectProductSn"
              placeholder="请输入备查货号"
            ></el-input>
          </el-form-item>
          <el-form-item label="入库时间：">
             <el-date-picker
              v-model="listQuery.timer"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>

      <div class="btn-add">
        <el-button  @click="handleAddProduct()" size="mini">
          新增入库
        </el-button>
        <el-button type="primary" @click="handleDownloadStock()" size="mini">
          导出记录
        </el-button>
      </div>

    </el-card>
    <div class="table-container">
      <el-table
        ref="productTable"
        :data="list"
        style="width: 100%"
        v-loading="listLoading"
        border
      >
        <el-table-column label="批次号" width="100" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="备查货号" width="120" align="center" >
          <template slot-scope="scope">{{ scope.row.selectProductSn }}</template>
        </el-table-column>
        <el-table-column label="sku编号" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.skuCode }}</p>
          </template>
        </el-table-column>
        <el-table-column label="内部库存" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.internalStock }}</p>
          </template>
        </el-table-column>
         <el-table-column label="内部售出数量" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.internalSaleStock }}</p>
          </template>
        </el-table-column>
         <el-table-column label="税务库存" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.taxStock }}</p>
          </template>
        </el-table-column>
         <el-table-column label="税务售出库存" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.taxSaleStock }}</p>
          </template>
        </el-table-column>
         <el-table-column label="采购价" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.price }}</p>
          </template>
        </el-table-column>
         <el-table-column label="入库日期" align="center">
          <template slot-scope="scope">
            <p>{{ scope.row.createTime }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      title="新增入库"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <el-form ref="productAttrCatForm" :model="editSkuInfo" :rules="rules" label-width="120px">
        <el-form-item label="查备货号" prop="selectProductSn">
          <el-input size="small" v-model="editSkuInfo.selectProductSn" placeholder="请输入查备货号" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="内部库存" prop="internalStock">
          <el-input size="small" v-model="editSkuInfo.internalStock" @input="
            val => {
              onchange(val)
            }
          "  placeholder="请输入内部库存" auto-complete="off"></el-input>
          <!-- <el-input-number size="small" class="inputposition" v-model="editSkuInfo.internalStock" placeholder="请输入内部库存" :controls="false" /> -->
        </el-form-item>
        <el-form-item label="税务库存" prop="taxStock">
          <el-input size="small" v-model="editSkuInfo.taxStock" @input="
            val => {
              editSkuInfo.taxStock = val.replace(/[^\d]/g, '');
            }
          "  placeholder="请输入税务库存" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="采购价" prop="price">
          <el-input size="small" v-model="editSkuInfo.price" @keyup.native="keyupEvent($event)" placeholder="请输入采购价" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="Sku" prop="productSkuId">
          <el-select size="small" v-model="editSkuInfo.productSkuId" style="width:100%" placeholder="请选择Sku">
            <el-option
              v-for="item in stockList"
              :key="item.id"
              :label="item.spText"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('productAttrCatForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Export } from "@/utils/downLoadFile";
import { getTimes } from '@/utils'
import {
  fetchList as fetchSkuStockList
} from "@/api/skuStock";
import {
  getProductSkuStockRecord,
  getProductSkuStockRecordCreate
} from "@/api/product";
const defaultListQuery = {
  keyword: null,
  pageNum: 1,
  pageSize: 5,
  id: null,
  selectProductSn: null,
  timer: null
};
export default {
  name: "productList",
  data() {
    return {
      dialogVisible: false,
      editSkuInfo: {
        productId: null,
        productSkuId: null,
        selectProductSn: null,
        internalStock: null,
        taxStock: null,
        price: null
      },
      rules: {
        selectProductSn: [{ required: true, message: '请输入查备货号', trigger: 'blur' }],
        internalStock: [{ required: true, message: '请输入内部库存', trigger: 'blur' }],
        taxStock: [{ required: true, message: '请输入税务库存', trigger: 'blur' }],
        price: [{ required: true, message: '请输入采购价', trigger: 'blur' }],
        productSkuId: [{ required: true, message: '请选择Sku', trigger: 'change, blur' }],
      },
      stockList: [],
      productId: null,
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: true,
      selectProductCateValue: null,
      multipleSelection: [],
      productCateOptions: [],
      brandOptions: [],
    };
  },
  created() {
    this.productId = this.$route.query.id;
    this.getList();
  },
  methods: {
    onchange(val) {
      this.editSkuInfo.internalStock = val.replace(/[^\d]/g, '');
    },
    getList() {
      this.listLoading = true;
      const { timer, ...more } = this.listQuery;
      getProductSkuStockRecord({...more, productId: this.productId, ...getTimes(timer, ['startTime', 'endTime'])}).then((response) => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    handleConfirm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let obj = {
              ...this.editSkuInfo,
              productId: this.productId,
            }
            getProductSkuStockRecordCreate(obj).then(response=>{
                this.$message({
                  message: '添加成功',
                  type: 'success',
                  duration:1000
                });
                this.dialogVisible = false;
                this.handleClose()
                this.getList();
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleClose(){
        if (!this.dialogVisible && this.$refs.productAttrCatForm) {
          this.$refs.productAttrCatForm.clearValidate()
        }
      },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleAddProduct() {
      fetchSkuStockList(this.productId).then((response) => {
        try {
          // debugger
        const tempResult = response.data || [];
        tempResult.forEach((product) => {
          const spData = product.spData ? JSON.parse(product.spData) : [{ key: '默认' }]
          let spText  = ''
          spData.forEach((sp) => {
            spText += sp.key + (sp.value ? ':' + sp.value: '')
          })
          product.spText = spText
        })

        this.stockList = tempResult;
        this.dialogVisible = true;
        } catch(e) {
          console.log(e)
        }
      });

    },
    handleDownloadStock() {
      Export(
        this,
        {
          url: "/api-mall-admin/export/pmsProductSkuStockRecord",
          fileName: "进货清单记录.xls",
          method: "post",
          params: { ...this.listQuery, productId: this.productId },
        },
        "您确定导出进货清单记录?"
      );
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleResetSearch() {
      this.selectProductCateValue = [];
      this.listQuery = Object.assign({}, defaultListQuery);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-select--small {
  width: 203px !important;
}

.inputposition {
  width: 100%;
input {
  text-align: left;
}
}
</style>

