<!-- *******************  物料选择  *******************  -->
<template>
  <view>
    <view class="u-flex load" v-show="loading">
      <u-loading mode="circle" class="loading"></u-loading>
    </view>
    <view v-show="!loading">
      <view class="list u-flex u-row-between">
        <!-- <image class="item-image" :src="mixingImage" v-if="item.required"></image>
        <view class="u-m-r-20">{{ item.fieldsTitle }}</view> -->
        <view
          class="u-flex-1 add-parts"
          @click="toParts"
          v-if="!disabled && lists.length > 0"
        >
          添加物料<u-icon name="arrow-right" color="#2979ff" size="30"></u-icon>
        </view>
      </view>
      <view class="complete-part">
        <view v-if="lists.length > 0">
          <adjust-parts
            v-for="(item, index) in lists"
            :key="index"
            :info="item"
            @change="partsChange($event, index)"
            @minusValue="minusValue($event, index)"
            :disabled="disabled"
          ></adjust-parts>
        </view>
        <view class="u-flex select-part" v-else>
          <view class="img">
            <image :src="noPartsImage" class="part-icon" />
          </view>
          <view class="u-flex content">
            <text class="title">暂无物料信息</text>
            <text class="desc">可选择物料仓物料</text>
          </view>
          <view class="btn">
            <u-button shape="circle" :custom-style="customStyle" @click="toParts" :disabled="disabled">
              去选择
            </u-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import adjustParts from '@/components/select-parts/adjust'
import stringMixin from './stringMixin'
export default {
  name: 'XhParts',
  components: {
    adjustParts,
  },
  mixins: [stringMixin],
  props: {
    orderId: {
      type: String,
      default: '',
    },
    orderNumber: {
      type: String,
      default: '',
    },
    categoryId: {
      type: String,
      default: '',
    },
    brandId: {
      type: String,
      default: '',
    },
    maintainStep: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true,
      lists: [],
    }
  },
  computed: {
    customStyle() {
      return {
        width: '200rpx',
        height: '80rpx',
        color: '#2272FF',
        'font-size': '32rpx',
      }
    },
    mixingImage() {
      return process.uniEnv.qn_base_url + 'mixing.png'
    },
    noPartsImage() {
      return process.uniEnv.qn_base_url + 'no_parts.png'
    }
  },
  mounted() {
    this.getWorkOrderParts()
  },
  methods: {
    // 获取最新库存
    getWorkOrderParts() {
      const lists = this.dataValue ? JSON.parse(this.dataValue).filter(v => v.name) : []
      this.$u.api
        .getMyReserve({
          categoryId: this.categoryId,
          brandId: this.brandId,
          orderNumber: this.orderNumber
        })
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            const data = res.data || []
            this.lists = lists.map(v => {
              const row = data.find(item => item.skuId === v.skuId)
              if (row) {
                v.max = row.stock + Number(row.useStock)
              }
              return v
            })
          }
        })
    },
    partsChange(val, index) {
      this.$set(this.lists[index], 'quantity', val)
      this.valueChange(this.lists.length > 0 ? JSON.stringify(this.lists) : JSON.stringify([{}]))
    },
    minusValue(val, index) {
      if (val === 0) {
        uni.showModal({
          title: '温馨提示',
          content: '确定要删除该物料？',
          success: (res) => {
            if (res.confirm) {
              this.lists.splice(index, 1)
              this.valueChange(JSON.stringify(this.lists))
            } else if (res.cancel) {
              this.partsChange(1, index)
            }
          },
        })
      } 
    },
    valChange(val) {
      if (val) {
        val.forEach((v) => {
          const index = this.lists.findIndex((k) => k.skuId === v.skuId)
          if (index < 0) {
            this.lists.push(v)
          } else {
            this.$set(this.lists, index, v)
          }
        })
      } else {
        this.lists = []
      }
      this.valueChange(val ? JSON.stringify(this.lists) : (this.maintainStep === 'base' ? JSON.stringify([{}]) : JSON.stringify(this.lists)))
    },
    toParts() {
      uni.navigateTo({
        url: `/pages/order/parts?workOrderId=${this.orderId}&brandId=${this.brandId}&categoryId=${this.categoryId}&orderNumber=${this.orderNumber}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.load {
  width: 100%;
  .loading {
    margin:0 auto;
  }
}
.item-image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.required {
  padding-right: 10rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  color: #fa3534;
}
.add-parts {
  color: #2272ff;
  text-align: right;
}
.complete-part {
  .select-part {
    align-items: center;
    height: 240rpx;
    .img {
      display: flex;
      align-items: center;
      margin-right: 30rpx;
      .part-icon {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
      }
    }
    .content {
      padding-right: 8px;
      flex: 1;
      color: #3b4144;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      .title {
        text-align: left;
        color: #2272ff;
        font-size: 38rpx;
        font-weight: bold;
        margin-right: auto;
      }
      .desc {
        text-align: left;
        color: #999;
        font-size: 26rpx;
        margin-right: auto;
      }
    }
  }
}
</style>
