<template>
  <div class="app-main app-content">
    <view class="input-wrap_box">
      <view>
        <AppSearchModule placeholder="请输入客户名称，支持拼音首字母" @search="searchFn"/>
      </view>

      <view class="select-dn_bx">
        <DorpdownSelect
          :menuObj="menuObj"
          :selectItemId.sync="selectItemId"
          :typeSelect="1"
          top="0px"
          @selectSussess="selectSussess"
          :typeTime="true"
        />
      </view>
    </view>
    <view class="app-tabs">
      <app-tabs
        :tabs="tabs"
        :isFixed="false"
        :top="50"
        :currentTab="tabIndex"
        :height="100"
        @change="change"
        itemWidth="20%"
      />
    </view>
    <div class="list-wrap">
      <block v-if="!$util.isEmpty(list.data)">
        <div
          class="list"
          v-for="(item, index) in list.data"
          :key="index"
          @click="
            pageTo({
              url: '/pagesOrder/detail',
              query: {
                id: item.id,
              },
            })
          "
        >
          <view class="order-top_box">
            <app-avatar-module :src="item.customAvatarUrl" :width="38" />
            <view class="tit">
              {{ item.customName || "未命名" }}
            </view>
            <view
              :class="[
                'status',
                item.status == '3'
                  ? 'buleColor'
                  : item.status == '6'
                  ? 'defColor'
                  : '',
              ]"
            >
              {{ statusFormat(item.status) }}
            </view>
          </view>
          <view class="order-list_info">
            <view class="order-info_box">
              <view>编号：</view>
              <view>{{ item.sendNum }}</view>
            </view>
            <view class="order-info_box">
              <view>单号：</view>
              <view>{{ item.orderSn }}</view>
            </view>
            <view class="order-info_box">
              <view>日期：</view>
              <view>{{ item.addTime }}</view>
            </view>
            <view class="order-info_box">
              <view>开单：</view>
              <view>{{ item.shopAdminName }}</view>
            </view>
            <view class="order-info_box">
              <view>数量：</view>
              <view>{{ `${item.bigNum}/${item.smallNum}` }}</view>
              <view class="price">
                <view>￥{{ item.actPrice }}</view>
                <i class="iconfont iconxiangyou"></i>
              </view>
            </view>
          </view>
          <div class="list-bottom">
            <div class="list-button">
              <view v-for="s in item.buttonList" :key="s.type">
                <button
                  @click.stop="openBt(s, item)"
                  v-if="s.show == 1"
                  :disabled="s.disable === 1"
                  class="admin-button-com bule"
                  :class="s.disable === 1 ? 'active' : ''"
                >
                  {{
                    s.type === "item"
                      ? "改花材"
                      : s.type === "selfGet"
                      ? "自取"
                      : "发货"
                  }}
                </button>
              </view>
            </div>
          </div>
        </div>
      </block>
      <block v-else>
        <app-wrapper-empty
          title="暂无数据"
          :is-empty="$util.isEmpty(list.data)"
        />
      </block>
    </div>
    <!--		时间段选择-->
    <rangeDatePick
      :show="isShow"
      start="2000-01-01"
      end="2200-12-01"
      :value="customizationTime"
      @change="timeChange"
      @cancel="timeCancel"
      themeColor="#4C83D6"
      fields="day"
    ></rangeDatePick>
  </div>
</template>

<script>
const Month =
  new Date().getMonth() + 1 < 10
    ? "0" + (new Date().getMonth() + 1)
    : new Date().getMonth() + 1;
