<template>
	<lay-container fluid="true" style="padding: 10px">
		<lay-row space="10">
			<lay-col span="24">
				<lay-card>
					<lay-form :model="searchObj" class="search-box">
						<lay-row class="search-items">
							<lay-form-item label="销售号" prop="FSaleCode">
								<lay-input v-model="searchObj.FSaleCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="试验号" prop="FFormulaTestCode">
								<lay-input v-model="searchObj.FTestCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="MDM编码" prop="FMdmCode">
								<lay-input v-model="searchObj.FMdmCode"></lay-input>
							</lay-form-item>
							<lay-form-item label="发起人" prop="FAddUserName">
								<lay-input v-model="searchObj.FAddUserName"></lay-input>
							</lay-form-item>
							<lay-form-item label="当前状态" prop="FProgress">
								<lay-select v-model="searchObj.FProgress">
									<lay-select-option v-for="(tv,tx) in stateList" :key="tx" :value="tv.id"
										:label="tv.name"></lay-select-option>
								</lay-select>
							</lay-form-item>
							<lay-form-item label="发起日期" prop="FAddDate">
								<lay-date-picker v-model="searchObj.FAddDate" placeholder="请选择"></lay-date-picker>
							</lay-form-item>
						</lay-row>
						<lay-form-item class="search-btn">
							<lay-button size="sm" type="primary" @click="_clickSearch">搜索</lay-button>
							<lay-button size="sm" @click="_clickReset">重置</lay-button>
						</lay-form-item>
					</lay-form>
					<lay-table :columns="dataColumn" id="id" :dataSource="dataList" v-model:selectedKeys="selectedKeys"
						:checkbox="checkbox" :default-toolbar="defaultToolbar" :page="dataList.length>0?pageInfo:null"
						@change="changePage" :cell-style="cellStyle">
						<template v-slot:toolbar>
							<lay-button size="sm" @click="_getPageList(false,true)">刷新</lay-button>
							<lay-button size="sm" type="normal"
								@click="_showData(null,0)">新增</lay-button>
						</template>
						<template v-slot:FProgress="{ data }">
							<lay-progress size="big" :percent="data.FProgress" :show-text="true"></lay-progress>
						</template>
						<template v-slot:FTaskList="{ data }">
							<p v-for="(item,index) in data.FTaskList" :key="index" class="task-item">
								{{item.FName + (index+1==data.FTaskList.length?"":"、")}}
							</p>
						</template>
						<template v-slot:operator="{ data }">
							<lay-button size="xs" type="primary" @click="_showData(data,1)">详情</lay-button>
							<lay-button size="xs" type="primary" @click="_showData(data,2)">事项</lay-button>
						</template>
					</lay-table>
				</lay-card>
			</lay-col>
		</lay-row>
		<lay-layer area="1100px" v-model="showEditBox[0]" title="新增协同">
			<AddTerm :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></AddTerm>
		</lay-layer>
		<lay-layer area="80%" v-model="showEditBox[1]" title="协同详情">
			<ShowData1 :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></ShowData1>
		</lay-layer>
		<lay-layer area="80%" v-model="showEditBox[2]" title="协同事项">
			<ShowData2 :dataInfoObj="objInfoObj" @cancelClick="cancelClick"></ShowData2>
		</lay-layer>
	</lay-container>
</template>

<style scoped>
	.task-item {
		/* 		color: var(--global-primary-color); */
		margin: 2px 0;
		display: inline-block;
	}
