<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="showAddDrawer = true">新增管理員</el-button>
      </div>
    </div>
    <!-- Breadcrumb: End -->

    <hr />
    <el-card>
      <div class="search-section">
        客戶電話：<el-input v-model="search.phone" placeholder="客戶電話" style="width: 200px"></el-input>
        &nbsp;
        <el-button type="primary" @click="handleSearch">搜尋</el-button>
      </div>
      <div>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="expand">
            <template #default="props">
            定閱服務  
            </template>
          </el-table-column>
          <el-table-column prop="user_id" label="#" width="60" />
          <el-table-column prop="user_name" label="客戶帳號" />
          <el-table-column prop="name" label="客戶名稱" />
          <el-table-column prop="office_phone" label="客戶電話" />
          <el-table-column prop="email" label="Email地址" />
          <el-table-column prop="sales" label="業務人員" />
          <el-table-column prop="reg_time" 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 class="pagination-block">
          <el-pagination v-model:current-page="state.page" v-model:page-size="state.pageSize"
            :page-sizes="[10, 20, 50, 100]" small="small" layout="->,total, sizes, prev, pager, next, jumper"
            :total="total" />
        </div>
      </div>
    </el-card>
  </div>
  <UserForm v-model:show="showAddDrawer" v-model:edit_id="edit_id" @reload="reloadList" />
</template>

<script setup>

import { ref, onMounted, watch, reactive } from "vue";
import { getUserList, deleteUser } from "@/api/user";
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 showAddDrawer = ref(false);
const edit_id = ref(0)


const statusOptions = [
  {
    label: "全部",
    value: '',
  },
  {
    label: "未確認",
    value: '0',
  },
  {
    label: "已確認",
    value: '1',
  },
  {
    label: "已取消",
    value: '2',
  },
  {
    label: "無效",
    value: '3',
  },
  {
    value: "4",
    label: "退貨",
  },
  {
    value: "7",
    label: "完成",
  },
];

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 getUserList({
    page: state.page,
    pageSize: state.pageSize,
    // search: search.value,
  });

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

  state.loading = false
};

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

watch(
  () => state.page,
  async (newPage) => {
    let res = await getUserList({
      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 getUserList({
      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
  showAddDrawer.value = true;
};

const handleDelete = async (id) => {
  ElMessageBox.confirm(
    '確定刪除客戶資料?',
    '注意!!!',
    {
      confirmButtonText: '是的，刪除',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let res = await deleteUser(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 getUserList({
    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>
