<template>
  <div>
    <One-Table
      ref="oneTable"
      :table-global-config-props="tableGlobalConfigProps"
      :table-pagination-config-auto="tablePaginationConfigAuto"
      :table-config-field="tableConfigField"
      :form-global-config-props="formGlobalConfigProps"
      :requset-url="requsetUrl"
      :requset-config="requsetConfig"
      :table-column-formatter="tableColumnFormatter"
      :table-form-search-config="tableFormSearchConfig"
      :form-config-options-list="formConfigOptionsList"
      :table-form-botton-config="tableFormBottonConfig"
      :btn-table-column-option="btnTableColumnOption"
	  :header-config="headerConfig"
      @tableColumnClick="tableColumnClick"
      @btnTableClick="btnTableClick"
      @autoPage="autoPage"
    />
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      // 表格全局参数
      tableGlobalConfigProps: {
        tableType: 'table', // 表格类型  table，tree
        treeChildren: 'children', // 为树形结构时children属性名
        treeHasChildren: 'hasChildren', // 为树形结构时hasChildren属性名
        rowKey: 'id', // 行key  为tree时必传
        selectionCheck: true, // 是否有选择框
        reserveSelection: true, // 选择框分页时是否记忆
        autoRequest: true, // 创建时自动请求
        handRequestSetPage: true, // 手动处理返回数据
        requsetType: 'get', // 默认get
        needIndex: true // 需要序号
      },
	  // 请求头参数
	  headerConfig:{
		  token:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ5eGtqIiwiYXVkIjoid3d3LmFkbWluLmNvbSIsImlhdCI6MTYxODM4Mzg3MSwibmJmIjoxNjE4MzgzODcxLCJleHAiOjE2MTg0NzAyNzEsImRhdGEiOnsidWlkIjoiMjM1MDY2OTgyODU5MzM3NzI5IiwibGVzc2VlIjoxLCJpcCI6IjEzOS4xNTUuMjQ5LjQ4IiwidW5hbWUiOiJcdTllYzRcdTUzY2MifX0.wbULbTEPToLGkGSLuaUE_ZIX3lUilMSDCMAU33olzkM'
	  },
      // 表格全局配置
      formGlobalConfigProps: {
        size: 'mini',
        inline: true
      },
      // 请求地址
      requsetUrl: '/api/v1/user/list',
      // 额外的请求参数 自定义~比如token?
      requsetConfig: {},
      // 表格分页参数自定义
      tablePaginationConfigAuto: {
        page: 'page',
        pageSize: 'page_size'
      },
      // 搜索区域定义
      tableFormSearchConfig: [
        {
          id: 'position_type',
          name: '用户身份',
          value: '',
          type: 'select',
          placeholder: '用户身份',
          rules: []
        },
        {
          id: 'status',
          name: '用户状态',
          value: '',
          type: 'select',
          placeholder: '用户状态',
          rules: []
        },
        {
          id: 'name',
          name: '用户姓名',
          value: '',
          type: 'input',
          placeholder: '请输入用户姓名',
          rules: []
        }
      ],
      tableFormBottonConfig: [
        {
          type: 'add',
          text: '添加人员',
          icon: 'el-icon-plus',
          btType: 'success',
          size: 'mini',
          loading: false
        }
      ],
      formConfigOptionsList: {
        position_type: [{ name: '客户经理', id: 1 }, { name: '支撑经理', id: 2 }],
        status: [{ name: '未激活', id: 0 }, { name: '已激活', id: 1 }]
      },
      // 表格字段定义
      tableConfigField: [
        {
          id: 'name',
          name: '姓名'
        },
        {
          id: 'position_name',
          name: '身份'
        },
        {
          id: 'mobile',
          name: '手机号'
        },
        {
          id: 'role_types',
          name: '角色',
          formatter: true,
          isHtml: true
        },
        {
          id: 'bank_name',
          name: '银行'
        },
        {
          id: 'bank_number',
          name: '银行卡号'
        },
        {
          id: 'bank_holder',
          name: '银行户主'
        },
        {
          id: 'bank_idcard',
          name: '银行身份证',
          width: 200
        },
        {
          id: 'status_name',
          name: '用户状态'
        },
        {
          id: 'option',
          type: 'option',
          name: '操作',
          width: 220,
          data: [
            {
              type: 'add',
              text: '新增',
              icon: 'el-icon-plus',
              btType: 'info'
            },
            {
              type: 'edit',
              text: '删除',
              icon: 'el-icon-edit',
              btType: 'danger'
            }
          ]
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 手动处理返回数据
    autoPage(data, callback) {
      callback(data.data.list.data, data.data.list.total)
    },
    // 表格操作列点击回调
    tableColumnClick(row, btType) {
      switch (btType) {
        case 'add':
          break
        case 'edit':
          break
      }
    },
    // 按钮区域点击
    btnTableClick(type) {
      switch (type) {
        case 'add':
          this.$refs.editDialog.show()
          break
      }
    },
    // 表格操作按钮显示与否
    btnTableColumnOption(row, type) {
      switch (type) {
        case 'add':
          return true
        default:
          return true
      }
    },
    // 表格格式化 ---tableConfigField设置的formater字段为true
    tableColumnFormatter(row, column, cellValue, index) {
      switch (column.property) {
        case 'role_types':
          const role_typesList = row.role_types.map(item => {
            return item.name
          })
          return `<el-tag>${role_typesList.join(',')}</el-tag>`

        default:
          return cellValue
      }
    }
  }
}
</script>
