axios.get('/api/index/array', {
  params: {
    list: ['1', '2', '3'],
  },
})

// @ts-check
/**
 * 拼接参数字符串
 * @param {Object} params 参数对象
 * @returns {String} 拼接后的字符串
 */
export function spliceParams(params) {
  if (!params) {
    throw new Error(`参数对象不能为空：${params}`)
  }
  var res = ''
  for (const k in params) {
    if (params.hasOwnProperty(k)) {
      const v = params[k]
      res += `${encodeURIComponent(k)}=${encodeURIComponent(v)}&`
    }
  }
  return res
}

// @ts-check
import { dateFormat } from './../date/dateFormat'

const deteFormatter = 'yyyy-MM-ddThh:mm:ss.SSSZ'
const encode = (k, v) => encodeURIComponent(k) + '=' + encodeURIComponent(v)

/**
 * 拼接参数字符串
 * @param {Object} params 参数对象
 * @returns {String} 拼接后的字符串
 */
export function spliceParams(params = {}) {
  if (!(params instanceof Object)) {
    throw new Error(`The parameter type must be Object: ${params}`)
  }
  return Array.from(Object.entries(params)).reduce((res, [k, v]) => {
    if (v === undefined || v === null) {
      return res
    } else if (v instanceof Date) {
      res += encode(k, dateFormat(v, deteFormatter))
    } else if (v instanceof Array) {
      res += v
        .map(item =>
          encode(
            k,
            item instanceof Date ? dateFormat(item, deteFormatter) : item,
          ),
        )
        .join('&')
    } else {
      res += encode(k, v)
    }
    return (res += '&')
  }, '')
}

const rxAjax = (axios => {
  return {
    ...axios,
    get(url, params, config) {
      return axios.get(`${url}?${rx.spliceParams(params)}`, config)
    },
  }
})(axios.create())

axios.get('/api/index/array', {
  params: {
    list: ['1', '2', '3'],
  },
})

Vue.component('RxSelect', {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: [Number, String],
    map: Map,
  },
  template: `
        <select
          v-model="value"
          @change="$emit('change', value)"
        >
          <option
            v-for="[k,v] in map"
            :value="k"
            :key="k"
          >{{v}}</option>
        </select>
        `,
})

new Vue({
  el: '#app',
  data: {
    map: new Map()
      .set(1, '保密')
      .set(2, '男')
      .set(3, '女'),
    sex: '',
  },
})

Vue.component('RxSelect', {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: [Number, String],
    map: Map,
  },
  data() {
    return {
      innerValue: this.value,
    }
  },
  watch: {
    value(val) {
      this.innerValue = val
    },
    innerValue(val) {
      this.$emit('change', val)
    },
  },
  template: `
  <select v-model="innerValue">
    <option
      v-for="[k,v] in map"
      :value="k"
      :key="k"
    >{{v}}</option>
  </select>
  `,
})

Vue.component('RxSelect', {
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: [Number, String],
    map: Map,
  },
  computed: {
    innerValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('change', val)
      },
    },
  },
  template: `
  <select v-model="innerValue">
    <option
      v-for="[k,v] in map"
      :value="k"
      :key="k"
    >{{v}}</option>
  </select>
  `,
})

/**
 * 在控制台上打印一个值
 * @param obj 需要被打印的值
 */
function print(obj) {
  console.log(obj)
}

/**
 * 获取一个 0-1 之间的随机数
 * @returns 随机数
 */
function random() {
  return Math.random()
}

/**
 * 获取一个 0-1 之间的随机数
 * @returns 随机数
 * @example
 * const i = random()
 * console.log(i)
 */
function random() {
  return Math.random()
}

/**
 * @test {random} 测试 random 函数
 */
describe('测试 random 函数', () => {
  it('测试两次随机数是否相等', () => {
    const i = random()
    const k = random()
    expect(i).not.toBe(k)
  })
})

