<template>
  <view class="container">
    <Navbar title="在手气瓶" canBack></Navbar>
    <view class="" v-if="!isScan">
      <!-- 搜索扫码栏 -->
      <view class="searchCss flex justify-between">
        <view class="flex">
          <u-search v-model="formData.khdh" bgColor="#fff" borderColor="#EC1E19" :clearabled="true"
                    placeholder="客户电话 客户姓名 身份证号" :actionStyle="actionStyle" @custom="onSearch"
                    @clear="getStaffOrderPage"></u-search>
        </view>
        <view class="flex" @click="openScan">
          <u-icon name="scan" size="25"></u-icon>
        </view>
      </view>
      <!-- tab切换烂 -->
      <view class="usuallyCard margin-tb-sm margin-lr-sm ">
        <view class="flex justify-around padding-tb">
          <view class="flex flex-direction align-center" @click="changeStatus(1)">
            <u-image src="/static/images/home/dps.png" width="30px" height="30px"></u-image>
            <view class="margin-top" :style="{color:deliveryStatus== 1 ?'#EA5504':'#8799A3'}">
              全部气瓶
            </view>
          </view>
          <view class="flex flex-direction align-center" @click="changeStatus(2)">
            <u-image src="/static/images/home/ywc.png" width="30px" height="30px"></u-image>
            <view class="margin-top" :style="{color:deliveryStatus== 2 ?'#EA5504':'#8799A3'}">
              现存气瓶
            </view>
          </view>
          <view class="flex flex-direction align-center" @click="changeStatus(3)">
            <u-image src="/static/images/home/ywc.png" width="30px" height="30px"></u-image>
            <view class="margin-top" :style="{color:deliveryStatus== 3?'#EA5504':'#8799A3'}">
              已交付气瓶
            </view>
          </view>
        </view>
      </view>
      <!-- 订单详情卡片 -->
      <view class="">
        <view class="margin-sm" v-for="(item,index) in orderList" :key="index">
          <gasBottleCard mode="order" :orderObj="item" :orderStatus="deliveryStatus"></gasBottleCard>
        </view>
      </view>
    </view>
    <u-empty text="订单为空" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
             v-if="!orderList.length"></u-empty>
    <u-loadmore :status="status" marginTop="20" height="10" marginBottom="20" v-else />

    <ScanCode ref="scanCode" @scanCode="getCode" @close="closeScanWindow"></ScanCode>
  </view>
</template>

<script>
import orderCard from '@/components/orderCard/orderCard.vue';
import gasBottleCard from "./components/gasBottleCard";
export default {
  components: {
    orderCard,
    gasBottleCard
  },
  data() {
    return {
      actionStyle: {
        'color': '#fff',
        'background': '#EC1E19',
        'borderRadius': "15px",
        'width': '60px',
        'height': '25px',
        'line-height': '25px',
      },
      isScan: false,
      deliveryStatus: 1,
      orderList: [],
      orderDetail: {},
      status: "loadmore",
      formData: {
        current: 1,
        size: 10,
        khdh: "",
        qptm: "", //扫码使用
        queryType: 1,
        fQpbh:'',
        ygUserId:''
      }
    }
  },
  onPullDownRefresh() {
    this.orderList = [];
    this.formData.current = 1;
    this.formData.khdh = "";
    this.formData.qptm = "";
    //调用获取数据方法
    this.getStaffOrderPage()
    setTimeout(() => {
      //结束下拉刷新
      uni.stopPullDownRefresh();
    }, 500);
  },
  onReachBottom() {
    let allTotal = this.formData.current * this.formData.size
    if (allTotal < this.total) {
      //当前条数小于总条数 则增加请求页数
      this.formData.current++;
      this.status = 'loading';
      setTimeout(() => {
        this.getStaffOrderPage()
      }, 500)
    } else {
      this.status = 'nomore'
      // console.log('已加载全部数据')
    }
  },
  mounted() {
    let accountTypeString = uni.getStorageSync('accountType');
    if(accountTypeString == 'gl'){
      this.formData.ygUserId = this.$store.state.user.userInfo.fUserid;
    }else{
      this.formData.ygUserId = '';
    }
  },
  onLoad(data) {
    this.getStaffOrderPage()
    // 获取订单列表
    uni.$on('scanCode', (code, name) => {
      console.log("orderDelivery页监听code", code);
      if (name === 'orderDelivery') {
        this.formData.qptm = code;
        this.getStaffOrderPage()
      }
    });
  },
  onShow() {
    this.getStaffOrderPage()
    // 获取订单列表
    uni.$on('scanCode', (code, name) => {
      console.log("orderDelivery页监听code", code);
      if (name === 'orderDelivery') {
        this.formData.qptm = code;
        this.getStaffOrderPage()
      }
    });
    // this.getStaffOrderPage();
  },
  methods: {
    async getStaffOrderPage() {
      const result = await this.$api.handGasBottleApi.getHandGasBottleOrderPage(this.formData);
      let {
        code,
        value
      } = result;
      // this.orderList = code === 200 ? value.records : [],
      if (code === 200) {
        let allTotal = this.formData.current * this.formData.size
        this.total = value.total
        const newlist = value.records;
        if (this.formData.current === 1) {
          this.orderList = newlist;
        } else {
          this.orderList.push(...newlist)
        }
        if (this.orderList.length < allTotal) {
          this.status = 'nomore'
        }
        console.log('员工订单', JSON.parse(JSON.stringify(this.orderList)));
      }
    },
    // 修改配送状态
    changeStatus(status) {
      console.log('打印status',status);
      this.formData.current = 1;
      this.deliveryStatus = status;
      this.formData.queryType = this.deliveryStatus;
      // this.formData.zt = this.deliveryStatus ? '已完成' : '待配送';
      this.getStaffOrderPage();
    },
    // 搜索
    onSearch() {
      if (!this.formData.khdh) {
        uni.$u.toast('请输入搜索关键词');
        return;
      }
      this.getStaffOrderPage();
    },
    openScan() {
      // 组件扫码
      // this.$refs.scanCode.open();
      uni.navigateTo({
        url: '/pages/scan/scanCode?mode=2'
      })
    },
    // 扫码重新获取订单
    getCode(code) {
      console.log("获取code", code);
      this.formData.qptm = code;
      this.getStaffOrderPage();
      this.close()
    },
    close() {
      this.isScan = false;
      this.$refs.scanCode.close();
    },
    closeScanWindow() {
      this.isScan = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 10px;
}

.searchCss {
  // margin: 10px;
  padding: 10px;
  background: #fff;
}

/deep/.u-search__content {
  width: 85vw;
  padding-right: 70px;
}

/deep/.u-search__action {
  position: absolute;
  right: 15%;
}
</style>