<template>
  <div class="app-container">
    <div class="head-container">
      <el-card shadow="never">
        <el-alert title="当前列表仅作为数据记录，不产生任何实际交易。" type="warning" show-icon :closable="false"
          style="margin-bottom: 15px;" />
        <el-text tag="b" size="large" style="margin-left: 15px;">供应商：{{ state.supplierName }}</el-text>
      </el-card>
    </div>
    <div class="head-container">
      <el-card shadow="never">
        <el-table v-loading="state.tableData.loading" :data="state.tableData.list">
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column label="耗材信息">
            <template v-slot="scope">
              <div>{{ scope.row.conName }}</div>
              <div>单价：{{ scope.row.purchasePrice }}</div>
              <div>入库数量：{{ scope.row.inOutNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="付款金额" width="120" />
          <el-table-column prop="type" label="付款方式" width="120" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作人" width="200">
            <template v-slot="scope">
              <div>员工名称：{{ scope.row.nickname }}</div>
              <div>员工编号：{{ scope.row.code }}</div>
              <div>员工账号：{{ scope.row.account }}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>
    <div class="head-container">
      <el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
        :total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
    </div>
  </div>
</template>

<script setup>
import ShopApi from "@/api/account/shop";
import AuthAPI from "@/api/supplier/index";

import { ElMessageBox } from "element-plus";
const route = useRoute();

const state = reactive({
  query: {
    name: "",
    flowId: null,
  },
  tableData: {
    list: [],
    page: 1,
    size: 10,
    loading: false,
    total: 0,
  },
  supplierName: '',
});
onMounted(() => {
  console.log(route.query);
  if (route.query.id) {
    state.query.flowId = route.query.id
  }
  if (route.query.supplierName) {
    state.supplierName = route.query.supplierName
  }
  getTableData();
});
// 获取账单付款列表
async function getTableData() {
  state.tableData.loading = true;
  try {
    const res = await AuthAPI.getPayRecordList({
      page: state.tableData.page,
      size: state.tableData.size,
      flowId: state.query.flowId,
    });
    state.tableData.loading = false;
    state.tableData.list = res.records;
    state.tableData.total = res.totalRow * 1;
  } catch (error) {
    console.log(error);
  }
}
function handleSync(e) {
  console.log(e)
  ElMessageBox.confirm(`同步功能开启后不能关闭，请确认是否给${e.shopName}开启同步?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await ShopApi.delete({ id: row.id });
    ElMessage({
      type: "success",
      message: "同步成功",
    });
    getTableData();
  }).catch(() => { });
}
// 重置查询
function resetHandle() {
  state.query.name = "";
  getTableData();
}
// 分页回调
function paginationChange(e) {
  state.tableData.page = e;
  getTableData();
}

</script>

<style scoped lang="scss">
.head-container {
  margin-bottom: 20px;
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 4px;
  }
}

.el-link {
  min-height: 23px;
  margin: 0 5px;
}
</style>
