<template>
  <div class="page">

    <el-form :inline="true"  class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
      <el-form-item label="标题" prop="title">
        <el-input v-model="searchForm.title"></el-input>
      </el-form-item>
      <el-form-item label="流程名称" prop="taskName">
        <el-input v-model="searchForm.taskName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button  type="primary" @click="refreshList()" icon="el-icon-search">查询</el-button>
        <el-button @click="resetSearch()" icon="el-icon-refresh-right">重置</el-button>
      </el-form-item>
    </el-form>

      <div class="jp-table top" style="">
        <vxe-toolbar :refresh="{query: refreshList}" custom>
          <template #buttons>
            <el-button type="primary" @click="readAll()">全部标记已读</el-button>
            <el-button :disabled="$refs.todoTable && $refs.todoTable.getCheckboxRecords().length === 0" type="warning" @click="portionRead()">标记为已读</el-button>
          </template>
        </vxe-toolbar>
		  <el-tabs v-model="type" type="card" @tab-click="handleClick">
			  <el-tab-pane :key="index" v-for="(item,index) in typeList" :label="item.value" :name="item.value" :value="item.id"></el-tab-pane>
		  </el-tabs>

        <div class="table-container">
            <vxe-table
              border="inner"
              auto-resize
              resizable
              height="auto"
              :loading="loading"
              ref="todoTable"
              show-header-overflow
              show-overflow
              highlight-hover-row
              :data="dataList"
              :checkbox-config="{}">
              <vxe-column type="seq" width="60" title="序号"></vxe-column>
              <vxe-column type="checkbox"  width="60px"></vxe-column>
              <vxe-column  title="实例标题" field="title" >
                <template #default="scope">
					<el-link type="primary" :underline="false" @click="todo(scope.row)">
						<span v-if="scope.row.repetitionCount > 0 && scope.row.type === '未读'" >
							<span style="color: red; font-weight: bold;">【{{ scope.row.repetitionCount }}】</span>{{ scope.row.title }}
						</span>
						<span v-else>
							{{ scope.row.title }}
						</span>
					</el-link>
                </template>
              </vxe-column>
              <vxe-column  title="流程名称" field="taskName" > </vxe-column>
              <vxe-column  title="流程发起人" field="createUser" ></vxe-column>
              <vxe-column
                field="createTime"
                title="创建时间">
              </vxe-column>
              <vxe-column  title="读取状态" field="type" ></vxe-column>
            </vxe-table>
			<vxe-pager
				background
				:current-page="tablePage.currentPage"
				:page-size="tablePage.pageSize"
				:total="tablePage.total"
				:page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
				:layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
				@page-change="currentChangeHandle">
			</vxe-pager>
        </div>
      </div>
    <WareHouseHistoryPopup ref="wareHouseHistoryPopup"></WareHouseHistoryPopup>
	  <RegisterPopup ref="registerPopup"></RegisterPopup>
	  <KeyCardPopup ref="keyCardPopup"></KeyCardPopup>
	  <DepartPopup ref="departPopup"></DepartPopup>
	  <DepartProvePopup ref="departProvePopup"></DepartProvePopup>
	  <ProjectRecordsForm ref="projectRecordsForm"></ProjectRecordsForm>
	  <CwInvoiceForm  ref="cwInvoiceForm"></CwInvoiceForm>
	  <InvoiceForm  ref="invoiceForm" ></InvoiceForm>
  </div>
</template>

