<template>
  <div>
    <MOSTY.PageTree :pageTitle="'工作总结列表'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="uploadClick">
            <el-icon>
              <UploadFilled />
            </el-icon>
            <span>上传</span>
          </el-button>
          <el-button type="primary" @click="addlist">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>生成</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <!-- 表格 -->
        <section class="eltab9">
          <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false" :actionsW="280">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_WORKTYPE" :value="row.type" :tag="false" />
            </template>
            <template #yearType="{ row }">
              <dict-tag :options="D_BZ_WORD_YEAR_TYPE" :value="row.yearType" :tag="false" />
            </template>
            <template #actions="{ row }">
              <span class="operedit" @click="editClick(row)">
                <el-icon>
                  <EditPen />
                </el-icon>编辑</span>
              <span class="operedown" @click="downLoad(row)">
                <el-icon>
                  <Download />
                </el-icon>下载</span>
              <span class="operesee" @click="seeInfo(row)"><el-icon>
                  <View />
                </el-icon>预览</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handledelete(row)">
                <template #reference>
                  <span class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
            </template>
          </MOSTY.Table>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
              @changeSize="handleSizeChange" />
          </div>
        </section>
      </template>
    </MOSTY.PageTree>
    <!-- 富文本编辑器组件 -->
    <div class="dialog-box" v-if="open">
      <MOSTY.FromPage :title="'修改工作总结'" @closeDialog="CloseEvent">
        <template #content>
          <div class="width:100%;">
            <el-form ref="ruleFormRef" :model="markForm" status-icon :rules="rules"
              style="width: 100%; margin: 20px auto;">
              <el-form-item>
                <div class="contents">
                  <vue-ueditor-wrap v-model="markForm.MarkdownEdit" editor-id="editor" :config="editorConfig"
                    :editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
                    style="height:67vh;overflow-y: scroll;" />
                </div>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button style="margin-left: 10px" type="primary" @click="updateHander" :loading="loading">
            <el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span>
          </el-button>
          <el-button type="primary" @click="CloseEvent">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>返回</span>
          </el-button>

        </template>
      </MOSTY.FromPage>

    </div>
    <!-- 手动上传 -->
    <UploadDialog :diaShow="uploadShow" @close="closeChang" :title="title"
      :dict="{ D_BZ_WORKTYPE, D_BZ_WORD_YEAR_TYPE }" />
    <!-- 自动生成 -->
    <GenerateDialog :diaShow="generateShow" @close="closegener" :dict="{ D_BZ_WORKTYPE, D_BZ_WORD_YEAR_TYPE }" />
    <div class="docxbox" id="downloaddocx">
      <strong style="color:#000;" v-html="maincontent"></strong>
    </div>
    <!-- 预览 -->
    <div v-if="dialogVisible" class="dialog-box">
      <Kkfile :files="filesid" @changedialog="changedialog" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, ref, defineProps, getCurrentInstance, watch } from "vue";
import GenerateDialog from "./compon/generateDialog.vue";
import UploadDialog from "./compon/uploadDialog.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { getItem } from "@/utils/storage";
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_WORKTYPE, D_BZ_WORD_YEAR_TYPE } = proxy.$dict("D_BZ_WORKTYPE", "D_BZ_WORD_YEAR_TYPE");
const props = defineProps({
  //获取组件传值
  modelValue: {
    type: Array,
    default: ''
  },
})
const filesid = ref(null)
const dialogVisible = ref(false)
const searchArr = reactive([
  {
    showType: "select",
    prop: "planYear",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),
    options: filterYear(7),
  }
]);
const showbtn = ref(true)
const tableloading = ref(false)
const loading = ref(false)
const title = ref(''); //整个高度
const generateShow = ref(false); //生成弹框显示或隐藏
const uploadShow = ref(false); //上传弹窗
const open = ref(false);
const savefil = ref(false);
const maincontent = ref("");
const rowid = ref('')
const editorConfig = {
  serverUrl: '',
  UEDITOR_HOME_URL: '/UEditorPlus/'
}
const markForm = reactive({
  MarkdownEdit: ''
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  planYear: new Date().getFullYear().toString(),
  orgcode: ''
});
const pageData = reactive({
  tableColumns: [
    {
      title: "标题",
      prop: "titleName"
    },
    {
      title: "年度",
      prop: "year"
    },
    {
      title: "层级",
      prop: "type",
      slot: true
    },
    {
      title: "类型",
      prop: "yearType",
      slot: true
    },
    {
      title: "更新时间",
      prop: "xtZhgxsj"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
})
//监听富文本
watch(
  () => markForm.MarkdownEdit,
  (val) => {
    if (val) {
      markForm.MarkdownEdit = val
    }
  }
);
//预览
function seeInfo(val) {
  filesid.value = val.file
  dialogVisible.value = true
}
//关闭预览
function changedialog() {
  dialogVisible.value = false;
  filesid.value = null
}
function onSearch(obj) {
  listQuery.planYear = obj.planYear
  listQuery.pageCurrent = 1;
  pageData.pageConfiger.pageCurrent = 1;
  getListData();
}
function closeChang(val) {
  uploadShow.value = val
  getListData();
}
//获取部门数据
const getdeptId = (val) => {
  if (getItem("deptId").ssdwid.replace("XN", "") == val.id.replace("XN", "")) {
    showbtn.value = true
  } else {
    showbtn.value = false
  }
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  pageData.pageConfiger.pageCurrent = 1;
  getListData();
}
//获取列表数据
function getListData() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/worksummary/getWorkSummary').then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res.records;
      pageData.pageConfiger.total = res.total
    }
  }).finally(() => {
    tableloading.value = false;
  })
}
//新增
const addlist = () => {
  generateShow.value = true
  title.value = '工作总结生成条件'
}
//上传
const uploadClick = () => {
  uploadShow.value = true
  title.value = '上传工作总结'
}
//下载
const downLoad = (val) => {
  if (!val.file) {
    ElMessage.warning("附件不存在");
    return
  }
  window.open(`/mosty-api/mosty-base/minio/image/download/${val.file}`, "_blank");
}
// 编辑
const editClick = (row) => {
  savefil.value = false
  rowid.value = row.id
  markForm.MarkdownEdit = row.maincontent;
  open.value = true;
};
function updateHander(e) {
  loading.value = true
  // markForm.MarkdownEdit = e
  let data = {
    id: rowid.value,
    maincontent: markForm.MarkdownEdit
  }
  postApi(data, "/mosty-jcgl/worksummary/updateWorkSummary").then(() => {
    ElMessage.success("修改成功");
    open.value = false;
    getListData();
  }).finally(() => {
    loading.value = false
  })
}
function CloseEvent(params) {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      open.value = false;
    })
    .catch(() => {
      // catch error
    })
}
//删除列表数据
function handledelete(row) {
  postApi({}, `/mosty-jcgl/worksummary/deleteWorkSummary/` + row.id).then(() => {
    ElMessage.success("删除成功");
    getListData();
  })
}
//关闭上传弹窗
const closegener = () => {
  getListData();
  generateShow.value = false
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageData.pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageData.pageConfiger.pageCurrent = currentPage;
  getListData();
};
</script>

<style lang="scss" scoped>
.contents {
  width: 1000px;
  // height: 67vh;
  margin: 10px auto;
}

::v-deep .el-form-item {
  width: 100%;
}

.docxbox {
  width: 100%;
}

.bigBox {

  .btnBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
  }
}
</style>