<style>
button {
	color: blue;
}
</style>
<div d7layout="layoutCompany?id={% _m.companyId %}"></div>
<div style="display:flex;">
	<div d7comp="company?companyId={% _m.companyId %}" style="width: 890px;"></div>
	<div style="margin-top: 48px;">
		<button onclick="clickReturn()">戻る</button>
	</div>
</div>
<div>
    <div style="margin-top: 40px; font-size:16px; font-weight: bold;">部署一覧</div>
	<table border="2" style="border-collapse: collapse; border-color: blue">
		<tr>
			<th width="100px;">部署id</th>
			<th width="300px;">部署名</th>
			<th width="300px;">責任者</th>
			<th width="100px;">メンバー</th>
			<th>操作</th>
		</tr>
		<tr d7="for(let idx in _m.groupList) let row = _m.groupList[idx];">
			<td style="text-align:center;">{% row.id %}</td>
			<td>{% row.name %}</td>
			<td>{% row.officer %}</td>
			<td style="text-align: center;">{% row.numOfMemeber %}</td>
			<td>
				<button style="margin: 2px 10px;" onclick="clickDelete(idx)">削除</button>
				<button style="margin: 2px 10px 2px 0px;" onclick="clickEdit(idx)">編集</button>
			</td>
		</tr>
	</table>
</div>
<div>
    <div style="margin-top: 40px; font-size:16px; font-weight: bold;">部署{% _m.edit.id ? '編集':'追加' %}　</div>
	<table border="2" style="border-collapse: collapse; border-color: blue">
		<tr>
			<th width="100px;">{% _m.edit.id %}</th>
			<th width="300px;"><input type="text" onchange="changeName(this)" style="width:292px; padding:6px 0px;" value="{% _m.edit.name %}" /></th>
			<th width="300px;"><input type="text" onchange="changeOfficer(this)" style="width:292px; padding:6px 0px;" value="{% _m.edit.officer %}" /></th>
			<th width="100px;">{% _m.edit.numOfMemeber %}</th>
			<th d7="if(_m.edit.id)">
				<button style="margin: 2px 10px;" onclick="clickEditCancel()">取消</button>
				<button style="margin: 2px 10px 2px 0px;" onclick="clickAlter()">更新</button>
			</th>
			<th d7="if(!_m.edit.id)">
				<button style="margin: 2px 10px; width: 96px;" onclick="clickAdd()">追加</button>
			</th>
		</tr>
	</table>
</div>

<script>
_m.companyId = query.companyId;
_m.edit = {};

const init = async () => {
	let response = await app.api.get(`/company/${_m.companyId}/group`);
	_m.groupList = response.groupList;
}
const clickReturn = () => {
	app.route('companyList');
	return false;
}
const clickDelete = async (idx) => {
	let del = _m.groupList[idx];
	let confirm = await me.modal('confirmBox', true);
	confirm.open({title:'データ削除', message:'削除を行ってもよろしいですか？'}, async (answer)=>{
		if (!answer) return false;
		
		let response = await app.api.delete(`/company/${_m.companyId}/group/${del.id}`);
		_m.groupList = response.groupList;
	});
	return false;
}
const changeName = (target) => {
	_m.edit.name = target.value;
}
const changeOfficer = (target) => {
	_m.edit.officer = target.value;
}
const clickEdit = (idx) => {
	_m.edit = d7util.cloneVal(_m.groupList[idx]);
}
const clickEditCancel = () => {
	_m.edit = {};
}
const clickAlter = async () => {
	let confirm = await me.modal('confirmBox', true);
	confirm.open({title:'データ更新', message:'更新を行ってもよろしいですか？'}, async (answer)=>{
		if (!answer) return false;
		
		let response = await app.api.put(`/company/${_m.companyId}/group/${_m.edit.id}`, _m.edit);
		_m.groupList = response.groupList;
		_m.edit = {};
	});
	return false;
}
const clickAdd = async () => {
	let confirm = await me.modal('confirmBox', true);
	confirm.open({title:'新規追加', message:'新規登録を行ってもよろしいですか？'}, async (answer)=>{
		if (!answer) return false;
		
		let response = await app.api.post(`/company/${_m.companyId}/group`, _m.edit);
		_m.groupList = response.groupList;
		_m.edit = {};
	});
	return false;
}
</script>
