<template>
  <div style="width: 100%; height: 100%; overflow: hidden">
    <div style="width: 100%; height: 50px; display: flex">
      <img
        v-if="selctLeft.type == 1"
        style="width: 42px; height: 42px; margin-left: -6px"
        src="../image/liftState/straightLadder.png"
        alt="" />
      <img
        v-else-if="selctLeft.type == 2"
        style="width: 42px; height: 42px; margin-left: -6px"
        src="../image/liftState/escalator.png"
        alt="" />
      <div style="margin-left: 6px; font-size: 20px; line-height: 28px">
        {{ selctLeft.name }}
      </div>
    </div>
    <!-- 左侧抽屉的关闭按钮 -->
    <div class="drawer-box-out" @click="clickDrawer()">
      <DoubleRightOutlined class="drawer-icon" style="color: white" />
    </div>
    <div style="width: 100%; height: calc(100% - 50px); display: flex; position: relative">
      <a-table
        style="width: 100%"
        :columns="column"
        :data-source="dataSource"
        :pagination="pagination">
        <template #bodyCell="{ record, column }">
          <template v-if="column.dataIndex === 'switch'">
            <a-tag
              style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
              :style="{
                border: {
                  '0': '1px solid rgba(0, 255, 210, 1)', //2
                  '1': '1px solid rgba(191, 205, 226, 1)', //关闭
                }[record.switch],
                color: {
                  '0': 'rgba(0, 255, 210, 1)', //正常
                  '1': 'rgba(191, 205, 226, 1)', //关闭
                }[record.switch],
              }"
              >{{ { '0': '开启', '1': '关闭' }[record.switch] }}</a-tag
            >
          </template>
          <template v-if="column.dataIndex === 'state'">
            <a-tag
              style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
              :style="{
                border: {
                  '0': '1px solid rgba(0, 255, 210, 1)', //正常
                  '1': '1px solid rgba(255, 188, 70, 1)', //维修
                  '2': '1px solid rgba(255, 118, 54, 1)', //故障
                  '3': '1px solid rgba(243, 97, 99, 1)', //告警
                }[record.state],
                color: {
                  '0': 'rgba(0, 255, 210, 1)', //正常
                  '1': 'rgba(255, 188, 70, 1)', //维修
                  '2': 'rgba(255, 118, 54, 1)', //故障
                  '3': 'rgba(243, 97, 99, 1)', //告警
                }[record.state],
              }"
              >{{ { '0': '正常', '1': '维修', '2': '故障', '3': '告警' }[record.state] }}</a-tag
            >
          </template>
          <template v-if="column.dataIndex === 'lift'">
            <a-tag
              style="background-color: rgba(0, 0, 0, 0.5); width: 50px"
              :style="{
                border: {
                  '0': '1px solid rgba(0, 255, 210, 1)', //上行
                  '1': '1px solid rgba(0, 255, 210, 1)', //下行
                  '2': '1px solid rgba(255, 188, 70, 1)', //暂停
                  '3': '1px solid rgba(243, 97, 99, 1)', //急停
                  '4': '1px solid rgba(167, 66, 255, 1)', //未知
                }[record.lift],
                color: {
                  '0': 'rgba(0, 255, 210, 1)', //上行
                  '1': 'rgba(0, 255, 210, 1)', //下行
                  '2': 'rgba(255, 188, 70, 1)', //暂停
                  '3': 'rgba(243, 97, 99, 1)', //急停
                  '4': 'rgba(167, 66, 255, 1)', //未知
                }[record.lift],
              }"
              >{{
                {
                  '0': '上行', //上行
                  '1': '下行', //下行
                  '2': '暂停', //暂停
                  '3': '急停', //急停
                  '4': '未知', //未知
                }[record.lift]
              }}</a-tag
            >
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { DoubleRightOutlined } from '@ant-design/icons-vue';

  import { ref } from 'vue';
  const emit = defineEmits(['clickDrawer']);

  const selctLeft = ref({});
  // 改变页码
  const handleChangePage = (current: number, pageSize: number) => {
    pagination.value.current = current;
    pagination.value.pageSize = pageSize;
  };

  const dataSource = ref([
    { time: '2022-03-01 10:00:00', state: '0', switch: '0', lift: 1 },
    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 },
    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 0 },
    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 },
    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 },
    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 0 },
    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '3', switch: 0, lift: 3 },
    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '0', switch: 0, lift: 4 },
    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
    { time: '2022-03-01 10:00:00', state: '1', switch: 0, lift: 2 },
    { time: '2022-03-01 10:00:00', state: '2', switch: 0, lift: 1 },
  ]);
  const pagination = ref({
    total: dataSource.value.length,
    size: 'small',
    current: 1,
    pageSize: 10,
    showQuickJumper: false,
    showLessItems: false,
    showSizeChanger: false,
    responsive: true,
    showTotal: (total: number, range: any) => (total && range ? `` : ''), //显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录
    onChange: handleChangePage,
  });
  const column = [
    {
      title: '执行时间',
      dataIndex: 'time',
      key: 'time',
      width: 140,
    },
    {
      title: '开关',
      dataIndex: 'switch',
      key: 'switch',
      width: 80,
    },
    {
      title: '状态',
      dataIndex: 'state',
      key: 'state',
      width: 80,
    },
    {
      title: '模式',
      dataIndex: 'lift',
      key: 'lift',
      width: 80,
    },
  ];
  const toggle = (data: any) => {
    pagination.value.current = 1;
    selctLeft.value = data;
  };
  const clickDrawer = () => {
    emit('clickDrawer');
  };
  defineExpose({
    toggle,
  });
