<template>
  <div class="table-box">
    <el-button
      type="primary"
      icon="el-icon-plus"
      @click="addData()"
      v-if="tableData.length == '0'"
      >新增</el-button
    >
    <br />
    <br />
    <el-table
      ref="multipleTable"
      v-loading="loding"
      :data="tableData"
      element-loading-text="加载中..."
      border
      fit
      highlight-current-row
      height="500"
      @row-dblclick="rowClick"
    >
      <template slot="empty">
        <img src="" alt />
        <p>暂无数据</p>
      </template>
      <el-table-column
        fixed="left"
        align="center"
        type="index"
        label="序号"
        width="50"
      />
      <el-table-column
        v-for="item in clumnData"
        align="center"
        :label="item.label"
        :key="item.prop"
        :prop="item.prop"
        :min-width="item.width"
      />
      <el-table-column
        align="center"
        label="状态"
        prop="status"
        min-width="100"
        #default="{ row }"
        >{{ row.status == "A" ? "未推送" : "已推送" }}</el-table-column
      >
      <el-table-column
        align="center"
        label="操作"
        min-width="150"
        #default="{ row }"
        fixed="right"
      >
        <span
          class="operate-btn"
          @click.stop="editData(row)"
          v-if="row.status == 'A'"
          >编辑</span
        >
        <span
          class="operate-btn"
          @click.stop="pushData(row)"
          v-if="row.status == 'A'"
          >推送</span
        >
      </el-table-column>
    </el-table>
    <el-dialog
      title="银行信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <ModalView ref="modalview" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { clumnData, tableData } from "./clumnData";
import ModalView from "./modalView/modalView.vue";
import { saveSupBankInfo, insertSupBankInfo } from "@/api/bank-manage/index";
import { exportData } from "./const";
import moment from "moment";
export default {
  name: "tableView",
  components: {
    ModalView,
  },
  data() {
    return {
      loding: false, // 表格数据加载loding
      tableData: [], // 表格数据
      clumnData: clumnData, // 表格头数据
      total: 0,
      pageSize: 10,
      crutPage: 1,
      pamData: {},
      orgType: "",
      searchData: {},
      dialogVisible: false,
      type: "",
    };
  },
  props: {
    getTableData: {
      type: Object,
      default: {},
    },
    getsearchData: {
      type: Object,
      default: {},
    },
  },
  created() {},
  mounted() {},
  methods: {
    //推送数据
    pushData(row) {
      insertSupBankInfo(row).then((res) => {
        if (res.success == true) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          let tablePam = { size: 10, current: 1 };
          this.$emit("pageTruning", tablePam);
        }
      });
    },
    // 搜索区域输入的数据
    getSearchData(data) {},
    //新建库区触发
    addData() {
      this.dialogVisible = true;
      setTimeout(() => {
        this.$refs.modalview.$refs["create"].resetFields();
      }, 0);
    },
    //编辑
    editData(row) {
      let newRow = {
        supId: row.supId,
        supName: row.supName,
        bankTypeCode: row.bankTypeCode,
        bankcode: row.bankcode,
        bankacct: row.bankacct,
        acctname: row.acctname,
      };
      this.dialogVisible = true;
      setTimeout(() => {
        this.$refs.modalview.form = newRow;
      }, 0);
    },
    // 保存数据
    saveData() {
      let { userID, username } = this.$store.state.user;
      this.$refs.modalview.$refs["create"].validate((valid) => {
        if (valid) {
          let modalForm = {
            ...this.$refs.modalview.form,
            supId: userID,
            supName: username,
          };
          this.reqAddData(modalForm);
        }
      });
    },
    //接口新建/修改数据
    reqAddData(data) {
      this.loding = true;
      delete data.id;
      saveSupBankInfo(data)
        .then((res) => {
          this.loding = false;
          if (res.success == true) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            let tablePam = { size: 10, current: 1 };
            this.$emit("pageTruning", tablePam);
            this.dialogVisible = false;
          }
        })
        .catch(() => {
          this.loding = false;
        });
    },
  },
  watch: {
    //表格数据发生改变时重新渲染
    getTableData(newData, oldData) {
      let data = newData ? newData : [];
      this.tableData = data;
    },
    getsearchData(newData, oldData) {
      this.searchData = newData;
    },
  },
};
</script>
<style scoped lang="scss">
.table-box {
  padding: 1px;
  position: relative;
  padding-bottom: 50px;
  .block {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
  .operate-btn {
    color: #3789ea;
    cursor: pointer;
    margin-left: 10px;
  }
}
</style>
