<template>
  <div class="padding" style="height: 99%; overflow: auto; background: #ffffff">
    <div class="padding">
      <div
        style="
          display: flex;
          justify-content: space-between;
          padding-bottom: 5px;
          border-bottom: 1px solid #dddddd;
        "
      >
        <div style="">
          <a-button @click="emit('cancel')">返回</a-button>
          <span style="padding-left: 20px; font-size: 16px; font-weight: 700"
            >{{ baseData.scheName }}-排期详情</span
          >
        </div>
        <div style="right: 10px">
          <a-button type="primary" size="middle" @click="handleExport()">导出</a-button>
          <a-button
            type="primary"
            size="middle"
            style="margin-left: 12px"
            @click="SchedulingTool"
            :disabled="baseData.publishState == '1'"
            >排期工具</a-button
          >
        </div>
      </div>
      <div class="info-box">
        <div class="flex_center">
          <div class="blue_line"></div>
          <div>基本信息</div>
        </div>
        <a-descriptions title="" :column="6" class="marginTop back_color">
          <a-descriptions-item label="编码">{{ baseData.scheNo }}</a-descriptions-item>
          <a-descriptions-item label="名称">{{ baseData.scheName }}</a-descriptions-item>
          <a-descriptions-item label="制表人">{{ baseData.createUserName }}</a-descriptions-item>
          <a-descriptions-item label="制表日期" style="width: 240px">{{
            baseData.createDateStr
          }}</a-descriptions-item>
          <a-descriptions-item label="发布状态">
            <template v-if="baseData.publishState == 0">未发布</template>
            <template v-if="baseData.publishState == 1">已发布</template>
          </a-descriptions-item>
          <!-- <a-descriptions-item label="完成状态">
          <template v-if="baseData.finishState == 0">未完成</template>
          <template v-if="baseData.finishState == 1">已完成</template>
        </a-descriptions-item> -->
          <a-descriptions-item label="备注">{{ baseData.remark }}</a-descriptions-item>
        </a-descriptions>
        <div class="flex_center">
          <div class="blue_line"></div>
          <div>排期详情</div>
        </div>

        <a-table
          bordered
          :columns="columns"
          :data-source="dataList"
          :loading="dataLoading"
          :pagination="pagination"
          :scroll="{ y: 500 }"
        >
          <template #operation="{ record }">
            <a-button type="link" @click="onDetail(record)">明细</a-button>
          </template>
        </a-table>

        <!-- <div class="aPagination">
          <a-pagination
            v-model:current="current1"
            :total="totals"
            :pageSize="pageSize"
            show-size-changer
            show-quick-jumper
            :show-total="(total: any) => `共 ${total} 条`"
            @change="onChange"
            @showSizeChange="onChangeSize"
          />
        </div> -->
      </div>
    </div>
  </div>
  <!--  排期工具-->
  <a-modal
    :maskClosable="false"
    :title="titleModa2"
    v-model:visible="visibleModa2"
    :confirm-loading="confirmLoading"
    width="90%"
    :body-style="{
      height: '700px',
      overflow: 'hidden',
      overflowY: 'scroll',
    }"
    :style="{
      left: '5%',
      top: '120px',
    }"
    :footer="null"
  >
    <tool-modal :scheId="sche" @cancel="submitCancel" @ok="submitOk"></tool-modal>
  </a-modal>

  <a-modal
    :maskClosable="false"
    title="排期明细"
    v-model:visible="visibleModa3"
    :confirm-loading="confirmLoading"
    width="70%"
    :footer="null"
  >
    <query-modal
      :sche="sche"
      @cancel="visibleModa3 = false"
      @ok="visibleModa3 = false"
    ></query-modal>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, watch, onMounted, reactive } from 'vue';
  import { getMesProSchedule } from '/@/api/mes/proschedule';
  import { getMesProSchetoolList, exportInfo } from '/@/api/mes/schetool';
  import { downloadByData } from '/@/utils/file/download';

  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();

  import { useMessage } from '/@/hooks/web/useMessage';
  const { notification } = useMessage();
  import QueryModal from './QueryModal.vue';
  import toolModal from './toolModal.vue';
  import printJS from 'print-js';
  import domtoimage from 'dom-to-image';
  let props = defineProps(['rowData']);
  const rowData = ref<any>({});
  const baseData = ref<any>({});

  const sche = ref({});

  const totals = ref<any>(0);
  const pageSize = ref<number>(10);

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

  const dataLoading = ref<boolean>(false);
  const current1 = ref<number>(1);
  const emit = defineEmits(['cancel', 'success']);
  const columns = [
    {
      title: '序号',
      align: 'center',
      customRender: ({ index }: { index: number }) => {
        return `${(pagination.current - 1) * pagination.pageSize + index + 1}`;
      },
      width: 70,
    },
    {
      title: '上线日期',
      dataIndex: 'onlineDate',
      sorter: true,
      width: 150,
    },
    {
      title: '产品编码',
      dataIndex: 'productNo',
      sorter: true,
    },
    {
      title: '产品名称',
      dataIndex: 'productName',
      sorter: true,
    },
    {
      title: '排期数量',
      dataIndex: 'scheNum',
      sorter: true,
      width: 100,
    },
    {
      title: '制单日期',
      dataIndex: 'toolDate',
      sorter: true,
      width: 150,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      sorter: true,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 80,
      slots: { customRender: 'operation' },
    },
  ];

  const titleModa2: ref<string> = ref('');
  const visibleModa2: ref<boolean> = ref(false);
  const confirmLoading: ref<boolean> = ref(false);

  watch(
    () => props.rowData,
    (val) => {
      console.log('监听', val);
      if (val) {
        rowData.id = props.rowData.id;
        getDetail();
      }
    },
  );
  onMounted(() => {
    rowData.id = props.rowData.id;
    getDetail();
  });

  const visibleModa3 = ref<boolean>(false);
  const onDetail = (record: any) => {
    sche.value = {
      id: rowData.id,
      onlineDate: record?.onlineDate,
      remark: record?.remark,
      isQuery: false,
      disabled: true,
      list: record.mesProSchetoolDetailList,
    };
    visibleModa3.value = true;
  };
  const getDetail = async () => {
    const data = await getMesProSchedule(rowData.id);
    baseData.value = data;

    fetchData();
  };

  async function fetchData() {
    const pageParams = {
      // limit: current1.value, //当前页数
      // size: pageSize1.value, //每页条数
      scheId: baseData.value.id,
      needDetail: true,
    };
    const res = await getMesProSchetoolList(pageParams);

    dataList.value = res;
    // totals.value = res.total;
  }

  //前端分页
  const pagination = reactive({
    // 表格分页的配置
    current: 1,
    pageSize: 10,
    showSizeChanger: true, // 用于控制展示每页多少条的下拉
    showQuickJumper: true,
    total: 0,
    pageSizeOptions: ['10', '20', '50', '100'],
    showTotal: (total) => `共 ${total} 条`,
    onShowSizeChange: pageSizeChange,
    onChange: pageChange,
    class: 'aPagination',
  });

  // 页数改变的方法

  function pageSizeChange(val, pageNum) {
    pagination.pageSize = pageNum; // 修改每页显示的条数
    pagination.current = 1;
  }
  // 点击上一页下一页的方法
  function pageChange(page, val) {
    console.log(page, val);
    pagination.current = page;
  }
  // const onChange = (pageNumber: number) => {
  //   console.log('Page: ', pageNumber);
  //   current1.value = pageNumber;
  //   fetchData();
  // };
  // const onChangeSize = (current: number, pageSize1: number) => {
  //   console.log('pageSize: ', current, pageSize1);
  //   pageSize.value = pageSize1;
  //   fetchData();
  // };

  const SchedulingTool = () => {
    titleModa2.value = t('排期工具');
    sche.value = {
      id: baseData.value.id,
    };

    visibleModa2.value = true;
  };

  const submitCancel = () => {
    visibleModa2.value = false;
  };

  const submitOk = async (lists: any) => {
    visibleModa2.value = false;
    getDetail();
    // if (data) {
    // }
  };
  const handleExport = async () => {
    const res = await exportInfo(baseData.value.id);
    downloadByData(
      res.data,
      baseData.value.scheName + '-排期明细.xlsx',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    );

    // const element: HTMLElement = window.document.querySelector('.info-box')!;
    // const url = await domtoimage.toPng(element);
    // printJS({
    //   printable: url,
    //   type: 'image',
    //   documentTitle: '打印',
    // });
  };
</script>

<style lang="less" scoped>
  .padding {
    padding: 12px;
  }

  .back_color {
    background-color: hsl(0, 0%, 98%);
    position: relative;
    height: 100%;
  }

  .marginTop {
    margin-top: 12px;
  }

  .flex_center {
    display: flex;
    align-items: center;
  }

  .blue_line {
    width: 5px;
    height: 16px;
    background-color: #5e95ff;
    margin-right: 12px;
  }

  .aPagination {
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>
