<template>
	<div class="hui-flex hui-content">
		<div class="hui-content-title">
			<div class="hui-title-item active">印章列表</div>
		</div>
		<div class="hui-flex-box hui-flex hui-table">
			<div class="hui-content-insert">
				<el-button v-permission="'/work/organization/seal/add'" type="primary" size="medium" @click="insertSeal">新增印章</el-button>
			</div>
			<div class="hui-flex-box">
				<el-table :data="tableData" row-key="id" border height="100%">
					<el-table-column label="序号" width="50">
						<template slot-scope="scope">
							<div style="text-align: center;">{{scope.$index + 1}}</div>
						</template>
					</el-table-column>
					<el-table-column label="印章名称" prop="name"></el-table-column>
					<el-table-column label="印章类型" prop="name">
						<template slot-scope="scope">
							<span>{{$field.findTypeName('sealType',scope.row.type)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="印章描述" prop="comment"></el-table-column>
					<el-table-column label="申请印章" width="150">
						<template slot-scope="scope">
							<div class="hui-table-operation">
								<span  v-permission="'/work/organization/seal/approve'" class="table-operation" @click="requestSeal(scope.row)">查看</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<div class="hui-table-operation">
								<span class="table-operation" v-permission="'/work/organization/seal/detail'" @click="lookSeal(scope.row)">详情</span>
								<span class="table-operation" v-permission="'/work/organization/seal/update'" @click="updateSeal(scope.row)">编辑</span>
								<span class="table-operation" v-permission="'/work/organization/seal/delete'" @click="deleteSeal(scope.row)">删除</span>
							</div>
						</template>
					</el-table-column>
					<template slot="empty">
						<empty description="暂无数据"></empty>
					</template>
				</el-table>
			</div>
		</div>
		<el-dialog :close-on-click-modal="false" :title="isUpdate?'编辑':'新增'" :visible.sync="visible" width="900px"
			:append-to-body="true">
			<edit v-if="visible" @callback="callback" :isUpdate="isUpdate" :detailId="detailId"></edit>
		</el-dialog>
		<el-dialog :close-on-click-modal="false" title="印章申请列表" :visible.sync="requestVisible" width="1000px"
			:append-to-body="true">
			<request v-if="requestVisible" :detailId="detailId"></request>
		</el-dialog>
		<el-drawer title="项目详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer" :detailId="detailId"></detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		getSealList,
		deleteSeal
	} from '@/httpApi/organization'
	import edit from '@/components/work/organization/seal/edit'
	import detail from '@/components/work/organization/seal/detail'
	import request from '@/components/work/organization/seal/request'
	export default {
		data() {
			return {
				tableData: [],
				visible: false,
				detailId: '',
				isUpdate: false,
				drawer: false,
				requestVisible: false
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				if (!this.auth('/work/organization/seal/list')) return;
				getSealList(this.$store.getters.organization.id).then(res => {
					if (res.state) {
						this.tableData = res.data;
					}
				})
			},
			insertSeal() {
				this.isUpdate = false;
				this.visible = true;
			},
			requestSeal(item) {
				this.detailId = item.id;
				this.requestVisible = true;
			},
			updateSeal(item) {
				this.detailId = item.id;
				this.isUpdate = true;
				this.visible = true;
			},
			lookSeal(item) {
				this.detailId = item.id;
				this.drawer = true;
			},
			deleteSeal(item) {
				this.$confirm('确定要删除该印章?', () => {
					deleteSeal(item.id).then(res => {
						if (res.state) {
							this.init();
							this.$message.success('操作成功');
						}
					})
				});
			},
			callback(type) {
				if (type === 'init') this.init();
				this.visible = false;
			}
		},
		components: {
			edit,
			detail,
			request
		},
	}
</script>

<style lang="scss"></style>