<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-16 20:59:06
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-07 08:53:23
 * @FilePath: /fe-manage/src/views/examine/CourseReviewed.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<!-- 已审核课程页面 -->
<template>
	<div class="coursereviewed">
		<div class="tmpl">
			<div class="tmpl_header">
				<div class="tmplh_inp">
					<div class="inpbox">
						<div class="inpbox1">
							<!--
              <a-select
                v-model:value="valueproj"
                value-key="value"
                :options="[
                  { label: '请选择内容分类', value: '' },
                  ...calssifyList,
                ]"
              />-->
							<a-tree-select 
								:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
								v-model:value="valueproj" 
								show-search 
								:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
								:fieldNames="{
									children: 'children',
									label: 'dictName',
									value: 'dictCode',
								}"
								placeholder="请选择内容分类" 
								allow-clear 
								tree-default-expand-all 
								:tree-data="sysTypeOptions">

								<!-- <template #title="{ value: val, title }">
									<b v-if="val === '11111'" style="color: #08c">sss</b>
									<template v-else>{{ title }}</template>
								</template> -->
							</a-tree-select>
						</div>
						<div class="inpbox1">
							<a-input v-model:value="valuecreater" style="
								width: 270px;
								height: 40px;
								border-radius: 8px;
								margin-right: 14px;
								" placeholder="请输入创建人" />
						</div>
						<div class="inpbox1">
							<a-input v-model:value="valuename" style="
								width: 270px;
								height: 40px;
								border-radius: 8px;
								margin-right: 14px;
								" placeholder="请输入名称" />
						</div>
						<div class="select addTimeBox">
							<div class="addTime">审核时间：</div>
							<a-range-picker
								v-model:value="searchParam"
								style="width: 420px"
								format="YYYY-MM-DD"
								separator="至"
								:placeholder="['      开始时间', '        结束时间']"
							/>
						</div>
					</div>
				</div>
				<div class="tmplh_btn">
					<div class="btn btn1" @click="getList">
						<div class="search"></div>
						<div class="btnText btnText1">搜索</div>
					</div>
					<div class="btn btn2" @click="reset">
						<div class="search"></div>
						<div class="btnText btnText2">重置</div>
					</div>
				</div>
			</div>
			<div class="tmpl_body">
				<div class="tmpl_tabbox">
					<a-table :columns="columns1" :data-source="tableData1" :loading="loading" expandRowByClick="true"
						@expand="expandTable" :scroll="{ x: 1300 }" :pagination="false" />
				</div>
				<div class="tableBox">
					<div class="pa">
						<a-pagination v-if="total > 10" :showSizeChanger="false" show-quick-jumper :pageSize="pageSize"
							v-model:current="currentPage" :total="total" class="pagination" @change="changePagination" />
					</div>
				</div>
			</div>
		</div>
		<!-- 审核日志弹窗 -->
		<a-modal v-model:visible="projAuditModal" :footer="null" :closable="closeBack" wrapClassName="projAuditModal"
			centered="true">
			<div class="delete">
				<div class="del_header"></div>
				<div class="del_main">
					<div class="header">
						<div class="icon"></div>
						<span>审核记录</span>
						<!-- <div class="close_exit" @click="closeProjAuditModal"></div> -->
					</div>
					<div class="body">
						<a-table style="width:100%" :columns="columnsAudit" :data-source="tableDataAudit"
							:loading="tableDataTotalAudit === -1 ? true : false" expandRowByClick="true" :scroll="{ y: 250 }"
							@expand="expandTable" :pagination="false" />
					</div>
					<div class="del_btnbox">
						<div class="del_btn btn1" @click="closeProjAuditModal">
							<div class="btnText">取消</div>
						</div>
						<div class="del_btn btn2" @click="closeProjAuditModal">
							<div class="btnText">确定</div>
						</div>
					</div>
				</div>
			</div>
		</a-modal>
	</div>
</template>
<script>
import {reactive, toRefs, onMounted, computed} from "vue";
import { courseListView } from "../../api/indexAudit";
import * as api1 from "@/api/index1";
import {useStore} from "vuex";
import dayjs from "dayjs";