</script>
<style scoped lang="less">
  :deep(.ant-table-thead > tr) {
    height: 30px !important;
  }
  :deep(.ant-table-tbody > tr) {
    height: 30px !important;
  }
  :deep(.ant-table-thead > tr > th) {
    background-color: #1a2230;
    border: 1px solid rgba(163, 192, 243, 0.8);
    color: white;
    text-align: center;
    font-weight: normal !important;
    padding: 12px !important;
  }
  :deep(.ant-table-tbody > tr > td) {
    background-color: rgba(0, 0, 0, 0.9) !important;
    color: white;
    border: 1px solid rgba(163, 192, 243, 0.8);
    text-align: center;
    padding: 12px !important;
  }
  :deep(.ant-table-row:hover td) {
    background: rgba(0, 0, 0, 0.9) !important;
    cursor: pointer;
  }
  :deep(.ant-tabs-tab-btn) {
    font-size: 20px;
    font-weight: bold;
    color: #fff !important;
  }
  //分页
  :deep(.ant-pagination-item) {
    background-color: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(147, 200, 243, 1) !important;
    border-radius: 2px !important;
    margin: 0 8px !important;
  }
  :deep(.ant-pagination-item a) {
    color: rgba(12, 140, 246, 1) !important;
  }
  :deep(.ant-pagination-item-active) {
    border-radius: 2px !important;
    background: rgba(12, 140, 246, 1) !important;
  }
  :deep(.ant-pagination-item-active a) {
    color: white !important;
  }
  :deep(.ant-pagination-prev) {
    background-color: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(147, 200, 243, 1) !important;
  }
  :deep(.ant-pagination-next) {
    background-color: rgba(0, 0, 0, 1) !important;
    border: 1px solid rgba(147, 200, 243, 1) !important;
  }
  :deep(.anticon) {
    color: rgba(12, 140, 246, 1) !important;
  }
  :deep(.ant-table-pagination) {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  :deep(.ant-spin-container) {
    height: 100% !important;
  }
  :deep(.ant-spin-nested-loading) {
    height: 100% !important;
  }
  //分页 在右边 取消
  // :deep(.ant-table-pagination-right) {
  //   justify-content: normal !important;
  // }
  // 抽屉关闭按钮
  .drawer-box-out {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    position: absolute;
    right: 576px;
    z-index: 2;
    top: 50%;
    margin: auto;
    background: #268aff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 0 8px 8px 0;
    color: white;
  }
  :deep(.anticon) {
    color: #fff !important;
  }
</style>
