<template>
  <div class="app-container">
    <!-- 列表 -->
    <!-- 搜索 -->
    <page-search
      ref="searchRef"
      :search-config="searchConfig"
      @query-click="newHandleQueryClick"
      @reset-click="handleResetClick"
    />
    <!-- 统计 -->
    <data-tongji :data="gongjiData"></data-tongji>
    <!-- 列表 -->
    <page-content
      ref="contentRef"
      :content-config="contentConfig"
      @add-click="handleAddClick"
      @edit-click="handleEditClick"
      @export-click="handleExportClick"
      @search-click="handleSearchClick"
      @toolbar-click="handleToolbarClick"
      @operat-click="handleOperatClick"
      @filter-change="handleFilterChange"
    >
      <template #status="scope">
        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
        </el-tag>
      </template>
      <template #goods="scope">
        <div class="goodslang">
          <div class="goods-list">
            <el-button
              v-for="item in scope.row.productList"
              @click="toGoods(item.id)"
              :key="item.productId"
              type="text"
            >
              {{ item.name }}
            </el-button>
            <span v-if="scope.row.productList.length > 1">,</span>
          </div>
          <el-dropdown trigger="click" v-if="scope.row.productList.length > 1" @command="toGoods">
            <span class="el-dropdown-link" style="color: blue">
              <el-icon><CaretBottom /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  class="clearfix"
                  v-for="item in scope.row.productList"
                  :key="item.id"
                  :command="item.id"
                >
                  {{ item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </template>

      <template #options="scope">
        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
      </template>
      <template #state="scope">
        <el-tag :type="returnStateType(scope.row[scope.prop])">
          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
        </el-tag>
      </template>
      <template #mobile="scope">
        <el-text>{{ scope.row[scope.prop] }}</el-text>
        <copy-button
          v-if="scope.row[scope.prop]"
          :text="scope.row[scope.prop]"
          style="margin-left: 2px"
        />
      </template>
      <template #operate="scope">
        <div>
          <el-button @click="refAddHaocaiOpen(scope.row)" type="primary" link>编辑</el-button>
          <el-button @click="refAddHaocaiTakinShow(scope.row)" link type="primary">
            耗材盘点
          </el-button>
        </div>
      </template>
    </page-content>
    <!-- 耗材添加编辑 -->
    <add-haocai ref="refAddHaocai" @refresh="refresh"></add-haocai>
    <!-- 耗材盘点 -->
    <addConsTakin ref="refAddHaocaiTakin" @success="refresh"></addConsTakin>
  </div>
</template>

<script setup lang="ts">
import addHaocai from "./components/add-haocai.vue";
import dataTongji from "./components/DataStatistics.vue";
import addConsTakin from "./components/addConsTakin.vue";
import consApi from "@/api/product/cons";
import type { IObject, IOperatData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import contentConfig from "./config/content";
import editModalConfig from "./config/edit";
import searchConfig from "./config/search";
import { returnOptionsLabel } from "./config/config";
const router = useRouter();
const {
  searchRef,
  contentRef,
  editModalRef,
  handleQueryClick,
  handleResetClick,
  handleSubmitClick,
  handleExportClick,
  handleSearchClick,
  handleFilterChange,
} = usePage();

function toGoods(id: number | string) {
  router.push({ path: "/product/index", query: { id: id } });
}

//统计数据
const gongjiData = reactive({ totalRow: 0 });
function getTongji(params: IObject | undefined) {
  consApi.statistics(params).then((res) => {
    Object.assign(gongjiData, res);
  });
}

function newHandleQueryClick(e: IObject | undefined) {
  const filterParams = contentRef.value?.getFilterParams();
  contentRef.value?.fetchPageData({ ...e, ...filterParams }, true);
  getTongji(e);
}

watch(
  () => contentRef.value?.pagination.total,
  (newval) => {
    gongjiData.totalRow = newval as number;
  }
);

//耗材盘点
const refAddHaocaiTakin = ref();
function refAddHaocaiTakinShow(item: any) {
  refAddHaocaiTakin.value.show(item);
}

function refresh() {
  console.log("refresh");
  contentRef.value?.fetchPageData();
  getTongji(undefined);
}
const refAddHaocai = ref();
function refAddHaocaiOpen(item: any) {
  refAddHaocai.value.open(item);
}
// 新增
async function handleAddClick() {
  refAddHaocaiOpen(undefined);
}
// 编辑
async function handleEditClick(row: IObject) {
  editModalRef.value?.handleDisabled(false);
  editModalRef.value?.setModalVisible();
  console.log({ ...row });
  editModalRef.value?.setFormData({ ...row, url: [row.url] });
}
// 其他工具栏
function handleToolbarClick(name: string) {
  console.log(name);
  if (name === "category") {
    router.push({ path: "/inventory/classification" });
    return;
  }
  if (name == "gongyinsahng") {
    router.push({ path: "/inventory/supplier" });
    return;
  }
  if (name == "ruku") {
    router.push({ path: "/inventory/operation_in" });
    return;
  }
  if (name == "chuku") {
    router.push({ path: "/inventory/operation_in", query: { type: "out" } });
    return;
  }
}
// 其他操作列
async function handleOperatClick(data: IOperatData) {
  console.log(data);
  if (data.name === "detail") {
    return;
  }
  if (data.name === "printer") {
  }
}

function returnStateType(status: string) {
  if (status === "unpaid") {
    return "warning";
  }
  if (status === "done") {
    return "primary";
  }
  if (status === "cancelled") {
    return "info";
  }
  if (status === "refund") {
    return "danger";
  }
}

onMounted(() => {
  getTongji({});
});
</script>

<style scoped lang="scss">
.goodslang {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .goods-list {
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
  }

  :deep(.goods-list .el-button--text span) {
    display: block;
    text-align: left;
  }

  :deep(.goods-list .el-button--text) {
    white-space: break-spaces;
  }
}
</style>
