<template>
  <div class="app-container">
    <div class="head-container">
      <div class="flex">
        <el-input v-model="query.name" size="small" clearable placeholder="请输入商品名称" @keyup.enter.native="getTableData"
          style="width: 200px;" />
        <el-select v-model="query.categoryId" placeholder="请选择商品分类">
          <el-option :label="item.name" :value="item.id" v-for="item in categorys" :key="item.id" />
        </el-select>
        <el-select v-model="query.typeEnum" placeholder="请选择商品规格">
          <el-option :label="item.label" :value="item.typeEnum" v-for="item in typeEnums" :key="item.typeEnum" />
        </el-select>
        <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd HH:mm:ss">
        </el-date-picker>
        <el-button type="primary" @click="queryHandle">查询</el-button>
        <el-button @click="resetHandle">重置</el-button>
        <el-button @click="showStockWarningHandle">库存预警：{{ warnLine }}</el-button>
      </div>
    </div>
    <div class="head-container">
      <div class="header_wrap">
        <!-- <router-link :to="{ name: 'add_shop' }" > -->
        <el-button type="primary" icon="el-icon-plus" @click="toPath('/product/add_shop')">添加商品</el-button>
        <!-- </router-link> -->
        <el-select v-model="tableData.sort" placeholder="排序" @change="getTableData">
          <el-option value="createdAt,desc" label="创建时间"></el-option>
          <el-option value="stockNumber,asc" label="数量由低到高"></el-option>
        </el-select>
      </div>
    </div>
    <div class="head-container">
      <div class="data_wrap">
        <div class="item">
          <div class="icon">
            <i class="el-icon-pie-chart"></i>
          </div>
          <div class="info">
            <div class="row">
              <span>商品种数</span>
              <!-- @click="showStockHistory('stockNumber')" -->
              <span>{{ tableData.total || 0 }}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <i class="el-icon-sort-up"></i>
          </div>
          <div class="info">
            <div class="row">
              <span>增加数量:</span>
              <span class="link" @click="showStockHistory('addCountNumber')">{{ countInfo.addCountNumber || 0 }}</span>
            </div>
            <div class="row">
              <div class="row">
                <span>手动增加:</span>
                <span class="link" @click="showStockHistory('addNumber')">{{ countInfo.addNumber || 0 }}</span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span>退货：</span>
                <span class="link" @click="showStockHistory('refundNumber')">{{ countInfo.refundNumber || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="icon">
            <i class="el-icon-sort-down"></i>
          </div>
          <div class="info">
            <div class="row">
              <span>减少数量:</span>
              <span class="link" @click="showStockHistory('subCountNumber')">{{ countInfo.subCountNumber || 0 }}</span>
            </div>
            <div class="row">
              <div class="row">
                <span>手动减少:</span>
                <span class="link" @click="showStockHistory('subNumber')">{{ countInfo.subNumber || 0 }}</span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span>销售量：</span>
                <span class="link" @click="showStockHistory('saleNumber')">{{ countInfo.saleNumber || 0 }}</span>
              </div>
              <div class="line"></div>
              <div class="row">
                <span>报损：</span>
                <span class="link" @click="showStockHistory('lossNumber')">{{ countInfo.lossNumber || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="head-container" id="table_drag">
      <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="key"
        :tree-props="{ children: 'skuList', hasChildren: 'hasChildren' }">
        <el-table-column width="50px"></el-table-column>
        <el-table-column label="商品信息">
          <template v-slot="scope">
            <div class="shop_info">
              <el-image :src="scope.row.coverImg"
                style="width: 50px;height: 50px;border-radius: 4px;background-color: #efefef;"
                v-if="scope.row.coverImg">
                <div class="img_error" slot="error">
                  <i class="icon el-icon-document-delete"></i>
                </div>
              </el-image>
              <div class="info">
                <span>{{ scope.row.name }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="售价">
          <template v-slot="scope">
            <el-button type="text" v-if="scope.row.typeEnum == '多规格' && scope.row.skuList.length">
              {{ scope.row.lowPrice }}
            </el-button>
            <el-button type="text" v-else @click="changePrice('salePrice', scope.row,)">
              ￥{{ scope.row.lowPrice }}
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="商品规格" prop="typeEnum"></el-table-column>
        <el-table-column label="库存">
          <template v-slot="scope">
            <el-button type="text" v-if="scope.row.typeEnum" @click="changePrice('stockNumber', scope.row,)">
              {{ scope.row.stockNumber }}
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="耗材信息" width="200">
          <template v-slot="scope">
            <div class="cons_wrap" v-if="scope.row.typeEnum">
              <div v-if="scope.row.conInfos && scope.row.conInfos.length">
                <el-button type="text" @click="showBindCons(scope.row)">
                  <span class="cons_span">{{ scope.row.conInfos | conInfosFilter }}</span>
                  <i class="el-icon-edit"></i>
                </el-button>
              </div>
              <el-button v-else type="text" @click="showBindCons(scope.row)">
                绑定
                <i class="el-icon-edit"></i>
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上架">
          <template v-slot="scope">
            <!-- <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowCash">收银端</el-button>
            <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowMall">小程序</el-button>
            <el-button type="text" icon="el-icon-edit"
              v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</el-button> -->
            <el-switch v-model="scope.row.isGrounding" :active-value="1" :inactive-value="0"
              @change="changeGrounding($event, scope.row, 'grounding')"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="售罄">
          <template v-slot="scope">
            <!-- <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowCash">收银端</el-button>
            <el-button type="text" icon="el-icon-edit" v-if="scope.row.isShowMall">小程序</el-button>
            <el-button type="text" icon="el-icon-edit"
              v-if="!scope.row.isShowCash && !scope.row.isShowMall">未上架</el-button> -->
            <el-switch v-model="scope.row.isPauseSale" :active-value="1" :inactive-value="0"
              @change="changeGrounding($event, scope.row, 'pauseSale')"></el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="排序" prop="sort" sortable />
        <el-table-column label="更新时间" prop="createdAt" width="150">
          <template v-slot="scope">
            {{ dayjs(scope.row.createdAt).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="设为热门" prop="createdAt">
          <template v-slot="scope">
            <el-switch v-model="scope.row.isHot" :active-value="1" :inactive-value="0"
              @change="changeHot($event, scope.row)"></el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="150">
          <template v-slot="scope">
            <!-- <el-button type="text" icon="el-icon-rank" v-if="isPcBowser">排序</el-button> -->
            <!-- <router-link :to="{ path: '/product/add_shop', query: { goods_id: scope.row.id } }"
              style="margin-left: 20px !important;">
              <el-button type="text" icon="el-icon-edit">编辑</el-button>
            </router-link> -->
            <div style="display: flex;gap: 10px;">
              <el-button type="text" icon="el-icon-edit" @click="toPath('/product/add_shop', scope.row)"
                v-if="scope.row.typeEnum">编辑</el-button>
              <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
                <el-button type="text" icon="el-icon-delete" slot="reference">删除</el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
        :page-size="tableData.size" @current-change="paginationChange"
        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!-- 绑定耗材 -->
    <BindCons ref="bindCons" @refundChange="refundChange" />
    <!-- 商品库存记录 -->
    <StockHistory ref="stockHistory" :query="query" />
    <!-- 编辑售价、库存 -->
    <el-dialog :title="editorEumn[editorForm.key]" :visible.sync="editorVisable" :show-close="false" width="300px">
      <el-form :model="editorForm">
        <el-form-item>
          <el-input-number v-model="editorForm.value" :min="0" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editorVisable = false">取 消</el-button>
        <el-button type="primary" :loading="editorFormLoading" @click="editorConfirmChange">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 库存预警值 -->
    <el-dialog title="修改库存预警" :visible.sync="showStockWarning" :show-close="false" width="300px">
      <el-form :model="editorForm">
        <el-form-item label="库存预警">
          <el-input-number v-model="warnLineValue" :min="0" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showStockWarning = false">取 消</el-button>
        <el-button type="primary" :loading="warnLineLoading" @click="stockWarnLineConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs'
import dayjs from 'dayjs'
import settings from '@/settings'
import BindCons from './components/bindCons.vue'
import StockHistory from './components/stockHistory.vue'
import { tbProductListV2, tbShopCategoryGet, tbProductDelete, tbProductIsHot, upProSort, updateProductData, tbProductStockDetailStockCount, stockWarnLine } from '@/api/shop'
import { hasPermission } from '@/utils/limits.js'

export default {
  name: 'product',
  components: {
    BindCons,
    StockHistory
  },
  data() {
    return {
      dayjs,
      query: {
        productId: '',
        name: '',
        categoryId: '',
        typeEnum: '',
        createdAt: []
      },
      categorys: [],
      typeEnums: settings.typeEnum,
      tableData: {
        sort: 'createdAt,desc',
        data: [],
        page: 0,
        size: 30,
        loading: false,
        total: 0
      },
      editorEumn: {
        grounding: '上下架',
        pauseSale: '商品',
        stockNumber: '库存数量',
        salePrice: '售价'
      },
      editorVisable: false,
      editorFormLoading: false,
      editorForm: {
        shopId: localStorage.getItem('shopId'),
        isSku: '',
        id: '',
        key: '',
        value: ''
      },
      countInfo: {},
      showStockWarning: false, // 显示库存预警值
      warnLineLoading: false,
      warnLine: 0,
      warnLineValue: 0
    }
  },
  filters: {
    conInfosFilter(arr) {
      let newarr = arr.map(item => item.conName)
      return newarr.join('、')
    }
  },
  async mounted() {
    if (this.$route.query.productId) {
      this.query.productId = this.$route.query.productId
    }

    await this.tbShopCategoryGet()
    await this.getTableData()
    if (this.isPcBowser) {
      this.$nextTick(() => {
        this.tableDrag()
      })
    }

    this.tbProductStockDetailStockCount()
  },
  methods: {
    // 是否允许修改商品
    async toPath(path, row) {
      let res = await hasPermission('允许修改商品');
      if (!res) { return; }
      let query = {};
      if (row) {
        query.goods_id = row.id;
      }
      this.$router.push({ path: path, query: query })
    },
    // 显示修改商品警告线
    showStockWarningHandle() {
      this.showStockWarning = true
      this.warnLineValue = this.warnLine
    },
    // 修改商品警告线
    async stockWarnLineConfirm() {
      try {
        this.warnLineLoading = true
        const res = await stockWarnLine({
          shopId: localStorage.getItem('shopId'),
          warnLine: this.warnLineValue
        })
        this.warnLineLoading = false
        this.showStockWarning = false
        this.$message.success('修改成功')

        this.getTableData()
      } catch (error) {
        this.warnLineLoading = false
        console.log(error);
      }
    },
    // 显示库存记录
    showStockHistory(key) {
      this.$refs.stockHistory.show(key)
    },
    // 库存统计列表 统计
    async tbProductStockDetailStockCount() {
      try {
        const res = await tbProductStockDetailStockCount({
          shopId: localStorage.getItem('shopId'),
          productName: this.query.name,
          categoryId: this.query.categoryId,
          startTime: this.query.createdAt[0] || '',
          endTime: this.query.createdAt[1] || ''
        })
        this.countInfo = res
      } catch (error) {
        console.log(error);
      }
    },
    // 编辑退款是否退回库存
    refundChange(e) {
      let row = this.tableData.data.find(item => item.id == e.id)

      if (row.isRefundStock != e.isRefundStock) {
        this.editorForm.key = 'refundStock'
        this.editorForm.id = e.id
        this.editorForm.isSku = !e.typeEnum
        this.editorForm.value = e.isRefundStock

        this.editorConfirmChange()
      }

      this.getTableData()
    },
    async changeGrounding(event, row, key) {
      let text;
      if (key == 'grounding') { text = "允许上下架商品" }
      if (key == 'pauseSale') { text = "允许售罄商品" }
      let res = await hasPermission(text);
      if (!res) {
        if (key == 'grounding') { row.isGrounding = (event == 0 ? 1 : 0); }
        if (key == 'pauseSale') { row.isPauseSale = (event == 0 ? 1 : 0); }
        return;
      }
      this.editorForm.key = key
      this.editorForm.id = row.id
      this.editorForm.isSku = !row.typeEnum
      this.editorForm.value = event

      this.editorConfirmChange()
    },
    // 确认修改
    async editorConfirmChange() {
      try {
        this.editorFormLoading = true
        const res = await updateProductData([this.editorForm])
        this.editorFormLoading = false
        // this.$message.success('修改成功')
        this.editorVisable = false
        this.getTableData()
      } catch (error) {
        console.log(error);
        this.editorFormLoading = false
      }
    },
    // 修改库存
    async changePrice(type, row) {
      let res = await hasPermission('允许修改商品库存');
      if (!res) { return; }
      this.editorVisable = true
      this.editorForm.key = type
      this.editorForm.id = row.id
      this.editorForm.isSku = !row.typeEnum

      switch (type) {
        case 'salePrice':
          // 修改售价
          this.editorForm.value = row.lowPrice
          break;
        case 'stockNumber':
          // 修改库存
          this.editorForm.value = row.stockNumber
          break;
        default:
          break;
      }
    },
    // 显示绑定耗材
    async showBindCons(item) {
      let res = await hasPermission('允许修改商品');
      if (!res) { return; }
      // console.log(item);
      this.$refs.bindCons.show(item)
    },
    // 选择分类
    queryHandle() {
      localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))
      this.getTableData()
      this.tbProductStockDetailStockCount()
    },
    //表格拖拽
    tableDrag() {
      const el = document.querySelector('#table_drag .el-table__body-wrapper tbody')
      new Sortable(el, {
        animation: 150,
        onEnd: async e => {
          // console.log('拖拽结束===', e);
          if (e.oldIndex == e.newIndex) return
          let oid = this.tableData.data[e.oldIndex].id
          let nid = this.tableData.data[e.newIndex].id
          let ids = this.tableData.data.map(item => item.id)
          try {
            await upProSort({
              strId: oid,
              endId: nid,
              ids: ids
            })
            await this.getTableData()
          } catch (error) {
            console.log(error);
          }
        }
      });
    },
    // 设置热门
    async changeHot(e, row) {
      try {
        this.tableData.loading = true
        await tbProductIsHot({
          isHot: e,
          id: row.id
        })
        this.getTableData()
      } catch (error) {
        console.log(error);
      }
    },
    // 重置查询
    resetHandle() {
      this.query.name = ''
      this.query.categoryId = ''
      this.query.typeEnum = ''
      this.query.productId = ''
      this.query.createdAt = []
      this.tableData.page = 0
      localStorage.setItem('shopIndexQuery', JSON.stringify(this.query))
      this.getTableData()
      this.tbProductStockDetailStockCount()
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1
      this.getTableData()
    },
    // 获取商品列表
    async getTableData() {
      try {
        let localQuery = JSON.parse(localStorage.getItem('shopIndexQuery'))
        if (localQuery != null && localQuery.hasOwnProperty('productId')) {
          // this.query = localQuery
        }

        this.tableData.loading = true
        // console.log(this.query, '调试2')
        const res = await tbProductListV2({
          page: this.tableData.page,
          size: this.tableData.size,
          name: this.query.name,
          categoryId: this.query.categoryId,
          id: this.query.productId,
          type: this.query.typeEnum,
          shopId: localStorage.getItem('shopId'),
          sort: this.tableData.sort,
          createdAt: this.query.createdAt
        })

        this.warnLine = res.warnLine

        res.content.map(item => {
          item.key = item.id
          item.skuList.map(val => {
            val.key = `${item.id}-${val.id}`
          })
        })


        this.tableData.loading = false
        this.tableData.data = res.content
        this.tableData.total = res.totalElements
      } catch (error) {
        console.log(error)
      }
    },
    handleSizeChange(val) {
      this.tableData.size = val
      this.getTableData()
    },
    // 获取商品分类列表
    async tbShopCategoryGet() {
      try {
        const res = await tbShopCategoryGet({
          shopId: localStorage.getItem('shopId'),
          page: 0,
          size: 100,
          sort: 'id'
        })
        this.categorys = res.content
      } catch (error) {
        console.log(error)
      }
    },
    // 删除商品
    async delTableHandle(ids) {
      let res = await hasPermission('允许修改商品');
      if (!res) { return; }
      try {
        await tbProductDelete(ids)
        this.getTableData()
      } catch (error) {
        console.log(error)
      }
    },
  }
}
</script>

<style scoped lang="scss">
.cons_span {
  white-space: break-spaces;
}

.header_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.data_wrap {
  display: flex;
  justify-content: space-between;
  padding: 0 60px;

  .item {
    display: flex;
    align-items: center;
    background-color: #F4F9FF;
    height: 80px;
    padding: 20px;

    .icon {
      width: 37px;
      height: 37px;
      border-radius: 50%;
      background-color: #D4E9FE;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3F9EFF;
      font-size: 20px;
    }

    .info {
      flex: 1;
      display: flex;
      gap: 14px;
      flex-direction: column;
      padding-left: 14px;

      .row {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;

        .line {
          margin: 0 14px;
          height: 20px;
          border-left: 1px solid #DDDFE6;
        }

        span {
          &.link {
            color: #3F9EFF;
            cursor: pointer;

            &:hover {
              text-decoration: underline;
            }
          }

          &:first-child {
            color: #666;
          }
        }
      }
    }
  }
}

.cons_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.handle {
  font-size: 18px;
  color: #999;

  &:hover {
    cursor: grab;
  }
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 8px;
    display: flex;
    flex-direction: column;

    .tag_wrap {
      display: flex;
    }
  }
}
</style>
