<template>
  <div class="table-box">
    <div class="card table-main">
      <!-- 表格头部 操作按钮 -->
      <div class="table-header">
        <div class="header-button-lf">
          <el-form :model="pageable" label-width="auto"  :inline="true">
            <el-form-item label="账号:">
              <el-input v-model="pageable.user_account" style="width: 200px" placeholder="请输入账号" clearable  />
            </el-form-item>
            <el-form-item label="姓名:">
              <el-input v-model="pageable.user_name" style="width: 200px" placeholder="请输入姓名" clearable  />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> 查询 </el-button>
              <el-button style="margin-left: 10px" @click="resetQuery"> 重置 </el-button>
              <el-button  style="margin-left: 10px" type="primary" plain  @click="handleAdd" disabled> 新增 </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格主体 -->
      <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
        <el-table-column align="left" label="序号" width="45px" :show-overflow-tooltip="true">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <template v-for="item in columns" :key="item">
          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
            <template #default="scope">
              <template v-if="item.prop === 'operation'">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <el-button type="primary" link @click="handleUpdate">
                    <el-icon >
                      <Edit />
                    </el-icon>
                  </el-button>
                </el-tooltip>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <el-button type="primary" link  @click="handleDelete(scope.row)">
                    <el-icon >
                      <Delete />
                    </el-icon>
                  </el-button>
                </el-tooltip>

                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="修改密码"
                  placement="top"
                >
                  <el-button type="primary" link  @click="handlePassword(scope.row)">
                    <el-icon style="transform: rotate(45deg);"><Key /></el-icon>
                  </el-button>
                </el-tooltip>
              </template>
            </template>
          </el-table-column>
        </template>

        <!-- 无数据 -->
        <template #empty>
          <div class="table-empty">
            <slot name="empty">
              <img src="@/assets/images/notData.png" alt="notData" />
              <div>暂无数据</div>
            </slot>
          </div>
        </template>
      </el-table>
      <!-- 分页组件 -->
<!--      <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />-->
    </div>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="700px" append-to-body>
      <el-form ref="formRef" :model="userForm" :rules="rules" label-width="120px">
        <el-form-item label="用户账号" prop="account">
          <el-input v-model="userForm.account" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item v-if="dialog.isMode" label="登录密码" prop="password">
          <el-input v-model="userForm.password" type="password" placeholder="请输入" clearable show-password />
        </el-form-item>
        <el-form-item v-if="dialog.isMode" label="确认密码" prop="confirmPassword">
          <el-input v-model="userForm.confirmPassword" type="password" placeholder="请输入" clearable show-password />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role"  placeholder="请选择" clearable>
            <el-option label="观测员" value="1" />
            <el-option label="预报员" value="2" />
            <el-option label="管理员" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联台站" prop="stations">
          <el-select v-model="userForm.stations" multiple placeholder="请选择" clearable>
            <el-option label="便携站" value="1" />
            <el-option label="固定站" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="userForm.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="职务" prop="post">
          <el-input v-model="userForm.post" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="所属单位" prop="affiliation">
          <el-input v-model="userForm.affiliation" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="userForm.phone" placeholder="请输入" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog :title="dialogPassword.title" v-model="dialogPassword.visible" width="700px" append-to-body>
      <el-form ref="formRef" :model="userForm" :rules="rules" label-width="120px">
        <el-form-item label="用户账号" >
          <el-input v-model="userForm.account" disabled placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input v-model="userForm.password" type="password" placeholder="请输入" clearable show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="userForm.confirmPassword" type="password" placeholder="请输入" clearable show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPassword">取 消</el-button>
          <el-button type="primary" @click="submitFormPassword">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="useProTable">
import Pagination from "@/components/ProTable/components/Pagination.vue";
import {ref, reactive, onMounted} from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { ElMessageBox } from 'element-plus'
import {getQueryAllSysItem, getUserList} from "@/api/modules/allData";
const pageable = ref<any>({
  user_account:'',
  user_name: '',
  pageNum: 1,
  pageSize: 20,
  total: 1
});



// 查询功能
const handleQuery = () => {
  processTableData.value = [...originalData.value]
  const filteredData = processTableData.value.filter(item => {
    return (
      (item.user_account && item.user_account.includes(pageable.value.user_account)) && (item.user_name && item.user_name.includes(pageable.value.user_name))
    );
  });

  processTableData.value = filteredData;
};

