<template>
  <div>
    <div style="padding: 10px;">
      <el-select v-model="shopId" @change="changeShop" placeholder="请选择" style="width: 100%" size="small">
        <el-option label="聚丰园" :value="15617"></el-option>
        <el-option label="百联临沂" :value="15616"></el-option>
      </el-select>
    </div>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
      <el-table-column prop="cname" label="产品名称">
        <template slot-scope="scope">
          <div @click="changeNum(scope.row)">{{scope.row.cname}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="库存数量" align="center" width="60px">
        <template slot-scope="scope">
          <div @click="changeNum(scope.row)" :style="{'color':scope.row.num<=4?'red':''}">{{scope.row.num}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="bagSaleNum" label="售卖规格" align="center"  width="60px"> </el-table-column>
      <el-table-column prop="" label="可售数量" align="center"  width="60px">
        <template slot-scope="scope">
          <div>{{scope.row.bagSaleNum*scope.row.num}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">销售明细</el-button>
        </template></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {getStockList,updateById} from "@/api/inventory"
  export default {
    name: "inventory",
    data(){
      return{
        tableData:[],
        shopId:15617
      }
    },
    mounted() {
      if(this.$route.query.shopId){
        this.shopId = parseInt(this.$route.query.shopId)
      }

      this.getList()
    },
    methods:{
      // 修改产品库存
      changeNum(row){
        this.$prompt('请输入库存数量', `${row.cname}`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern:  /^(0|[1-9]\d*)$/,
          inputErrorMessage: '请输入大于等于0的整数',
          center:true,
        }).then(({ value }) => {
          let reqdate = row
          reqdate.num = value
          updateById
            .request(reqdate)
            .then((res) => {
              this.getList()
            })
            .catch(() => this.loading = false)
        }).catch(() => {

        });
      },
      changeShop(v){
        this.getList()
      },
      getList(){
        getStockList
          .request({
            "shopId": this.shopId,// 临沂 15616    聚丰园15617
            "page": 1,
            "pageSize": 100
          })
          .then((res) => {
            this.tableData = res.data.list
          })
          .catch(() => this.loading = false)
      },
      handleClick(row){
        this.$router.push('/salesDetails?id='+row.cid+'&shopId='+this.shopId)
      }
    }
  }
</script>

<style scoped>

</style>
