<template>
	<div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabsClick">
      <el-tab-pane label="待办列表" name="todo">
        <el-card :body-style="cardBodyStyle">
          <el-button type="primary" @click="handleSearch">刷新</el-button>
        </el-card>
        <el-card :body-style="cardBodyStyle">
          <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" fixed></el-table-column>-->
            <el-table-column type="index" label="序号" align="center" width="60">
              <template #default="scope">
                <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="scheduleId" label="待办id" width="230" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="160" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="startUser.userDesc" label="发起人" width="130" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="startTime" label="发起时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="readFlag" label="已读标记" width="90" header-align="center" align="center">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                  <svg-icon v-if="scope.row.readFlag=='0'" name="unread" width="20px" height="20px"
                            color="red"></svg-icon>
                  <svg-icon v-else name="read" width="20px" height="20px" color="green"></svg-icon>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="readTime" label="已读时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>

            <el-table-column prop="dealFlag" label="处理标记" width="100" header-align="center" align="center"
                             show-overflow-tooltip>
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                  <svg-icon name="todo" width="20px" height="20px" color="red"></svg-icon>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="nextUser.userDesc" label="待处理人" width="130" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dealUser.userDesc" label="处理人" width="130" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
<!--            <el-table-column prop="scheduleType" label="待办类型" width="100" header-align="center" align="center"-->
<!--                             show-overflow-tooltip>-->
<!--            </el-table-column>-->
            <el-table-column prop="dealTime" label="处理时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>

            <el-table-column v-if="false" prop="toWebPath" label="跳转web路径" width="420" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="toAppPath" label="跳转app路径" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="toMiniappPath" label="跳转小程序路径" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="toH5Path" label="跳转h5路径" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="flowId" label="FLOW_ID" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="workId" label="WORK_ID" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="trackid" label="TRACKID" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="subjectionid" label="SUBJECTIONID" width="720" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="flowName" label="FLOW_NAME" width="540" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="nodeName" label="NODE_NAME" width="540" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="主键" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="流程id" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="流程状态" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加人id" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加人编码" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加人名称" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加部门id" width="360" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加部门编码" width="360" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加部门名称" width="360" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加时间" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改人id" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改人编码" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改人名称" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改时间" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废人id" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废人编码" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废人名称" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废时间" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废标记" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="BELONG_ID" width="540" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>


            <el-table-column label="操作" header-align="center" align="center" width="100px">
              <template #default="scope">
                <!--						<el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>-->
                <!--						<el-button plain type="danger" @click="handleDelete(scope.row )">删除</el-button>-->
                <el-button plain type="warning" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                         background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange">
          </el-pagination>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="已办列表" name="done">
        <el-card :body-style="cardBodyStyle">
          <el-button type="primary" @click="handleSearch">刷新</el-button>
        </el-card>
        <el-card :body-style="cardBodyStyle">
          <el-table :data="tableData" border highlight-current-row @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" fixed></el-table-column>-->
            <el-table-column type="index" label="序号" align="center" width="60">
              <template #default="scope">
                <span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span>
              </template>
            </el-table-column>

            <el-table-column prop="scheduleId" label="待办id" width="230" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="title" label="标题" width="160" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="startUser.userDesc" label="发起人" width="130" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="startTime" label="发起时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="readFlag" label="已读标记" width="90" header-align="center" align="center">
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                  <svg-icon v-if="scope.row.readFlag=='0'" name="unread" width="20px" height="20px"
                            color="red"></svg-icon>
                  <svg-icon v-else name="read" width="20px" height="20px" color="green"></svg-icon>
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="readTime" label="已读时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dealFlag" label="处理标记" width="100" header-align="center" align="center"
                             show-overflow-tooltip>
              <template #default="scope">
                <div style="display: flex; align-items: center; justify-content: center; height: 100%;">
                  <svg-icon name="done" width="20px" height="20px" color="green"></svg-icon>
                </div>
              </template>

            </el-table-column>
            <el-table-column prop="nextUser.userDesc" label="待处理人" width="130" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="dealUser.userDesc" label="处理人" width="130" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
