<template>
  <view class="billing_box_bg">
    <view class="input-wrap">
      <app-search-module v-model="py" placeholder="请输入关键词，支持拼音首字母搜索"
                         @search="searchFn" />
    </view>
    <view class="scroll-middle_bx">
      <!--<scroll-view scroll-y class="right-box" :scroll-into-view="scrollClassId"></scroll-view>-->
        <!--内容部分 start -->
        <block v-if="!$util.isEmpty(filterProductInfoContrapose)">
									<view style="width:100%;padding: 30rpx">
										<template v-for="(productItem, productIndex) in filterProductInfoContrapose">
										<Commondity :type="COMMODITY_TYPE.CHANGE"
																						:key="productIndex"
																						:info="productItem"
																						:autoPrice="productItem.priceLabel=='2'?productItem.price:null"
                    ></Commondity>
									</template>
										<!--:autoPrice="productItem.priceLabel=='2'?getSelectItemById(productItem.id).autoPrice:null"-->
									</view>
        </block>
        <block v-else>
          <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(filterProductInfoContrapose)" />
        </block>
        <!--内容部分 end -->

    </view>
  </view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import Commondity from "@/components/module/app-commodity";
import { COMMODITY_TYPE } from "@/utils/declare";
import productMins from "@/mixins/productContrapose";
import { autoPriceByIdApi, changePriceByIdApi } from '@/api/product/index'

export default {
  name: "Billing", // 开单
  components: {
    AppTabs,
    AppSearchModule,
    AppWrapperEmpty,
    Commondity
  },
  mixins: [productMins],
	onPullDownRefresh() {
		this.initDataContrapose();
  	console.error('111')
	},
  data () {
    return {
      pageType: "price_change",
      COMMODITY_TYPE,
    };
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
  height: 100%;
  display: flex;
  flex-direction: column;
  .input-wrap {
    padding: 22px 20px 22px 30px;
  }
  .scroll-middle_bx {
    flex: 1;
    width: 100%;
    display: flex;
  }
  .tab-view {
    height: 100%;
    width: 170upx;
    flex-shrink: 0;
    background-color: #f0f2f6;
    .tab-bar-item {
      position: relative;
      width: 170upx;
      height: 90upx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26upx;
      color: #444;
      font-weight: 400;
      .tag {
        display: flex;
        padding: 0 20px;
        align-items: center;
        position: absolute;
        right: 0;
        top: 0;
        height: 32px;
        background: #ff2842;
        border-radius: 16px;
        color: #fff;
        font-size: 20px;
      }
      &:last-child{
        margin-bottom: 110upx;
      }
    }

    .active {
      position: relative;
      color: $mainColor;
      font-size: 26px;
      background: #fff;
    }

    .active::before {
      content: "";
      position: absolute;
      border-left: 8upx solid $mainColor;
      height: 100%;
      left: 0;
    }
  }
  .right-box {
    height: 100%;
    flex: 1;
    box-sizing: border-box;
  }
  .item_list_bx {
    padding: 40px 16px;
    &:last-child{
      margin-bottom: 70upx;
    }
  }
  .item_list_title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 600;
    color: #666666;
  }
  .select-cmd_bx {
    & .kc {
      color: #999999;
      font-size: 28px;
      font-weight: 400;
      margin-bottom: 60px;
      text-align: center;
      margin-top: 10px;
    }
    & .num_bx {
      display: flex;
      align-items: center;
      margin-bottom: 80px;
      & > input {
        width: 212px;
        height: 80px;
        border: 1px solid #dddddd;
        border-radius: 4px;
        text-align: center;
        margin-right: 24px;
      }
    }
  }
}
</style>
