<template>
  <el-dialog
    :title="modalTitle"
    :visible.sync="modalVisible"
    :width="formLabelWidth"
    top="2vh"
    @close="handleCancel">
    <div class="mobile">
        <el-table
              border
              :data="list"
              v-loading="loading"
              style="width: 100%">
              <el-table-column prop="name" label="农户名称" align="center"></el-table-column>
              <el-table-column prop="bankName" label="农户银行名称"></el-table-column>
              <el-table-column prop="bankNo" label="农户银行账号"></el-table-column>
              <el-table-column prop="accountPid" label="农户身份证号"></el-table-column>
              <el-table-column prop="transferAmount" label="打款金额"></el-table-column>
              <el-table-column prop="transferTime" label="申请打款时间"></el-table-column>
              <el-table-column label="清分类型" align="center" width="160">
                <template slot-scope="scope">
                  <span v-if="scope.row.transferNation  == 0">行内转账</span>
                  <span v-else-if="scope.row.transferNation  == 1">行外转账</span>
                  <span v-else="scope.row.transferNation  == 2">贷报销</span>
                </template>
              </el-table-column>
              <el-table-column prop="msg" label="银行响应消息"></el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="80"
                class-name="small-padding fixed-width"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-view"
                    @click="handleView(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getDetal"
        />
        <bank-order-mobiel
            v-if="modal.visibleModal"
            :title="modal.title"
            :action="modal.action"
            :visible="modal.visibleModal"
            :selectRow="modal.selectRow"
            @closemodal="closemodal"
        ></bank-order-mobiel>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取 消</el-button>
      <el-button type="primary" @click="submit" v-if="!limit.isRead">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import bankOrderMobiel from "./bankOrderMobiel"
import { bankDetail } from "@/api/bankCheck/bank";
export default {
  name: 'addMobiel',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'title'
    },
    action: {
      type: String,
      default: 'add'
    },
    selectRow: {
      type: Object,
      default:null
    }
  },
  watch: {
    visible(newVal, oldVal) {
      this.modalVisible = newVal;
    },
    title(newVal, oldVal) {
      this.modalTitle = newVal;
    },
    action(newVal, oldVal) {
      this.modalAction = newVal;
    },
    selectRow(newVal, oldVal) {
      this.modalSelectRow = newVal;
    }
  },
  components:{
    bankOrderMobiel
  },
  data() {
    return {
      modalTitle: this.title,
      modalVisible: this.visible,
      modalAction: this.action,
      modalSelectRow: this.selectRow,
      formLabelWidth: '1024px',
      //弹出层
      modal:{
          action:'',
          title:'',
          visibleModal:false,
          selectRow:null
      },
      //窗口权限
      limit: {
        isRead: false, //是否只读
        isAdd: false //是否可写
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      total:0,
      //列表
      list:[]
    };
  },
  created() {
    // console.log(this.selectRow)
    console.log(this.modalSelectRow)
    switch (this.modalAction) {
      case 'view':
        this.limit.isRead = true;
        break;
      default:
        break;
    }
    this.queryParams.guid = this.modalSelectRow.guid
    this.getDetal()
  },
  methods: {
    //获取数据列
    getDetal(id){
      this.loading = true
      bankDetail(this.queryParams).then(res => {
          if (res.retHead.errCode === 0) {
            this.list = res.retBody
            this.total = res.retHead.total;
            this.loading = false
          }
      })
    },
    //详情查看
    handleView(item){
      this.modal.visibleModal = true
      this.modal.title = '清分明细'
      this.modal.action = 'view'
      this.modal.selectRow = item
    },
    //窗口关闭
    handleCancel() {
      this.$emit('closeviewmodal', false);
    },
    closemodal(){
      this.modal.visibleModal = false
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