/**
 * 简单模拟 Vue class
 * @class Vue
 */
class Vue {}

/**
 * 简单模拟 Vue class
 * @class Vue
 * @property {String|Element} option.el 实例绑定的 DOM 选择器或元素
 * @property {Object|Function} [option.data={}] 实例内部绑定的数据，默认为空对象
 * @property {Object} [option.methods={}] 实例的方法对象，默认为空对象
 * @property {Function} [option.mounted=function() {}] 实例的初始化函数，默认为空函数
 */
class Vue {
  /**
   * 构造函数
   * @param {Object} option 可选项
   * @param {String|Element} option.el 实例绑定的 DOM 选择器或元素
   * @param {Object|Function} [option.data={}] 实例内部绑定的数据，默认为空对象
   * @param {Object} [option.methods={}] 实例的方法对象，默认为空对象
   * @param {Function} [option.mounted=function() {}] 实例的初始化函数，默认为空函数
   */
  constructor({ el, data = {}, methods = {}, mounted = function() {} } = {}) {
    this.el = el
    this.data = data
    this.methods = methods
    this.mounted = mounted
  }
}

/**
 * 计算两个数字之和
 * @param {Number} i 第一个数字
 * @param {Number} k 第二个数字
 * @returns {Number} 两数之和
 */
function add(i, k) {
  return i + k
}

/**
 * 计算两个数字之和，或者两个字符串之间的连接
 * @param {Number|String} i 第一个数字
 * @param {Number|String} k 第二个数字
 * @returns {Number|String} 两数之和，或者两个字符串之间的连接
 */
function add(i, k) {
  return i + k
}

/**
 * 分割字符串为数组
 * @param {String} str 字符串
 * @param {String} [sep] 分隔符
 * @returns {Array} 分割后的数组
 */
function split(str, sep) {
  return sep ? str.split(sep) : [str]
}

/**
 * 分割字符串为数组
 * @param {String} str 字符串
 * @param {String} [sep=''] 分隔符
 * @returns {Array} 分割后的数组
 */
function split(str, sep = '') {
  return str.split(sep)
}

/**
 * 将 String 类型的数组中的元素都连接起来，并以逗号进行分割
 * @param {Array.<String>} arr 字符串数组
 * @returns {String} 连接后的字符串
 */
function join(arr) {
  return arr.join(',')
}

/**
 * 简单模拟 Vue API
 * @param {Object} option 可选项
 * @param {String|Element} option.el 实例绑定的 DOM 选择器或元素
 * @param {Object|Function} [option.data={}] 实例内部绑定的数据，默认为空对象
 * @param {Object} [option.methods={}] 实例的方法对象，默认为空对象
 * @param {Function} [option.mounted=function() {}] 实例的初始化函数，默认为空函数
 */
function Vue({ el, data = {}, methods = {}, mounted = function() {} } = {}) {
  this.el = el
  this.data = data
  this.methods = methods
  this.mounted = mounted
}

/**
 * 自行实现 flatMap，将数组压平一层
 * @param {Array.<Object>} arr 数组
 * @param {function(Object):Array} fn 映射方法，将一个元素映射为一个数组
 * @returns {Array.<Object>} 压平一层的数组
 */
export function flatMap(arr, fn) {
  return arr.reduce((res, item) => res.concat(fn(item)), [])
}

yarn add -D jest @types/jest babel-jest @babel/core @babel/preset-env

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          node: 'current',
        },
      },
    ],
  ],
}

// src/add.js
// @ts-check
/**
 * 相加函数
 * @param {Number} than 第一个数字
 * @param {Number} that 第二个数字
 * @returns {Number} 两数之和
 */
export function add(than, that) {
  return than + that
}

// src/add.test.js
import { add } from './add'

test('test add', () => {
  expect(add(1, 2)).toBe(3)
})

// src/uniqueBy.js
// @ts-check

