<template>
  <div>
    <el-dialog title="商品管理" v-model="dialogVisible" width="60%">
      <div>
        <div class="header">
          <el-button type="primary" :icon="Plus" @click="handleAdd"
            >增加</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            confirmButtonText="确定"
            cancelButtonText="取消"
            @confirm="handleDelete"
          >
            <template #reference>
              <el-button type="danger" :icon="Delete">批量删除</el-button>
            </template>
          </el-popconfirm>
        </div>
        <div>
          <el-table
            :data="state.tableData"
            style="width: 100%"
            ref="multipleTable"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column prop="redirectUrl" label="跳转链接">
            </el-table-column>
            <el-table-column prop="rank" label="排序值" width="80px">
            </el-table-column>
            <el-table-column prop="goodsId" label="商品编号"> </el-table-column>
            <el-table-column prop="createTime" label="添加时间">
            </el-table-column>
            <el-table-column prop="" label="操作">
              <template #default="{ row }">
                <el-button
                  type="primary"
                  link
                  class="mr-4"
                  @click="handleEdit(row)"
                  >修改</el-button
                >
                <el-popconfirm
                  title="确定删除吗？"
                  confirmButtonText="确定"
                  cancelButtonText="取消"
                  @confirm="handleDelete([row.id])"
                >
                  <template #reference>
                    <el-link type="danger">删除</el-link>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            class="mt-4 justify-end"
            background
            layout="prev, pager, next"
            :total="state.total"
            :page-size="query.pageSize"
            @current-change="changePage"
          />
        </div>
      </div>
    </el-dialog>

    <DialogEditRecommendGood
      v-model:show="state.visibleEditRecommendGood"
      @success="getList()"
      :configId="props.id"
      :id="rowData.id"
    ></DialogEditRecommendGood>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import DialogEditRecommendGood from "./DialogEditRecommendGood.vue";
import { request } from "@/utils";
import { ElMessage } from "element-plus";

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  id: {
    default: undefined
  }
});
const emits = defineEmits(["update:show"]);
const dialogVisible = computed({
  get() {
    return props.show;
  },
  set(n) {
    emits("update:show", n);
  }
});

watch(
  () => dialogVisible.value,
  n => {
    if (n) {
      getList();
    } else {
    }
  }
);
const state = reactive({
  tableData: [],
  total: 0,
  visibleEditRecommendGood: false,
  multipleSelection: [] // 选中项
});
const rowData = ref({});
const query = ref({
  page: 1,
  pageSize: 15
});
const changePage = page => {
  query.value.page = page;
  getList();
};
const getList = () => {
  if (!props.id) return;
  request
    .get("/mallService/mechanism/indexConfigs/goods", {
      params: {
        configId: props.id,
        ...query.value
      }
    })
    .then(resp => {
      state.tableData = resp.data.list;
      state.total = resp.data.total;
    });
};
const handleAdd = () => {
  rowData.value = {};
  state.visibleEditRecommendGood = true;
};

const handleEdit = row => {
  rowData.value = row;
  state.visibleEditRecommendGood = true;
};

// 选中之后的change方法，一旦选项有变化，就会触发该方法。
const handleSelectionChange = val => {
  state.multipleSelection = val;
};
const handleDelete = ids => {
  let params = [];
  if (!ids) {
    params = state.multipleSelection.map(i => i.carouselId);
  } else {
    params = ids;
  }
  if (!params.length) {
    ElMessage.error("请选择项");
    return;
  }
  request
    .post("/mallService/mechanism/indexConfigs/goods/delete", {
      ids: params
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    });
};
</script>
