<template>
  <CRow>
    <CCol col="12">
      <CCard>
        <CCardHeader>
          <CIcon name="cil-grid" />Danh sách người dùng
          <CButton
            size="sm"
            @click="createUser"
            class="float-right"
            color="primary"
            variant="outline"
            v-c-tooltip="'Tạo mới'"
          >
            <CIcon name="cil-user-follow" />
          </CButton>
          <CButton
            size="sm"
            @click="downloadExport"
            class="float-right mr-2"
            color="primary"
            variant="outline"
            v-c-tooltip="'Xuất'"
          >
            <CIcon name="cil-vertical-align-bottom" />
          </CButton>
          <CButton
            size="sm"
            @click="onClickImport"
            class="float-right mr-2"
            color="primary"
            variant="outline"
            v-c-tooltip="'Nhập'"
          >
            <CIcon name="cil-vertical-align-top" />
          </CButton>
          <CInputFile hidden id="fileimport" accept=".Xlsx" @change="upload" />
        </CCardHeader>
        <CCardBody>
          <CSearchBox
            :fields="searchFields"
            @fieldChanged="searchFieldChanged"
            @valueChanged="searchValueChanged"
          />
          <CDataTable
            hover
            striped
            :loading="loading"
            :items="items"
            :fields="fields"
            clickable-rows
            @row-clicked="rowClicked"
          >
            <template #title="{item}">
              <td>{{item.title ? item.title.name : 'Chưa xác định'}}</td>
            </template>
            <template #department="{item}">
              <td>{{item.department ? item.department.name : 'Chưa xác định'}}</td>
            </template>
          </CDataTable>
          <CPagination
            align="center"
            :pages="pages"
            :active-page.sync="currentPage"
            :activePage="currentPage"
          />
        </CCardBody>
      </CCard>
    </CCol>
  </CRow>
</template>

<script>
import services from "../../services/factory";
import CSearchBox from "../../components/SearchBox";

export default {
  name: "Users",
  components: {
    CSearchBox
  },
  data() {
    return {
      loading: true,
      items: null,
      fields: [
        { key: "id", label: "Mã" },
        { key: "name", label: "Tên", _classes: "font-weight-bold" },
        { key: "email", label: "Email" },
        { key: "tel", label: "Số điện thoại" },
        { key: "title", label: "Chức danh" },
        { key: "department", label: "Phòng ban" }
      ],
      searchFields: [
        { value: "", label: "Tất cả" },
        { value: "id", label: "Mã" },
        { value: "name", label: "Tên" },
        { value: "email", label: "Email" },
        { value: "tel", label: "Số điện thoại" },
        { value: "birthday", label: "Ngày sinh" },
        { value: "title.name", label: "Chức danh" },
        { value: "department.name", label: "Phòng ban" },
        { value: "created_at", label: "Ngày tạo" }
      ],
      currentPage: 1,
      pages: 0,
      size: 0,
      searchValue: "",
      searchField: ""
    };
  },
  created() {
    this.fetch();
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        if (route.query && route.query.page) {
          this.currentPage = Number(route.query.page);
        }
      }
    },
    currentPage: {
      handler(page) {
        this.pageChange(page);
        this.currentPage = page;
        this.fetch();
      }
    }
  },
  computed: {
    query() {
      return {
        ...this.withQuery,
        ...this.pageQuery,
        ...this.searchQuery,
        ...this.orderQuery
      };
    },
    orderQuery() {
      return {
        orderBy: "created_at",
        sortedBy: "desc"
      };
    },
    pageQuery() {
      return this.currentPage ? { page: this.currentPage } : {};
    },
    withQuery() {
      return {
        with: "title;department"
      };
    },
    searchQuery() {
      return this.searchValue
        ? {
            search: this.searchValue,
            searchFields: this.searchField || ''
          }
        : {};
    }
  },
  methods: {
    async fetch() {
      this.loading = true;
      const response = await services.user.all(this.query);
      this.items = response.data.data;
      this.currentPage = response.data.current_page;
      this.pages = response.data.last_page;
      this.loading = false;
    },
    rowClicked(item, index) {
      this.$router.push({ path: `users/${item.id}` });
    },
    createUser() {
      this.$router.push({ path: `users/create` });
    },
    pageChange(val) {
      this.$router.push({ query: { page: val } });
    },
    searchFieldChanged(item) {
      this.searchField = item.value;
      this.fetch();
    },
    searchValueChanged(value) {
      this.searchValue = value;
      this.fetch();
    },
    onClickImport() {
      document.getElementById("fileimport").click();
    },
    upload(files) {
      this.loading = true;
      let file = files[0];
      let formData = new FormData();
      formData.append("data", file);
      services.user
        .import(formData)
        .then(response => {
          this.$toast.success("Đã nhập thành công");
          this.fetch();
        })
        .catch(error => {
          this.toastHttpError(error);
          this.loading = false;
        });
    },
    downloadExport() {
      services.user
        .export({
          export: "Xlsx",
          search: this.searchValue,
          searchFields: this.searchField
        })
        .then(response => {
          this.$toast.success("Đã xuất");
        })
        .catch(error => {
          this.toastHttpError(error);
        });
    }
  }
};
</script>
