<template>
  <div class="Table">
    <!-- 表格 -->
    <my-table
      @handleExport="handleExport"
      :list="datas.tableData"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
    ></my-table>
    <!-- 分页 -->
    <my-paging
      :pagingConfig="datas.pagingConfig"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    ></my-paging>
    <!-- 其他模板 -->
    <!-- 新增/编辑 -->
    <my-dialog ref="myDialogRef" title="商品销售" @confirm="confirm" width="30%">
      <el-table :data="datas.tableDatas" style="width: 100%">
        <el-table-column prop="productName" label="商品名称" />
        <el-table-column prop="num" label="数量" />
        <el-table-column prop="amount" label="金额" />
      </el-table>
    </my-dialog>
    <!-- 选择图片 -->
    <AddImg ref="addImg" @successEvent="successEvent"></AddImg>
  </div>
</template>
<script setup>
import myTable from "./component/my-table.vue";
import myPaging from "./component/my-paging.vue";
import myDialog from "@/components/mycomponents/myDialog.vue";
import eventBus from "@/utils/eventBus";
import API from "./api";
import { downloadFile } from "@/utils/index";

const datas = reactive({
  tableData: [], // 表格数据
  tableDatas: [],
  title: "新增数据",
  pagingConfig: {
    total: 0, // 总数
    pageSize: 10, // 每页数据数量
    pageNumber: 1, // 当前页码
  },
  DialogForm: {
    // 弹窗表单数据
    name: "",
    telephone: "",
    address: "",
    remark: "",
    images: [],
  },
  rules: {
    name: [
      { required: true, message: "请输入供应商名称", trigger: "blur" },
      { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
    ],
  },
});
const myDialogRef = ref(null);
const ruleFormRef = ref(null);
onMounted(() => {
  getList();
  eventBus.on("search", (res) => {
    getList(res);
  });
});
onBeforeUnmount(() => {
  eventBus.off("search");
});

async function getList(data = {}) {
  const res = await API.getPage({
    page: datas.pagingConfig.pageNumber,
    size: datas.pagingConfig.pageSize,
    ...data,
  });
  datas.tableData = res.records;
  datas.pagingConfig.total = res.totalRow;
  datas.pagingConfig.pageSize = res.pageSize;
  datas.pagingConfig.pageNumber = res.pageNumber;
}
function add() {
  if (datas.DialogForm.id) {
    rest();
  }
  datas.title = "新增数据";
  myDialogRef.value.open();
}
async function handleEdit(row) {
  datas.title = "查看数据";
  const res = await API.getinfo(row.id);
  datas.tableDatas = res;
  // datas.DialogForm = res;
  // 有图片
  // datas.DialogForm.goodsImageUrl = res.goodsImageUrl.split(',')
  myDialogRef.value.open();
}
async function confirm() {
  myDialogRef.value.close();
}
// 重置
function rest() {
  datas.DialogForm = { sort: 1, images: [] };
}
async function handleDelete(id) {
  ElMessageBox.confirm("是否删除数据项?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await API.deleteByIds(id);
    if (res.code == 200) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      getList();
    }
  });
}

// 图片
const addImg = ref(null);
function addimgEvent() {
  addImg.value?.show();
}
function successEvent(d) {
  datas.DialogForm["images"].push(d[0].url);
}
function deleteEvent(d) {
  let index = datas.DialogForm.images.findIndex((ele) => ele == d);
  datas.DialogForm.images.splice(index, 1);
}
// 分页
function sizeChange(val) {
  datas.pagingConfig.pageSize = val;
  getList();
}
function currentChange(val) {
  datas.pagingConfig.pageNumber = val;
  getList();
}
//导出
async function handleExport(row) {
  try {
    const file = await API.export(row.id);
    downloadFile(
      file,
      `${row.staffName}-${row.loginTime}到${row.handoverTime}交班数据`,
      "xlsx",
      false
    );
    ElMessage.success("下载成功");
  } catch (error) {}
}
</script>
<style scoped lang="scss">
.Table {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #e4e7ed;
  margin-top: 20px;
  border-radius: 4px;
}

// 图片库样式
.upImgStyle {
  cursor: pointer;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border: 1px dashed #ccc;
  border-radius: 1%;
  font-size: 30px;
  color: #ccc;
}

.buttonstyle {
  border-radius: 50%;
  color: #db1616;
  background-color: #fff;
  font-size: 20px;
  display: none;
  position: absolute;
  right: 0px;
  top: -10px;
  z-index: 10;
}
</style>