<template>
  <div v-if="allow.includes('financeBankUserList')">
    <gridToolbar
			:query.sync="query"
			@refresh="refresh"
			:showAdd="false"
			:selectOptions="selectOptions" />
    <data-grid
			:api="request_api.finance_bank_user"
			:query="requestQuery"
			ref="dataGrid"
			@change="handleChange">
      <a-table-column
				title="银行名称"
				dataIndex="bank_name" />
      <a-table-column
				title="银行编码"
				dataIndex="bank_info_code" />
			<a-table-column
				title="用户信息"
				align="left"
				dataIndex="real_name">
        <template slot-scope="text, record">
					<user-info
						:name="text"
						:user_id="record.login_id"
						:phone="record.phone"
						:email="record.email" />
        </template>
      </a-table-column>
      <a-table-column
				title="账号"
				dataIndex="account" />
      <a-table-column
				title="开户地区"
				dataIndex="country_code"
				:customRender="addressRowRender" />
      <a-table-column title="创建/更新时间" dataIndex="created_date">
        <template slot-scope="text, record">
					<div class="multi_line">
						<span>{{ text | moment }}</span>
						<span>{{ record.updated_date | moment }}</span>
					</div>
        </template>
      </a-table-column>
      <a-table-column title="备注" dataIndex="memo" class="memo" :customCell="cellTitle('memo')" />
    </data-grid>
  </div>
</template>
<script>
import DataGrid from '../../components/DataGrid'
import gridToolbar from '../../components/gridToolbar/default'
import userInfo from '../../components/info/user'

import mix from '../../mixins/mixins'
import tableFilter from '../../mixins/tableFilter'
import finance from '../../mixins/finance'
import common from '../../mixins/common'

import store from '../../store'
export default {
	mixins: [common, mix, tableFilter, finance()],
	components: {
		DataGrid, gridToolbar, userInfo
	},
  data() {
    return {
      // 混入配置
      mixConofig: {
        addTitle: '添加银行信息',
        editTitle: '编辑银行信息',
        apiName: 'finance_bank_info',
        modalName: 'bankInfo'
			}
    }
	},
	computed: {
		area() {
			return store.state.area || []
		},
		country() {
			return store.state.country || []
		},
		selectOptions () {
			return [
				{ label: '模糊搜索', value: 'keyword', placeholder: '关键词' },
				{ label: '用户ID', value: 'login_id', placeholder: '请输入完整的用户ID' },
				{ label: '用户名', value: 'real_name', placeholder: '请输入完整的用户名' },
				{ label: '邮箱', value: 'email', placeholder: '请输入完整的邮箱号' },
				{ label: '手机', value: 'phone', placeholder: '请输入完整的手机号' }
			]
		}
	},
  activated() {
		if (!this.area || !this.area.length) store.dispatch('getArea')
		if (!this.country || !this.country.length) store.dispatch('getCountry')
  },
	methods: {
		makeArray(arg) {
			if (Array.isArray(arg)) return arg
			return []
		}
	}
}
</script>