/**
 * js 的数组去重方法
 *  @typedef {any} T 参数数组以及函数的参数类型
 * @param {Array.<T>} arr 要进行去重的数组
 * @param {Function} fn 唯一标识元素的方法，默认使用 {@link JSON.stringify()}
 * @returns {Array.<T>} 进行去重操作之后得到的新的数组 (原数组并未改变)
 */
export function uniqueBy(arr, fn = item => JSON.stringify(item)) {
  const obj = {}
  return arr.filter(item =>
    obj.hasOwnProperty(fn(item)) ? false : (obj[fn(item)] = true),
  )
}

// src/uniqueBy.test.js
import { uniqueBy } from './uniqueBy'

test('test uniqueBy', () => {
  expect(uniqueBy([1, 2, 3, 1, 2])).toEqual(expect.arrayContaining([1, 2, 3]))
})

// src/wait.js
// @ts-check
/**
 * 等待指定的时间/等待指定表达式成立
 * @param {Number|Function} param 等待时间/等待条件
 * @returns {Promise} Promise 对象
 */
export function wait(param) {
  return new Promise(resolve => {
    if (typeof param === 'number') {
      setTimeout(resolve, param)
    } else if (typeof param === 'function') {
      var timer = setInterval(() => {
        if (param()) {
          clearInterval(timer)
          resolve()
        }
      }, 100)
    } else {
      resolve()
    }
  })
}

// src/wait.test.js
import { wait } from './wait'

test('test wait sepecify time', async () => {
  const start = Date.now()
  await wait(1000)
  expect(Date.now() - start).toBeGreaterThanOrEqual(1000)
})

yarn add -D eslint standard

yarn eslint --init

yarn add -D eslint-plugin-jest

module.exports = {
  env: {
    browser: true,
    es6: true,
    // 配置项目使用了 jest
    'jest/globals': true,
  },
  extends: 'standard',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {},
  // 配置 jest 的插件
  plugins: ['jest'],
}

class BasicTableData {
  constructor({
    user = {
      name: 'rx',
      age: 17,
    },
  } = {}) {
    this.user = user
  }
}
class Table extends Vue {
  constructor({ data, methods, mounted, computed }) {
    super({
      data: _.merge(new BasicTableData(), data),
      methods,
      mounted,
      computed,
    })
  }
}

const table = new Table({
  data: {
    user: {
      birthday: new Date(),
      birthdayFormatter: this.calcTime,
    },
  },
  methods: {
    calcTime(time) {
      return time.toISOString()
    },
  },
})

// 将输出 undefined
console.log(table.user.birthdayFormatter)

class BasicTableData {
  constructor({
    user = {
      name: 'rx',
      age: 17,
    },
  } = {}) {
    this.user = user
  }
}
class Table extends Vue {
  constructor({ data, methods, mounted, computed }) {
    super({
      // 关键是这里将 data 声明为普通函数
      data() {
        // 此处为了简洁使用 lodash 的深度合并
        return _.merge(
          new BasicTableData(),
          // 此处判断 data 是否为函数,是的话就绑定 this 计算结果
          typeof data === 'function' ? data.call(this) : data,
        )
      },
      methods,
      mounted,
      computed,
    })
  }
}

const table = new Table({
  data: function() {
    return {
      user: {
        birthday: new Date(),
        birthdayFormatter: this.calcTime,
      },
    }
  },
  methods: {
    calcTime(time) {
      return time.toISOString()
    },
  },
})

// 打印的结果是
// ƒ calcTime(time) {
//   return time.toISOString()
// }
console.log(table.user.birthdayFormatter)

/**
 * 用户类
 */
export class User {
  constructor({ username, password } = {}) {
    this.username = username
    this.password = password
  }
}

