<template>
  <view class="u-flex det-wrap">
    <view class="search">
      <u-search
        :clearabled="true"
        :action-style="searchStyle"
        bg-color="#fff"
        v-model="keyword"
        @custom="searchParts"
        @search="searchParts"
      ></u-search>
    </view>

    <view class="content" v-if="lists.length > 0">
      <scroll-view style="height: 100%;" scroll-y="true">
        <select-parts
          v-for="(item, index) in lists"
          :key="index"
          :info="item"
          :show-checked="true"
          @numChange="numChange($event, index)"
          @selectChange="selectChange($event, index)"
        ></select-parts>
      </scroll-view>
    </view>

    <view v-else class="u-flex-col u-col-center empty">
      <view class="sold-out">
        <u-image :src="qnFile('SoldOut.png')" width="374" mode="widthFix">
          <view slot="error" style="font-size: 24rpx;">加载失败</view>
        </u-image>
      </view>
      <view class="message">当前无可用物料</view>
    </view>

    <view class="bar">
      <submit-bar
        :partNum="partNum"
        :num="num"
        :btnStatus="partNum > 0"
        submitTxt="用物料"
        :allChecked="allChecked"
        :cancelStatus="true"
        @select="allSelect"
        @submit="submit"
        @cancel="cancel"
      />
    </view>
  </view>
</template>

<script>
import selectParts from '@/components/select-parts/index'
import submitBar from '@/components/submit-bar/index'
export default {
  components: {
    selectParts,
    submitBar,
  },
  data() {
    return {
      keyword: '',
      lists: [],
      workOrderId: null,
    }
  },
  computed: {
    // 配件数
    partNum() {
      return this.lists.reduce(
        (counter, { checked }) => (checked ? (counter += 1) : counter),
        0
      )
    },
    // 总数
    num() {
      return this.lists.reduce(
        (counter, { checked, quantity }) =>
          checked ? (counter += quantity) : counter,
        0
      )
    },
    // 全选状态
    allChecked() {
      const count = this.lists.reduce(
        (counter, { checked }) => (!checked ? (counter += 1) : counter),
        0
      )
      return count === 0 || false
    },
    searchStyle() {
      return {
        color: '#2272FF',
      }
    },
  },
  onLoad(e) {
    this.workOrderId = parseInt(e.workOrderId)
    this.categoryId = parseInt(e.categoryId)
    this.brandId = parseInt(e.brandId)
    this.orderNumber = e.orderNumber
    this.getReserve()
  },
  methods: {
    getReserve() {
      this.$u.api
        .getMyReserve({
          categoryId: this.categoryId,
          brandId: this.brandId,
          orderNumber: this.orderNumber,
          keyword: this.keyword,
        })
        .then((res) => {
          if (res.code === 200) {
            const data = res.data || []
            const lists = data.map((v) => {
              const max = v.stock + Number(v.useStock)
              v.min = 1
              v.checked = false
              v.quantity = 1
              v.max = max
              const images = v.images ? v.images.split(',') : []
              v.images = images[0]
              return v
            })
            this.lists = lists.filter(v => v.max > 0)
          }
        })
    },
    // 搜索配件
    searchParts(val) {
      this.keyword = val
      this.lists = []
      this.getReserve()
    },
    numChange(val, index) {
      this.$set(this.lists[index], 'quantity', val)
    },
    selectChange(val, index) {
      this.$set(this.lists[index], 'checked', val)
    },
    allSelect(value) {
      const count = this.lists.filter((v) => !v.checked).length
      this.lists.forEach((v) => {
        this.$set(v, 'checked', count !== 0 || false)
      })
    },
    submit() {
      const lists = this.lists
        .filter((v) => v.checked)
        .map((v) => {
          return {
            name: v.name,
            skuId: v.skuId,
            quantity: v.quantity,
            cost: v.cost || 0,
            max: v.max
          }
        })

      let pages = getCurrentPages()
      let prevPage = pages[pages.length - 2] //上一个页面
      prevPage.$vm.$refs['fileChildParts'][0].valChange(lists)
      this.$u.route({ type: 'back' })
    },
    cancel() {
      let pages = getCurrentPages()
      let prevPage = pages[pages.length - 2] //上一个页面
      prevPage.$vm.$refs['fileChildParts'][0].valChange()
      this.$u.route({ type: 'back' })
    },
    qnFile(src) {
      return process.uniEnv.qn_base_url + src
    },
  },
}
</script>

<style lang="scss" scoped>
.det-wrap {
  flex-flow: column;
  height: 100vh;
  .search {
    width: 100%;
    padding: 30rpx;
  }
  .content {
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    padding: 10rpx 10rpx 0 10rpx;
    width: 100%;
    flex: 1;
    overflow-y: auto;
  }
  .bar {
    width: 100%;
    border-top: 1px solid #f4f5f7;
    padding: 0 20rpx;
    background: #fff;
  }
  .empty {
    flex: 1;
    justify-content: center;
    font-size: 26rpx;
    color: #aaa;
  }
}
</style>
