<template>
  <BasicModal
    v-bind="$attrs"
    :title="title"
    @register="registerInnerModal"
    @ok="handleSubmit"
    :width="1000"
    :footer="null"
  >
    <Carousel arrows>
      <template #prevArrow>
        <div class="custom-slick-arrow" style="left: 10px; z-index: 999">
          <left-circle-outlined />
        </div>
      </template>
      <template #nextArrow>
        <div class="custom-slick-arrow" style="right: 10px">
          <right-circle-outlined />
        </div>
      </template>
      <template v-if="showPicArr.length > 0">
        <div v-for="item in showPicArr" :key="item">
          <Image :width="500" :height="600" :src="item" />
        </div>
      </template>
      <template v-else>
        <div style="color:white">
          当前暂无图片....
        </div>
      </template>
    </Carousel>
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from '@/components/Modal';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { computed, ref, unref } from 'vue';
import { Row, Col, Space, Avatar, Carousel, Image } from 'ant-design-vue';
import { infoList } from '@/api/basicInfo/elevator';
import { formEvaSchemas, evaColumns, modalEvaSchemas } from './workData.data';
import { BasicForm, useForm } from '@/components/Form';
import { useMessage } from '@/hooks/web/useMessage';
import { workDataDistribute } from '@/api/workPlace/workInfo';
defineOptions({ name: 'WorkDataModal' });
const { createMessage } = useMessage();
const emit = defineEmits(['register', 'reload']);

const isUpdate = ref<number>(1);
const baseUrl =
  'https://raw.githubusercontent.com/vueComponent/ant-design-vue/main/components/carousel/demo/';
const title = computed<string>(() => {
  return '查看维保图片';
});
const getImgUrl = (i: number) => {
  return `${baseUrl}abstract0${i + 1}.jpg`;
};
const [registerTable, { getSelectRows }] = useTable({
  rowSelection: {
    type: 'checkbox',
  },
  title: '电梯列表',
  showTableSetting: false,
  api: infoList,
  showIndexColumn: true,
  rowKey: 'id',
  useSearchForm: true,
  formConfig: {
    schemas: formEvaSchemas,
    baseColProps: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 15,
    },
  },
  columns: evaColumns,
  // 需要添加上部门参数
});
const showPicArr = ref<any>([]);
const [registerInnerModal, { modalLoading, closeModal }] = useModalInner(
  async (data: { record?: Recordable; update: number }) => {
    modalLoading(true);
    const { record, update } = data;
    isUpdate.value = update;

    let pictureList = ref<any>([]);
    if (record.cabinAttachment) {
      pictureList.value.push(record.cabinAttachment);
    } else if (record.carRoofAttachment) {
      pictureList.value.push(record.carRoofAttachment);
    } else if (record.channelAttachment) {
      pictureList.value.push(record.channelAttachment);
    } else if (record.doorAttachment) {
      pictureList.value.push(record.doorAttachment);
    } else if (record.machineRoomAttachment) {
      pictureList.value.push(record.machineRoomAttachment);
    } else if (record.pitAttachment) {
      pictureList.value.push(record.pitAttachment);
    }

    showPicArr.value = pictureList.value;
    console.log(showPicArr.value, 'rerere');
    modalLoading(false);
  },
);
const [registerForm, { setFieldsValue, resetForm, validate }] = useForm({
  labelWidth: 100,
  showActionButtonGroup: false,
  baseColProps: { span: 24 },
  schemas: modalEvaSchemas,
});
async function handleSubmit() {
  try {
    modalLoading(true);
    const data = await validate();
    const elevatorList = getSelectRows().map((item) => {
      return {
        id: item.id,
        name: item.elevatorName,
      };
    });

    if (elevatorList.length <= 0) {
      createMessage.error('请选择电梯');
      return;
    }
    const passData = {
      ...data,
      elevatorList,
    };
    console.log(passData);
    await workDataDistribute(passData);
    emit('reload');
    closeModal();
    await resetForm();
  } catch (e) {
    console.warn(e);
  } finally {
    modalLoading(false);
  }
}
</script>

<style scoped>
/* For demo */
:deep(.slick-slide) {
  text-align: center;
  height: 600px;
  line-height: 600px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-arrow.custom-slick-arrow) {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  transition: ease all 0.3s;
  opacity: 0.3;
  z-index: 1;
}
:deep(.slick-arrow.custom-slick-arrow:before) {
  display: none;
}
:deep(.slick-arrow.custom-slick-arrow:hover) {
  color: #fff;
  opacity: 0.5;
}

:deep(.slick-slide h3) {
  color: #fff;
}
</style>
