<script setup>
import { ref, onMounted } from "vue";
import { ArrowDown, Plus, Edit, Delete } from "@element-plus/icons-vue";

import AscForm from "./components/Form.vue";

import { getCateList, updateCategory, deleteCategory } from "@/api/category.js";

const tableData = ref([]);

const searchText = ref('');

const showFormDraw = ref(false);

const loading = ref(false);

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

const getTableData = async () => {
  let res = await getCateList();
  if (res.code === 200) {
    tableData.value = res.data;
  }
}


// 編輯排序
const editOrderId = ref(0);

const handleEditItem = (id) => {
  editOrderId.value = id;
}

const handleUpdateItem = async (row) => {

  let res = await updateCategory(row);
  if (res.code === 200) {
    ElMessage({
      message: '修改成功.',
      type: 'success',
    });
    getTableData();
  } else {
    ElMessage({
      message: '修改失敗.',
      type: 'error',
    });
  }
  editOrderId.value = 0;
}

const handleCloseEditItem = () => {
  editOrderId.value = 0;
}

// 表單
const editid = ref(0);

const handleAdd = () => {
  editid.value = 0;
  showFormDraw.value = true;
};

const handleEdit = (id) => {
  editid.value = id;
  showFormDraw.value = true;
};

const handleDelete = (id) => {
  ElMessageBox.confirm('確認刪除此紀錄?')
    .then(async () => {
      let res = await deleteCategory(id);
      if (res.code === 200) {
        ElMessage({
          message: '刪除成功.',
          type: 'success',
        });
        getTableData();

      }else{
        ElMessage({
          message: '刪除失敗.',
          type: 'error',
        });
      }
    })
    .catch(() => {
    })
};

const handleCloseFormDraw = (val) => {

  showFormDraw.value = false;
  if (val) {
    getTableData();
  }
};
</script>

<template>
  <div class="main">
    <!-- Breadcrumb: Start -->
    <div class="breadcrumb-section">
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> 經銷系統 </el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">產品類別</a></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-button type="primary" :icon="Plus" @click="handleAdd">新增產品類別</el-button>
      </div>
    </div>
    <!-- Breadcrumb: End -->

    <el-card :body-style="{ padding: '0px' }">
      <el-table :data="tableData" style="width: 100%" row-key="id" default-expand-all>
        <el-table-column prop="name" label="類別名稱" />
        <!-- <el-table-column prop="num" label="產品數" /> -->
        <el-table-column label="排序" width="80">
        <template #default="scope">
            <div @dblclick="handleEditItem(scope.row.id)" v-if="scope.row.id !== editOrderId">
              {{ scope.row.sort_order }}
            </div>
            <el-input v-model="scope.row.sort_order" :style="{ width: '50px' }" 
            @keyup.enter="handleUpdateItem(scope.row)" 
            @blur="handleCloseEditItem()"
            :autoFocus="true"
            v-focus="scope.row.id === editOrderId"
            v-else />
          </template>
        </el-table-column>
        <el-table-column label="其他項目" width="105" fixed="right">
          <template #default="scope">
            <el-dropdown>
              <el-button type="danger">
                操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <!-- <el-dropdown-item :icon="Plus" @click="showAddNewsDrawer = true" v-if="scope.row.parent_id === 0">新增下層分類</el-dropdown-item> -->
                  <el-dropdown-item :icon="Edit" @click="handleEdit(scope.row.id)">修改分類</el-dropdown-item>
                  <el-dropdown-item :icon="Delete" @click="handleDelete(scope.row.id)">刪除分類</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>

  <div>
    <el-drawer 
      ref="drawerRef" 
      v-model="showFormDraw" 
      :destroy-on-close="true" 
      title="新增產品類別" 
      direction="rtl" 
      size="50%">
      <asc-form :editid="editid" @close="handleCloseFormDraw" />
    </el-drawer>
  </div>
</template>

<style lang="less" scoped></style>
