<template>
  <view class="content">
    <view class="header">
      <view class="headernei" @click="isTop = true">
        <img src="@/assets/images/search.png" alt="" />
      </view>
    </view>
    <view class="kuang" v-for="(item, index) in tableData" :key="index">
      <table class="tftable" border="1">
        <tr v-if="dataList[0].key">
          <td align="right">{{ '订单编号' }}</td>
          <td align="left">{{ item.orderCode }}</td>
        </tr>
        <tr v-if="dataList[1].key">
          <td align="right">{{ '订单类型' }}</td>
          <td align="left">{{ item.orderTypeStr }}</td>
        </tr>
        <tr  v-if="dataList[2].key">
          <td align="right">{{ '会员编号' }}</td>
          <td align="left">{{ item.memberCode }}</td>
        </tr>
        <tr v-if="dataList[3].key">
          <td align="right">{{ '会员姓名' }}</td>
          <td align="left">{{ item.memberName }}</td>
        </tr>
        <tr    v-if="dataList[4].key">
          <td align="right">{{ '联系方式' }}</td>
          <td align="left">{{ item.phone }}</td>
        </tr>
        <tr  v-if="dataList[5].key">
          <td align="right">{{ '收货人' }}</td>
          <td align="left">{{ item.recName }}</td>
        </tr>
        <tr  v-if="dataList[6].key">
          <td align="right">{{ '收货电话' }}</td>
          <td align="left">{{ item.recPhone }}</td>
        </tr>
        <tr v-if="dataList[19].key">
          <td align="right">
            {{ `${'购买人' + '编号'}` }}
          </td>
          <td align="left">{{ item.buyMemberCode }}</td>
        </tr>
        <tr v-if="dataList[20].key">
          <td align="right">{{ `${'购买人' + '姓名'}` }}</td>
          <td align="left">{{ item.buyMemberName }}</td>
        </tr>
        <tr   v-if="dataList[7].key">
          <td align="right">{{ '省' }}</td>
          <td align="left">{{ item.recProvinceName }}</td>
        </tr>
        <tr  v-if="dataList[8].key">
          <td align="right">{{ '市' }}</td>
          <td align="left">{{ item.recCityName }}</td>
        </tr>
        <tr  v-if="dataList[9].key">
          <td align="right">{{ '区/县' }}</td>
          <td align="left">{{ item.recCountryName }}</td>
        </tr>
        <tr   v-if="dataList[10].key">
          <td align="right">{{ '详细地址' }}</td>
          <td align="left">{{ item.recAddress }}</td>
        </tr>
        <tr    v-if="dataList[11].key">
          <td align="right">{{ '订单金额' + `(${isLocalSymbol()})` }}</td>
          <td align="left">
            {{ item.orderAmount | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr v-if="dataList[21].key">
          <td  align="right">{{ '商品订单' + "BV" }}</td>
          <td align="left">
            {{ item.orderAssAchieve | toThousandthAndKeepDecimal }}
          </td>
        </tr>
        <tr   v-if="dataList[12].key">
          <td align="right">{{ '订单邮费' }}</td>
          <td align="left">{{ item.postage| toThousandthAndKeepDecimal }}</td>
        </tr>
        <tr   v-if="dataList[13].key">
          <td align="right">{{ '订单业绩'+ `(${isLocals()})` }}</td>
          <td align="left">{{ item.orderAchieve| toThousandthAndKeepDecimal }}</td>
        </tr>
        <tr   v-if="dataList[14].key">
          <td align="right">{{ '发货方式' }}</td>
          <td align="left">{{ item.deliveryWayStr }}</td>
        </tr>
        <tr  v-if="dataList[15].key">
          <td align="right">{{ '支付方式' }}</td>
          <td align="left">{{ item.payTypeStr }}</td>
        </tr>
        <tr   v-if="dataList[16].key">
          <td align="right">{{ '备注' }}</td>
          <td align="left">{{ item.remark }}</td>
        </tr>
        <tr  v-if="dataList[17].key">
          <td align="right">{{ '创建日期' }}</td>
          <td align="left">{{ item.creationTime }}</td>
        </tr>
        <tr v-if="dataList[18].key">
          <td align="right">{{ '支付日期' }}</td>
          <td align="left">{{ item.payTime }}</td>
        </tr>
      </table>
      <view
        style="
          padding: 20rpx 200rpx;
          border-top: 2rpx solid rgba(0, 0, 0, 0.03);
        "
      >
        <u-button
          @click="findDetail(item)"
          color="#C8161D"
          text="查看"
          v-hasButtons="['CommodityOpen']"
          class="btnn"
        ></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.orderCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'会员编号'">
                <u--input fontSize="12" v-model="select.memberCode"></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.memberName"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'联系方式'">
                <u--input fontSize="12" v-model="select.phone"></u--input>
              </u-form-item>
            </u-col>
          </u-row>

          <u-row>
            <u-col span="6">
              <u-form-item :label="'订单类型'">
                <picker
                  :range="typeList"
                  range-key="label"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.typeVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'发货方式'">
                <picker
                  :range="fhwayList"
                  range-key="label"
                  @change="bindPickerChange2"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.deliveryVal"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </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.recName"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'收货电话'">
                <u--input fontSize="12" v-model="select.recPhone"></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.buyMemberCode"
                ></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="`${'购买人' + '姓名'}`">
                <u--input
                  fontSize="12"
                  v-model="select.buyMemberName"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>

          <u-row gutter="10">
            <u-col span="12">
              <u-form-item :label="'支付方式'">
                <picker
                  :range="paywayList"
                  range-key="label"
                  @change="bindPickerChange3"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.payTypeVal"
                    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="'收货地址'"
                           @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 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 = 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-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--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>
    <u-calendar
      @close="isData = false"
      :closeOnClickOverlay="true"
      :show="isData"
      :allowSameDay="true"
      :maxDate="calendar.maxDate"
      :minDate="calendar.minDate"
      :monthNum="calendar.monthNum"
      mode="range"
      @confirm="confirm"
    ></u-calendar>
    <!-- 悬浮球 -->
    <drag-button />
    <export-ball  v-hasButtons="['CommodityExport']" ref="exportBall" @handleExport="handleExport" />
     <!-- 选择地址 -->
     <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>
  </view>
</template>
      
      <script>
import * as api from "@/api/logistics";
import { isLocals, isLocalSymbol } from "@/util/numberToCurrency";
import address from '@/components/address.vue'
import { getRoleMenu } from '@/api/information'
export default {
  components: {
    'v-address': address,
  },
  data() {
    return {
      defaultCode: [],
      select: {},
      isTop: false,
      isData: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      typeList: [], //订单类型
      fhwayList: [], //发货方式
      paywayList: [], //支付方式
      userCountry: {},
      calendar: {
        minDate: "",
        maxDate: "",
        monthNum: 25,
      },
      dataList: [
        {
          name: "orderCode",
          key: "",
        },
        {
          name: "orderTypeStr",
          key: "",
        },
        {
          name: "memberCode",
          key: "",
        },
        {
          name: "memberName",
          key: "",
        },
        {
          name: "phone",
          key: "",
        },
        {
          name: "recName",
          key: "",
        },
        {
          name: "recPhone",
          key: "",
        },
        {
          name: "recProvinceName",
          key: "",
        },
        {
          name: "recCityName",
          key: "",
        },
        {
          name: "recCountryName",
          key: "",
        },
        {
          name: "recAddress",
          key: "",
        },
        {
          name: "orderAmount",
          key: "",
        },
        {
          name: "postage",
          key: "",
        },
        {
          name: "orderAchieve",
          key: "",
        },
        {
          name: "deliveryWayStr",
          key: "",
        },
        {
          name: "payTypeStr",
          key: "",
        },
        {
          name: "remark",
          key: "",
        },
       
        {
          name: "creationTime",
          key: "",
        },
        {
          name: "payTime",
          key: "",
        },
        {
          name: "buyMemberCode",
          key: "",
        },
        {
          name: "buyMemberName",
          key: "",
        },
        {
          name: "orderAssAchieve",
          key: "",
        },
      ],
    };
  },
  onLoad(options) {
    if (uni.getStorageSync("userAll")) {
      this.userCountry = JSON.parse(uni.getStorageSync("userAll")).country;
    }

    this.getSearch();
    // 获取下拉
    this.getData();
    this.chooseTimed();
    this.getUserRole();
  },
  methods: {
    isLocalSymbol,
    isLocals,
    getUserRole() {
      getRoleMenu("Commodity").then((res) => {
        this.dataList.forEach((item) => {
          res.data.forEach((items) => {
            if (item.name == items) {
              item.key = items;
            }
            this.flag = true;
          });
        });
      });
    },
    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()
    },
    // 设置默认日期，最大值为今天，最小值为去年今天
    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.typeList = res.data;
      });
      api.getDeliveryList().then((res) => {
        this.fhwayList = res.data;
      });
      api.getOrderPayType().then((res) => {
        this.paywayList = res.data;
      });
    },
    findDetail(row) {
      uni.navigateTo({
        url: "/pages/logistics/commodity/ckspdd?orderCode=" + row.orderCode,
      });
    },
    onReachBottom() {
      this.queryParams.pageNum++;
      this.getSearch();
    },
    getSearch() {
      api
        .getOrderList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.total = res.total;
          this.tableData = this.tableData.concat(res.rows);
        });
    },
    getList1() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.isTop = false;
      this.getSearch();
    },
    reset() {
      this.select = {};
      this.getSearch();
    },
    handleExport() {
      let url = "/sale/manage/order/get-order-list-export";
      let obj = Object.assign({}, this.select, this.queryParams);
      this.$refs.exportBall.handleExport(url, obj, '商品订单');
    },
    bindPickerChange2(e) {
      this.$set(
        this.select,
        "deliveryVal",
        this.fhwayList[e.detail.value].label
      );
      this.$set(
        this.select,
        "deliveryWay",
        this.fhwayList[e.detail.value].value
      );
    },
    bindPickerChange3(e) {
      this.$set(
        this.select,
        "payTypeVal",
        this.paywayList[e.detail.value].label
      );
      this.$set(this.select, "payType", this.paywayList[e.detail.value].value);
    },
    bindPickerChange1(e) {
      this.$set(this.select, "typeVal", this.typeList[e.detail.value].label);
      this.$set(this.select, "orderType", this.typeList[e.detail.value].value);
    },

    confirm(e) {
      if (this.setTime == 0) {
        this.$set(this.select, "startCreateDate", e[0]);
        this.$set(this.select, "endCreateDate", e[e.length - 1]);
        this.$set(
          this.select,
          "creationTimeVal",
          e[0] + " 至 " + e[e.length - 1]
        );
      } else {
        this.$set(this.select, "startPayDate", e[0]);
        this.$set(this.select, "endPayDate", 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 24rpx;
}
.header {
  background: #ffffff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  .headernei {
    background: rgba(216, 216, 216, 0);
    border-radius: 64rpx;
    opacity: 1;
    border: 2rpx solid #259dfe;
    width: 100%;
    padding: 22rpx 20rpx;
    img {
      width: 24rpx;
      height: 24rpx;
    }
  }
}
.kuang {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}
.tftable {
  border-collapse: collapse;
  width: 100%;
  background: #fff;
  border: 1px solid #f9f9f9;
  margin-top: 20rpx;
  td {
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #999;
    padding: 20rpx 40rpx;
    width: 50%;
  }
  tr :nth-child(2) {
    color: #333333;
    font-size: 26rpx;
  }
  .theflex {
    display: flex;
    align-items: center;
  }
}
.che {
  padding: 20rpx 40rpx;
}
.tt {
  padding: 20rpx;
  margin-top: 20px;
  font-size: 24rpx;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
.footer {
  display: flex;
  align-items: center;
  padding: 20rpx 60rpx;
  font-size: 24rpx;
  .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>