<script setup lang="ts">
import { onMounted, ref } from "vue";
import { storeListApi, userFreeTrialApi, productTitleApi, productStatusApi } from "@/api/shop.ts";
import useUserStore from '@/stores/modules/user';
import { ElMessage } from "element-plus";
import add from "./component/add.vue";

const orderList = ref([]);
const userStore = useUserStore();

const where = ref({
  page: 1,
  limit: 15,
  type: 1,
  keyword: "",
  staff_id: userStore.userInfo.service.service_id,
});

const loading = ref(false);
const total = ref(0);



const productTitle = ref([]);
const getProductTitleApi = () => {
  productTitleApi(userStore.userInfo.service.mer_id).then((res) => {
    productTitle.value = res.data;
  });
};
getProductTitleApi()

const getShopList = (loadmore = false) => {
  loading.value = true;
  if(loadmore) getProductTitleApi();
  storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
    orderList.value = res.data.list;
    total.value = res.data.count;
    loading.value = false;
  });
};

getShopList();

const prevClick = (e) => {
  where.value.page = e;
  getShopList();
};

const nextClick = (e) => {
  where.value.page = e;
  getShopList();
};

const currentChange = (e) => {
  where.value.page = e;
  getShopList();
};

const dialogFormVisible = ref(false);
const form = ref({});
const edit = (row) => {
  form.value = row;
  dialogFormVisible.value = true;
};

const submitUpdate = () => {
  let obj = {
    attr: form.value.attr || [],
    attrValue: form.value.attrValue,
    mer_cate_id: form.value.merCateId || [],
    spec_type: form.value.spec_type,
    is_stock: 1,
  };
  userFreeTrialApi(form.value.product_id, obj)
    .then((res) => {
      ElMessage({
        message: res.message,
        type: "success",
      });
      dialogFormVisible.value = false;
      getShopList();
    })
    .catch((err) => {
      ElMessage({
        message: err,
        type: "error",
      });
    });
};

const activeIndex = ref('1');

const handleSelect = (key) => {
  where.value.type = key;
  where.value.page = 1;
  getShopList();
};

const updateShow = (row) => {
  productStatusApi(userStore.userInfo.service.mer_id, row.product_id, {
    status: row.is_show ? 1 : 0
  }).then(res=>{
    ElMessage.success(res.message);
    getShopList(true);
  })
}

const addRef = ref(null);
const showAdd = (type='add', data)=>{
  addRef.value.show(type, data);
}

</script>

<template>
  <div v-loading="loading" element-loading-text="加载中" class="my-shop">
    <el-form :inline="true">
      <el-form-item label="关键字:">
        <el-input v-model="where.keyword" placeholder="请输入关键字搜索" style="width: 20rem;" clearable @clear="getShopList(true)" @keydown.enter="getShopList(true)"/>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="getShopList(true)">搜索</el-button>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="showAdd('add')">新增</el-button>
      </el-form-item>
    </el-form>

    <el-menu
      :default-active="activeIndex"
      class="el-menu-top"
      mode="horizontal"
      @select="handleSelect"
    >
      <el-menu-item
        :index="item.type+''"
        v-for="(item, index) in productTitle"
        :key="index"
        >{{ `${item.name}(${item.count})` }}</el-menu-item
      >
    </el-menu>

    <el-table :data="orderList" style="width: 100%">
      <el-table-column prop="product_id" label="ID" width="100" />
      <el-table-column prop="image" label="图片" width="120">
        <template #default="scope">
          <el-image
            loading="lazy"
            style="width: 60px; height: 60px"
            :src="scope.row.image"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="store_name" label="商品名称" width="500" />
      <el-table-column prop="price" label="售价" />
      <el-table-column prop="stock" label="库存" />
      <el-table-column label="上/下架" v-if="where.type<=2" width="100">
        <template #default="scope">
          <el-switch
            v-model="scope.row.is_show"
            :active-value="1"
            inline-prompt
            active-text="上架"
            inactive-text="下架"
            @click="updateShow(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column label="商品状态" v-if="where.type<=4" width="100">
        <template #default="scope">
          <span v-if="!scope.row.is_used" style="color: #ff4a00">平台关闭</span>
          <span v-else-if="scope.row.is_show">上架显示</span>
          <span v-else>下架</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button
            type="primary"
            v-if="where.type != 5"
            link
            @click="edit(scope.row)"
            >修改库存</el-button
          >
          <el-button
            type="primary"
            v-if="where.type != 1 && where.type != 5"
            link
            @click="showAdd('edit', scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="where.limit"
      layout="prev, pager, next"
      :total="total"
      @prev-click="prevClick"
      @next-click="nextClick"
      @current-change="currentChange"
    />

    <el-dialog v-model="dialogFormVisible" title="编辑商品库存" width="800">
      <el-table
        v-if="form.attrValue"
        :data="form.attrValue"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="image" label="图片" width="180">
          <template #default="scope">
            <el-image
              loading="lazy"
              style="width: 5rem; height: 5rem"
              :src="scope.row.image || form.image"
            />
          </template>
        </el-table-column>
        <el-table-column prop="sku" label="名称" width="180">
          <template #default="scope">
            <span>{{ scope.row.sku || form.store_name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" />
        <el-table-column prop="stock" label="库存">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.stock"
              step-strictly
              :min="0"
              :step="1"
            />
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitUpdate"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <add ref="addRef" @reload="getShopList(true)"></add>
  </div>
</template>

<style lang="scss" scoped>
.my-shop {
  background-color: #fff;
  border-radius: 1.2rem;
  box-sizing: border-box;
  padding: 1rem;
  overflow-y: scroll;
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
  width: 5px; /* 设置滚动条的宽度 */
}

/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
  background-color: #f1f1f1; /* 设置轨道的背景色 */
  margin: 20px 0;
}

/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
  background-color: #ccc; /* 设置滑块的背景色 */
  border-radius: 5px; /* 设置滑块的圆角 */
}

/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
.el-menu--horizontal {
  height: 2.5rem;
}
.el-form--inline .el-form-item{
  margin-right: 1rem;
}
</style>