<!--            <el-table-column prop="scheduleType" label="待办类型" width="100" header-align="center" align="center"-->
<!--                             show-overflow-tooltip>-->
<!--            </el-table-column>-->

            <el-table-column prop="dealTime" label="处理时间" width="180" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>

            <el-table-column v-if="false" prop="toWebPath" label="跳转web路径" width="420" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="toAppPath" label="跳转app路径" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="toMiniappPath" label="跳转小程序路径" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="toH5Path" label="跳转h5路径" width="360" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="flowId" label="FLOW_ID" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="workId" label="WORK_ID" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="trackid" label="TRACKID" width="420" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="subjectionid" label="SUBJECTIONID" width="720" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="flowName" label="FLOW_NAME" width="540" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="nodeName" label="NODE_NAME" width="540" header-align="center"
                             align="center" show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="主键" width="120" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="流程id" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="流程状态" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加人id" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加人编码" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加人名称" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加部门id" width="360" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加部门编码" width="360" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加部门名称" width="360" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="添加时间" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改人id" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改人编码" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改人名称" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="修改时间" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废人id" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废人编码" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废人名称" width="300" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废时间" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="作废标记" width="240" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column v-if="false" prop="" label="BELONG_ID" width="540" header-align="center" align="center"
                             show-overflow-tooltip>
            </el-table-column>


            <el-table-column label="操作" header-align="center" align="center" width="100px">
              <template #default="scope">
                <!--						<el-button plain type="warning" @click="handleEdit(scope.row)">编辑</el-button>-->
                <!--						<el-button plain type="danger" @click="handleDelete(scope.row )">删除</el-button>-->
                <el-button plain type="warning" @click="handleDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card :body-style="cardBodyStyle">
          <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="totalRows"
                         background="background" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                         @current-change="handleCurrentChange">
          </el-pagination>
        </el-card>
      </el-tab-pane>
    </el-tabs>

		<el-dialog :close-on-click-modal="false" draggable title="编辑" v-model="dialogVisible" width="1200px" top="5vh"
			@open="openDialog">
			<el-form :model="form" label-width="80px" label-position="right" inline ref="ruleFormRef" :rules="rules">
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="success" @click="handleSave(ruleFormRef)">保存</el-button>
					<el-button type="danger" @click="handleCancelSave">取消</el-button>
				</div>
			</template>
		</el-dialog>


	</div>
</template>

