<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-10-16 13:59:22
-->
<template>
  <view class="content">
    <view class="header_a">
      <view class="header">
        <img @click="isTop=true"
             src="@/assets/images/search.png"
             alt="">
        <!-- <img @click="isFont=true"
           src="@/assets/images/change.png"
           alt=""> -->
      </view>
    </view>
    <view class="zhan"></view>
    <!-- table -->
    <view class="kuang"
          v-for="(item,index) in tableData"
          :key="index">
      <table class="tftable"
             border="1">
        <tr>
          <td align="right">{{ '订单编号' }}</td>
          <td align="left">{{ item.orderCode }}</td>
        </tr>
        <tr>
          <td align="right">{{ '订单类型' }}</td>
          <td align="left">{{ item.orderTypeVal }}</td>
        </tr>
        <tr>
          <td align="right">{{ '会员编号' }}</td>
          <td align="left">{{ item.memberCode }}</td>
        </tr>
        <tr>
          <td align="right">{{ '会员姓名' }}</td>
          <td align="left">{{ item.memberName }}</td>
        </tr>
        <tr>
          <td align="right">{{ '收货人' }}</td>
          <td align="left">{{ item.recName }}</td>
        </tr>
        <tr>
          <td align="right">{{ '联系方式' }}</td>
          <td align="left">{{ item.recPhone }}</td>
        </tr>
        <tr>
          <td align="right">{{ '省' }}</td>
          <td align="left">{{ item.recProvinceVal }}</td>
        </tr>
        <tr>
          <td align="right">{{ '市' }}</td>
          <td align="left">{{ item.recCityVal }}</td>
        </tr>
        <tr>
          <td align="right">{{ '区/县' }}</td>
          <td align="left">{{ item.recCountyVal }}</td>
        </tr>
        <tr>
          <td align="right">{{ '详细地址' }}</td>
          <td align="left">{{ item.recAddress }}</td>
        </tr>
        <tr>
          <td align="right">{{ '产品名称' }}</td>
          <td align="left">{{ item.productName }}</td>
        </tr>
        <tr>
          <td align="right">{{ '产品规格' }}</td>
          <td align="left">
          {{ item.specsName }}
          </td>
        </tr>
        <tr>
          <td align="right">{{ '产品单价' }}({{ isLocalSymbol() }})</td>
          <td align="left">
         {{ item.price |  toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr>
          <td align="right">{{ '产品业绩' }}(PV)</td>
          <td align="left">
          {{ item.achievement |toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr>
          <td align="right">{{ '数量' }}</td>
          <td align="left">
          {{ item.quantity }}
          </td>
        </tr>
        <tr>
          <td align="right">{{ '商品总价' }}({{ isLocalSymbol() }})</td>
          <td align="left">{{ item.orderAmount |toThousandthAndKeepDecimal}}</td>
        </tr>
        <tr>
          <td align="right">{{ '商品业绩' }}({{ isLocals() }})</td>
          <td align="left">{{ item.orderAchieve |toThousandthAndKeepDecimal}}</td>
        </tr>
        <tr>
          <td align="right">{{ '商品业绩' }}(BV)</td>
          <td align="left">{{ item.orderAssAchieve |toThousandthAndKeepDecimal}}</td>
        </tr>
        <tr>
          <td align="right">{{ '创建日期' }}</td>
          <td align="left">{{ item.creationTime }}</td>
        </tr>
        <tr>
          <td align="right">{{ '支付日期' }}</td>
          <td align="left">{{ item.payTime }}</td>
        </tr>
      </table>
      <view class="table_f">
        <u-button  @click="changeGoods(item.orderCode)"
                  size="small"
                  color="rgba(167, 116, 176, 1)"
                  v-hasButtons="['OrderBusinessProduct']"
                  :text="'调换货物'"></u-button>
        <u-button @click="updateAdress(item.orderCode)"
                  size="small"
                  v-hasButtons="['OrderBusinessAddress']"
                  color="rgba(243, 169, 0, 1)"
                  :text="'修改'+ '地址'"></u-button>
        <u-button @click="backOrder(item.orderCode, 1)"
                  size="small"
                  v-hasButtons="['OrderBusinessCancel']"
                  v-show="(item.orderType == 1||item.orderType == 24||item.orderType == 7) && item.howLong < 7"
                  color="rgba(72, 178, 253, 1)"
                  text="单次撤单"></u-button>
        <u-button @click="backOrder(item.orderCode, 2)"
                  size="small"
                  v-hasButtons="['OrderBusinessCancel']"
                  color="#53B11E"
                  v-show="(item.orderType == 1||item.orderType == 24||item.orderType == 7) && item.howLong < 7"
                  text="合并撤单"></u-button>
        <u-button @click="backOrder(item.orderCode, 3)"
                  size="small"
                  v-hasButtons="['OrderBusinessCancel']"
                  v-show="item.orderType != 1 &&
                  item.orderType != 24 &&item.orderType != 25&&item.orderType != 7 && item.howLong < 7"
                  color="rgba(72, 178, 253, 1)"
                  text="撤销订单"></u-button>
        <u-button @click="backProduct(item.orderCode,4)"
                  size="small"
                  v-show="item.orderType != 1 &&
                          item.orderType != 24 &&
                          item.orderType != 25 &&
                          item.orderType != 2 &&
                          item.orderType != 7 &&
                          item.howLong < 7"
                  v-hasButtons="['OrderBusinessCancel']"
                  color="#53B11E"
                  text="撤销产品"></u-button>
        <u-button @click="refundOrder(item.orderCode, 2)"
                  size="small"
                  v-hasButtons="['OrderBusinessReturn']"
                  v-show="(item.orderType == 1||item.orderType == 24||item.orderType == 7) &&item.returnFlag ==0"
                  color="rgba(228, 27, 27, 1)"
                  text="退单"></u-button>
        <u-button @click="refundOrder(item.orderCode, 2)"
                  size="small"
                  v-hasButtons="['OrderBusinessReturn']"
                  v-show="(item.orderType != 1&&item.orderType != 7) &&item.returnFlag ==0"
                  color="rgba(228, 27, 27, 1)"
                  text="退单"></u-button>
      </view>
    </view>
    <!-- 顶部搜索 -->
    <u-popup :show="isTop"
             mode="top"
             @close="isTop=false">
      <view class="tt">
        <u--form labelPosition="left"
                 labelWidth="auto"
                 :model="select"
                 ref="uForm">
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'会员编号'">
                <u--input fontSize="12"
                          v-model="select.memberCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'会员姓名'">
                <u--input fontSize="12"
                          v-model="select.memberName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'订单编号'">
                <u--input fontSize="12"
                          v-model="select.orderCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'结算等级'">
                <picker :range="orderTypeList"
                        range-key="label"
                        @change="bindPickerChange1">
                  <u--input disabled
                            fontSize="12"
                            disabledColor="#ffffff"
                            v-model="select.orderTypeVal"
                            suffixIcon="arrow-down"
                            suffixIconStyle="font-size: 12px;"></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'商品名称'">
                <u--input fontSize="12"
                          v-model="select.productName"></u--input>
              </u-form-item>
            </u-col>
            <!-- <u-col span="6">
              <u-form-item :label="'会员姓名'">
                <u--input fontSize="12"
                          v-model="select.memberName"></u--input>
              </u-form-item>
            </u-col> -->
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'收货地址'"
                           @click='getDiqu'>
                <u--input disabled
                          fontSize="12"
                          disabledColor="#ffffff"
                          v-model="select.diqu"
                          suffixIcon="arrow-down"
                          suffixIconStyle="font-size: 12px;"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item label="详细地址">
                <u--input fontSize="12"
                          v-model="select.recAddress"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'支付日期'"
                           @click="isData=true,setTime=1">
                <u--input disabled
                          fontSize="12"
                          disabledColor="#ffffff"
                          v-model="select.payVal"
                          suffixIcon="arrow-down"
                          suffixIconStyle="font-size: 12px;"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'创建日期'"
                           @click="isData=true,setTime=0">
                <u--input disabled
                          fontSize="12"
                          disabledColor="#ffffff"
                          v-model="select.creationTimeVal"
                          suffixIcon="arrow-down"
                          suffixIconStyle="font-size: 12px;"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
        <view class="footer">
          <u-button @click="getList1"
                    color="#C8161D"
                    text="搜索"
                    class="btnn"></u-button>
          <u-button @click="reset"
                    text="重置"></u-button>
        </view>
      </view>
    </u-popup>
    <!-- 时间picker -->
    <u-calendar @close="isData = false"
                :closeOnClickOverlay="true"
                :show="isData"
                :allowSameDay="true"
                mode="range"
                :maxDate="calendar.maxDate"
                :minDate="calendar.minDate"
                :monthNum="calendar.monthNum"
                @confirm="confirm"></u-calendar>
    <!-- 悬浮球 -->
    <drag-button />
    <!-- 选择地址 -->
    <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>
  </view>
</template>

<script>
import address from '@/components/address.vue'
import * as api from '@/api/information'
import { isLocals, isLocalSymbol } from '@/util/numberToCurrency'
export default {
  components: {
    'v-address': address,
  },
  data() {
    return {
      defaultCode: [],
      select: {},
      isData: false,
      isTop: false,
      setTime: 0,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      orderTypeList: [],
      torderCodeList: '',
      checkAdressList: [],
      oCheckAdressList: [],
      calendar: {
        minDate: '',
        maxDate: '',
        monthNum: 25,
      },
    }
  },
  onLoad(options) {
    this.getData()
  },
  onShow() {
    
    this.getSearch()
    this.chooseTimed()
  },
  onPullDownRefresh(){
    this.getList1()
},
  methods: {
    isLocalSymbol,
    isLocals,
    // 设置默认日期，最大值为今天，最小值为去年今天
    chooseTimed() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      if (month <= 9) {
        month = '0' + month
      }
      if (day <= 9) {
        day = '0' + day
      }
      let minyear = year - 1
      let maxyear = year + 1
      this.calendar.minDate = minyear + '-' + month + '-' + day
      this.calendar.maxDate = maxyear + '-' + month + '-' + day
    },
    getData() {
      api.getOrderType().then((res) => {
        this.orderTypeList = res.data
      })
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.select.diqu = diqu
      this.select.recProvince = obj.province
      this.select.recCity = obj.city
      this.select.recCounty = obj.county
      this.$forceUpdate()
    },
    bindPickerChange1(e) {
      this.$set(
        this.select,
        'orderTypeVal',
        this.orderTypeList[e.detail.value].label
      )
      this.$set(
        this.select,
        'orderType',
        this.orderTypeList[e.detail.value].value
      )
    },
   
    onReachBottom() {
      this.queryParams.pageNum++
      this.getSearch()
    },
    //修改地址
    updateAdress(order) {
      uni.navigateTo({
        url: '/pages/information/fixAddress/index?order=' + order,
      })
    },
    // 撤销订单，单次，合并
    backOrder(order, index) {
      uni.navigateTo({
        url:
          '/pages/information/cancleOrder/index?order=' +
          order +
          '&index=' +
          index,
      })
    },
    // 撤销产品
    backProduct(order, index){
      uni.navigateTo({
        url:
          '/pages/information/cancleProduct/index?order=' +
          order +
          '&index=' +
          index,
      })
    },
    // 退单
    refundOrder(order, index){
      uni.navigateTo({
        url:
          '/pages/information/refundOrder/index?order=' +
          order +
          '&index=' +
          index,
      })
    },
    // 调换货
    changeGoods(order){
      uni.navigateTo({
        url:
          '/pages/information/changeGoods/index?order=' +
          order,
      })
    },
    // 数据处理
    fixData(list) {
      let tempArr = []
      let Data = []
      for (let i = 0; i < list.length; i++) {
        if (tempArr.indexOf(list[i].orderCode) === -1) {
          Data.push({
            orderCode: list[i].orderCode,
            dataInfo: [list[i]],
          })
          tempArr.push(list[i].orderCode)
        } else {
          for (let j = 0; j < Data.length; j++) {
            if (Data[j].orderCode == list[i].orderCode) {
              Data[j].dataInfo.push(list[i])
              break
            }
          }
        }
      }
      return Data
    },
    //查询会员信息
    getSearch() {
      api
        .getOrderBusinessList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          uni.stopPullDownRefresh();
          this.total = res.total
          // let arr = this.fixData(res.rows)
          this.tableData = this.tableData.concat(res.rows)
          // this.tableData.forEach((item) => {
          //   item.howLong = this.$moment().diff(
          //     item.dataInfo[0].creationTime,
          //     'days'
          //   )
          // })
          this.tableData.forEach((item) => {
          item.howLong = this.$moment().diff(item.creationTime, 'days')
        })
        })
    },
    getList1() {
      this.tableData = []
      this.queryParams.pageNum = 1
      this.isTop = false
      this.tableData = []
      this.getSearch()
    },
    reset() {
      this.select = {}
    },
    confirm(e) {
      if (this.setTime == 0) {
        // this.$set(this.select, 'startDate', e[0])
        // this.$set(this.select, 'endDate', e[e.length - 1])
        this.$set(this.select, 'creationTime', [e[0], e[e.length - 1]])
        this.$set(
          this.select,
          'creationTimeVal',
          e[0] + ' 至 ' + e[e.length - 1]
        )
      } else {
        this.$set(this.select, 'payTime', [e[0], e[e.length - 1]])
        this.$set(this.select, 'payVal', e[0] + ' 至 ' + e[e.length - 1])
      }

      this.isData = false
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
  // padding: 20rpx;
}
.header_a {
  position: fixed;
  width: 100%;
  z-index: 1;
}
.header {
  margin: 20rpx;
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  img {
    width: 24px;
    height: 24px;
  }
}
.zhan {
  height: 130rpx;
}
.kuang {
  margin: 20rpx;
  background: #f9f9f9;
  border-radius: 10px 10px 10px 10px;
}
.table_f {
  display: flex;
  uni-button {
    margin: 20rpx 10rpx;
  }
}
.tftable {
  font-size: 12px;
  border-collapse: collapse;
  border-radius: 10px;
  width: 100%;
  background: #fff;
  border: 1px solid #f9f9f9;
  margin-top: 20rpx;
  td {
    font-size: 11px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    padding: 20rpx 40rpx;
    width: 50%;
    // height: 60px;
    border-left:1px solid #333;
    border-bottom:1px solid #333;
  }
  td:nth-child(odd){
    border-left:1px solid #f9f9f9;
  }
  tr :nth-child(2) {
    color: #333333;
  }
}
.tt {
  padding: 20rpx;
  margin-top: 40px;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  .btnn {
    margin-right: 40rpx;
  }
}
::v-deep .u-input {
  padding: 0 9px !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 12px;
}
::v-deep .u-form-item__body {
  padding: 5px 0;
}
</style>