<template>
  <!-- <div class="wakk-box"> -->
  <div class="wakk-bulletin">
    <div>
      <BasicTable @row-click="rowCLick" :clickToRowSelect="false" @register="registerTable">
        <template #toolbar>
          <Authority>
            <a-button type="primary" @click="handleCreate">新增</a-button>
          </Authority>
        </template>
        <template #tags="{ record }">
          <div class="list-box">
            <span>
              <a-tag :color="record.state == '终稿' ? 'orange' : 'cyan'">
                {{ record.state }}
              </a-tag>
              <span class="tooltip-title">
                <a-tooltip>
                  <template #title>{{ record.name }}</template>
                  {{ record.name }}
                </a-tooltip>
              </span>
            </span>
            <span class="table-btn-box">
              <span class="table-btn">
                <!-- <span @click="examine"> 审阅 </span>
                <span @click="copyItem(record)"> 复制 </span> -->
                <span @click="eidt(record)"> 编辑 </span>
                <span> 
                  <a-popconfirm
                    title="是否确认删除?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="confirmDel(record)"
                  >
                    <a href="#">删除</a>
                  </a-popconfirm>  
                </span>
              </span>
              <span>
                {{ record.time }}
              </span>
            </span>
          </div>
        </template>
      </BasicTable>
    </div>
    <div>
      <div class="top-box">
        <div> {{ dataCenter.dataBox.name }} </div>
        <!-- <div>
          <span>操作人：</span>
          <span>张三</span>
        </div> -->
        <div>
          <span>操作时间：</span>
          <span>{{ dataCenter.dataBox.time }}</span>
        </div>
      </div>
      <div class="rich-text-box">
        月报审阅
        <div>
          <img src="/src/assets/images/sw-home/word-icon.png" />
          <span @click="exportWord"> 导出为word </span>
          <img src="/src/assets/images/sw-home/pdf-icon.png" />
          <span @click="exportPdf"> 导出为pdf </span>
        </div>
      </div>
      <div>
        <div id="pdfDom" style="height: calc(100vh - 200px);overflow: auto;" v-html="dataCenter.dataBox.html"></div>
      </div>
    </div>
    <AccountModal @register="registerModal" @success="handleSuccess" />
  </div>

  <!-- </div> -->
</template>
<script lang="ts" setup>
import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import { ref, watch, onMounted, reactive } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getJianBaoType, getJianbaoPreview, deleteJianbao } from '/@/api/swHome/index';
//弹窗开始
import { useMessage } from '/@/hooks/web/useMessage';
import { useModal } from '/@/components/Modal';
import AccountModal from './components/AccountModalMonthlyReport.vue';
const [registerModal, { openModal }] = useModal();
import FileSaver from 'file-saver';
import htmlDocx from 'html-docx-js/dist/html-docx';
function handleSuccess(record) {
  // console.log('提交成功');
  reload()
}
const dataCenter = reactive({
  searchFormSchema: [
    {
      field: 'jianbao_value',
      label: '关键字:',
      component: 'Input',
      colProps: { span: 14 },
      componentProps: {
        mode: 'multiple',
        maxTagCount: 1,
      },
    },
  ],
  columns: [
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      width: 50,
      align: 'center',
      customRender: (text, record, index) => {
        return text.index + 1;
      }, //此处为重点
    },
    {
      title: '月报名称',
      dataIndex: 'name',
      key: 'name',
      slots: { customRender: 'tags' },
    },
    // {
    //   title: '时间',
    //   dataIndex: 'time',
    //   key: 'time',
    //   width: 180,
    // },
  ],
  dataBox: {
    name: '',
    time: '',
    html: '',
  },
});
const [registerTable, { reload, getRawDataSource, getForm, setLoading, setColumns, setTableData }] =
  useTable({
    title: '月报',
    api: getJianBaoType,
    columns: dataCenter.columns,
    showIndexColumn: false,
    clickToRowSelect: false,
    pagination: false,
    loading: false,
    immediate: true,
    dataSource: [],
    formConfig: {
      labelWidth: 120,
      schemas: dataCenter.searchFormSchema,
      actionColOptions: {
        span: 10,
      },
    },
    beforeFetch: (params: any) => {
      return {
        jianbao_type: 'M',
      };
    },
    afterFetch: (data) => {},
    useSearchForm: true,
    showTableSetting: true,
    bordered: true,
    rowKey: 'id',
    fetchSetting: {
      listField: 'data',
    },
  });