export default {
	name: "CoursereViewed",

	setup() {
		const state = reactive({
			calssifyList: [], //分类字典
			valueproj: null,
			valuecreater: "",
			valuename: "",
			currentPage: 1,
			total: null,
			pageSize: 10,
			//审核记录的表
			columnsAudit: [
				{
					title: "审核人",
					dataIndex: "createName",
					key: "createName",
					align: "center",
					width: "20%",
					ellipsis: true,
				},

				{
					title: "审核状态",
					dataIndex: "status",
					key: "status",
					align: "center",
					width: "20%",
					customRender: ({ record: { status } }) => (
						<div>{{ 2: "审核通过", "-2": "审核拒绝" }[status + ""]}</div>
					),
				},

				{
					title: "审核时间",
					dataIndex: "createTime",
					key: "createTime",
					align: "center",
					width: "20%",
					ellipsis: true,
				},

				{
					title: "备注",
					dataIndex: "description",
					key: "description",
					align: "center",
					width: "30%",
					ellipsis: true,
				},
			],
			columns1: [
				// {
				//   title: "序号",
				//  dataIndex: "number",
				////  key: "number",
				//  align: "center",
				// },
				{
					title: "名称",
					dataIndex: "name",
					key: "name",
					align: "center",
					width: "20%",
					ellipsis: true,
				},
				{
					title: "类型",
					dataIndex: "type",
					key: "type",
					align: "center",
					width: "10%",
					ellipsis: true,
				},
				{
					title: "内容分类",
					dataIndex: "content",
					key: "content",
					align: "center",
					width: "10%",
					ellipsis: true,
				},
				{
					title: "审核状态",
					dataIndex: "status",
					key: "status",
					align: "center",
					width: "10%",
				},
				{
					title: "创建人",
					dataIndex: "creater",
					key: "creater",
					align: "center",
					width: "10%",
					ellipsis: true,
				},
				{
					title: "审核时间",
					dataIndex: "time",
					key: "time",
					align: "center",
					width: "10%",
					ellipsis: true,
					customRender: (time) => {
						return <div>{time.record.time}</div>;
					},
				},
				{
					title: "审核说明",
					dataIndex: "msg",
					key: "msg",
					align: "center",
					ellipsis: true,
					width: "20%",
				},
				{
					title: "操作",
					dataIndex: "opt",
					key: "opt",
					width: "10%",
					align: "center",
					customRender: (value) => {
						return (
							<div
								style="color:#387DF7;cursor:pointer;"
								onClick={() => {
									console.log(value);
									showProjAuditModal(value.record.auditLogDtoList.length !== 0 ? value.record.auditLogDtoList : []);
								}}
							>
								审核日志
							</div>
						);
					},
				},
			],
			tableData1: [
				// {
				//   number: "1",
				//   name: "课程1",
				//   type: "在线",
				//   content: "领导力/领导业务",
				//   status: "通过",
				//   creater: "-",
				//   time: "-",
				//   msg: "-",
				// },
			],
			//审核记录的数据
			tableDataAudit: [],
			projAuditModal: false,
			loading: false,
			// 课程三级分类
			options2222: [
				{
					title: '领导力',
					value: '100',
					children: [
						{
							title: '管理业务',
							value: '1001',
						},
						{
							title: '管理团队',
							value: '1002',
						},
						{
							title: '管理自我',
							value: '1003',
						},
					],
				},
				{
					title: '专业力',
					value: '200',
					children: [
						{
							title: '研发',
							value: '2001',
						},
						{
							title: '系统和解决方案',
							value: '2002',
						},
						{
							title: '生产技术与制造',
							value: '2003',
						},
						{
							title: '供应链',
							value: '2004',
						},
						{
							title: '营销',
							value: '2005',
						},
						{
							title: '品质',
							value: '2006',
						},
						{
							title: '专业职能',
							value: '2007',
							children: [
								{
									title: '战略与企划',
									value: '200701',
								},
								{
									title: '流程管理',
									value: '200702',
								},
								{
									title: '业绩管理',
									value: '200703',
								},
								{
									title: '项目管理',
									value: '200704',
								},
								{
									title: '信息技术',
									value: '200705',
								},
								{
									title: '环境与安全',
									value: '200706',
								},
								{
									title: '人力资源',
									value: '200707',
								},
								{
									title: '企业文化',
									value: '200708',
								},
								{
									title: '品牌',
									value: '200709',
								},
								{
									title: '财务',
									value: '200710',
								},
								{
									title: '法务',
									value: '200711',
								},
								{
									title: '风险控制',
									value: '200712',
								},
								{
									title: '行政',
									value: '200713'
								},
							]
						},
						{
							title: '医工',
							value: '2008',
						}
					],
				},
				{
					title: '通用力',
					value: '300',
					children: [
						{
							title: '职业操守与道德',
							value: '3001',
						},
						{
							title: '职业素养与技能',
							value: '3002',
						},
						{
							title: '规章制度',
							value: '3003',
						},
					],
				}
			],
			searchParam:[], // 时间搜索
		});

    const store = useStore();

    const sysTypeOptions = computed(() => store.state.sysType);

    function findClassFullName(list,classify,name=''){
      return list && list.length && list.map(e=>{
        return  classify == e.dictCode ? name?name+'-'+e.dictName:e.dictName : findClassFullName(e.children,classify,name?name+'-'+e.dictName:e.dictName)
      }).filter(name=>name).join('')
    }

		// 课程三级分类回显
		const sHX = (classify) => {
      return findClassFullName(sysTypeOptions.value,classify) || '-'
		}

		const getList = () => {
			console.log(state.searchParam[0],state.searchParam[1],new Date(state.searchParam[0]).getTime(),new Date(state.searchParam[0]))
			state.loading = true
			let objn = {
				auditStatus: 0,
				beginTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[0]).getTime()).format("YYYY-MM-DD"): "",
				endTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[1]).getTime()).format("YYYY-MM-DD"): "",
				sysTypeId: state.valueproj,
				createName: state.valuecreater,
				name: state.valuename,
				pageNo: state.currentPage,
				pageSize: 10,
			};
			console.log(objn);
			courseListView(objn)
				.then((res) => {
					console.log("获取已审核课程成功", res.data.data);
					state.total = res.data.data.total;
					setTableData(res.data.data.rows);
					state.loading = false
				})
				.catch((err) => {
					console.log("获取已审核课程失败", err);
				});
		};
		const setTableData = (table) => {
			if (!table || !table.length) {
				state.tableData1 = [];
				return;
			}
			let data = table;
			let array = [];
			data.map((item, n) => {
				let obj = {
					number: n + 1 + (state.currentPage - 1) * 10,
					name: item.name || "- ",
					type: item.type == 1 ? "线上" : "线下",
					content: sHX(item.sysTypeId),
					status:
						item.auditStatus == 0
							? "未提交"
							: item.auditStatus == 1
								? "提交待审核"
								: item.auditStatus == 2
									? "通过"
									: item.auditStatus == -1
										? "拒绝"
										: "-",
					creater: item.createName,
					time: item.createTime,
					msg: item.description || "-",
					auditLogDtoList: item.auditLogDtoList,
				};
				array.push(obj);
			});
			state.tableData1 = array;
			console.log(data);
		};
		const reset = () => {
			(state.valueproj = null),
				(state.valuecreater = null),
				(state.valuename = null),
				getList();
		};
		const changePagination = (pagina) => {
			state.currentPage = pagina;
			getList();
		};
		const getDictList = (param) =>
			api1
				.getDict({
					pageNo: 1,
					pageSize: 20,
					setCode: param,
				})
				.then((res) => res.data.data.rows);

		onMounted(async () => {
			getList();
			//获取分类列表
			state.calssifyList = (await getDictList("faceclassClass")).map((e) => ({
				label: e.dictName,
				value: e.dictCode,
			}));
		});

		// 显示审核
		const showProjAuditModal = (data) => {
			state.tableDataAudit = data;
			state.projAuditModal = true;
		};

		const closeProjAuditModal = () => {
			state.projAuditModal = false;
		};

		return {
			...toRefs(state),
			getList,
			setTableData,
			reset,
			changePagination,
			showProjAuditModal,
			closeProjAuditModal,
			sysTypeOptions
		};
	},
};
</script>
<style lang="scss">
.addTimeBox {
	top: 4px;
	position: relative;
	display: flex;
	align-items: center;

	.addTime {
		position: absolute;
		z-index: 10;
		margin-left: 10px;
		color: rgba(0, 0, 0, 0.4);
	}

	.ant-picker {
		padding-left: 85px;
	}

	.ant-picker-range .ant-picker-active-bar {
		margin-left: 85px;
	}
}

