<template>
  <div id="loan-record">
    <br>
    <div class="top">
      <el-form :inline="true" :model="queryModel" class="demo-form-inline">

        <el-select v-model="cardType" placeholder="银行卡类型">
          <el-option v-for="item in cardTypes" :label="item.name" :value="item.value" :key="item.name"></el-option>
        </el-select>


        <el-input class="search-input" placeholder="查询内容" icon="search"
                  v-model="searchContent"></el-input>


        <div class="btn">
          <el-button @click="queryBatch" type="primary">查询</el-button>
          <el-button v-if="$permissionUtils.btnPermission('addCard')" @click="addBankCard" type="primary"><i
            class="el-icon-plus"></i>新增银行卡
          </el-button>
        </div>


      </el-form>
    </div>


    <div>
      <div class="system-list">
        <el-table :data="records" stripe style="width: 100%">
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column prop="relationType" sortable label="银行卡类型" :formatter="cardTypeFormat"></el-table-column>
          <el-table-column prop="relationNo" sortable label="业务组" :formatter="nullFormat"></el-table-column>
          <el-table-column prop="ownerName" sortable label="银行账户"></el-table-column>
          <el-table-column prop="openBankName" sortable label="银行"></el-table-column>
          <el-table-column prop="bankAccount" sortable label="银行账号"></el-table-column>
          <el-table-column prop="ownerMobile" sortable label="预留手机号码" :formatter="nullFormat"></el-table-column>
          <el-table-column prop="openSubBankName" sortable label="支行信息" :formatter="nullFormat"></el-table-column>
          <el-table-column prop="bindStatus" sortable label="状态" :formatter="statusFormat"></el-table-column>
          <el-table-column v-if="openUserFlag" prop="useFlag" sortable label="今日放款卡"
                           :formatter="useFlagFormat"></el-table-column>
          <el-table-column prop="gmtCreated" sortable label="创建时间" :formatter="transDateFormat"></el-table-column>
          <el-table-column v-if="openUserFlag" label="操作">
            <template slot-scope="scope">
              <el-button v-if="$permissionUtils.btnPermission('stickCard')" type="text" size="small"
                         @click="setRaisCard(scope.row)">设置系统放款卡
              </el-button>
              <el-button v-if="$permissionUtils.btnPermission('stickCard')" type="text" size="small"
                         @click="setMyRaisCard(scope.row)">我的放款卡
              </el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>

      <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page.current"
          :page-size="page.size"
          layout="prev, pager, next"
          :total="page.total">
        </el-pagination>
      </div>
    </div>


    <!--窗口组件-->
    <template>
      <!--上传窗口-->
      <addBankCardDialog
        v-if="ui.addBankCardDialog.visible"
        :dialogVisible="ui.addBankCardDialog.visible"
        :dialogVisible.sync="ui.addBankCardDialog.visible">
      </addBankCardDialog>
    </template>

  </div>

</template>


<script type="text/ecmascript-6">

import * as moment from "moment";
import addBankCardDialog from "./AddBankCardDialog";


export default {

  name: "BankCardMaintenance",
  components: {
    addBankCardDialog,
  },
  data() {
    return {
      searchContent: '',
      openUserFlag: false,
      cardType: 'RAISE',
      cardTypes: [
        {name: '放款卡', value: 'RAISE'},
        {name: '回款卡', value: 'LEND'},
        {name: '催收卡', value: 'COLLECT'},
        {name: '回款备选卡', value: 'BACKUP'}
      ],
      queryModel: {},
      records: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      ui: {
        addBankCardDialog: {
          visible: false
        }
      }
    }
  },
  mounted: function () {
    this.loadSearchData();
  },
  methods: {
    addBankCard() {
      this.ui.addBankCardDialog = {
        visible: true,
      };

    },
    queryBatch() {
      this.loadSearchData();
    },
    /** 加载搜索数据 */
    loadSearchData() {
      this.openUserFlag = false;
      var url = '';


      if (this.cardType == 'RAISE') {
        url = `/card/search/raiseList/${this.page.current}`
        this.openUserFlag = true;
      } else if (this.cardType == 'LEND') {
        url = `/card/search/backupList/${this.page.current}`
      } else if (this.cardType == 'COLLECT') {
        url = `/card/search/collectList/${this.page.current}`
      } else if (this.cardType == 'BACKUP') {
        url = `/card/search/backupList/${this.page.current}`
      } else {
        return
      }

      if (this.searchContent != '') {
        url = url + `/${this.searchContent}`
      }

      this.$$get(url)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          this.page = this.clonePage(res.data);
          this.records = res.data.data.data;
        })
        .catch(err => this.$$msg.err(err))
    },
    handleCurrentChange() {
      this.loadSearchData();
    },
    importClients() {
      this.ui.clientDataUploadDialog = {
        visible: true,
      };
    },
    setRaisCard(param) {
      var id = param.id;
      this.$$get(`/card/stick/` + id)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          this.loadSearchData()
        })
        .catch(err => this.$$msg.err(err))
    },

    setMyRaisCard(param) {
      localStorage.setItem('myRaisCardName', param.ownerName)
      localStorage.setItem('myRaisCardAccount', param.bankAccount)

      this.loadSearchData()
    },

    useFlagFormat: function (row, column) {
      var useFlag = row['useFlag'];
      var returnStr = " ";
      if (useFlag === 'YES') {
        returnStr = "今日放款卡"
      }
      if (row['bankAccount'] == localStorage.getItem('myRaisCardAccount')) {
        returnStr = returnStr + " 我的放款卡"
      }
      return returnStr;
    },
    cardTypeFormat: function (row, column) {
      var relationType = row['relationType'];
      return this.$enumUtils.toMsg('CardRelationEnum', relationType);
    },
    statusFormat: function (row, column) {
      var status = row['bindStatus'];
      return this.$enumUtils.toMsg('CardStateEnum', status);
    },
    nullFormat(row, column) {
      var param = row[column.property];
      if (param == null || param == '') {
        return ' ';
      }
      return param;
    }

  }
}
</script>

