<template>
  <div>
    <el-card shadow="never">
      <div>
        <el-button
          type="primary"
          @click="
            () => {
              visibleEditRecommend = true;
              rowData = {};
            }
          "
          >新增</el-button
        >
      </div>
    </el-card>
    <el-card shadow="never" class="mt-2">
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="configName" label="名称"> </el-table-column>
          <el-table-column prop="configRank" label="排序">
            <template #default="{ row }">
              <el-input
                type="primary"
                link
                v-model="row.configRank"
                placeholder=""
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="configName" label="操作" width="230">
            <template #default="{ row }">
              <el-button type="primary" link @click="handleEdit(row)"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="
                  () => {
                    visibleEditRecommendGood = true;
                    rowData = row;
                  }
                "
                >商品管理</el-button
              >
              <el-popconfirm
                title="确定删除吗？"
                confirmButtonText="确定"
                cancelButtonText="取消"
                @confirm="handleDelete(row.configId)"
              >
                <template #reference>
                  <el-button
                    type="danger"
                    v-if="row.configId != tableData[0]?.configId"
                    >删除</el-button
                  >
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="mt-4 justify-end"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="query.pageSize"
          @current-change="changePage"
        />
      </div>
    </el-card>
    <DialogEditRecommend
      v-model:show="visibleEditRecommend"
      @success="onSearch"
      :id="rowData.configId"
    ></DialogEditRecommend>
    <DialogRecommendGood
      v-model:show="visibleEditRecommendGood"
      :id="rowData.configId"
    ></DialogRecommendGood>
  </div>
</template>
<script lang="ts" setup>
import { request } from "@/utils";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import DialogEditRecommend from "./components/DialogEditRecommend.vue";
import DialogRecommendGood from "./components/DialogRecommendGood.vue";
const visibleEditRecommend = ref(false);
const visibleEditRecommendGood = ref(false);
const tableData = ref([]);
const query = ref({
  page: 1,
  pageSize: 10
});
const total = ref(0);
const rowData = ref({});
const onSearch = () => {
  query.value.page = 1;
  getList();
};
const getList = () => {
  request
    .get("/mallService/mechanism/indexConfigs", {
      params: query.value
    })
    .then(resp => {
      tableData.value = resp.data.list;
      total.value = resp.data.total;
    });
};
const changePage = page => {
  query.value.page = page;
  getList();
};
const handleDelete = id => {
  request
    .post("/mallService/mechanism/indexConfigs/delete", {
      ids: [id]
    })
    .then(resp => {
      ElMessage.success(resp.message);
      getList();
    });
};
const handleEdit = row => {
  rowData.value = row;
  visibleEditRecommend.value = true;
};
onMounted(() => {
  onSearch();
});
</script>