.coursereviewed {
	width: 100%;

	.tmpl {
		width: 100%;

		.tmpl_header {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 32px;

			margin-left: 32px;
			margin-right: 32px;

			.tmplh_inp {
				.inpbox {
					display: flex;
					margin-top: 32px;
					flex-wrap: wrap;

					.inpbox1 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 24px;
						margin-top: 10px;

						.ant-select-selector {
							border-radius: 8px;
							width: 270px;
							height: 40px;
							padding-top: 5px;
						}

						span {
							white-space: nowrap;
						}
					}
				}
			}

			.tmplh_btn {
				display: flex;
				// margin-left: 38px;
				margin-top: 42px;

				.btn {
					padding: 0px 26px 0px 26px;
					height: 38px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 14px;
					cursor: pointer;
					flex-shrink: 0;

					.search {
						background-size: 100%;
					}

					.btnText {
						font-size: 14px;
						font-weight: 400;
						line-height: 36px;
						margin-left: 5px;
					}

					.btnText1 {
						color: rgb(255, 255, 255);
					}

					.btnText2 {
						color: rgba(64, 158, 255, 1);
					}
				}

				.btn1 {
					background: #4ea6ff;

					.search {
						width: 15px;
						height: 17px;
						background-image: url("../../assets/images/courseManage/search0.png");
					}
				}

				.btn2 {
					background: #ffffff;
					border: 1px solid #4ea6ff;

					.search {
						width: 16px;
						height: 18px;
						background-image: url("../../assets/images/courseManage/reset1.png");
					}
				}

				.btn1:hover {
					background: rgb(255, 255, 255);
					border: 1px solid #4ea6ff;

					.search {
						background-image: url("../../assets/images/courseManage/search1.png");
					}

					.btnText {
						color: rgba(64, 158, 255, 1);
					}
				}

				.btn2:hover {
					background: rgba(64, 158, 255, 1);

					.search {
						background-image: url("../../assets/images/courseManage/reset0.png");
					}

					.btnText {
						color: #ffffff;
					}
				}
			}
		}

		.tmpl_body {
			padding: 0px 30px;

			.tmpl_tabbox {
				.operation {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #4ea6ff;

					.nselect {
						justify-content: center;
						align-items: center;
						display: flex;

						.jc {
							margin-left: 20px;
							white-space: nowrap;
							cursor: pointer;
						}
					}
				}
			}

			.pa {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;
			}
		}
	}
}

