import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      total: 20,
      loading: false,
      tableData: [],
      tableOptions: {
        sortTable: true,
        maxHeight: 'calc(100vh - 336px)',
        height: 'calc(100vh - 336px)'
      },
      columns: [{
        type: 'selection',
        single: false
      },
      {
        label: '序号',
        index: true
      },
      {
        label: '用户ID',
        prop: 'id',
        showTooltip: true,
        width: 70
      },
      {
        label: '用户名称',
        showTooltip: true,
        width: '100',
        prop: 'loginName'
      },
      {
        label: '登录手机号码',
        width: '110',
        prop: 'phone',
        render: (h, row) => {
          if (sessionStorage.getItem('showFlag') === 'true') {
            return <span>{ row.phone }</span>
          } else {
            return <span>{ row.phone.substr(0, 3) + '****' + row.phone.substring(7) }</span>
          }
        }
      },
      {
        label: '注册时间',
        width: '100',
        prop: 'gmtCreate',
        showTooltip: true
      },
      {
        label: '企业地址',
        prop: 'enterpriseAddress',
        width: '100',
        showTooltip: true
      },
      {
        label: '主企业名称',
        prop: 'list',
        render: (h, row) => {
          return h('div', row.list.map(item => {
            return h('div', {
              attrs: {
                class: ''
              }
            }, [h('el-tooltip', {
              attrs: {
                class: 'el-tooltip cell',
                effect: 'dark',
                content: item.mainCompany,
                placement: 'top'
              },
              style: {
                paddingLeft: '0px'
              }
            }, [h('div', {}, item.mainCompany)])])
          }))
        }
      },
      {
        label: '是否有在途支用',
        prop: 'useMoney',
        width: '80',
        render: (h, row) => {
          return <span>{ row.useMoney ? '是' : '否' }</span>
        }
      },
      {
        label: '业务经理',
        prop: 'projectManager',
        width: '100',
        showTooltip: true
      },
      {
        label: '风控经理',
        width: '100',
        prop: 'riskManager'
      },
      {
        label: '操作',
        show: this.$route.query.type !== 'details',
        render: (h, row) => {
          const btnList = []
          if (!row.projectManager && new Date().getTime() - new Date(row.gmtCreate).getTime() < 3 * 24 * 60 * 60 * 1000) {
            btnList.push({ msg: '认领', icon: 'el-icon-edit', power: 'receive_client', size: '20px', category: 'receive' })
          }
          if (!row.projectManager && new Date().getTime() - new Date(row.gmtCreate).getTime() > 3 * 24 * 60 * 60 * 1000) {
            btnList.push({ msg: '分配业务经理', icon: 'el-icon-share', size: '20px', power: 'set_projectManager', category: 'assignPM' })
          }
          if (row.projectManager) {
            btnList.push({ msg: '移交业务经理', icon: 'iconfont icon-orange icon-icon_yijiao', size: '20px', power: 'change_projectManager', category: 'handoverPM' })
          }
          if (row.riskManager) {
            btnList.push({ msg: '移交风控经理', icon: 'iconfont icon-orange icon-icon_yijiao', size: '20px', power: 'change_riskManager', category: 'handoverRM' })
          }
          btnList.push({ msg: '重置密码', icon: 'iconfont icon-zhongxinshengchengchushimima', size: '16px', power: 'rest_password', category: 'reset' })
          const options = btnList.map(item => {
            return (
              this.tablePower({ item, row }) &&
              <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
                <span class='table-icon-box'>
                  <i class={item.icon} style={{ fontSize: item.size }} onClick={() => { this.handlerOperate(item.category, row) }}></i>
                </span>
              </el-tooltip>
            )
          })
          return <div>{ options }</div>
        },
        width: 230
      }]
    }
  },
  computed: {
    tablePower() {
      return ({ item, row }) => {
        const { power } = item
        if (power) {
          if (JSON.parse(sessionStorage.getItem('buttons')).includes(power)) {
            return true
          }
        } else {
          return true
        }
      }
    },
    ...mapGetters([
      'showFlag'
    ])
  }

}
