<template>
  <view class="">
    <view class="table">
      <u-sticky custom-nav-height="0" bgColor="#fff">
        <view class="line th">
          <view class="td img">图片</view>
          <view class="td sku">规格</view>
          <view class="td stock">库存</view>
        </view>
      </u-sticky>
      <view class="line tr" v-for="(item,index) in short.attrValue" :key="index">
        <view class="td img">
          <image :src="item.image||short.image||defualtImg"></image>
        </view>
        <view class="td sku">
          <block v-if="item.sku">
            <view v-for="name in item.sku.split(',')">{{name}}</view>
          </block>
          <view v-else>{{short.store_name}}</view>
        </view>
        <view class="td stock">
          <input type="number" v-model="item.stock" />
        </view>
      </view>
    </view>
    <view style="height: 150rpx;"></view>
    <view class="btn-view">
      <button class="btn" @click="show=true">确认修改</button>
    </view>
    <u-modal :show="show" :closeOnClickOverlay="true" title="提示" content="确定更新库存吗" showCancelButton @confirm="onUpdate" @cancel="show=false"></u-modal>
  </view>
</template>

<script>
  import {
    getProductDetail,
  } from '@/api/store.js';
  import {
    productDetail,
    productUpdateFree
  } from "@/api/product.js"
import { Toast } from '../../../libs/uniApi';
  export default {
    data() {
      return {
        show: false,
        defualtImg: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/uploads/20230130/00ebcfdf75684f5494c0193075055d1.png',
        mer_id: '',
        short: {
          product_id: ''
        }
      }
    },
    onLoad(options) {
      this.short.product_id = options.product_id;
      let userInfo = this.$store.state.app.userInfo;
      if(typeof userInfo == 'string')userInfo = JSON.parse(userInfo);
      this.mer_id = userInfo.service.mer_id;
      this.initInfo();
    },
    onShow() {},
    methods: {
      initInfo() {
        productDetail(this.mer_id, this.short.product_id).then((res) => {
          this.short = res.data;
          console.log({...res.data});
        })
      },
      onUpdate(){
        let obj = {
          "attr": this.short.attr,
          "attrValue": this.short.attrValue,
          "mer_cate_id": this.short.merCateId||[],
          "spec_type": this.short.spec_type,
          "is_stock": 1
        };
        // return console.log({...obj},this.short.product_id);
        productUpdateFree(this.short.product_id, obj).then(res => {
          this.show = false;
          this.$nextTick(()=>{
            Toast('更新成功');
          })
          uni.navigateBack({
            success:()=> {
              let stock = 0;
              this.short.attrValue.forEach(item=>{
                stock = stock + parseInt(item.stock);
              })
              uni.$emit('updateStock', {
                product_id: this.short.product_id,
                stock: stock
              })
            }
          })
        }).catch(err => {
          this.show = false;
        	this.$util.Tips({
        		title: err
        	})
        })
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
.table{
  background-color: #fff;
  border-top: 1rpx solid rgba(0,0,0,0.1);
  border-left: 1rpx solid rgba(0,0,0,0.1);
  border-right: 1rpx solid rgba(0,0,0,0.1);
  font-size: 28rpx;
  .line{
    display: flex;
    border-bottom: 1rpx solid rgba(0,0,0,0.1);
    .img{
      // width:140rpx;
      width: 200rpx;
    }
    .sku{
      flex: 1;
      border-left: 1rpx solid rgba(0,0,0,0.1);
      border-right: 1rpx solid rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .stock{
      width: 200rpx;
      input{
        width: 100%;
        height: 100%;
        text-align: center;
        color: #F84221;
      }
    }
  }
  .th{
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
  .tr{
    min-height: 140rpx;
    .td{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .img{
      image{
        width: 120rpx;
        height: 120rpx;
      }
    }
    .sku{
      padding: 16rpx 16rpx;
    }
  }
}
.btn-view{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 130rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1rpx solid rgba(0,0,0,0.1);
  
  .btn{
    background: linear-gradient(180deg, #FF6D20 0%, #F84221 100%);
    // background-color: #FF6D20;
    height: 100rpx;
    line-height: 100rpx;
    width: 694rpx;
    text-align: center;
    border-radius: 100rpx;
    color: #fff;
  }
}
</style>