.projAuditModal {
	.ant-modal {
		width: 816px !important;
		min-height: 420px !important;

		.ant-modal-content {
			width: 816px !important;
			min-height: 420px !important;

			.ant-modal-body {
				width: 816px !important;
				min-height: 420px !important;
				padding: 0 !important;

				.delete {
					z-index: 999;
					width: 816px;
					min-height: 485px;
					background: #ffffff;
					box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
					border-radius: 4px;

					// position: absolute;
					// left: 50%;
					// top: 10%;
					// transform: translate(-50%, -50%);
					.del_header {
						position: absolute;
						width: calc(100%);
						height: 68px;
						background: linear-gradient(rgba(78, 166, 255, 0.2) 0%,
								rgba(78, 166, 255, 0) 100%);
					}

					.del_main {
						width: 100%;
						position: relative;

						.header {
							display: flex;
							align-items: center;
							padding-top: 20px;
							padding-left: 26px;
							font-size: 16px;

							.icon {
								width: 16px;
								height: 16px;
								margin-right: 10px;
								background-image: url(@/assets/images/taskpage/gan.png);
								background-size: 100% 100%;
							}

							.close_exit {
								position: absolute;
								right: 42px;
								cursor: pointer;
								width: 20px;
								height: 20px;
								background-image: url(@/assets/images/coursewareManage/close.png);
								background-size: 100% 100%;
							}
						}

						.body {
							width: 100%;
							margin: 34px auto 56px auto;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							// background-color: red;
							position: relative;

							.ant-table-empty {
								width: 100% !important;
							}

							.back {
								position: absolute;
								top: 30px;
								font-size: 12px;
								font-weight: 400;
								color: #666666;
							}
						}

						.del_btnbox {
							display: flex;
							margin: 30px auto;
							justify-content: center;

							.del_btn {
								width: 100px;
								height: 40px;
								background: rgba(64, 158, 255, 0);
								border-radius: 8px;
								display: flex;
								align-items: center;
								justify-content: center;

								flex-shrink: 0;
								cursor: pointer;

								.btnText {
									font-size: 14px;
									font-weight: 400;
									line-height: 40px;
								}
							}

							.btn1 {
								border: 1px solid rgba(64, 158, 255, 1);
								color: #4ea6ff;
								margin-right: 14px;
							}

							.btn2 {
								background-color: #4ea6ff;
								color: #ffffff;
							}
						}
					}
				}
			}
		}
	}
}

