From 3e76c45de0bd75c8846d132bb327efe31d04adac Mon Sep 17 00:00:00 2001
From: AnandaTon <125332905+anandaAiemvong@users.noreply.github.com>
Date: Tue, 25 Jul 2023 18:13:17 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A2=E0=B8=8A=E0=B8=B7?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88=E0=B9=89?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7=E0=B8=84?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=A7//pop=20up=20=20=E0=B9=80=E0=B8=A5?=
 =?UTF-8?q?=E0=B8=B7=E0=B8=AD=E0=B8=81=E0=B8=A5=E0=B8=B9=E0=B8=81=E0=B8=88?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=8A=E0=B8=B1=E0=B9=88=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=84=E0=B8=A3=E0=B8=B2=E0=B8=A7=E0=B9=84=E0=B8=9B=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=84=E0=B8=B3=E0=B8=AA=E0=B8=B1=E0=B9=88?=
 =?UTF-8?q?=E0=B8=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../08_registryEmployee/views/Detail.vue      |   4 +-
 .../08_registryEmployee/views/Main.vue        | 498 +++++++++++++++++-
 src/modules/08_registryEmployee/views/top.vue | 136 +++++
 3 files changed, 630 insertions(+), 8 deletions(-)
 create mode 100644 src/modules/08_registryEmployee/views/top.vue

diff --git a/src/modules/08_registryEmployee/views/Detail.vue b/src/modules/08_registryEmployee/views/Detail.vue
index 4819f4d54..ab1cc1b79 100644
--- a/src/modules/08_registryEmployee/views/Detail.vue
+++ b/src/modules/08_registryEmployee/views/Detail.vue
@@ -429,8 +429,8 @@
       <q-separator />
       <q-card-actions align="right">
         <q-btn unelevated label="บันทึก" color="public" @click="Retire"
-          ><!-- icon="mdi-content-save-outline"
-            <q-tooltip>บันทึก</q-tooltip> -->
+          >
+            <q-tooltip>บันทึก</q-tooltip>
         </q-btn>
       </q-card-actions>
     </q-card>
diff --git a/src/modules/08_registryEmployee/views/Main.vue b/src/modules/08_registryEmployee/views/Main.vue
index 8235acbe0..1faa17ad9 100644
--- a/src/modules/08_registryEmployee/views/Main.vue
+++ b/src/modules/08_registryEmployee/views/Main.vue
@@ -7,6 +7,13 @@
       <q-btn flat round color="primary" @click="clickAdd" icon="mdi-plus">
         <q-tooltip>เพิ่มข้อมูล</q-tooltip>
       </q-btn>
+      <q-btn
+        flat
+        round
+        color="primary"
+        icon="mdi-account-arrow-right"
+        @click="clickAddOrder"
+      />
       <q-space />
       <div class="items-center" style="display: flex">
         <!-- ค้นหาข้อความใน table -->
@@ -57,7 +64,7 @@
         :columns="columns"
         :visible-columns="visibleColumnsEmployeeTemp"
         :filter="filter"
-        row-key="name"
+        row-key="id"
         class="custom-header-table"
         :pagination-label="paginationLabel"
         v-model:pagination="pagination"
@@ -71,7 +78,11 @@
           </q-tr>
         </template>
         <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer">
+          <q-tr
+            :props="props"
+            class="cursor-pointer"
+            @click="redirectToPage(props.row.id)"
+          >
             <q-td key="no" :props="props">
               {{ props.rowIndex + 1 }}
             </q-td>
