<template>
  <div>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column type="expand">
        <!-- 这里是展开的详细信息 -->
        <template #default="props">
          <el-row>
            <el-col :span="12">
              <h4>基本信息</h4>
              <p m="t-0 b-2">账户名: {{ props.row.userName }}</p>
              <p m="t-0 b-2">昵称: {{ props.row.nickName }}</p>
              <p m="t-0 b-2">性别: {{ props.row.sex }}</p>
              <p m="t-0 b-2">年龄: {{ props.row.age }}</p>
              <p m="t-0 b-2">手机号: {{ props.row.phone }}</p>
              <p m="t-0 b-2">地区: {{ props.row.area }}</p>
            </el-col>

            <el-col :span="12">
              <h4>家政经历</h4>
              <p m="t-0 b-2">工作范围: {{ props.row.workRange }}</p>
              <p m="t-0 b-2">擅长技能: {{ props.row.skill }}</p>
              <p m="t-0 b-2">个人特点: {{ props.row.characteristic }}</p>
              <p m="t-0 b-2">证书: {{ props.row.cert }}</p>
              <p m="t-0 b-2">工作经验: {{ props.row.workExp }}</p>
              <p m="t-0 b-2">状态: {{ props.row.status }}</p>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column v-if="idShow" sortable label="id" prop="id" />
      <el-table-column sortable label="注册时间" prop="createTime" />
      <el-table-column sortable label="用户名" prop="userName" />
      <el-table-column sortable label="昵称" prop="nickName" />
      <el-table-column sortable label="性别" prop="sex" />
      <el-table-column sortable label="家政分类" prop="categoryName" />
      <el-table-column sortable label="状态" prop="status" />
      <el-table-column align="right">
        <template #header>
          <el-input v-model="searchMsg" size="medium" placeholder="输入昵称或电话号码" @keyup.enter.native="searchUser()" />
        </template>

        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <nav v-if="total * 1" style="text-align: -webkit-center">
      <el-pagination :total="total" :page-size="pageSize" :current-page="pageNum" :page-sizes="pageSizes"
        layout="prev, pager, next" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </nav>

    <div>
      <el-dialog title="修改信息" :visible.sync="centerDialogVisible" width="50%" center>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="昵称">
                <el-input v-model="form.nickName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="form.sex" placeholder="请选择性别">
                  <el-option label="男" value="0" />
                  <el-option label="女" value="1" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="年龄">
                <el-input v-model="form.age" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="证书">
                <el-input v-model="form.cert" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号">
                <el-input v-model="form.phone" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地区">
                <el-input v-model="form.area" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="擅长技能">
                <el-input v-model="form.skill" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态">
                <el-select v-model="form.status" placeholder="请选择状态">
                  <el-option label="禁用" value="1" />
                  <el-option label="正常" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22">
              <el-form-item label="工作经验">
                <el-input v-model="form.workExp" />
              </el-form-item>
            </el-col>
            <el-col :span="22">
              <el-form-item label="工作范围">
                <el-input v-model="form.workRange" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmForm()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  updateUserInfo,
  delUserInfo,
  selectUserInfo
} from '@/api/admin'
import { Message } from 'element-ui'
export default {
  name: 'ServerManagement',
  data() {
    return {
      pageSizes: [10, 20, 50, 100], // 分页下拉框选项
      searchMsg: '',
      idShow: false,
      // 分页控制
      pageSize: 4,
      pageNum: 1,
      total: 0,
      centerDialogVisible: false,
      filterTableData: [
        {
          createTime: "",
          userName: "",
          nickName: "",
          sex: "",
          age: "",
          area: "",
          phone: "",
          categoryName: " ",
          workRange: "",
          skill: "",
          characteristic: "",
          cert: "",
          workExp: "",
        },
      ],
      // 编辑表单
      labelPosition: 'right',
      form: {}
    }
  },
  created() {
    const p = {
      pageSize: this.pageSize,
      pageNum: this.pageNum,
      userType: '1'
    }
    selectUserInfo(p).then((response) => {
      if (response.data.code === 200) {
        this.filterTableData = response.data.data.rows
        this.filterTableData.forEach((e) => {
          if (e.status === '0') e.status = '正常'
          else if (e.status === '1') e.status = '禁用'
          if (e.sex === '0') e.sex = '男'
          else if (e.sex === '1') e.sex = '女'
          else if (e.sex === '2' || e.sex === null) e.sex = '未知'
        })
        this.total = parseInt(response.data.data.total)
      }
    })
  },
  methods: {
    getList() {
      const p = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        userType: '1'
      }
      selectUserInfo(p).then((response) => {
        if (response.data.code === 200) {
          this.filterTableData = response.data.data.rows
          this.filterTableData.forEach((e) => {
            if (e.status === '0') e.status = '正常'
            else if (e.status === '1') e.status = '禁用'
            if (e.sex === '0') e.sex = '男'
            else if (e.sex === '1') e.sex = '女'
            else if (e.sex === '2' || e.sex === null) e.sex = '未知'
          })
          this.total = parseInt(response.data.data.total)
        }
      })
    },
    handleEdit(index, row) {
      this.centerDialogVisible = true
      this.form = JSON.parse(JSON.stringify(row))
    },
    // 修改用户信息
    // 修改前验证
    validate() {
      const phoneRegx =
        /^1[3-9]\d{9}$/
      return phoneRegx.test(this.form.phone)
    },
    confirmForm() {
      if (this.validate()) {
        updateUserInfo(this.form).then((response) => {
          if (response.data.code === 200) {
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
            this.getList()
          }
        })
        this.centerDialogVisible = false
      } else {
        Message({
          message: '手机号格式不正确',
          type: 'error',
          duration: 5 * 1000
        })
      }
    },

    // 删除用户
    handleDelete(index, row) {
      delUserInfo(row.id).then((response) => {
        if (response.data.code === 200) {
          Message({
            message: response.data.msg,
            type: 'success',
            duration: 5 * 1000
          })
          this.getList()
        }
      })
    },
    // 搜索用户
    searchUser() {
      const phoneRegx =
        /^1[3-9]\d{9}$/
      if (phoneRegx.test(this.searchMsg)) {
        var parmas = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          phoneNumber: this.searchMsg,
          userType: '1'
        }
        selectUserInfo(parmas).then((response) => {
          if (response.data.code === 200) {
            this.filterTableData = response.data.data.rows
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
          } else if (response.data.code === 516) {
            this.filterTableData = response.data.data
            Message({
              message: response.data.msg,
              type: 'warning',
              duration: 5 * 1000
            })
          }
        })
      } else {
        var parma = {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          nickName: this.searchMsg,
          userType: '1'
        }
        selectUserInfo(parma).then((response) => {
          if (response.data.code === 200) {
            this.filterTableData = response.data.data.rows
            Message({
              message: response.data.msg,
              type: 'success',
              duration: 5 * 1000
            })
          } else if (response.data.code === 516) {
            this.filterTableData = response.data.data
            Message({
              message: response.data.msg,
              type: 'warning',
              duration: 5 * 1000
            })
          }
        })
      }
    },
    // 更换一页显示的数目
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.getList()
    },
  }
}
</script>
<style scoped>
::v-deep .el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: bold;
  margin-top: 2rem;
}
</style>