.projectviewed {
	width: 100%;

	.tmpl {
		width: 100%;

		.tmpl_header {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 32px;

			margin-left: 32px;
			margin-right: 32px;

			.tmplh_inp {
				.inpbox {
					display: flex;
					flex-wrap: wrap;
					margin-top: 42px;

					.inpbox1 {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 24px;
						margin-top: 10px;

						.ant-select-selector {
							border-radius: 8px;
							width: 270px;
							height: 40px;
							padding-top: 5px;
						}

						span {
							white-space: nowrap;
						}
					}
				}
			}

			.tmplh_btn {
				display: flex;
				// margin-left: 38px;
				margin-top: 52px;

				.btn {
					padding: 0px 26px 0px 26px;
					height: 38px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 14px;
					cursor: pointer;
					flex-shrink: 0;

					.search {
						background-size: 100%;
					}

					.btnText {
						font-size: 14px;
						font-weight: 400;
						line-height: 36px;
						margin-left: 5px;
					}

					.btnText1 {
						color: rgb(255, 255, 255);
					}

					.btnText2 {
						color: rgba(64, 158, 255, 1);
					}
				}

				.btn1 {
					background: #4ea6ff;

					.search {
						width: 15px;
						height: 17px;
						background-image: url("../../assets/images/courseManage/search0.png");
					}
				}

				.btn2 {
					background: #ffffff;
					border: 1px solid #4ea6ff;

					.search {
						width: 16px;
						height: 18px;
						background-image: url("../../assets/images/courseManage/reset1.png");
					}
				}

				.btn1:hover {
					background: rgb(255, 255, 255);
					border: 1px solid #4ea6ff;

					.search {
						background-image: url("../../assets/images/courseManage/search1.png");
					}

					.btnText {
						color: rgba(64, 158, 255, 1);
					}
				}

				.btn2:hover {
					background: rgba(64, 158, 255, 1);

					.search {
						background-image: url("../../assets/images/courseManage/reset0.png");
					}

					.btnText {
						color: #ffffff;
					}
				}
			}
		}

		.tmpl_body {
			padding: 0px 30px;

			.tmpl_tabbox {
				.operation {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #4ea6ff;

					.nselect {
						justify-content: center;
						align-items: center;
						display: flex;

						.jc {
							margin-left: 20px;
							white-space: nowrap;
							cursor: pointer;
						}
					}
				}
			}

			.pa {
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: center;
			}
		}
	}
}
</style>
