<template>
  <div class="app-content" @click="operateBottomShow = false">
    <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="50%" />
    <!-- 中间 -->
    <div class="app-middle">
      <scroll-view
        scroll-y
        scroll-with-animation
        class="tab-view"
        :scroll-top="scrollTop"
        :style="{height:height+'px'}"
      >
        <div
          v-for="(item,index) in tabbar"
          :key="index"
          class="tab-bar-item"
          :class="[currentTab==index ? 'active' : '']"
          :data-current="index"
          @tap.stop="swichNav($event ,item)"
        >
          <text>{{item.categoryName || '暂无'}}</text>
        </div>
      </scroll-view>
      <block v-for="(item,index) in tabbar" :key="index">
        <scroll-view
          scroll-y
          class="right-box"
          :style="{height:height+'px'}"
          v-if="currentTab==index"
        >
          <!--内容部分 start -->
          <block v-if="!$util.isEmpty(list.data)">
            <div class="page-view">
              <div class="goods-list" v-for="(goodsItem, idx) in list.data" :key="idx">
                <div class="goods-list-top">
                  <div class="img-blo">
                    <img :src="goodsItem.smallImgList[0]" alt="商品图" mode="aspectFit" />
                  </div>
                  <div class="goods-det">
                    <div class="goods-det-top">
                      <div class="goods-name">{{ goodsItem.goodsName }}</div>
                    </div>
                    <div class="operate-wrap">
                      <div class="goods-price">￥{{ goodsItem.price }}</div>
                      <div 
                        class="operate-icon-wrap" 
                        @click.stop="operateFn(goodsItem, idx)">
                        <div class="operate-icon">
                          <i
                            class="iconfont"
                            :class="[ idx == operateIndex ? 'iconcaozuojihuo' : 	'iconcaozuo']"
							style="font-size:38rpx;"
                          ></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="goods-list-bottom flex-center-between">
                  <div>已售: {{ goodsItem.sold }}</div>
                  <div>库存: {{ goodsItem.stock == -1 ? '充足' : goodsItem.stock }}</div>
                  <div>浏览: {{ goodsItem.viewNum }}</div>
                </div>
              </div>
            </div>
            <!-- 操作 -->
            <operate-module
              @clickFn="operateList"
              v-if="operateShow"
              :top="operateTop"
              :right="30"
              :btnData="btnData"
            />
          </block>
          <block v-else>
            <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
          </block>
          <!--内容部分 end -->
        </scroll-view>
      </block>
    </div>
    <!-- 底部 -->
    <div class="app-footer">
      <div class="btn-list other-btn" @click.stop="changeOperateShowFn">
        <i
          class="iconfont iconxiala"
          :class="[operateBottomShow ? 'animate-open' : 'animate-close']"
        ></i>
        <span>更多设置</span>
      </div>
      <div class="btn-list">
        <button class="admin-button-com blue" @click="pageTo('/admin/goodsManage/add')">新增商品</button>
      </div>
    </div>
    <!-- 操作弹窗 -->
    <operate-line-module
      v-if="operateBottomShow"
      :btnData="btnBottomData"
      @clickFn="operateLine"
      :bottom="120"
      :right="528"
    />
    <!-- 删除提示 -->
    <modal-module
      :show="delModal"
      :maskClosable="false"
      @cancel="modalCancel"
      @click="delModalClick"
      content="确定删除该商品吗？"
      color="#333"
      :size="32"
      padding="30rpx 30rpx"
    ></modal-module>
    <kd-entrance></kd-entrance>
  </div>
</template>

