<template>
  <view class="content"><!-- @touchmove="touchmoveMethod" -->
    <Navbar title="选择采购订单" :showRightText="false" :isBack="false" />
    <view style="width: 100%;height: 100%;">
      <view class="search-form">
        <uni-easyinput class="searchInput" placeholder="输入名称" v-model="searchValue" suffixIcon="search"
                       @iconClick="search"
                       @keyup.enter.native="search"></uni-easyinput>
      </view>
      <scroll-view class="chronic-science" scroll-y="true" @scrolltolower="onScrollTolower">
        <view class="scroll-view-item" v-for="(item,index) in tableList" :key="index">
          <view class="scroll-view-item_content">
            <view
              style="width: 100%;height: 90%;display: flex;flex-direction: column;justify-content: space-between;padding: 15px;">
              <view
                style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 30px;display: flex;align-items: center;font-size:32rpx;font-weight: 600;color: #FF6816">
                <checkbox-group style="width: 30px;height: 30px" @change="checkClick(item)">
                  <checkbox :checked="item.checked" />
                </checkbox-group>
                <view style="width:90%;margin-left: 10px;">
                  <text>{{ item.orderGoodsCode }}</text>
                </view>
              </view>
              <view style="width: 100%;display:flex;height: 30px">
                <view style="width: 50%;display: flex;align-items: center">
                  <view class="scroll_title">供应商：</view>
                  <view class="scroll_content">{{ item.supplierName }}</view>
                </view>
                <view style="width: 50%;display: flex;align-items: center">
                  <view class="scroll_title">采购数量：</view>
                  <view class="scroll_content">{{ item.totalNum }}</view>
                </view>
              </view>
              <view style="width: 100%;display:flex;height: 30px">
                <view style="width: 50%;display: flex;align-items: center">
                  <view class="scroll_title">入库数量：</view>
                  <view class="scroll_content">{{ item.totalIntoNum }}</view>
                </view>
                <view style="width: 50%;display: flex;align-items: center">
                  <view class="scroll_title">采购金额：</view>
                  <view class="scroll_content">{{ item.orderAmount / 100 }}</view>
                </view>
              </view>

            </view>
          </view>
        </view>
      </scroll-view>
      <u-button
        style="width:180rpx;height:70rpx;position: fixed;bottom: 20rpx;right: 10px;background: linear-gradient( 270deg, #FFB679 0%, #EF882E 100%);border: 0"
        type="primary"
        @click="navigateTo('/pages/enterAndExit/enter/add')">确认
      </u-button>
    </view>
  </view>
</template>

<script>

import UButton from '@/uni_modules/uview-ui/components/u-button/u-button.vue'
import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue'
import { getPurchaseOrder, getPurchaseOrderDetail } from '@/api/enterExit'

export default {
  components: { UniEasyinput, UButton },
  data() {
    return {
      tableList: [],
      searchValue: '',
      pageNum: 1,
      pageSize: 10,
      total: 0,
      status: 'loadmore',
      form: '',
      selectList: []
    }
  },
  onLoad(options) {
    console.log('options:', options)
    this.form = options.form ? JSON.parse(decodeURIComponent(options.form)) : this.form
    console.log('form:', this.form)
    this.getList()
  },
  onShow() {
  },
  methods: {
    search() {
      console.log('Searching for:', this.searchValue)
      this.pageNum = 1
      this.getList()
    },
    // 翻页
    onScrollTolower() {
      console.log(this.tableList.length)
      if (this.total > this.tableList.length) {
        this.pageNum++
        this.getList()
      }
    },
    //获取订单列表
    async getList() {
      console.log('获取列表')
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        materialName: this.searchValue
      }
      try {
        const res = await getPurchaseOrder(params)
        console.log('?? ~ getList ~ res:', res)
        this.total = Number(res.total)
        if (this.pageNum == 1) {
          this.tableList = res.rows
        } else {
          this.tableList.push(...res.rows)
        }
        this.tableList.map(item => {
          item.checked = false
        })
        this.selectList.forEach(selectItem => {
          this.tableList.map(item => {
            if (item.orderGoodsCode === selectItem.orderGoodsCode) {
              item.checked = true
            }
          })
        })
        this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
      } catch (error) {
        console.log(error)
      }
    },
    // 单个商品的选择
    checkClick(item) {
      this.tableList.map(item => {
        item.checked = false
      })
      item.checked = !item.checked
      this.selectList[0] = item
      this.$forceUpdate() // 强制刷新页面
    },
    async navigateTo(url) {
      //调用详情接口
      const res = await getPurchaseOrderDetail(this.selectList[0].orderGoodsId)
      const orderGoodsDetailList = res.data.orderGoodsDetailList
      console.log("this.selectList[0],==========>", this.selectList[0])
      orderGoodsDetailList.forEach(item => {
        console.log("item,==========>", item)
        item.unitPrice = item.singlePrice/100
        item.purNum = item.orderNum
        item.supplierId = this.selectList[0].supplierId
        this.form.remark = this.form.remark || ''
      })
      let pages = getCurrentPages();
      let prePage = pages[pages.length - 2]; //上一个页面
      prePage.$vm["getGoodData"]({
        selectList:  encodeURIComponent(JSON.stringify(orderGoodsDetailList)),
        form: JSON.stringify(this.form)
      });
      uni.navigateBack(-1)
    }
  }
}
</script>

<style scoped lang="scss">
.uni-page-body {
  height: 100%;
  width: 100%;
}

.search-form {
  display: flex;
  width: 98%;
  margin-top: 10px;

  .searchInput {
    width: 300px;
    height: 40px;
    margin-left: 10px;
    font-size: 28rpx;
    font-family: PingFang SC-Regular;
  }

  .searchBtn {
    margin-left: 10px;
    height: 35px;
  }
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.list_title {
  color: black;
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: PingFang SC-Medium;
  font-weight: 500;
  color: #A69F9A;
}

.list_item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: PingFang SC-Regular;
  color: #453C37;
  font-size: 28rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}


::v-deep .u-checkbox {
  margin-bottom: 16rpx;
}


/deep/ uni-checkbox .uni-checkbox-input {
  width: 25px;
  height: 25px;
  border-radius: 15px;
}

/deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
  border-color: #ddd;
  color: #fff !important;
  background-color: #3E34FF !important;
}

/deep/ uni-checkbox .uni-checkbox-input {
  border-color: #ddd;
}

/deep/ uni-checkbox .uni-checkbox-input:hover {
  border-color: #ddd;
}

.chronic-science {
  width: 100%;
  height: 83vh;

  .scroll-view-item {
    width: 96%;
    margin: 10px auto;
    background: #fff;
    border-radius: 23rpx;

    .scroll-view-item_content {
      width: 100%;
      display: flex;
      align-items: center;
      height: fit-content;
      justify-content: space-between;
      border: 0.1rpx solid #ececec;
      border-radius: 23rpx;
      box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(87, 87, 87, 0.14);

      .scroll_title {
        width: 40%;
        font-size: 28rpx;
        color: #0F274B;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFang SC-Medium;
      }

      .scroll_content {
        width: 60%;
        font-size: 28rpx;
        color: #86817B;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-family: PingFang SC-Regular;
      }
    }

  }
}
</style>