import React, { Component } from 'react'
import { User } from './User'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      user: new User(),
    }
  }
  change = e => {
    const el = e.target
    const k = el.name
    const v = el.value
    const user = { ...this.state.user }
    user[k] = v
    this.setState({
      user,
    })
  }
  submit = () => {}
  reset = () => {
    this.setState({
      user: new User(),
    })
  }
  render() {
    const { username, password } = this.state.user
    return (
      <div>
        <div>
          <label htmlFor="username">用户名: </label>
          <input name="username" value={username} onChange={this.change} />
        </div>
        <div>
          <label htmlFor="password">密码: </label>
          <input name="password" value={password} onChange={this.change} />
        </div>
        <div>
          <button onClick={this.submit}>登录</button>
          <button onClick={this.reset}>重置</button>
        </div>
      </div>
    )
  }
}

export default App

/**
 * 用户类
 */
export class User {
  constructor({ username = '', password = '' } = {}) {
    this.username = username
    this.password = password
  }
}

/**
 * 自定义表格组件
 */
Vue.component('my-table', {
  /**
   * 列
   */
  props: {
    columns: {
      type: Array,
      default: [],
    },
    data: {
      type: Array,
      default: [],
    },
  },
  template: `<el-table
  :data="data"
  tooltip-effect="dark"
  style="width: 100%"
  border
  @selection-change="handleSelectionChange"
>
  <template v-for="column in columns">

    <el-table-column
      :type="column.type"
      :prop="column.prop"
      :label="column.title"
      :align="column.align"
      :sortable="column.sortable"
      :width="column.width"
      :formatter="column.formatter"
      v-if="column.customComponent"
    >
      <!--suppress HtmlUnknownAttribute -->
      <template #default="scope">
        <!--这里将传递给模板当前行的数据-->
        <slot :name="humpToLine(column.prop)" :row="scope.row"></slot>
      </template>
    </el-table-column>
    <el-table-column
      :type="column.type"
      :prop="column.prop"
      :label="column.title"
      :align="column.align"
      :sortable="column.sortable"
      :width="column.width"
      :formatter="column.formatter"
      v-else
    >
    </el-table-column>
  </template>

</el-table>`,
  methods: {
    handleSelectionChange(val) {
      this.$emit('handle-selection-change', val)
    },
    humpToLine(data) {
      return toLine(data)
    },
  },
})

/**
 * 分页信息，多次使用到所以定义一个公共的
 */
class Page {
  /**
   * 构造函数
   * @param {Number} current 当前页数，从 1 开始
   * @param {Number} size 每页的数量
   * @param {Number} total 数据总条数
   * @param {Number} pages 数据总页数
   * @param {Array} records 一页的数据记录
   * @param {...Object} [args] 其他的参数项，这里只是为了避免遗漏
   * @returns {Page} 分页对象
   */
  constructor({
    current = 1,
    size = 10,
    total = 0,
    pages = 0,
    records = [],
    ...args
  } = {}) {
    this.current = current
    this.size = size
    this.total = total
    this.pages = pages
    this.records = records
    Object.assign(this, args)
  }
}

/**
 * 表格的列
 */
class TableColumn {
  /**
   * 格式化日期事件
   * @param value 字段的值
   * @returns {String|*} 格式化得到的日期时间字符串 TableColumn.datetimeFormat()
   */
  static datetimeFormat(_row, _column, value, _index) {
    return !value ? '' : rx.dateFormat(new Date(value), 'yyyy-MM-dd hh:mm:ss')
  }

  /**
   * 构造函数
   * @param {String} [prop] 字段名
   * @param {String} [title] 标题
   * @param {'selection'} [type] 列类型，可以设置为选择列
   * @param {Boolean} [sortable=true] 排序方式
   * @param {Number} [width] 宽度
   * @param {'center'} [align='center'] 水平对齐方式
   * @param {Function} [formatter] 格式化列
   * @param {Boolean} [customComponent] 是否自定义组件
   * @param {...Object} [args] 其他的参数项，这里只是为了避免遗漏
   */
  constructor({
    prop,
    type,
    width,
    title,
    sortable = true,
    align = 'center',
    formatter,
    customComponent,
    ...args
  } = {}) {
    this.prop = prop
    this.type = type
    this.width = width
    this.align = align
    this.title = title
    this.sortable = sortable
    this.align = align
    this.formatter = formatter
    this.customComponent = customComponent
    Object.assign(this, args)
  }
}