const handleCreate = () => {
  openModal(true, {
    isUpdate: false,
  });
};
const eidt = (item) => {
  openModal(true, {
    isUpdate: true,
    itemData: item
  });
}
const copyItem = (item) => {
  createMessage.success('功能正在开发中');
  return false
  // openModal(true, {
  //   isUpdate: true,
  //   isCopy: true,
  //   itemData: item
  // });
}
const { createMessage } = useMessage();
const examine = () => {
  createMessage.success('功能正在开发中');
}
const confirmDel = (item) => {
  let formData = JSON.parse(JSON.stringify(item))
  console.log(item)
  formData.type = 'M'
  deleteJianbao(formData).then(res => {
    if(res.code == 200){
      reload()
      createMessage.success('删除成功');
      dataCenter.dataBox.html = ''
    }
  })
}
// 点击行
const rowCLick = (item) => {
  dataCenter.dataBox = item;
  let formData = JSON.parse(JSON.stringify(item));
  formData.type = 'M';
  delete formData.state
  delete formData.html
  getJianbaoPreview(formData).then((res) => {
    console.log(res);
    dataCenter.dataBox.html = res.data;
  });
};                                                             
const exportPdf = () => {
  downLoadPdf()
}  
const downLoadPdf = () => {
  
  const element = document.querySelector('#pdfDom');// 这个dom元素是要导出pdf的div容器
  element.style.height = 'initial'
  setTimeout(() => {
    html2canvas(element, {
    allowTaint: true,
    useCORS: true
  }).then(function (canvas) {
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = contentWidth / 592.28 * 841.89
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = 595.28
    let imgHeight = 580.28 / contentWidth * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new jsPDF('', 'pt', 'a4')
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(dataCenter.dataBox.name + '.pdf')
    element.style.height = 'calc(100vh - 200px)'
  })
  
  }, 10)
  
}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
const exportWord = () => {
  let content = `
       	<!DOCTYPE html><html>
            	<head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
              </head>
              <body>
                  <table>
                  		${dataCenter.dataBox.html}
                	</table>
              </body>
            </html>`;
      let converted = htmlDocx.asBlob(content);
      FileSaver.saveAs(converted, dataCenter.dataBox.name+'.docx');
    };
onMounted(() => {});
</script>
<style scoped lang="less">
.wakk-bulletin {
  display: flex;
  & > div {
    background-color: #fff;
  }
  & > div:nth-child(1) {
    width: 587px;
    height: 100%;
    overflow: hidden;
  }
  & > div:nth-child(2) {
    flex: 1;
    margin-left: 10px;
    height: 100%;
    overflow: hidden;
    padding: 10px;
    .top-box {
      display: flex;
      & > div:nth-child(1) {
        flex: 1;
        margin-left: 0px;
      }
      & > div {
        font-size: 20px;
        margin-left: 20px;
        span:nth-child(1) {
          color: #999;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
}
.p-4-my {
  height: 100%;
  overflow: hidden;
}
.wakk-box {
  height: 100%;
}
.rich-text-box {
  border-left: 4px solid #2d74e7;
  position: relative;
  padding-left: 10px;
  margin-top: 20px;
  div {
    position: absolute;
    right: 0px;
    top: 0px;
    img {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
    }
    span {
      vertical-align: middle;
      // margin-left: 5px;
      cursor: pointer;
    }
  }
}
.tooltip-title {
  display: inline-block;
  width: 240px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  vertical-align: middle;
  margin-left: 10px;
}
.table-btn {
  text-align: right;
  display: none;
  span {
    cursor: pointer;
  }
  span:nth-child(1) {
    color: #377dff;
    margin-left: 10px;
  }
  span:nth-child(2) {
    color: #2d74e7;
    margin-left: 10px;
  }
  span:nth-child(3) {
    color: #fa1414;
    margin-left: 10px;
  }
  span:nth-child(4) {
    margin-left: 10px;
  }
}
.table-btn-box {
  display: inline-block;
  width: 170px;
  &>span:nth-child(2){
    display: inline-block;
  }
  
  
}
.table-btn-box:hover {
  .table-btn{
    display: inline-block;
  }
  &>span:nth-child(2){
    display: none;
  }
  
  
}
.table-btn span{
  cursor: pointer;
}
.list-box {
  background-color: transparent !important;
}
</style>
