<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> CRM系統 </el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">角色列表</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-button type="primary" :icon="Plus" @click="showDrawer = true">新增角色</el-button>
      </div>
    </div>
    <!-- Breadcrumb: End -->

    <hr />
    <el-card>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="role_id" label="#" width="60" />
          <el-table-column prop="role_name" label="角色名稱" />
          <el-table-column prop="role_describe" label="角色描述" />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
              <el-button size="small" type="danger" @click="handleDelete(scope.row.user_id)">刪除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
  <UserForm v-model:show="showDrawer" v-model:edit_id="edit_id" @reload="reloadList" />
</template>

<script setup>

import { ref, onMounted, watch, reactive } from "vue";
import { getList, deleteRole } from "@/api/role";
import { useRouter, useRoute } from "vue-router";
import { Plus } from "@element-plus/icons-vue";

import UserForm from "./components/UserForm.vue";

const router = useRouter();
const route = useRoute();

const showDrawer = ref(false);
const edit_id = ref(0)


const tableData = ref([]);
const total = ref(0);

const state = reactive({
  loading: false,
  page: 1,
  pageSize: 10,
})

const search = ref({});

if (route.query.user_id) {
  search.value.user_id = route.query.user_id
}

const initData = async () => {
  state.loading = true
  const res = await getList();

  if (res.code === 200) {
    tableData.value = res.data;
  }
  //顯示錯誤訊息
  else {
    ElMessage.error(res.message)
  }

  state.loading = false
};

onMounted(() => {
  initData();
});

watch(
  () => state.page,
  async (newPage) => {
    let res = await getList({
      page: newPage,
      size: state.pageSize,
      search: search.value,
    });

    if (res.code === 200) {
      tableData.value = res.data.data;
      total.value = res.data.total;
    }
  }
);

watch(
  () => state.pageSize,
  async (newPageSize) => {
    let res = await getList({
      page: state.page,
      size: newPageSize,
      search: search.value,
    });

    if (res.code === 200) {
      tableData.value = res.data.data;
      total.value = res.data.total;
    }
  }
);


const handleEdit = (index, row) => {
  console.log('row', row)
  edit_id.value = row.user_id
  showDrawer.value = true;
};

const handleDelete = async (id) => {
  ElMessageBox.confirm(
    '確定刪除客戶資料?',
    '注意!!!',
    {
      confirmButtonText: '是的，刪除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await deleteRole(id);
      if (res.code === 200) {
        initData();
        ElMessage({
          type: 'success',
          message: '刪除成功',
        })
      } else {
        ElMessage({
          type: 'error',
          message: '刪除失敗',
        })
      }

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消刪除',
      })
    })

};

//搜尋
const handleSearch = async () => {
  let res = await getList({
    page: state.page,
    size: state.pageSize,
    search: search.value,
  });

  if (res.code === 200) {
    tableData.value = res.data.data;
    total.value = res.data.total;
  }
};

const reloadList = () => {
  initData(state.page, state.pageSize);
};

</script>

<style lang="less" scoped>
.search-section {
  background-color: #f3f3f3;
  border: 1px solid #d7d7d7;
  padding: 5px;
  color: #808080;
  margin: 0 0 10px 0;
}

.pagination-block {
  margin: 10px 0 0 0;
}
</style>