/**
 * 基本的表格数据配置
 */
class BasicTableData {
  /**
   * 构造函数
   * @param {Object} [form={}] 搜索表单，子类一般需要覆盖（不覆盖的话可能在 html 中没有提示）
   * @param {Array<TableColumn>} [columns=[]] 列信息列表，子类必须覆盖
   * @param {Boolean} [formShow=false] 是否显示搜索表单
   * @param {Page} [page=new Page()] 分页信息，包含数据列表
   * @param {Array} [selectedIdList=[]] 选择的列表 id
   * @param {Boolean} [fileSelectorShow=false] 导入文件选择器是否需要
   */
  constructor({
    form = {},
    columns = [],
    formShow = false,
    page = new Page(),
    selectedIdList = [],
    fileSelectorShow = false,
  } = {}) {
    this.form = form
    this.columns = columns
    this.formShow = formShow
    this.page = page
    this.selectedIdList = selectedIdList
    this.fileSelectorShow = fileSelectorShow
  }
}

/**
 * 基本的表格方法
 */
class BasicTableMethods {
  /**
   * 构造函数
   * @param {Function} createForm 初始化 form 表单，主要是为了自定义初始化逻辑
   * @param {Function} getPage 获取分页信息，需要覆盖
   * @param {Function} exportFile 导出文件，需要覆盖
   * @param {Function} importFile 导入文件，需要覆盖
   * @param {Function} deleteData 删除选择的数据，需要覆盖
   * @param {Function} init 初始化函数，如果可能请使用该函数而非重写 mounted 生命周期函数，该函数会在 mounted 中调用
   * @param {Function} [resetFile] 重置导入选择的文件，必须为 input:file 绑定属性 ref="fileInput"
   * @param {Function} [searchPage] 搜索分页信息
   * @param {Function} [resetPage] 重置分页信息
   * @param {Function} [toggle] 切换搜索表单显示
   * @param {Function} [selection] 选择的 id
   * @param {Function} [changeSize] 改变一页的大小
   * @param {Function} [goto] 跳转到指定页数
   * @param {Function} [deleteSelected] 删除选择的数据项
   * @param {Function} [showFileSelector] 是否显示导入文件选择器
   * @param {Function} [initCommon] 初始化功能，如果重写了 mounted 生命周期函数，请务必调用它！
   */
  constructor({
    createForm = function() {
      throw new Error('如果需要搜索条件，请重写 initForm() 方法')
    },
    getPage = async function(page, entity) {
      throw new Error('如果需要自动分页，请重写 getPage() 方法')
    },
    exportFile = async function() {
      throw new Error('如果需要导出数据，请重写 exportFile() 方法')
    },
    importFile = function() {
      throw new Error('如果需要导入数据，请重写 importFile() 方法')
    },
    deleteData = async function(idList) {
      throw new Error('如果需要删除数据，请重写 deleteData 方法')
    },
    init = async function() {},
    resetFile = function() {
      const $el = this.$refs['fileInput']
      if (!$el) {
        throw new Error(
          '如果需要清空选择文件，请为 input:file 绑定属性 ref 的值为 fileInput',
        )
      }
      $el.value = ''
    },
    searchPage = async function() {
      try {
        this.page = await this.getPage(this.page, this.form)
      } catch (e) {
        console.error(e)
        await rxPrompt.dangerMsg('查询数据失败，请刷新页面')
      }
    },
    resetPage = async function() {
      this.form = this.createForm()
      await this.searchPage()
    },
    toggle = function() {
      this.formShow = !this.formShow
    },
    selection = function(data) {
      this.selectedIdList = data.map(({ id }) => id)
    },
    changeSize = function(size) {
      this.page.current = 1
      this.page.size = size
      this.searchPage()
    },
    goto = function(current) {
      if (!current) {
        current = this.page.current
      }
      if (current < 1) {
        return
      }
      if (current > this.page.pages) {
        return
      }
      this.page.current = current
      this.searchPage()
    },
    deleteSelected = async function() {
      const result = await this.deleteData(this.selectedIdList)
      if (result.code !== 200 || !result.data) {
        await rxPrompt.msg('')
        return
      }
      // noinspection JSIgnoredPromiseFromCall
      rxPrompt.msg('删除成功')
      this.page.current = 1
      await this.searchPage()
    },
    showFileSelector = function() {
      this.fileSelectorShow = !this.fileSelectorShow
    },
    initCommon = async function() {
      this.form = this.createForm()
      this.searchPage()
    },
  } = {}) {
    this.createForm = createForm
    this.getPage = getPage
    this.searchPage = searchPage
    this.resetPage = resetPage
    this.toggle = toggle
    this.selection = selection
    this.changeSize = changeSize
    this.goto = goto
    this.exportFile = exportFile
    this.importFile = importFile
    this.resetFile = resetFile
    this.deleteData = deleteData
    this.init = init
    this.deleteSelected = deleteSelected
    this.showFileSelector = showFileSelector
    this.initCommon = initCommon
  }
}