</style>
<script>
	import {
		ref
	} from "vue";
	import {
		getTeamworkPageList
	} from "/src/api/api/teamwork";
	import {
		checkIsHasPower
	} from "/src/api/api/common";

	import AddTerm from './components/AddTerm.vue';
	import ShowData1 from './components/ShowData1.vue';
	import ShowData2 from '../Need/all.vue';

	import '@layui/layui-vue/es/checkbox/index.css';
	import '@layui/layui-vue/es/radio/index.css';

	export default {
		components: {
			AddTerm,
			ShowData1,
			ShowData2
		},
		props: {
			dataInfoObj: {
				type: Number,
				default: () => 0,
			}
		},
		setup() {
			let dataColumn = [{
					title: "销售号",
					key: "FSaleCode",
					minWidth: "190px"
				},
				{
					title: "MDM编码",
					key: "FMdmCode",
					width: "190px"
				},
				{
					title: "试验号",
					key: "FFormulaTestCode",
					width: "190px"
				},
				{
					title: "发起时间",
					key: "FAddDate",
					width: "182px"
				},
				{
					title: "发起人",
					key: "FAddUserName",
					width: "126px"
				},
				{
					title: "完成度",
					key: "FProgress",
					customSlot: "FProgress",
					width: "100px"
				},
				{
					title: "当前待办事项",
					key: "FTaskList",
					customSlot: "FTaskList"
				},
				{
					title: "最后登录时间",
					key: "FLoginDate",
					width: "182px",
					hide: true
				},
				{
					title: "操作",
					key: "operator",
					width: "148px",
					customSlot: "operator"
				}
			];
			dataColumn.forEach((item) => {
				item.align = "center";
			});
			const cellStyle = function(row, column, rowIndex, columnIndex) {
				//if (columnIndex == 0) return 'color:var(--global-primary-color)';
			}
			const selectedKeys = ref(["1"]);
			const checkbox = ref(false);
			const userRolePower = ref({});
			const defaultToolbar = ref(true);
			//新增、详情、事项
			const showEditBox = ref([false, false, false]);
			const objInfoObj = ref({});
			const searchObj = ref({});
			const postData = ref({});
			const pageInfo = ref({
				total: 0,
				limit: 10,
				current: 1
			});
			const dataList = ref([]);
			const editBoxTitle = ref("");
			const stateList = ref([{
				id: "0",
				name: "未完成"
			}, {
				id: "100",
				name: "已完成"
			}]);
			return {
				objInfoObj,
				editBoxTitle,
				showEditBox,
				selectedKeys,
				checkbox,
				defaultToolbar,
				dataColumn,
				cellStyle,
				dataList,
				pageInfo,
				searchObj,
				postData,
				stateList,
				userRolePower
			};
		},
		mounted() {
			this._checkIsHasPower()
			this._getPageList(true);
		},
		methods: {
			//判断权限
			async _checkIsHasPower() {
				let result = await checkIsHasPower({
					FType: 2,
					P1: false
				});
				let t2 = this.userRolePower.T2 || {}
				for (let key in result) {
					t2[key] = result[key];
				}
				this.userRolePower.T2 = t2;
			},
			changePage(obj) {
				this.pageInfo.current = obj.current;
				this.pageInfo.limit = obj.limit;
				this._getPageList();
			},
			//获取数据集合
			async _getPageList(isFirst, showOk) {
				this.pageInfo.total = 0;
				if (isFirst) {
					this.pageInfo.current = 1;
					this.pageInfo.total = 0;
				}
				this.postData.FPageIndex = this.pageInfo.current;
				this.postData.FPageSize = this.pageInfo.limit;
				if (this.dataInfoObj != undefined) {
					this.postData.FDataType = this.dataInfoObj;
				}
				let result = await getTeamworkPageList(this.postData);
				result.Data.List = result.Data.List || [];
				result.Data.List.forEach((item) => {
					item.FEditDate = item.FEditDate == null ? "" : this.dateFormat(item.FEditDate);
					item.FAddDate = item.FAddDate == null ? "" : this.dateFormat(item.FAddDate);
				});
				this.pageInfo.total = result.Data.Total || 0;
				this.dataList = result.Data.List;
			},
			//日期处理
			dateFormat(dataStr) {
				return dataStr.replace('T', ' ').split('.')[0];
			},
			//窗体-关闭
			cancelClick(isRefresh) {
				let temps = this.showEditBox;
				for (var i = 0; i < temps.length; i++) {
					temps[i] = false;
				}
				this.showEditBox = temps;
				if (isRefresh) {
					this._getPageList(true);
				}
			},
			//检索-检索
			_clickSearch() {
				this.postData = {};
				for (let key in this.searchObj) {
					let val = this.searchObj[key];
					if (val != null && val != "") this.postData[key] = val;
				}
				this._getPageList(true);
			},
			//检索-重置
			_clickReset() {
				this.searchObj = {};
				this._clickSearch();
			},
			//数据-按钮
			_showData(data, type) {
				let height = document.documentElement.clientHeight || document.body.clientHeight || 1000;
				this.objInfoObj = data || {};
				this.objInfoObj.FHeight = Math.ceil(height * 0.8);
				this.showEditBox[type] = true;
			}
		}
	}
</script>
