<template>
  <table-template :soul="this">
    <template #avatar="{ record }">
      <a-avatar :src="record.avatar" />
    </template>
    <template #userType="{ record }">
      <span
        >{{record.roleTypeValue}} &nbsp;
        <a-dropdown :trigger="['click']" v-if="hasPerm">
          <a><a-icon type="edit" @click="(e) => e.preventDefault('SYS0200101.EDIT')" /></a>
          <a-menu slot="overlay" @click="({ key }) => edit(key, record)">
            <a-menu-item key="0"> 修改为 普通用户 </a-menu-item>
            <a-menu-item key="1"> 修改为 客服 </a-menu-item>
            <a-menu-item key="2"> 修改为 估价员 </a-menu-item>
            <a-menu-item key="3"> 修改为 销售 </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
    </template>
  </table-template>
</template>

<script>
import { TableTemplate, TableScript, SearchType } from '@/components/table'
import { getPage, save } from '@/api/user'
import dayjs from 'dayjs'

const columns = [
  { title: '头像', scopedSlots: { customRender: 'avatar' }, width: 120 },
  {
    title: '用户名',
    dataIndex: 'userName',
    width: 120,
    filter: { type: SearchType.STRING }
  },
  { title: '昵称', dataIndex: 'nickName' },
  { title: '手机', dataIndex: 'phone', filter: { type: SearchType.STRING } },
  { title: '微信唯一id', dataIndex: 'unionId' },
  { title: '小程序id', dataIndex: 'openId' },
  {
    title: '用户类型',
    dataIndex: 'roleType',
    hidden: true,
    enum: 'BIZ0001',
    filter: { type: SearchType.ENUM }
  },
  { title: '用户类型', scopedSlots: { customRender: 'userType' } },
  {
    title: '注册时间',
    dataIndex: 'createTime',
    width: 180,
    filter: { type: SearchType.RANGE },
    customRender: (text) => dayjs(text).format('YYYY-MM-DD HH:mm:ss')
  }
]

export default {
  name: 'UserList',
  mixins: [TableScript],
  components: { TableTemplate },
  data() {
    return {
      columns,
      useYScroll: true,
      codes: [['BIZ0001'], []]
    }
  },
  methods: {
    queryData: getPage,
    edit(key, record) {
      if (key == record.roleType) {
        return
      }
      if (key != 0 && !record.phone) {
        this.$message.error('用户未绑定手机号')
        return
      }
      save({ id: record.id, roleType: key }).then(({ code }) => {
        if (code == 200) {
          this.$message.success('保存成功')
          this.reset()
        }
      })
    }
  }
}
</script>