<template>
  <div>
    <el-drawer
      v-model="drawerVisible"
      :show-close="false"
      :with-header="false"
      destroy-on-close
      direction="rtl"
      size="656px"
    >
      <div>
        <div class="container">
          <div class="headerTittle">叫料历史</div>
          <el-scrollbar>
            <div
              v-for="(item, index) in historyList"
              :key="index"
              v-loading="loading"
              class="item-container"
            >
              <div>
                <div class="item-header">{{ item?.itemName }}</div>
                <div class="item-describe">{{ item?.itemCode }}</div>
                <div class="item-describe">{{ item?.itemModel }}</div>
              </div>
              <div>
                <span class="item-count">{{ item?.itemNum }}</span>
                <span class="item-unit">{{
                  dictS.getLableByValue("danwei_type", item?.itemUnit)
                }}</span>
              </div>
            </div>
          </el-scrollbar>
          <Pagination
            v-model:limit="page.pageSize"
            v-model:page="page.pageNo"
            :total="page.total"
            size="large"
            @pagination="paginationChange"
          />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { callHistoryList } from "@/api/process/callMateriel";
import { useDictionaryStore } from "@/store";

const dictS = useDictionaryStore();
const drawerVisible = ref(false);

const historyList = ref<any[]>([]);

const loading = ref(false);
const page = reactive({
  pageSize: 10,
  pageNo: 1,
  total: 0,
});

const showDrawer = () => {
  drawerVisible.value = true;
  getData();
};

const paginationChange = () => {
  getData();
};

const getData = () => {
  loading.value = true;
  callHistoryList({
    pageNo: page.pageNo,
    pageSize: page.pageSize,
  }).then((res) => {
    loading.value = false;
    historyList.value = res.data.records;
    page.total = res.data.totalCount;
  });
};

const hideDrawer = () => {
  drawerVisible.value = false;
};

defineExpose({ showDrawer });
</script>

<style lang="scss" scoped>
:deep(.el-drawer) {
  background: #f1f3f5;
  box-shadow: 0px 0px 80px 10px rgba(0, 0, 0, 0.25);
  border-radius: 16px 0px 0px 16px;
}

:deep(.el-drawer__body) {
  padding: 0;
}

.item-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 30px;
  padding-right: 20px;
  height: 122px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.item-header {
  font-weight: 500;
  font-size: 24px;
  color: rgba(0, 0, 0, 0.9);
  text-align: left;
}

.item-describe {
  font-weight: 400;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.6);
  text-align: left;
}

.item-count {
  font-weight: bold;
  font-size: 38px;
  color: rgba(0, 0, 0, 0.9);

  text-align: right;
}

.item-unit {
  font-weight: 500;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.6);

  text-align: right;
}
</style>
