<script setup name="memberManage">
import { reactive, ref, getCurrentInstance, onMounted, h } from 'vue'
import { userStatusSet, userEdit, userList } from '@/http/apis/systemManage/userManage'
import { useRoute } from 'vue-router'
// import { storeToRefs } from 'pinia'
import store from '@/store'
const route = useRoute(),
  { proxy } = getCurrentInstance(),
  searchForm = reactive({
    name: undefined,
    userRoleList: undefined
  }),
  tableListRef = ref(),
  total = ref(0),
  column = reactive([
    {
      label: '序号',
      type: 'index',
      width: '80'
    },
    {
      label: '姓名',
      key: 'name',
      prop: 'name'
    },
    {
      label: '角色',
      slot: 'userRoleList',
      minWidth: '200'
    },
    {
      label: '状态',
      key: 'status',
      prop: 'status',
      width: '120',
      render: row => [
        h('span', {
          class: [
            'dot mr-4',
            `${row.status === 'ENABLE' ? 'bg-success' : 'bg-danger'}`
          ]
        }),
        h(
          'span',
          {
            class: `${row.status === 'ENABLE' ? 'text-success' : 'text-danger'}`
          },
          row.status === 'ENABLE' ? '启用' : '禁用'
        )
      ]
    },
    {
      label: '操作',
      slot: 'action',
      width: '120',
      fixed: 'right'
    }
  ]),
  data = ref([]),
  getTableData = async (pageParams = tableListRef.value.pageParams) => {
    const res = await userList({ ...pageParams, ...searchForm, orgCode: route.query.id })
    data.value = res.data.records
    total.value = res.data.total
  },
  search = () => {
    getTableData()
  },
  reset = () => {
    searchForm.name = undefined
    searchForm.userRoleList = undefined
    tableListRef.value.pageParams.pageNumber = 1
    tableListRef.value.pageParams.pageSize = 10
    getTableData()
  },
  // 操作弹窗
  visible = ref(false),
  editName = ref(),
  form = ref({
    status: true
  }),
  edit = (data) => {
    editName.value = data.name
    form.value = {
      ...data,
      userRoleList: data.userRoleList.map(i => i.id),
      status: data.status === 'ENABLE'
    }
    visible.value = true
  },
  rules = {
    phoneNo: [
      {
        required: true,
        pattern: /^1[3456789]\d{9}$/,
        message: '手机号码格式不正确',
        trigger: 'blur'
      }
    ],
    userRoleList: [{ required: true, message: '请选择用户角色', trigger: 'change' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
  },
  formRef = ref(),
  submit = async (formEl) => {
    if (!formEl) {
      return
    }
    await formEl.validate(async (valid) => {
      if (valid) {
        const postData = {
          ...form.value,
          status: form.value.status ? 'ENABLE' : 'DISABLE',
          userRoleInfoList: store.userStore.roleListDict.filter(i => form.value.userRoleList.includes(i.id)).map(item => {
            return {
              id: item.id,
              name: item.name
            }
          })
        }
        await userEdit(postData)
        proxy.$message.success('编辑成功！')
        visible.value = false
        getTableData()
      }
    })
  },
  enabled = (data) => {
    const text = data.status === 'DISABLE' ? '启用' : '禁用'
    proxy.$messageBox
      .confirm(`是否${text}该用户?`, '提示！', {
        type: 'warning'
      })
      .then(async () => {
        await userStatusSet({
          employeeCode: data.employeeCode,
          operation: data.status === 'DISABLE' ? 'ENABLE' : 'DISABLE',
          userId: data.userId
        })
        proxy.$message.success(`${text}成功！`)
        getTableData()
      })
  }
onMounted(() => {
  store.userStore.setRoleStore()
  getTableData()
})
</script>

<template>
  <el-card shadow="never" class="search">
    <el-form label-suffix=":" :model="searchForm" size="small">
      <el-row :gutter="16">
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input v-model="searchForm.name" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用户角色">
            <el-select
              v-model="searchForm.userRoleList"
              style="width: 100%"
              placeholder="请选择"
              :multiple="true"
              value-key="id"
            >
              <el-option
                v-for="(item,index) in store.userStore.roleListDict"
                :key="index"
                :label="item.name"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item class="btn">
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
  <el-card title="角色列表" shadow="never">
    <table-list
      ref="tableListRef"
      :column="column"
      :data="data"
      :total="total"
      @get-table-data="getTableData"
    >
      <template #userRoleList="{ scope }">
        <el-tag
          v-for="(item,index) in scope.row.userRoleList"
          :key="index"
          type="info"
          class="mr-4 mb-4"
        >{{ item.name }}</el-tag>
      </template>
      <template #action="{ scope }">
        <a class="text-primary" @click="edit(scope.row)">编辑</a>
        <a @click="enabled(scope.row)">{{ scope.row.status==='ENABLE'?'禁用':'启用' }}</a>
      </template>
    </table-list>
  </el-card>
  <el-dialog
    :model-value="visible"
    :title="'编辑' + ' - ' + editName"
    width="600px"
    @close="visible=false"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="90px"
      label-suffix=":"
    >
      <el-form-item label="手机号码" prop="phoneNo">
        <el-input
          v-model="form.phoneNo"
          style="width: 200px"
          placeholder="请输入"
          maxlength="11"
        />
      </el-form-item>
      <el-form-item label="用户角色" prop="userRoleList">
        <el-checkbox-group v-model="form.userRoleList">
          <el-checkbox
            v-for="item in roleList.filter(i=>i.name==='普通用户'||i.name==='单位管理员')"
            :key="item.id"
            :label="item.id"
          >{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="form.status"
          style="
                  --el-switch-on-color: #4ecb74;
                  --el-switch-off-color: #ff3b30;
                "
        />&nbsp;
        <span :style="{ color: form.status ? '#4ECB74':'#FF3B30'}">{{
          form.status? "已启用" : "已禁用"
        }}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit(formRef)"> 提交 </el-button>
      <el-button @click="visible = false"> 关闭 </el-button>
    </template>
  </el-dialog>
</template>