const originalData = ref([]);

//搜索功能
const resetQuery = () => {
  // 清空查询条件
  pageable.value.user_account = '';
  pageable.value.user_name = '';
  processTableData.value = []
  processTableData.value = [...originalData.value]; // 假设 originalData 存储了原始数据列表
};

/**
 * @description 每页条数改变
 * @param {Number} val 当前条数
 * @return void
 * */
const handleSizeChange = (val: number) => {
  console.log(val);
};

/**
 * @description 当前页改变
 * @param {Number} val 当前页
 * @return void
 * */
const handleCurrentChange = (val: number) => {
  console.log(val);
};

const processTableData = ref([
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "user_account", label: "用户账号" },
  { prop: "user_name", label: "用户姓名" },
  { prop: "user_role_id", label: "角色" },
  { prop: "user_job", label: "职务" },
  { prop: "user_unit", label: "所属单位" },
  { prop: "user_phone", label: "联系电话" },
  { prop: "asInfo", label: "台站",width:250 },
  // { prop: "operation", label: "操作", width:150,align: 'center' }
]);

const dialog = reactive<any>({
  visible: false,
  title: '',
  isMode: true
});

const dialogPassword = reactive<any>({
  visible: false,
  title: ''
});

const formRef = ref<any>();
const rules = ref<any>(
  {
    account: [{ required: true, message: "用户账号不能为空", trigger: "blur" }],
    password: [{ required: true, message: "登录密码不能为空", trigger: "blur" }],
    confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }],
    role: [{ required: true, message: "角色不能为空", trigger: "blur" }],
    stations: [{ required: true, message: "关联台站不能为空", trigger: "blur" }],
  }
);


const initFormData = ref<any>(
  {
    account: "Admin",
    password: "",
    confirmPassword: "",
    role: "",
    stations:[],
    name: "",
    post: "",
    affiliation: "",
    phone: ""
  }
);


const userForm = ref<any>({
  account: "Admin",
  password: "",
  confirmPassword: "",
  role: "",
  stations:[],
  name: "",
  post: "",
  affiliation: "",
  phone: ""
});

/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "新增用户";
  dialog.isMode = true;
}

/** 修改按钮操作 */
const handleUpdate = async (row?: any) => {
  reset();
  dialog.visible = true;
  dialog.title = "编辑用户";
  dialog.isMode = false;
}

/** 修改密码按钮操作 */
const handlePassword = async (row?: any) => {
  reset();
  dialogPassword.visible = true;
  dialogPassword.title = "修改密码";
}

/** 修改密码取消按钮 */
const cancelPassword = () => {
  reset();
  dialogPassword.visible = false;
}


/** 修改密码提交按钮 */
const submitFormPassword = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialogPassword.visible = false;
    }
  });
}


/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 表单重置 */
const reset = () => {
  userForm.value = { ...initFormData };
  formRef.value?.resetFields();
}

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      dialog.visible = false;
    }
  });
}

/** 删除按钮操作 */
const handleDelete = async (row?: any) => {
  ElMessageBox.confirm('是否确认删除账号为"' + row.a + '"的数据项？', {
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    type: 'warning',
    title:'删除数据',
    draggable: true
  })
    .then(() => {

    })
    .catch(() => {

    })
}




const getList= async ()=>{
  const { data } = await getUserList();
  processTableData.value = data.list
  processTableData.value = transformData(data.list)
  originalData.value = [...transformData(data.list)]
  // pageable.value.total = data.total
}

function transformData(originalData) {
  return originalData.map(item => {
    // 判空处理，如果 asInfo 不存在或者长度为 0，返回 null 或空字符串
    const asInfoString = item.asInfo && item.asInfo.length > 0
      ? item.asInfo.map(as => `${as.as_name}（${as.as_code}）`).join('、')
      : null; // 或者使用 '' 如果你希望返回空字符串

    // 判空处理，如果 user 对象不存在，返回一个空对象
    const user = item.user || {};

    return {
      ...user,
      asInfo: asInfoString // 这里 asInfoString 可能是 null 或字符串
    };
  });
}

onMounted(() => {
  getList()
})

</script>
