<template>
  <div>
    <page-header :actions="actions" @click="handleAdd" />
    <query-table v-model="list" :request="getUserList" row-key="userId">
        <template v-slot:search="slotProps">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="slotProps.formData.name"></el-input>
          </el-form-item>
          <el-form-item label="手机" prop="phone">
            <el-input v-model="slotProps.formData.phone"></el-input>
          </el-form-item>
        </template>
        <template #table>
          <el-table-column prop="avatar" label="头像">
            <template #default="scope">
              <el-avatar :src="scope.row.avatar" :size="98"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="phone" label="手机"></el-table-column>
          <el-table-column prop="status" label="状态">
            <template #default="scope">
              {{transferStatus(scope.row.status)}}
            </template>
          </el-table-column>
          <el-table-column prop="createDate" label="创建时间">
            <template #default="scope">
              {{formatDate(scope.row.createDate)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <router-link :to="{name: 'user.edit', query: {id: scope.row.userId}}">
                <el-button type="text"><i class="el-icon-edit" /> 编辑</el-button>
              </router-link>
            </template>
          </el-table-column>
        </template>
    </query-table>
  </div>
</template>

<script>
import { computed, onMounted, onUpdated, reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import request from '@/utils/request'
import service from '@/service'
import Pagination from '@/components/Pagination/index.vue'
// import { useModel } from '@/store'

const getUserList = params => request({
  ...service.user.list,
  params
})

export default {
  components: {
    Pagination,
  },

  setup(props) {
    const list = ref([])
    const router = useRouter()

    const formatDate = dt => dayjs(dt).format('YYYY-MM-DD HH:mm')
    const transferStatus = st => st === 1 ? '正常' : '异常'

    const handleAdd = () => {
      router.push({name: 'user.edit'})
    }

    return {
      list,
      formatDate,
      transferStatus,
      getUserList,
      actions: [{ icon: 'el-icon-plus', text: '新增' }],
      handleAdd,
    }
  }
}
</script>


