<template>
  <el-dialog title="选择挂账人" width="850px" v-model="show" top="20px">
    <div class="app-container">
      <div class="head-container filtration">
        <div class="r">
          <el-input
            v-model="tableData.keywords"
            placeholder="按挂账人或手机号"
            style="width: 138px"
          />
          <!-- <el-select
            v-model="tableData.status"
            placeholder="全部状态"
            clearable
            style="width: 123px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
          <el-button type="primary" @click="getTableData()">查询</el-button>
        </div>
      </div>
      <div class="head-container content">
        <el-table v-loading="tableData.loading" :data="tableData.data" @cell-click="cellClick">
          <el-table-column label="ID" prop="id" />

          <el-table-column label="挂账人" prop="debtor" />
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="账户余额(元)" prop="accountBalance" />
          <el-table-column label="可用挂账额度(元)" prop="creditAmount" />
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-button type="text" @click="cellClick(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="head-container">
        <el-pagination
          :total="tableData.total"
          :current-page="tableData.page"
          :page-size="tableData.size"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="paginationChange"
          @size-change="sizeChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import creditApi from "@/api/order/credit";
export default {
  data() {
    return {
      show: false,
      options: [
        {
          value: "1",
          label: "启用",
        },
        {
          value: "0",
          label: "停用",
        },
      ],
      tableData: {
        keywords: "",
        status: "1",
        data: [],
        page: 1,
        size: 10,
        loading: false,
        total: 0,
      },
    };
  },
  mounted() {
    // this.getTableData();
  },
  methods: {
    cellClick(row) {
      this.$emit("confirm", row);
      this.show = false;
    },
    open() {
      this.getTableData();
      this.show = true;
    },
    /**
     * 获取挂账人列表
     */
    async getTableData() {
      this.tableData.loading = true;
      try {
        const res = await creditApi.getList({
          page: this.tableData.page,
          size: this.tableData.size,
          keywords: this.tableData.keywords,
          status: this.tableData.status,
          shopId: localStorage.getItem("shopId"),
        });
        this.tableData.loading = false;
        this.tableData.data = res.records;
        this.tableData.total = res.totalRow * 1;
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 删除挂账人
     * @param id
     */
    async delTableHandle(id) {
      // eslint-disable-next-line no-unused-vars
      const res = await delCreditBuyer(id);
      this.getTableData();
    },

    /**
     * 操作
     */
    openDialog(row, type) {
      if (type === "add") {
        this.$refs.creditAdd.show();
      } else if (type === "edit") {
        this.$refs.creditAdd.show(row);
      } else if (type === "repayment" && row.repaymentMethod === "total") {
        this.$refs.creditRepayment.show(row);
      } else if (type === "rePaymentRecord") {
        this.$refs.creditRepaymentRecord.show(row);
      }
    },

    // 重置查询
    resetHandle() {
      this.page = 1;
      this.getTableData();
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e;
      this.getTableData();
    },
  },
};
</script>
<style scoped lang="scss">
.title {
  font-weight: bold;
  font-size: 16px;
  color: #333333;
}
.filtration {
  overflow: hidden;
  .l {
    float: left;
  }
  .r {
    float: right;
  }
}
</style>
