<script setup lang="ts">
import { useColumns } from "./columns";
import { httpList, httpStatus } from "/@/api/system/account";
import { reactive, ref, onMounted } from "vue";
import { type FormInstance } from "element-plus";
import { TableProBar } from "/@/components/ReTable";
import { type PaginationProps } from "@pureadmin/table";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useNav } from "/@/layout/hooks/nav";
import { statusList } from "/@/utils/status";
import resetPassword from "./resetPassword.vue";
import { responseHandle } from "/@/utils/responseHandle";
import { useUserStoreHook } from "/@/store/modules/user";
import menuType from "./types";
import addEdit from "./addEdit.vue";

const { logout } = useNav();
defineOptions({
  name: "Account"
});
const powers = ref([]);
const form = reactive({
  nickname: "",
  username: "",
  status: "",
  page: 1,
  size: 15
});

const dataList = ref([]);
const loading = ref(true);
const { columns } = useColumns();
const showModel = ref(false);
const itemId = ref("");
const isDetails = ref("add");
const sitem = reactive<menuType>({
  id: "", //账户id
  nickname: "", //真实姓名
  mobile: ""
});
const passwordModelId = ref("");
const passwordModel = ref(false);
const formRef = ref<FormInstance>();

const pagination = reactive<PaginationProps>({
  total: 0,
  pageSize: 15,
  currentPage: 1,
  background: true
});

//重置密码
const resetRwd = async row => {
  const { id } = row;
  passwordModelId.value = id;
  passwordModel.value = true;
};

//修改状态
const handleStatus = async row => {
  const { id, status } = row;

  const { code, message } = await httpStatus({
    id,
    status: status + "" === "1" ? "0" : "1"
  });

  responseHandle({
    code,
    message,
    logout,
    handler: () => onSearch()
  });
};

async function handleCurrentChange(val: number) {
  form.page = val;
  await onSearch();
}

async function handleSizeChange(val: number) {
  form.size = val;
  form.page = 1;
  await onSearch();
}

function handleSelectionChange(val) {
  console.log("handleSelectionChange", val);
}

async function onSearch() {
  loading.value = true;

  const { code, data, message } = await httpList({
    ...form,
    noRela: true
  });

  responseHandle({
    code,
    message,
    logout,
    handler: () => {
      const { list, count } = data;
      dataList.value = list ?? [];
      pagination.total = count ?? 0;
      pagination.pageSize = form.size;
      pagination.currentPage = form.page;
    }
  });
  loading.value = false;
}
async function resetSearch() {
  form.page = 1;
  await onSearch();
}
//新建/编辑/详情弹窗
function editItem(id, type, item) {
  itemId.value = id;

  isDetails.value = type;
  const { nickname, mobile } = item;
  sitem.nickname = nickname;
  sitem.mobile = mobile;
  sitem.id = id;
  showModel.value = true;
}
const submitRefresh = () => {
  showModel.value = false;
  onSearch();
};
const submitCancel = () => {
  showModel.value = false;
};
const resetCancel = () => {
  passwordModel.value = false;
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  form.page = 1;
  onSearch();
};

onMounted(() => {
  powers.value = useUserStoreHook().getMenuActions("account");
  onSearch();
});
</script>

<template>
  <div class="main">
    <div v-show="powers.some(i => i == '001')">
      <el-form
        ref="formRef"
        :model="form"
        size="small"
        :label-width="0"
        class="bg-white pl-8 pt-4"
      >
        <el-row :gutter="12">
          <el-col :span="6">
            <el-form-item prop="status">
              <el-select
                v-model="form.status"
                style="width: 100%"
                placeholder="账号状态"
                clearable
              >
                <el-option
                  v-for="(si, sii) in statusList"
                  :key="'status' + si.value + sii"
                  :label="si.label"
                  :value="si.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="nickname">
              <el-input
                v-model="form.nickname"
                placeholder="真实姓名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="username">
              <el-input
                v-model="form.username"
                placeholder="手机号"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                :icon="useRenderIcon('search')"
                :loading="loading"
                @click="resetSearch"
              >
                搜索
              </el-button>
              <el-button
                :icon="useRenderIcon('refresh')"
                @click="resetForm(formRef)"
              >
                重置
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <TableProBar
        title="运营账号管理"
        :loading="loading"
        size="small"
        :dataList="dataList"
        @refresh="onSearch"
      >
        <template #buttons>
          <!-- <el-button
            type="primary"
            size="small"
            :icon="useRenderIcon('add')"
            @click="editItem('', 'add', {})"
          >
            新增
          </el-button> -->
        </template>
        <template v-slot="{ size, checkList }">
          <PureTable
            border
            align="left"
            showOverflowTooltip
            table-layout="auto"
            size="small"
            :data="dataList"
            :columns="columns"
            :checkList="checkList"
            :pagination="pagination"
            :paginationSmall="size === 'small' ? true : false"
            :header-cell-style="{ background: '#fafafa', color: '#606266' }"
            @selection-change="handleSelectionChange"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
            <template #operation="{ row }">
              <el-popconfirm :title="'确认重置密码？'" @confirm="resetRwd(row)">
                <template #reference>
                  <el-button
                    v-if="powers.some(i => i == '012')"
                    class="reset-margin"
                    link
                    type="primary"
                    size="small"
                    :icon="useRenderIcon('refresh-right')"
                  /> </template
              ></el-popconfirm>
              <el-button
                class="reset-margin"
                v-if="powers.some(i => i == '007')"
                link
                type="primary"
                size="small"
                @click="editItem(row.id, 'view', row)"
                :icon="useRenderIcon('eye-view')"
              />
              <el-button
                class="reset-margin"
                link
                v-if="powers.some(i => i == '005')"
                type="primary"
                size="small"
                @click="editItem(row.id, 'edit', row)"
                :icon="useRenderIcon('edits')"
              />
              <el-popconfirm
                :title="
                  String(row.status) === '1' ? '改为禁用？' : '改为启用？'
                "
                v-if="
                  (powers.some(i => i == '004') && row.status + '' === '1') ||
                  (powers.some(i => i == '003') && row.status + '' === '0')
                "
                @confirm="handleStatus(row)"
              >
                <template #reference>
                  <el-button
                    class="reset-margin"
                    link
                    type="primary"
                    size="small"
                    :icon="
                      useRenderIcon(
                        String(row.status) === '1'
                          ? 'close-circle-line'
                          : 'checkbox-circle-line'
                      )
                    " /></template
              ></el-popconfirm>
            </template>
          </PureTable>
        </template>
      </TableProBar>
      <addEdit
        :itemId="itemId"
        :isDetails="isDetails"
        :show-model="showModel"
        @refresh="submitRefresh"
        @cancel="submitCancel"
        :sitem="sitem"
      />
      <reset-password
        :itemId="passwordModelId"
        :show-model="passwordModel"
        @refresh="resetCancel"
        @cancel="resetCancel"
      />
    </div>
    <NoAuth v-show="!powers.some(i => i == '001')" />
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