@@ -232,10 +243,143 @@
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <!-- dialog ส่งรายชื่อไปออกคำสั่ง -->
+  <q-dialog v-model="modaladdOrder">
+    <q-card style="width: 900px; max-width: 80vw">
+      <DialogHeader
+        tittle="ส่งรายชื่อไปออกคำสั่ง"
+        :close="clickCloseSendModal"
+      />
+      <q-separator />
+      <q-card-section class="q-pt-none">
+        <div class="row justify-end">
+          <div class="col-5">
+            <q-toolbar style="padding: 0">
+              <q-input
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="filter"
+                placeholder="ค้นหา"
+                style="width: 850px; max-width: auto"
+              >
+                <template v-slot:append>
+                  <q-icon name="search" />
+                </template>
+              </q-input>
+            </q-toolbar>
+          </div>
+        </div>
+
+        <d-table
+          :rows="rowsOrder"
+          :columns="columnsOrder"
+          :visible-columns="visibleColumnsOrder"
+          :filter="filter"
+          row-key="id"
+          selection="single"
+          v-model:selected="selectedToOrder"
+        >
+          <template v-slot:body-selection="scope">
+            <q-checkbox
+              keep-color
+              color="primary"
+              dense
+              v-model="scope.selected"
+            />
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td>
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  v-model="props.selected"
+                />
+              </q-td>
+              <q-td key="no" :props="props">
+                {{ props.rowIndex + 1 }}
+              </q-td>
+              <q-td key="fullname" :props="props">
+                {{ props.row.fullname }}
+              </q-td>
+              <q-td key="positionEmployeePosition" :props="props">
+                {{ props.row.positionEmployeePosition }}
+              </q-td>
+              <q-td key="positionEmployeePositionSide" :props="props">
+                {{ props.row.positionEmployeePositionSide }}
+              </q-td>
+              <q-td key="positionLine" :props="props">
+                {{ props.row.positionLine }}
+              </q-td>
+              <q-td key="positionEmployeeGroup" :props="props">
+                {{ props.row.positionEmployeeGroup }}
+              </q-td>
+              <q-td key="oc" :props="props">
+                {{ props.row.oc }}
+              </q-td>
+              <q-td key="amount" :props="props">
+                {{ props.row.amount }}
+              </q-td>
+              <q-td key="govAge" :props="props">
+                {{ props.row.govAge }}
+              </q-td>
+              <q-td key="dateAppoint" :props="props">
+                {{ props.row.dateAppoint }}
+              </q-td>
+              <q-td key="dateStart" :props="props">
+                {{ props.row.dateStart }}
+              </q-td>
+              <q-td key="salaryDate" :props="props">
+                {{ props.row.salaryDate }}
+              </q-td>
+              <q-td key="refSalary" :props="props">
+                {{ props.row.refSalary }}
+              </q-td>
+              <q-td key="age" :props="props">
+                {{ props.row.age }}
+              </q-td>
+              <q-td key="fullnameOld" :props="props">
+                {{ props.row.fullnameOld }}
+              </q-td>
+              <q-td key="createdAt" :props="props">
+                {{ props.row.createdAt }}
+              </q-td>
+              <q-td key="isLeave" :props="props">
+                {{ props.row.isLeave }}
+              </q-td>
+              <q-td key="leaveDateOrder" :props="props">
+                {{ props.row.leaveDateOrder }}
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </d-table>
+      </q-card-section>
+
+      <q-card-actions align="right" class="bg-white text-teal">
+        <q-btn label="บันทึก" @click="checkSaveOrder" color="public" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, useAttrs } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QInput, QForm, QTableProps } from "quasar";
@@ -243,7 +387,7 @@ import { useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { treeTab } from "@/modules/05_placement/interface/index/Main";
-import {
+import type {
   FormRegistryEmployee,
   ResponseEmployeeTemp,
 } from "@/modules/08_registryEmployee/request/Main.ts";
@@ -272,11 +416,11 @@ const {
   dialogMessage,
 } = mixin;
 
+const modaladdOrder = ref<boolean>(false);
 const router = useRouter();
 const myForm = ref<QForm>();
 const filterRef = ref<QInput>();
 const filter = ref<string>("");
-const selected = ref<string>("");
 const modal = ref<boolean>(false);
 const id = ref<string>("");
 const visibleColumnsModal = ref<String[]>(["no", "positionNum", "name"]);
@@ -305,7 +449,7 @@ const pagination = ref({
   rowsPerPage: 10,
 });
 
-const visibleColumns = ref<String[]>([
+const visibleColumnsOrder = ref<String[]>([
   "no",
   "fullname",
   "fullnameOld",
@@ -573,6 +717,7 @@ const columns = ref<QTableProps["columns"]>([
 const rows = ref<FormRegistryEmployee[]>([]);
 
 const selectedPosition = ref<any[]>([]);
+const selectedToOrder = ref<any[]>([]);
 const visibleColumnsPosition = ref<String[]>([
   "organizationOrganizationName",
   "organizationAgencyName",
@@ -687,7 +832,231 @@ const columnsPosition = ref<QTableProps["columns"]>([
   },
 ]);
 const rowsPosition = ref<any>([]);
+const columnsOrder = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullname",
+    align: "left",
+    label: "ชื่อ-สกุล",
+    sortable: true,
+    field: "fullname",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
 
+  {
+    name: "positionEmployeePosition",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePosition",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionEmployeePositionSide",
+    align: "left",
+    label: "ด้านของตำแหน่ง",
+    sortable: true,
+    field: "positionEmployeePositionSide",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "positionLine",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "positionLine",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+
+  {
+    name: "positionEmployeeGroup",
+    align: "left",
+    label: "กลุ่มงาน",
+    sortable: true,
+    field: "positionEmployeeGroup",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "oc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "oc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "govAge",
+    align: "left",
+    label: "อายุราชการ(ปี)",
+    sortable: true,
+    field: "govAge",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "dateAppoint",
+    align: "left",
+    label: "วันที่จ้าง",
+    sortable: true,
+    field: "dateAppoint",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "dateStart",
+    align: "left",
+    label: "วันที่เริ่มปฎิบัติราชการ",
+    sortable: true,
+    field: "dateStart",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salaryDate",
+    align: "left",
+    label: "วันที่แต่งตั้ง",
+    sortable: true,
+    field: "salaryDate",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "refSalary",
+    align: "left",
+    label: "เอกสารอ้างอิง",
+    sortable: true,
+    field: "refSalary",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "age",
+    align: "left",
+    label: "อายุ",
+    sortable: true,
+    field: "age",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      }),
+  },
+  {
+    name: "fullnameOld",
+    align: "left",
+    label: "ชื่อ-สกุล(เดิม)",
+    sortable: true,
+    field: "fullnameOld",
+    headerStyle: "font-size: 14px; min-width: 200px",
+    style: "font-size: 14px; ",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isLeave",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isLeave",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "leaveDateOrder",
+    align: "left",
+    label: "วันที่พ้นราชการ",
+    sortable: true,
+    field: "leaveDateOrder",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    // sort: (a: string, b: string) =>
+    //   a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+const rowsOrder = ref<FormRegistryEmployee[]>([]);
+const selected = ref([]);
 onMounted(async () => {
   await nodeTree();
 });
@@ -775,6 +1144,19 @@ const getPosition = async (id: string) => {
       hideLoader();
     });
 };
+const attrs = ref<any>(useAttrs());
+
+const clickAddOrder = () => {
+  modaladdOrder.value = true;
+  const filteredRows = rowsOrder.value.filter(
+    (row) => row.positionEmployeePosition !== null
+  );
+  rowsOrder.value = filteredRows;
+};
+
+const clickCloseSendModal = () => {
+  modaladdOrder.value = false;
+};
 
 const checkSave = async () => {
   if (selectedPosition.value.length == 0) {
@@ -795,6 +1177,25 @@ const checkSave = async () => {
   }
 };
 
+const checkSaveOrder = async () => {
+  if (selectedToOrder.value.length == 0) {
+    dialogMessage(
+      $q,
+      "ไม่สามารถบันทึกข้อมูลได้",
+      "กรุณาเลือกตำแหน่ง",
+      "warning",
+      undefined,
+      "orange",
+      undefined,
+      undefined,
+      true
+    );
+    return;
+  } else {
+    await saveOrder();
+  }
+};
+
 const savePosition = async () => {
   showLoader();
   const data = {
@@ -814,6 +1215,25 @@ const savePosition = async () => {
     });
 };
 
+const saveOrder = async () => {
+  //   showLoader();
+  //   const data = {
+  //     organizationEmployeeId: selectedPosition.value[0].id,
+  //   };
+  //   await http
+  //     .put(config.API.organizationEmployeePositionId(id.value), data)
+  //     .then((res) => {
+  //       success($q, "บันทึกข้อมูลสำเร็จ");
+  //     })
+  //     .catch((e) => {
+  //       messageError($q, e);
+  //     })
+  //     .finally(async () => {
+  //       await nodeTree();
+  //       modalOpenClose();
+  //     });
+};
+
 const modalOpenClose = () => {
   modal.value = !modal.value;
   if (!modal.value) {
@@ -873,6 +1293,10 @@ const clickAdd = () => {
   //   router.push(`/placement/detail`);
 };
 
+// ดูรายการแก้ไขรายชื่อ
+const redirectToPage = (Id?: number) => {
+  router.push(`/registryEmployee/Edit/${Id}`);
+};
 const editDetail = async (row: any) => {
   await getPosition(row.id);
   console.log(row);
@@ -925,6 +1349,7 @@ const nodeTree = async () => {
     .finally(async () => {
       hideLoader();
       await showEmployeeTemp();
+      await showEmployeeTempOrder();
     });
 };
 
@@ -988,6 +1413,67 @@ const showEmployeeTemp = async () => {
     });
 };
 
+const showEmployeeTempOrder = async () => {
+  let cirteria = [];
+
+  cirteria.push({
+    criteriaType: "employee_class",
+    criteriaValue: "temp",
+  });
+
+  cirteria.push({
+    criteriaType: "is_retire",
+    criteriaValue: "false",
+  });
+
+  if (selected.value == null || selected.value == "") return;
+  showLoader();
+  await http
+    .post(config.API.searchProfileByOcId(selected.value, "all"), {
+      criterias: cirteria,
+    })
+    .then((res) => {
+      let data = res.data.result;
+      rowsOrder.value = [];
+      data.map((e: ResponseEmployeeTemp) => {
+        rowsOrder.value.push({
+          id: e.id,
+          fullname: e.fullname,
+          fullnameOld: e.fullnameOld,
+          position: e.position,
+          positionPathSide: e.positionPathSide,
+          positionLine: e.positionLine,
+          govAge: e.govAge,
+          positionEmployeePosition: e.positionEmployeePosition,
+          positionEmployeePositionSide: e.positionEmployeePositionSide,
+          positionEmployeeGroup: e.positionEmployeeGroup,
+          oc: e.oc,
+          age: e.age,
+          amount: e.amount == null ? "" : e.amount.toLocaleString(),
+          refSalary: e.refSalary,
+          dateAppoint:
+            e.dateAppoint == null ? null : date2Thai(new Date(e.dateAppoint)),
+          dateStart:
+            e.dateStart == null ? null : date2Thai(new Date(e.dateStart)),
+          createdAt:
+            e.createdAt == null ? null : date2Thai(new Date(e.createdAt)),
+          isLeave: e.isLeave == false ? "ครอง" : `${typeRetire(e.leaveReason)}`,
+          leaveDateOrder:
+            e.leaveDateOrder == null
+              ? null
+              : date2Thai(new Date(e.leaveDateOrder)),
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+      console.log(rowsOrder);
+    });
+};
+
 const onSelected = async (id: string) => {
   //   await fetchPositionNumber(id);
 };
diff --git a/src/modules/08_registryEmployee/views/top.vue b/src/modules/08_registryEmployee/views/top.vue
new file mode 100644
index 000000000..a9e4d5db2
--- /dev/null
+++ b/src/modules/08_registryEmployee/views/top.vue
@@ -0,0 +1,136 @@
+<template>
+  <div class="flex items-center">
+    <div class="flex items-center">
+      <q-icon
+        :name="icon"
+        size="1.5em"
+        color="grey-5"
+        class="q-mr-md"
+        v-if="icon != ''"
+      />
+      <div
+        class="text-bold text-subtitle2 col-12 row items-center"
+        v-if="header != ''"
+      >
+        {{ header }}
+      </div>
+    </div>
+    <div class="q-gutter-sm q-mx-sm" v-if="addData == false"></div>
+
+    <q-space />
+    <q-btn
+      color="info"
+      flat
+      dense
+      round
+      size="14px"
+      icon="mdi-history"
+      v-if="history"
+      @click="historyClick"
+    >
+      <q-tooltip>ประวัติ{{ header }}</q-tooltip>
+    </q-btn>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  header: {
+    type: String,
+    default: "ข้อความ",
+    required: true,
+  },
+  iconAdd: {
+    type: String,
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: "mdi-help",
+    required: true,
+  },
+  edit: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  history: {
+    type: Boolean,
+    default: true,
+    required: true,
+  },
+  addData: {
+    type: Boolean,
+    defualt: false,
+  },
+  disable: {
+    type: Boolean,
+    defualt: false,
+  },
+  historyClick: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  add: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addleave: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  save: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  deleted: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  cancel: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  changeBtn: {
+    type: Function,
+    default: () => console.log("not function"),
+  },
+  addEmployee: {
+    type: Boolean,
+    defualt: false,
+  },
+});
+
+const emit = defineEmits(["update:edit"]);
+
+const updateEdit = (value: any) => {
+  emit("update:edit", value);
+};
+
+const ClickEdit = () => {
+  updateEdit(!props.edit);
+  props.changeBtn();
+};
+
+const historyClick = async () => {
+  await props.historyClick();
+};
+
+const ClickCancel = () => {
+  updateEdit(!props.edit);
+  props.cancel();
+  props.changeBtn();
+};
+
+const save = () => {
+  props.save();
+};
+
+const add = () => {
+  props.add();
+};
+
+const addleave = () => {
+  props.addleave();
+};
+</script>
+<style scoped></style>