<template>
  <div id="oilSiteUser">
    <div class="table-header table-div el-scrollbar table-div-box">
      <ListLayout :table-columns="tableColumns">
        <div slot="search" style="margin-top:5px">
          <!--这里放顶部搜索-->
          <!-- 搜索部分开始 -->
          <el-form label-width="90px" :inline="true" :model="page" class="search-form" :size="$store.getters.size">
            <el-form-item style="width:20%">
            <el-input
                  v-model="page.params.bankName"
                  placeholder="请输入支行名称模糊搜索"
                  clearable
                  @keyup.enter.native="getByPage"
                />
            </el-form-item>
            <el-form-item style="width:20%">
              <el-input
                  v-model="page.params.cnaps"
                  placeholder="请输入联行号精确搜索"
                  clearable
                  @keyup.enter.native="getByPage"
                />
              </el-form-item>

          </el-form>

          <!-- 搜索部分结束 -->
        </div>

        <el-row slot="button-group" style="margin-top:5px">
          <el-col :span="4" style="text-align: left;">
            <el-button
              class="group-item"
              :size="$store.getters.size"
              type="primary"
              @click="toAdd"
            ><svg-icon icon-class="iconyinhang" /> 新增银行</el-button>
          </el-col>

          <el-col :span="20">
            <el-button
              type="primary"
              :size="$store.getters.size"
              icon="el-icon-search"
              @click="search"
            >查询</el-button>
            <el-button
              :size="$store.getters.size"
              icon="el-icon-refresh"
              type="info"
              @click="page.params={}"
            >重置</el-button>
          </el-col>
        </el-row>

        <div slot="table">
          <!--这里放表格和分页-->
          <!-- 列表开始 -->
          <el-table
            :max-height="tableHeight"
            stripe
            :data="dataPage.list"
            fit
            style="width: 100%"
            :size="$store.getters.size"
            @sort-change="sortHandler"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              label="序号"
              type="index"
              :index="indexMethod"
            />
            <template v-for="(item, index) in tableColumns">
              <el-table-column
                v-if="item.show"
                :key="index"
                :fixed="item.fixed"
                :align="item.align"
                :show-overflow-tooltip="true"
                :min-width="item.minWidth"
                :width="item.width"
                :prop="item.prop"
                :sortable="item.sortable"
                :label="item.label"
                :formatter="item.render"
              />
            </template>
            <el-table-column fixed="right" label="操作" width="100px">
              <template slot-scope="scope">
                <el-button
                  :size="$store.getters.size"
                  type="text"
                  @click="update(scope.row.id)"
                >
                  <svg-icon icon-class="iconxiangqing1" />修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 列表结束 -->

          <!-- 分页组件开始 -->
          <div class="page-div">
            <el-pagination
              :current-page="page.currentPage"
              :page-sizes="[10,15,20,30]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.totalCount"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
          <!-- 分页组件结束 -->
        </div>
      </ListLayout>

       <!-- 添加企业用户 -->
      <el-drawer
        :visible.sync="addDialog"
        size="40%"
        direction="rtl"
      >
        <interBankOutAdd @getByPage='getByPage' v-if="addDialog" @closeDialog="closeDialog"/>
      </el-drawer>
       <!-- 修改企业用户 -->
      <el-drawer
        :visible.sync="updateDialog"
        size="40%"
        direction="rtl"
      >
        <interBankOutAdd @getByPage='getByPage' :import-data='importData' @closeDialog="closeDialog"/>
      </el-drawer>
    </div>

  </div>
</template>
<script>
import interBank from '@/api/dict/interBank'
import oilCustomerCompanyAccountApi from '@/api/finance/oilCustomerCompanyAccount'
import interBankOutAdd from './interBankOutAdd'
import { mapGetters } from 'vuex'
import sysCustomerInfoApi from '@/api/user/sysCustomerInfo'
import oilCompanyInfoApi from '@/api/user/oilCompanyInfo'

