
<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户昵称">
                <a-input v-model="queryParam.nickname" placeholder="用户昵称" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="用户手机号">
                <a-input v-model="queryParam.username" placeholder="用户手机号" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="身份筛选" has-feedback>
                <a-select v-model="queryParam.identity_id" placeholder="身份筛选">
                  <a-select-option v-for="item in indentitys" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-button type="primary" @click="search"><a-icon type="search" />搜索</a-button>
              <a-button class="ml8" type="primary" @click="onAddRole"><a-icon type="plus" />新增</a-button>
              <a-button class="ml8" @click="resetSearch"><a-icon type="undo" />重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </template>

    <!-- 列表 -->
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(row) => row.user.user_id"
        showPagination="auto"
        bordered
        size="default"
        :scroll="{ x: 1200, y: 1000 }">
        <div slot="user_id" slot-scope="text, record">{{ record.user.user_id }}</div>
        <div slot="nickname" slot-scope="text, record" >{{ record.user.nickname || '-' }}</div>
        <div slot="name" slot-scope="text, record">{{ record.user.name || '-' }}</div>
        <div slot="username" slot-scope="text, record">{{ record.user.username || '-' }}</div>
        <div slot="identity" slot-scope="text, record">
          <img v-if="record.identity&& record.identity.cover" :src="record.identity.cover" alt="" style="width:60px">
          <span v-else> {{ record.identity.name }}</span>
        </div>
        <div slot="invite" slot-scope="text, record" style="color: #1890ff">{{ record.user.invite || '-' }}</div>
        <div slot="parent" slot-scope="text, record">{{ record.parent.nickname }}<div>{{ record.parent.username }}</div></div>

        <span slot="created_at" slot-scope="text, record">{{ record.created_at }}</span>
        <!-- 操作 -->
        <div slot="actions" slot-scope="text, record">
          <a class="ant-dropdown-link" @click="onEdit(record)">更改推荐人</a>
        </div>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable, UserInfo } from '@/components'
import DeriveButton from '@/components/OrderDetailInfo/DeriveButton'
import moment from 'moment'
import { getMiddlesUser } from '@/api/user'
import EditInvite from './widgets/EditInvite.vue'
import AddUser from './widgets/AddUser.vue'

// 列表规格
const columns = [
  {
    title: '用户ID',
    scopedSlots: { customRender: 'user_id' },
    align: 'center',
    width: 80
  },
  {
    title: '当前用户信息',
    children: [
      {
        title: '昵称',
        scopedSlots: { customRender: 'nickname' },
        align: 'center',
        width: 200
      },
      {
        title: '真实姓名',
        scopedSlots: { customRender: 'name' },
        align: 'center',
        width: 140
      },
      {
        title: '用户手机',
        scopedSlots: { customRender: 'username' },
        align: 'center',
        width: 140
      },
      {
        title: '身份',
        scopedSlots: { customRender: 'identity' },
        align: 'center',
        width: 140
      },
      {
        title: '邀请码',
        scopedSlots: { customRender: 'invite' },
        align: 'center',
        width: 140
      }
    ],
    width: 300,
    align: 'center'
  },
  {
    title: '推荐人手机号',
    scopedSlots: { customRender: 'parent' },
    width: 140,
    align: 'center'
  },
  {
    title: '注册时间',
    dataIndex: 'created_at',
    width: 200,
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'status10',
    scopedSlots: { customRender: 'actions' },
    align: 'center',
    width: 160,
    fixed: 'right'
  }
]

export default {
  name: 'UserIndex',
  components: {
    STable,
    UserInfo,
    DeriveButton
  },
  data () {
    return {
      columns,
      indentitys: [
        { id: 1, name: '普通用户' },
        { id: 2, name: 'VIP' },
        { id: 4, name: '创客' },
        { id: 6, name: '代理商' }
      ], // 业务类型
      queryParam: {
        username: undefined,
        nickname: undefined,
        identity_id: undefined
      },
      listCount: 0,
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        return getMiddlesUser(requestParameters)
      }
    }
  },
  watch: {
    $route (to, from) {
      if (to.name === 'UserIndex' && (
        from.name === 'Home' ||
        from.name === 'cityExperienceOfficer' ||
        from.name === 'StockOut' ||
        from.name === 'StockIn' ||
        from.name === 'DealerIn' ||
        from.name === 'DealerOut' ||
        from.name === 'SalesOnline' ||
        from.name === 'SalesStock')
      ) {
        this.$refs.table.loadData()
      }
    }
  },
  methods: {
    moment,
    // 搜索列表
    search () {
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 重置搜索列表
    resetSearch () {
      this.queryParam = {
        username: undefined,
        nickname: undefined,
        identity_id: undefined
      }
      this.$refs.table.refresh(true) // 重置接口且刷先到第一页
    },
    // 新增用户
    onAddRole () {
      const success = {
        title: '新增用户',
        width: 600,
        maskClosable: true,
        closable: true,
        okText: '确认新增',
        cancelText: '取消'
      }
      this.$dialog(
        AddUser,
        {
          on: {
            ok: () => {
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    },
    // 更改推荐人
    onEdit (item) {
      const success = {
        title: '更改推荐人',
        width: 600,
        maskClosable: true,
        closable: true,
        okText: '确认变更',
        cancelText: '取消'
      }
      this.$dialog(
        EditInvite,
        {
          item,
          on: {
            ok: () => {
              this.$refs.table.loadData()
            }
          }
        },
        success
      )
    }
  }
}
</script>

<style lang="less" scoped>
.ml8 {
  margin-left: 8px;
}
</style>