const time = `${new Date().getFullYear()}-${Month}-${new Date().getDate()}`;
import AppTabs from "@/components/plugin/tabs";
// import ListModule from "@/components/module/app-order-list";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
import { getCategory, getUsage } from "@/utils/config";
import { list } from "@/mixins";
import { mapGetters } from "vuex";
import { orderClass } from "@/api/order";
import { getListB, freeShipping } from "@/api/order";
import AppSearchModule from "@/components/module/app-search";
import DorpdownSelect from "@/components/module/dorpdownSelect";
import AppAvatarModule from "@/components/module/app-avatar";
import rangeDatePick from "@/components/pyh-rdtpicker/pyh-rdtpicker.vue";
export default {
  name: "order-list",
  components: {
    // ListModule,
    rangeDatePick,
    AppTabs,
    AppWrapperEmpty,
    ModalModule,
    AppSearchModule,
    DorpdownSelect,
    AppAvatarModule,
  },
  mixins: [list],
  computed: { ...mapGetters(["getLoginInfo", "getDictionariesInfo"]) },
  data() {
    return {
      seekVal: "",
      isShow: false, //是否显选择时间段
      customizationTime: [], //时间段
      customizationTimeType: "", //时间段
      menuObj: "", //时间筛选列表
      tabIndex: 0,
      // classifyModal:false,
      tabs: [
        {
          name: "全部",
          value: 0,
          id: 0,
        },
        {
          name: "待付款",
          value: 0,
          id: 1,
        },
        {
          name: "待配送",
          value: 0,
          id: 2,
        },
        {
          name: "配送中",
          value: 0,
          id: 3,
        },
        {
          name: "已完成",
          value: 0,
          id: 4,
        },
      ],
      selectItemId: "",
      operateIndex: null,
      operateData: {},
      // 免发货
      freeShipModal: false,
      classifyForm: {
        categoryId: "",
        usageId: "",
      },
    };
  },
  onPullDownRefresh() {
    this.resetList();
    this._list().then((res) => {
      uni.stopPullDownRefresh();
    });
  },
  onReachBottom() {
    if (!this.list.finished) {
      this._list().then((res) => {
        uni.stopPullDownRefresh();
      });
    } else {
      uni.stopPullDownRefresh();
    }
  },
  mounted() {
    // getCategory()
    // getUsage()
  },
  onLoad(option) {
    let dateDefaultOption = [];
    let list = this.getDictionariesInfo.dateDefaultOption;
    for (let i = 0; i < list.length; i++) {
      dateDefaultOption.push({ name: list[i].name, id: list[i].value });
    }
    this.menuObj = {
      title: "时间",
      titleChild: "时间",
      list: dateDefaultOption,
    };
    let tabIndex = uni.getStorageSync("switchTabQuery") || null;
    if (tabIndex) {
      uni.removeStorageSync("switchTabQuery");
      this.tabIndex = parseInt(tabIndex.tabIndex);
    }
  },
  onShow() {
    let tabIndex = uni.getStorageSync("switchTabQuery") || null;
    if (tabIndex) {
      uni.removeStorageSync("switchTabQuery");
      this.tabIndex = parseInt(tabIndex.tabIndex);
    }
    this._list();
  },
  methods: {
    selectTime(type) {
      (this.customizationTime = [time, time]),
        (this.customizationTimeType = type),
        (this.isShow = true);
    },
    //选择自定义时间确定
    timeChange(e) {
      this.isShow = false;
      this.resetList();
      this._list(this.customizationTimeType, e);
    },
    //选择自定义时间取消
    timeCancel(e) {
      this.isShow = false;
    },
    statusFormat(status) {
      switch (status) {
        case "1":
          return "待付款";
          break;
        case "2":
          return "待配送";
          break;
        case "3":
          return "配送中";
          break;
        case "4":
          return "已完成";
          break;
        case "5":
          return "已取消";
          break;
        case "6":
          return "已退款";
          break;
        default:
          return "";
      }
    }, // 操作按钮
  openBt(s, item) {
      console.log(123);
      // 花材
      if (s.type === "item") {
        uni.navigateTo({ url: `/pagesOrder/select?id=${item.id}` });
        // 自取
      } else if (s.type === "selfGet") {
        this.operateData = item;
        let self = this;
        uni.showModal({
          title: "提示",
          content: "确认客户已自取",
          confirmText: "确认",
          success: function (res) {
            if (res.confirm) {
              self.freeShipModalClick();
            }
          },
        });
        //发货
      } else if (s.type === "send") {
        this.pageTo({
          url: "/pagesOrder/ship",
          query: {
            id: item.id,
          },
        });
      }
    },
    selectSussess(val) {
      // this._list();
      console.log(val);
      if (val.select == "自定义") {
        this.selectTime(val.selectItem.id);
      } else {
        this.resetList();
        this._list(val.selectItem.id, "");
      }
    },
    searchFn(e) {
      this.resetList();
      this.seekVal = e;
      this._list();
    },
    _list(type, timeArr) {
      return getListB({
        searchTime: type,
        startTime: timeArr ? timeArr[0] : "",
        endTime: timeArr ? timeArr[1] : "",
        status: this.tabs[this.tabIndex].id,
        name: this.seekVal,
        page: this.list.page,
      }).then((res) => {
        this.completes(res);
        if (this.$util.isEmpty(res.data)){
          return false
        }
        this.tabs[0].value = res.data.shop.totalOrder || 0;
        this.tabs[1].value = res.data.shop.unPayOrder || 0;
        this.tabs[2].value = res.data.shop.unSendOrder || 0;
        this.tabs[3].value = res.data.shop.sendingOrder || 0;
        this.tabs[4].value = res.data.shop.finishOrder || 0;
      });
    },
    change(e) {
      console.log(e);
      if (this.tabIndex == e.index) {
        return false;
      } else {
        this.tabIndex = e.index;
        this.resetList();
        this._list();
      }
    },
    // 免发货
    // freeShippingFn(item, index) {
    //   // this.operateIndex = index;
    //   this.operateData = item;
    //   this.freeShipModal = true;
    // },
    // 免发货
    freeShipModalClick(e) {
      freeShipping({ id: this.operateData.id }).then((res) => {
        this._list();
        this.$msg("操作成功！");
      });
    },
    // 查看配送
    seeSendFn(item) {
      this.$util.pageTo({
        url: "/admin/order/ship",
        query: {
          id: item.id,
          pageStatus: 5,
        },
      });
    },
    // 关闭弹窗
    modalCancel() {
      this.freeShipModal = false;
      // this.classifyModal = false;
    },
    classifyOrder(id) {
      // this.classifyModal = true
      this.currentOrderId = id;
    },
    // confirmClassify(e) {
    // 	if (e.index === 0) {
    // 		this.modalCancel()
    // 	} else {
    // 		orderClass({
    // 			id: this.currentOrderId,
    // 			...this.classifyForm
    // 		}).then(res => {
    //       this.classifyModal = false;
    // 			this.$msg('分类成功！')
    // 		})
    // 	}
    // },
    // selCategoryFn(item) {
    //   this.classifyForm.categoryId = item.id
    // },
    // selUsageFn(item) {
    //   this.classifyForm.usageId = item.id
    // }
  },
};
</script>
<style lang="scss" scoped>
.admin-button-com {
  width: 140px;
  height: 60px;
  padding: 0;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  &.active {
    border: 1px solid #ccc;
  }
}
.app-content {
  padding-top: 100px;
  padding-bottom: 1px;
  .select-dn_bx {
    padding-left: 48px;
  }
  .app-tabs {
    position: fixed;
    width: 100%;
    z-index: 9;
  }
  .input-wrap_box {
    background-color: #fff;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    padding: 0 30px;
    & > view:nth-child(1) {
      flex: 1;
    }
  }
  .list-wrap {
    padding-top: 100rpx;
    .list {
      background-color: #fff;
      margin-bottom: 20px;
      .list-top,
      .list-bottom {
        padding: 15px 30px;
        border-bottom: 1px solid $borderColor;
        color: $fontColor3;
        .freight-text {
          margin-right: 60px;
        }
      }
      .list-bottom {
        & > div {
          @include disFlex(center, flex-end);
        }
        .list-button {
          // margin-top: 26px;
          .admin-button-com {
            margin-left: 20px;
          }
        }
      }
    }
  }
}
// 弹窗
.upload-confirm-wrap {
  max-height: 600px;
  overflow-y: auto;
  .modal-tit {
    @include disFlex(center, center);
    font-size: 40px;
    margin-top: 30px;
    margin-bottom: 50px;
    .iconfont {
      color: #09bb07;
      margin-right: 20px;
      font-size: 50px;
    }
  }
  //  分类
  .sel-wrap {
    color: $fontColor2;
    font-size: 32px;
    .sel-tit {
      text-align: left;
    }
    .sel-btn {
      @include disFlex(center, flex-start);
      flex-wrap: wrap;
      padding: 10px 0 40px;
      .admin-button-com {
        // width: 170px;
        margin-right: 20px;
        margin-top: 20px;
        padding-top: 16px;
        padding-bottom: 16px;
        border-radius: 4px;
        // &:nth-child(3n + 1) {
        // 	margin-left: 0;
        // }
      }
    }
  }
}
.order-top_box {
  display: flex;
  align-items: center;
  padding: 20px 30px 20px;
  & > .tit {
    color: #333333;
    font-size: 30rpx;
    font-weight: 650;
    margin-left: 15rpx;
  }
  & > .status {
    flex: 1;
    text-align: right;
    color: #ff2842;
    &.buleColor {
      color: #3385ff;
    }
    &.defColor {
      color: #333333;
    }
  }
}

.order-list_info {
  padding: 10px 30px 30px;
  border-bottom: 1px solid #eeeeee;
  & > .order-info_box {
    display: flex;
    align-items: center;
    font-size: 26px;
    font-weight: 400;
    margin-bottom: 5px;
    & > view:nth-child(1) {
      color: #999999;
    }
    & > view:nth-child(2) {
      color: #333333;
    }
    & > .price {
      flex: 1;
      font-size: 30px;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      & .iconxiangyou {
        color: #999999;
        font-size: 25px;
        margin-left: 12px;
      }
    }
  }
}
</style>