<script>
import AppTabs from "@/components/plugin/tabs";
import OperateModule from "@/admin/home/components/module/operate";
import OperateLineModule from "@/admin/home/components/module/operate-line";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ModalModule from "@/components/plugin/modal";
// api
import {
  categoryListB,
  getCategoryGoodsB,
  delB,
  changeStatusB
} from "@/api/goods";
import { list } from "@/mixins";
export default {
  name: "goods-manage-list",
  components: {
    AppTabs,
    OperateLineModule,
    OperateModule,
    AppWrapperEmpty,
    ModalModule
  },
  mixins: [list],
  data() {
    return {
      // tabs
      tabIndex: 0,
      tabs: [
        {
          name: "上架"
        },
        {
          name: "下架"
        }
      ],
      // 中间
      tabbar: [],
      height: 0, // scroll-view高度
      currentTab: 0, // 预设当前项的值
      scrollTop: 0, // tab标题的滚动条位置
      form: {
        categoryId: ""
      },
      // 删除弹窗
      delModal: false,
      // 操作菜单
      operateData: {},
      operateShow: false,
      operateIndex: null,
      operateTop: 0,
      // 底部操作
      operateBottomShow: false,
      btnBottomData: [
        {
          name: "分类管理",
            click: () => this.$util.pageTo("/admin/goodsManage/category")
        },
        {
          name: "涨价设置",
          click: () => this.$util.pageTo("/admin/goodsManage/price-increase")
        },
        {
          name: "运费设置",
          click: () => this.$util.pageTo("/admin/goodsManage/freight")
        }
      ]
    };
  },
  computed: {
    btnData() {
      let self = this;
      return [
        {
          text: "编辑",
          icon: "iconbianji",
          click: function() {
            self.$util.pageTo({
              url: "/admin/goodsManage/add",
              query: {
                type: self.tabIndex,
                id: self.operateData.id
              }
            });
          }
        },
        {
          text: self.operateData.status == 1 ? "下架" : "上架",
          icon: self.operateData.status == 1 ? "iconxiajia" : "iconqiyong",
          click: () => {
            self.changeStatusFn();
          }
        },
        {
          text: "删除",
          icon: "iconshanchu1",
          click: () => {
            self.delModal = true;
          }
        }
      ];
    }
  },
  onLoad: function() {
    if (this.$util.isLogin()) {
      setTimeout(() => {
        uni.getSystemInfo({
          success: res => {
            this.height = res.windowHeight - 90;
            this.sInit();
          }
        });
      }, 50);
    }
  },
  methods: {
    operateLine(index) {
      if (index === 0) {
        this.$util.pageTo("/admin/goodsManage/category");
      } else if (index === 1) {
        this.$util.pageTo("/admin/goodsManage/price-increase");
      } else{

      }
    },
    operateList(index) {
      if (index === 0) {
        this.$util.pageTo({
          url: "/admin/goodsManage/add",
          query: {
            type: this.tabIndex,
            id: this.operateData.id
          }
        });
      } else if (index === 1) {
        this.changeStatusFn();
      } else if (index === 2) {
        this.delModal = true;
      }
    },
    async sInit() {
      this._getClass();
      this._list();
    },
    // 分类
    _getClass() {
      categoryListB().then(res => {
        this.tabbar = res.data;
      });
    },
    // 列表
    _list() {
      return getCategoryGoodsB({
        status: this.tabIndex == 0 ? 1 : 0,
        ...this.form
      }).then(res => {
        this.completes(res);
      });
    },
    // tabs
    change(e) {
      if (this.tabIndex == e.index) {
        return false;
      } else {
        this.tabIndex = e.index;
        this.operateCloseFn();
        this.resetList();
        this._list();
      }
    },
    // 操作按钮
    operateFn(item, index) {
      if (this.operateIndex == index) {
        this.operateCloseFn();
      } else {
        this.operateData = item;
        this.operateData.index = index;
        this.operateIndex = index;
        this.operateTop = (index + 1) * 224 - 20;
        this.operateShow = true;
      }
    },
    // 关闭操作按钮
    operateCloseFn() {
      this.operateData = {};
      this.operateIndex = null;
      this.operateShow = false;
    },
    // 点击标题切换当前页时改变样式
    swichNav(e, item) {
      let cur = e.currentTarget.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        this.currentTab = cur;
        this.form.categoryId = item.id;
        this.resetList();
        this._list();
        // this.checkCor()
      }
    },
    // 判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor() {
      let that = this;
      // 这里计算按照实际情况进行修改，动态数据要进行动态分析
      // 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
      // 数据很多可以多次if判断然后进行滚动距离计算即可
      if (that.currentTab > 7) {
        that.scrollTop = 500;
      } else {
        that.scrollTop = 0;
      }
    },
    changeOperateShowFn() {
      this.operateBottomShow = !this.operateBottomShow;
    },
    changeStatusFn() {
      let status = this.operateData.status == 1 ? 0 : 1;
      changeStatusB({
        id: this.operateData.id,
        status: status
      }).then(res => {
        this.list.data[this.operateIndex].status = status;
        this.operateCloseFn();
        this.$msg("操作成功!");
      });
    },
    // delModal
    modalCancel() {
      this.delModal = false;
    },
    delModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        delB({ id: this.operateData.id }).then(res => {
          this.modalCancel();
          this.operateCloseFn();
          this.$msg("删除成功!");
          this.resetList();
          this._list();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.app-content {
  min-height: calc(100vh - 80px);
  padding-top: 80px;
  background-color: #fff;
  // padding-bottom: 100px;
}

page {
  background: #fff;
}

/* 左侧导航布局 start*/

/* 隐藏scroll-view滚动条*/

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.tab-view {
  /* height: 100%; */
  width: 200upx;
  position: fixed;
  left: 0;
  z-index: 10;
  background-color: #f0f2f6;

  .tab-bar-item {
    width: 200upx;
    height: 110upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26upx;
    color: #444;
    font-weight: 400;
  }

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

  .active::before {
    content: "";
    position: absolute;
    border-left: 8upx solid $mainColor;
    height: 100%;
    left: 0;
  }
}

/* 左侧导航布局 end*/

.right-box {
  width: 100%;
  position: fixed;
  padding-left: 220upx;
  box-sizing: border-box;
  left: 0;
  .page-view {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding-bottom: env(safe-area-inset-bottom);
    .goods-list {
      margin: 40px 0;
      .goods-list-top {
        position: relative;
        @include disFlex(flex-start, flex-start);
      }
      .goods-list-bottom {
        width: 74%;
        margin-top: 16px;
        color: $fontColor2;
      }
      .img-blo {
        width: 130px;
        height: 130px;
        margin-right: 20px;
        & > img {
          height: 100%;
          width: 100%;
        }
      }
      .goods-det {
        width: calc(100% - 150px);
        // padding-top: 18px;
        font-size: 28px;
        .operate-wrap {
          @include disFlex(flex-end, space-between);
        }
        .operate-icon-wrap {
          left: -20px;
        }
        .goods-name {
          margin-bottom: 10px;
        }
        .goods-sales {
          color: $fontColor3;
          font-size: 24px;
        }
        .goods-price {
          margin-top: 50px;
          color: #ff2842;
          font-weight: bold;
        }
      }
    }
  }
}
// 底部
.app-footer {
  justify-content: space-between;
  .btn-list {
    width: 33.33%;
    &:first-child {
      border-left: 0;
    }
    .admin-button-com {
      width: 160px;
      padding-top: 16px;
      padding-bottom: 16px;
    }
  }
  .other-btn {
    color: $fontColor2;
    .iconfont {
      font-size: 24px;
      color: $fontColor3;
      transform: scale(0.4);
    }
  }
}
</style>