<script>
  import WareHouseHistoryPopup from '@/views/materialManagement/wareHouseSummary/WareHouseHistoryPopup'
  import RegisterPopup from '@/views/human/practice/register/RegisterPopup'
  import taskService from '@/api/flowable/taskService'
  import noticeService from '@/api/flowable/noticeService'
  import KeyCardPopup from '@/views/human/enrollment/registration/KeyCardPopup'
  import DepartPopup from '@/views/human/depart/handover/DepartPopup'
  import DepartProvePopup from '@/views/human/depart/handover/DepartProvePopup'
  import ProjectRecordsForm from "@/views/cw/projectRecords/ProjectRecordsForm";
  import CwInvoiceForm from '@/views/cw/invoice/InvoiceForm'
  import InvoiceForm from '@/views/finance/invoice/InvoiceForm'

  import pick from 'lodash.pick'
  export default {
    data () {
      return {
        dataList: [],
        typeList: [],
        searchForm: {
          title: '',
          taskName: ''
        },
        tablePage: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          orders: []
        },
        loading: false,
        visible: false,
        currentTask: null,
        processInstanceId: ''
      }
    },
    created () {
      this.typeList = [
        {id: '0', value: '未读'},
        {id: '1', value: '已读'}
      ]
    },
    activated () {
      this.refreshList()
    },
    components: {
      WareHouseHistoryPopup,
		RegisterPopup,
		KeyCardPopup,
		DepartPopup,
		DepartProvePopup,
		ProjectRecordsForm,
		CwInvoiceForm,
		InvoiceForm,
    },
    methods: {
      // 获取数据列表
      refreshList () {
        this.loading = true
        if (this.commonJS.isEmpty(this.searchForm.type)) {
          this.searchForm.type = '0'
        }
        noticeService.list({
          'current': this.tablePage.currentPage,
          'size': this.tablePage.pageSize,
          'orders': this.tablePage.orders,
          ...this.searchForm
        }).then((data) => {
        	console.log('data',data.records)
          this.dataList = data.records
          this.tablePage.total = data.total
          this.loading = false
        })
      },
      // 当前页
      currentChangeHandle ({ currentPage, pageSize }) {
        this.tablePage.currentPage = currentPage
        this.tablePage.pageSize = pageSize
        this.refreshList()
      },
      todo (row) {
        // console.log('row', row)
		  if (row.taskName === '评估发票超期收款') {
			  // console.log('测试进来了')
			  console.log('id',row.defId)
			  this.$refs.invoiceForm.init(false,row.defId)
			  this.inputForm = {
				  id: row.id
			  }
			  noticeService.stockUpdate(this.inputForm)
			  this.resetSearch()
		  }else if (row.taskName === '超期收款发票') {
			  // console.log('测试进来了')
			  console.log('id',row.defId)
			  this.$refs.cwInvoiceForm.init(false,row.defId)
			  this.inputForm = {
				  id: row.id
			  }
			  noticeService.stockUpdate(this.inputForm)
			  this.resetSearch()
		  }else if (row.taskName === '库存提醒') {
          // console.log('测试进来了')
          this.$refs.wareHouseHistoryPopup.init(row.defId)
          this.inputForm = {
            id: row.id
          }
          noticeService.stockUpdate(this.inputForm)
          this.resetSearch()
        }else if (row.taskName === '实习日志超时提醒') {
			this.$refs.registerPopup.init(row.defId)
			this.inputForm = {
				id: row.id
			}
			noticeService.stockUpdate(this.inputForm)
			this.resetSearch()
		}else if (row.taskName === '门卡领取提醒') {
			this.$refs.keyCardPopup.init()
			this.inputForm = {
				id: row.id
			}
			noticeService.stockUpdate(this.inputForm)
			this.resetSearch()
		}else if (row.taskName.includes('离职提醒')) {
			this.$refs.departPopup.init(row.taskName)
			this.inputForm = {
				id: row.id
			}
			noticeService.stockUpdate(this.inputForm)
			this.resetSearch()
		}else if (row.taskName.includes('请点击下载离职证明')) {
			this.$refs.departProvePopup.init(row.taskName,row.defId)
			this.inputForm = {
				id: row.id
			}
			noticeService.stockUpdate(this.inputForm)
			this.resetSearch()
		}else if (row.taskName === '预开票项目未关联') {
			this.$refs.projectRecordsForm.init('view',row.defId)
			this.inputForm = {
				id: row.id
			}
			noticeService.stockUpdate(this.inputForm)
			this.resetSearch()
		}else {
          this.inputForm = {
            taskId: '',
            noticeId: '',
		    taskName: ''
          }
          taskService.getTaskDef({
            procInsId: row.taskId,
            procDefId: row.defId
          }).then((data) => {
            this.inputForm.taskId = row.taskId
            this.inputForm.noticeId = row.noticeName
            this.inputForm.taskName = row.taskName
            noticeService.update(this.inputForm)
            this.$router.push({
              path: '/flowable/task/TaskFormDetail',
              query: {
                isShow: false,
                formReadOnly: true,
                formTitle: `${row.title}`,
                num: 2,
                title: `审批【${row.taskName || ''}】`,
                ...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')
              }
            })
          })
        }
      },
      resetSearch () {
        this.$refs.searchForm.resetFields()
        this.refreshList()
      },
      handleClick (tab) {
        const val = tab.index
        this.searchForm.type = val
        this.refreshList()
      },

      // 全部已读
      readAll () {
        this.$confirm(`确定将全部信息标记为已读吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          noticeService.readAll().then((data) => {
            this.loading = false
            this.$message({
              message: data,
              type: 'success',
              duration: 1500
            })
            this.refreshList()
          })
        })
      },

      // 部分已读
      portionRead (id) {
        let ids = id || this.$refs.todoTable.getCheckboxRecords().map(item => {
          return item.id
        }).join(',')
        this.$confirm(`确定将选定信息标记为已读吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          noticeService.portionRead(ids).then((data) => {
            this.loading = false
            this.$message({
              message: data,
              type: 'success',
              duration: 1500
            })
            this.refreshList()
          })
        })
      }
    }
  }
</script>
<style scoped>
	.table-container {
		height: calc(85% - 90px); /* 调整容器高度，确保分页显示正常 */
		display: flex; /* 使用 flex 布局 */
		flex-direction: column; /* 垂直方向布局 */
	}

	/* 可根据需要调整表格和分页的样式 */
	.vxe-table {
		flex: 1; /* 表格自动填充容器剩余空间 */
	}

	.vxe-pager {
		margin-top: 10px; /* 调整分页组件的上边距 */
	}
</style>
