<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
  <BasicTable class="w-4/4 xl:w-5/5" @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="download">导出</a-button>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'action'">
        <TableAction
          :actions="[
            {
              label: '项目维护',
              onClick: () => {
                changeProject(record)
              },
            },
            {
              label: '项目续期',
              onClick: () => {
                projectRenewal(record)
              },
            },
            {
              label: '项目移交',
              onClick: () => {
                projectTransfer(record)
              },
            },
            {
              label: '停止生产',
              onClick: () => {
                closeProject(record)
              },
            },
            {
              label: '详情',
              onClick: () => {
                handleInfo(record);
              },
            }
          ]"
        />
      </template>
    </template>
  </BasicTable>
  <a-modal
    style="width: 100vw; top: 0px; left: 0px; margin: 0px; padding: 0px"
    wrap-class-name="full-modal"
    v-model:open="showInfoOpen"
    title="详情"
    :footer="null"
    :maskClosable="true"
    :destroyOnClose="true"
    @cancel="showInfoOpen = false"
  >
    <ShowInfoModal :showInfoData="showInfoData"/>
  </a-modal>
  <a-modal
    width="70%"
    v-model:open="infoModal"
    title="项目维护"
    :destroyOnClose="true"
    @ok="submit" 
    @cancel="closeInfoModal">
      <InfoModal :infoData="infoData" :infoResult="infoResult"/>
  </a-modal>
  <a-modal
    v-model:open="renewalModal"
    title="项目续期"
    @ok="submitRenewal"
    @cancel="cancelRenewal"
  >
    <RenewalModal :renewalInfo="renewalInfo"/>
  </a-modal>
  <a-modal
    v-model:open="transferModal"
    title="项目移交"
    @ok="submitTransfer"
    @cancel="cancelTransfer"
  >
    <TransferModal :transferInfo="transferInfo"/>
  </a-modal>
</PageWrapper>
</template>

<script setup lang="ts">
import { ref, createVNode } from "vue"
import { PageWrapper } from '@/components/Page';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { columns, searchFormSchema } from './utils';
import { ProjectChange, ProjectChangeExport, ProjectMaintain, CloseProject, ProjectRenewal, ProjectHandover } from '@/api/earlywarning/index'
import ShowInfoModal from '@/components/EarlyWarning/InfoModal/index.vue'
import { message, Modal } from "ant-design-vue";
import InfoModal from './InfoModal/index.vue'
import RenewalModal from './renewalModal/index.vue'
import TransferModal from './TransferModal/index.vue'
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import dayjs from 'dayjs'

const showInfoOpen = ref(false)
const showInfoData = ref();
const infoModal = ref(false)
const infoData = ref({})
const infoResult = ref({})
const renewalModal = ref(false)
const renewalInfo = ref({
  id:'',
  name:'',
  time:''
})
const transferModal = ref(false)
const transferInfo = ref({
  id: '',
  name: '',
  yijiaobumen: '',
  yijiaoyuanyin: '',
})

const [registerTable, { getForm, reload }] = useTable({
  title: '项目变更',
  api: ProjectChange,
  columns,
  rowKey: 'id',
  useSearchForm: true,
  showTableSetting: true,
  bordered: true,
  formConfig: {
    labelWidth: 120,
    schemas: searchFormSchema,
  },
  actionColumn: {
    width: 370,
    title: '操作',
    dataIndex: 'action',
    fixed: 'right',
  },
});
function handleInfo(record) {
  showInfoData.value = record
  showInfoOpen.value = true
}
const download = () => {
  const form = getForm();
  const filterValues = form.getFieldsValue();
    ProjectChangeExport(filterValues).then(res => {
    const elink = document.createElement('a');
    elink.download = '项目变更数据' + new Date().getTime() + '.xls';
    elink.style.display = 'none';
    elink.href = URL.createObjectURL(res);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href);
    document.body.removeChild(elink);
  })
}
const submit = () => {
  ProjectMaintain(infoResult.value).then(res => {
    console.log(res)
    message.success('修改成功')
    closeInfoModal()
    reload()
  })
}
const closeInfoModal = () => {
  infoModal.value = false
  infoResult.value = {}
}
const changeProject = (record) => {
  infoData.value = {...record}
  infoModal.value = true
}
const closeProject = (record) => {
  Modal.confirm({
    content: '确定要停止生产改项目吗？',
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      return CloseProject(record.id).then(res => {
        reload()
        message.success('停止生产成功')
      })
    },
    onCancel() {
    },
  });
  
}
const projectRenewal = (record) => {
  renewalInfo.value.id = record.id
  renewalInfo.value.name = record.xiangmu_name
  renewalInfo.value.time = record.end_time? dayjs(record.end_time): ''
  renewalModal.value = true
}
const projectTransfer = (record) => {
  transferInfo.value.id = record.id
  transferInfo.value.name = record.xiangmu_name
  transferInfo.value.yijiaobumen = ''
  transferInfo.value.yijiaoyuanyin = ''
  transferModal.value = true
}
const submitRenewal = () => {
  let params = {
    id: renewalInfo.value.id,
    newEndTime: renewalInfo.value.time
  }
  return ProjectRenewal(params).then(res => {
    message.success('项目续期成功')
    reload()
    cancelRenewal()
  })
}
const cancelRenewal = () => {
  renewalModal.value = false
  renewalInfo.value.id = ''
  renewalInfo.value.name = ''
  renewalInfo.value.time = ''
}
const submitTransfer = () => {
  let params = {
    id: transferInfo.value.id,
    yijiaobumen: transferInfo.value.yijiaobumen,
    yijiaoyuanyin: transferInfo.value.yijiaoyuanyin,
  }
  return ProjectHandover(params).then(res => {
    message.success('项目移交成功')
    reload()
    cancelTransfer()
  })
}
const cancelTransfer = () => {
  transferModal.value = false
  transferInfo.value.id = ''
  transferInfo.value.name = ''
  transferInfo.value.yijiaobumen = ''
  transferInfo.value.yijiaoyuanyin = ''
}
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    min-width: 100vw;
    top: 0px;
    padding: 0px;
    margin: 0px;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
  }
  .ant-modal-body {
    flex: 1;
  }
}
</style>