export default {
  components: {
    interBankOutAdd
  },
  data() {
    return {
      row:[{a:1,b:2},{a:1,b:2}],
      output: {
        outputType: 1, // 导出方式，1导出选中，2导出本页，3条件导出，4导出全部
        startPage: 1, // 导出开始页
        endPage: 1, // 导出结束页
        pageSize: 10 // 每页条数
      },
      companyId: '',
      typeDialog: false,
      distributeReverseData: {},
      userList: [],
      queryCompanyList: [],
      multipleSelection: [], // 选择表格数据集合
      importDialog: false, // 导入弹窗
      outPutDialog: false, // 导出弹窗
      showTableDrawer: false,
      oilCompanyDistributeReverse: {},
      companyList: [],
      sysCustomerList: [], // 用户集合
      page: {
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: {}, // 查询参数
        sorted: {
          id:"desc"
        },
        columns: [
        ]
      },
      tableHeight: document.documentElement.clientHeight - 300 -50,
      filters: this.$options.filters,
      dataPage: { // 分页显示page
        pageSize: 10, // 每页显示条数
        currentPage: 1, // 默认页
        params: { // 查询参数
        },
        sorted: {}
      },
      tableColumns: [
      { prop: 'id',  width: 150, label: '编号', show: true, render: (row, column, cell) => {
          return cell
        } },
        { prop: 'cnaps', width: 250, label: '联行号', show: true, render: (row, column, cell) => {
          return cell
        } },
        { prop: 'bankName',fixed:"right", label: '支行名称', show: true, render: (row, column, cell) => {
          return cell
        } }
      ],
      addDialog: false, // 添加弹窗
      updateDialog: false, // 修改弹窗
      sysSheet: {},
      importData:{},
      companyAccountRecordsDataPage: { // 公司明细分页显示page
        pageSize: 20, // 每页显示条数
        currentPage: 1, // 默认页
        params: { // 查询参数
        },
        sorted: {}
      },
    }
  },
  computed: {
    ...mapGetters(['sysUserList'])
  },
  created() {
    this.getByPage()
    // 增加监听事件，窗口变化时得到高度。
    window.addEventListener('resize', this.getHeight, false)
  },
  // activated() {
  //   this.getByPage()
  //   // 增加监听事件，窗口变化时得到高度。
  //   window.addEventListener('resize', this.getHeight, false)
  // },
  methods: {
    changeEditor(row, r) { // 修改是否允许修改标识
      this.$set(row, 'editor', true)
      this.$nextTick(() => {
        // console.log(this.$refs[r])
        this.$refs[r].focus()
        
      })
      this.plateNumberCompany= row.plateNumberCompany
    },
    toggleDialog(row, disType) {
      this.distributeReverseData = row
      this.distributeReverseData.disType = disType
      this.typeDialog = true
    },
    update(id) {
      // 跳转到修改
      interBank.get(id).then(res => {
        this.importData = res.data
        this.updateDialog = true
      })
      
    },
    searchCompanyInfo(info) {
      const oilSiteInfo = {}
      oilSiteInfo.name = info
      if (info && info !== '') {
        oilCompanyInfoApi.getLikeByNameOrId(oilSiteInfo).then(res => {
          this.companyList = res.data
        })
      }
    },
    searchUserInfo(info) {
      if (info && info !== '') {
        sysCustomerInfoApi.searchInfo(info).then(res => {
          this.sysCustomerList = res.data
        })
      }
    },
    // handleDetail(row) {
    //   // 查看行 详情
    //   // oilCustomerCompanyAccountApi.get(id).then((res) => {
    //   //   this.oilCustomerCompanyAccount = res.data;
    //   //   this.showTableDrawer = true;
    //   // });
    //   this.companyAccountRecordsDataPage.params = {
    //     customerId: row.customerId
    //   }
    //   // 获取明细
    //   oilCustomerCompanyAccountRecordApi.getByCustomPage(this.companyAccountRecordsDataPage).then(res => {
    //     console.log('获取明细')
    //     console.log(res.data)
    //     this.companyAccountRecordsDataPage = res.data
    //     this.showTableDrawer = true
    //   })
    //   // 获取明细
    // },
    indexMethod(index) {
      return (index + 1) * 1
    },
    handleSelectionChange(val) { // 选择表格数据
      this.multipleSelection = val
    },
    toForbid() { // 禁用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error('请选择需要操作的数据')
        return
      }
    },
    toStartUsing() { // 启用
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message.error('请选择需要操作的数据')
        return
      }
    },
    handleDetail(id) {
      console.log(id)
      // 查看行 详情
      oilCustomerCompanyAccountRecordApi.getById(id).then(res => {
        this.importData = res.data
        this.showTableDrawer = true
      })
    },

    getHeight() {
      // 获取浏览器高度并计算得到表格所用高度。
      this.tableHeight = document.documentElement.clientHeight - 300 - 60
    },
    search() {
      // 搜索
      this.page.currentPage = 1
      this.getByPage()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getByPage()
    },
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getByPage()
    },
    sortHandler(column) {
      // 排序查询
      console.log(column)
      const key = column.prop
      const value = column.order
      this.page.sorted = {}
      this.page.sorted[key] = value
      this.getByPage()
    },
    toAdd() {
      // 跳转到添加
      this.importData = {
        id:"",
        cnaps:"",
        bankName:""
      }
      this.addDialog = true
    },
    toUpdate(id) {
      // 跳转到更新
      oilCustomerCompanyAccountApi.get(id).then(res => {
        this.sysSeh = res.data
        this.updateDialog = true
      })
    },
    getByPage() {
      // 分页查询
      this.addDialog = false
        interBank.getByPage(this.page).then(res => {
        this.dataPage = res.data
        console.log(this.dataPage)
        this.page.totalCount = this.dataPage.totalCount
        this.page.totalPage = this.dataPage.totalPage
        console.log(this.dataPage,'list')
        this.dataPage.list.forEach(item => {
          item.roles=item.role.split(',')
        });
        })
      // },500)
      // })
    },
    closeDialog() {
      this.importDialog = false
      this.addDialog = false
      this.updateDialog = false
      this.typeDialog = false
    }
  }
}
</script>

<style scoped>
.table-detail-drawer{
  width: 135%;
}
  .handle-button-group {
    margin-bottom: 10px;
  }
  .table-div {
    min-height: calc(100vh - 150px);
    max-height: calc(100vh - 110px);
    position: relative;
    margin-bottom: 20px;
  }
  .table-div >>> .header-container {
    position: sticky;
    top: 0rem;
 min-height: 110px;
    z-index: 4;
    background: #fff;
  }
  .table-div .el-table__footer-wrapper {
    position: fixed !important;
  }
  .page-div {
    position: fixed;
    background: #fff;
    bottom: 0rem;
    z-index: 4;
    min-width: 100%;
  }
  .el-icon-check{
    color:#46a6ff
  }
</style>
<style>
  .table-div-box .el-form-item__content .el-input{
    box-shadow: none !important;
  }
  .table-div-box .el-form-item--medium .el-form-item__content{
    width: 100%;
  }
  #oilSiteUser .el-badge__content {
    right: 15px;
    top: 5px;
  }
</style>