/**
 * 基本的 vue 表格配置信息
 */
class BasicTableOption {
  /**
   * 构造函数
   * @param {String} [el='#app'] 标签选择器
   * @param {BasicTableData} data 数据
   * @param {BasicTableMethods} methods 方法
   * @param {Function} mounted 初始化方法
   */
  constructor({
    el = '#app',
    data = new BasicTableData(),
    methods = new BasicTableMethods(),
    mounted = async function() {
      await this.initCommon()
      await this.init()
    },
  } = {}) {
    this.el = el
    this.data = data
    this.methods = methods
    this.mounted = mounted
  }
}

/**
 * 基本的表格 vue 类
 */
class BasicTableVue extends Vue {
  /**
   * 构造函数
   * @param {BasicTableOption} option 初始化选项
   * @param {BasicTableData|Function} option.data vue 的 data 数据，如果是 {@link Function} 类型，则必须返回 {@link BasicTableData} 的结构
   * @param {BasicTableMethods} option.methods vue 中的 methods 属性
   * @param {Function} option.mounted 初始化方法，如果覆盖则必须手动初始化表格
   */
  constructor({ data, methods, mounted, ...args } = {}) {
    //注：这里为了应对 data 既有可能是对象，又有可能是函数的情况
    super(
      _.merge(new BasicTableOption(), {
        data: function() {
          return _.merge(
            new BasicTableData(),
            typeof data === 'function' ? data.call(this) : data,
          )
        },
        methods,
        mounted,
        ...args,
      }),
    )
  }
}

class UserInfo {
  constructor({ id, name, age, ...args }) {
    this.id = id
    this.name = name
    this.age = age
    Object.assign(this, args)
  }
}

const app = new BasicTableVue({
  data: {
    columns: [
      new TableColumn({ width: 30, type: 'selection' }),
      new TableColumn({ prop: 'name', title: '姓名' }),
      new TableColumn({ prop: 'age', title: '年龄' }),
      new TableColumn({
        prop: 'operating',
        title: '操作',
        customComponent: true,
      }),
    ],
  },
  methods: {
    createForm() {
      return new UserInfo()
    },
    async getPage(page, entity) {
      return await baseUserInfoApi.page(page, entity)
    },
    deleteData(idList) {
      return baseCustomerApi.delete(idList)
    },
    viewInfo(row) {
      forward('/user_info_detail', row)
    },
    async init() {
      console.log('这里想做一些自定义的初始化操作')
    },
  },
})