<script setup>
	import ButtonBar from '@/components/ButtonBar.vue'
	// import SvgIcon from '@/components/SvgIcon/index.vue'
	import {
		ref,
		reactive,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		proxy
	} = getCurrentInstance()

	import tools from '@/tools'
  import {ElMessage} from "element-plus";
	const cardBodyStyle = ref(tools.style.card)
	const inputStyle = ref(tools.style.input)

	onMounted(() => {
		handleSearch()
	})
  const activeName = ref('todo')

  const handleTabsClick = (tab, event, item) => {
    if (tab.props.name === 'todo') {
      query.value.dealFlag = '0'
      currentPage.value = 1
      getTableData()
    } else if (tab.props.name === 'done') {
      query.value.dealFlag = '1'
      getTableData()
    }
  }

	/**
	 *   查询
	 */
	const query = ref({
		name: '',
    dealFlag: '0'
	})
	const tableData = ref([])
	const handleSearch = () => {
		currentPage.value = 1
		getTableData()
	}
	const getTableData = () => {
		var url = 'framework/Schedule/query'
		var param = {
			page: currentPage.value,
			rows: pageSize.value,
			params: JSON.stringify(query.value)
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				tableData.value = response.data.data.records
				totalRows.value = response.data.data.total
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	/**
	 *   查询
	 */

	/**
	 * 分页
	 */
	const currentPage = ref(1)
	const totalRows = ref(0)
	const pageSizes = ref([5, 10, 20, 30, 40])
	const pageSize = ref(5)
	const handleSizeChange = (val) => {
		pageSize.value = val
		getTableData()
	}
	const handleCurrentChange = (val) => {
		currentPage.value = val
		getTableData()
	}
	/**
	 * 分页
	 */


	/**
	 * 新增
	 */
	const dialogVisible = ref(false)
	const form = ref({})
	const ruleFormRef = ref()
	const rules = reactive({})

	const handleAdd = () => {
		form.value = {}
		dialogVisible.value = true
	}
	/**
	 * 新增
	 */


	/**
	 * 保存、修改、删除
	 */

	const openDialog = () => {}

	const handleSave = (ruleFormRef) => {
		ruleFormRef.validate((valid, fields) => {
			if (valid) {
				var url = 'exp/Schedule/save'
				var param = {
					json: JSON.stringify(form.value),
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						form.value = response.data.data
						ElMessage({
							message: '保存成功',
							type: 'success',
						})
						getTableData()
						dialogVisible.value = false
					} else {
						// ElMessage.error('操作失败！' + response.data.msg)
						ElMessage({
							message: '操作失败' + response.data.msg,
							type: 'error'
						})
					}
				})

			} else {
				console.log('error submit!', fields)
			}
		})
	}
	const handleCancelSave = () => {
		dialogVisible.value = false
	}
	const handleEdit = (row) => {
		dialogVisible.value = true
		form.value = row
	}
	const handleDelete = (row) => {
		ElMessageBox.confirm(
				'确定删除本条记录?',
				'提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning',
					draggable: true,
				}
			)
			.then(() => {
				var url = 'exp/Schedule/remove'
				var param = {
					id: row.id
				}
				proxy.$axios.post(url, param).then(response => {
					if (response.data.code == 0) {
						ElMessage({
							type: 'success',
							message: '删除成功',
						})
						getTableData()
					} else {
						ElMessage({
							type: 'error',
							message: '删除失败' + response.data.msg
						});
					}
				});
			})
			.catch(() => {
				ElMessage({
					type: 'info',
					message: '已取消',
				})
			})
	}

  const handleDetail = (row) => {
    console.log(row.readFlag);

    sessionStorage.setItem('workflowQuery', row.businessParam)

    proxy.$router.push({
      path: row.toWebPath,
      // query: JSON.parse(row.businessParam)
    })
    getTableData()

    if(row.readFlag !== '1'){
      // 未读变已读
      var url = 'framework/Schedule/horizonUpdateReadFlag'
      var param = {
        scheduleId: row.scheduleId
      }
      proxy.$axios.post(url, param).then(response => {
        console.log(response.data);
      })
    }
  }

	/**
	 * 保存、修改、删除
	 */

	const multipleSelection = ref([])
	const handleSelectionChange = (val) => {
		multipleSelection.value = val
	}

	const handleRemoveBatch = () => {
		console.log('handleRemoveBatch')

		if (multipleSelection.value.length < 1) {
			ElMessage({
				type: 'warning',
				message: '请选择要删除的数据!'
			})
			return
		}

		ElMessageBox.confirm('此操作将删除该数据, 是否继续?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			var ids = []
			multipleSelection.value.forEach((item, index) => {
				ids.push(item.id)
			})
			var url = 'exp/Schedule/removeBatch'
			var param = {
				ids: JSON.stringify(ids)
			}
			proxy.$axios.post(url, param).then(response => {
				if (response.data.code == '0') {
					ElMessage({
						type: 'success',
						message: '操作成功!',
					});
					getTableData()
					dialogVisible.value = false
				} else {
					ElMessage({
						type: 'error',
						message: '操作失败!' + response.data.msg
					});
				}
			})
		}).catch(() => {
			ElMessage({
				type: 'info',
				message: '已取消删除'
			})
		})
	}

	const handleEditBatch = () => {
		console.log('handleEditBatch')
		if (multipleSelection.value.length != 1) {
			ElMessage({
				type: 'warning',
				message: '请选择一条数据编辑!'
			})
			return
		}
		handleEdit(multipleSelection.value[0])
	}

	const handleUpload = () => {
		console.log('handleUpload')
	}

	const handleDownload = () => {
		console.log('handleDownload')
	}

	const handleImport = () => {
		console.log('handleImport')
	}

	const handleExport = () => {
		console.log('handleExport')
	}
</script>

<style>
</style>