<template>
  <div class="customer-wrap">
    <div class="main_table">
      <el-table :data="tableData" style="width: 100%" v-loading="Loading">
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          align="center"
          :prop="item.prop"
          :label="item.label"
          show-overflow-tooltip
        >
        <template slot-scope="scope">
            <span v-if="item.prop == 'status'">
              {{scope.row.status == '0'?'待审批':scope.row.status == '1'?'支行审批通过':
              scope.row.status == '2'?'总行审批通过':scope.row.status == '-1'?'审批拒绝':''}}
            </span>
            <span v-else>{{scope.row[item.prop]}}</span>
        </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-popconfirm
              confirm-button-text="通过"
              cancel-button-text="拒绝"
              icon="el-icon-info"
              @confirm="handleApproveDrawer(scope.row)"
              @cancel="handleCancel(scope.row)"
              title="是否通过审批?"
              cancel-button-type="danger"
            >
              <el-button type="text" slot="reference">审批</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="->,total,prev,pager,next,sizes"
        :total="total"
        :current-page="pageNum"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import { removeColumns } from "./list2";
import { getRemoveList,removePassBranch,removePassHead } from "@/api/approveCenter/placeApprove.js";
import { Message } from "element-ui";

export default {
  props:{
    isBranchAdmin:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      tableColumns: [],
      Loading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNum: 1,
      showApprove: false,
      formApprove: {
        auditRemark: "",
      },
      approveInfo: {},
      dialogVisible: false,
    };
  },
  created() {
    this.tableColumns = removeColumns;
    this.init();
  },
  methods: {
    init() {
      this.Loading = true;
      const params = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
      };
      getRemoveList(params).then((res) => {
        if (res.code == "200") {
          this.tableData = res.rows.map((item) => {
            return {
              ...item,
            };
          });

          this.total = res.total;
          this.Loading = false;
          this.$emit('getRemoveCount',this.total)
        }
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.init();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.init();
    },

    // 拒绝
    handleCancel(row) {
      const Api = this.isBranchAdmin?removePassBranch:removePassHead;
      Api({
        approveResult:false,
        id:row.id
      }).then((res) => {
        if (res.code == 200) {
          Message.success("审批拒绝");
          this.init();
        }
      });
    },

    // 通过
    handleApproveDrawer(row) {
      const Api = this.isBranchAdmin?removePassBranch:removePassHead;
      Api({
        approveResult:true,
        id:row.id
      }).then((res) => {
        if (res.code == 200) {
          Message.success("审批通过");
          this.init();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.follow-main {
  padding: 10px 47px;
  .title {
    font-weight: bold;
  }
  .common-title {
    position: relative;
    color: #222222;
    line-height: 35px;
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
    margin: 0;
    margin-bottom: 10px;
    &::before {
      position: absolute;
      top: 50%;
      transform: translatey(-50%);
      left: 0;
      content: "";
      width: 3px;
      background-color: #4886f8;
      height: 16px;
      border-radius: 2px;
    }
    //  margin-left: -6px;
  }
  .dialog-footer {
    text-align: center;
  }
  ::v-deep .el-form-item__label {
    min-width: 80px;
  }
  .collapse {
    position: fixed;
    right: 550px;
    background: #fff;
    height: 100px;
    font-size: 14px;
    color: #4886f8;
    margin-left: 2px;
    display: flex;
    align-items: center;
    top: 38%;
    cursor: pointer;
    padding-left: 5px;
    border-radius: 10px 0 0 10px;
  }
  .block {
    .name {
      font-size: 14px;
      color: #606266;
    }
    .status {
      color: #b9b9b9;
      font-size: 12px;
      margin-top: 5px;
      padding-left: 2px;
    }
  }
  .my-form {
    display: flex;
  }
  .btbz {
    color: #ff4d42;
    display: inline-block;
    line-height: 40px;
    margin-right: -10px;
  }
}
::v-deep .myDialog {
  margin-top: 20vh !important;
}
.form-footer {
  text-align: center;
}
::v-deep .el-popconfirm__action{
  margin: 5px !important;
}
</style>
