<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="tableAdd" v-auth="'qct.create'"></el-button>
			</div>
			<div class="right-panel">
				<el-input v-model="query.search" placeholder="检验表名称" clearable @keyup.enter="handleQuery"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="handleQuery"></el-button>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column label="#" type="index" width="50"></el-table-column>
				<el-table-column label="名称" prop="name"></el-table-column>
				<el-table-column label="编号" prop="number"></el-table-column>
				<el-table-column label="检测类型" prop="description" min-width="150">
					<template #default="scope">
						<span v-for="(item,index) in scope.row.tags" :key="item">{{ tags_[item] }} <span v-if="index < scope.row.tags.length - 1">、</span></span>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-button link size="small" @click="tableDetail(scope.row)" v-auth="'qct.update'" type="primary">详情</el-button>
						<el-divider direction="vertical"></el-divider>
						<el-button link size="small" @click="tableEdit(scope.row)" v-auth="'qct.update'" type="primary">编辑</el-button>
						<el-divider direction="vertical"></el-divider>
						<el-popconfirm title="确定删除吗？" @confirm="tableDel(scope.row, scope.$index)">
							<template #reference>
								<el-button link size="small" v-auth="'role.delete'" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
		<el-dialog :title="titleMap[type]" v-model="limitedVisible" @close="dialogClose" :width="600">
			<el-form :model="form" :rules="rules" ref="form" autocomplete ="off" label-width="120px" label-position="right">
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name" clearable></el-input>
				</el-form-item>
				<el-form-item label="编号 " prop="number">
					<el-input v-model="form.number" clearable></el-input>
				</el-form-item>
				<el-form-item label="最大不合格率">
					<el-input-number 
					v-model="form.max_defect_rate" 
					class="width-100" 
					:max="1"
					placeholder="大于这个值时，整个抽检层不合格"
					step="0.1"/>
				</el-form-item>
				<el-form-item label="检验类型">
					<el-checkbox-group v-model="form.tags">
						<el-checkbox 
							v-for="item in  tagsOptions"
							:key="item.value"
							:label="item.name"
							:value="item.value"/>
					</el-checkbox-group>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="limitedVisible=false" >取 消</el-button>
				<el-button v-if="type!=='show'" type="primary" :loading="isSaving" @click="submitHandle()">保 存</el-button>
			</template>
		</el-dialog>
		<record-dialog
			ref="showDrawer"
			v-if="visibleDrawer"
			:qctId="qctId"
			@closed="visibleDrawer = false"
		>
		</record-dialog>
	</el-container>
</template>
<script>
import recordDialog from "./qctDetail.vue";
	const defaultForm = {
		id:"",
		name: "",
		number: "",
		tags:[],
	};
	export default {
		name: 'qct',
		components: {
			recordDialog,
		},
		data() {
			return {
				apiObj:this.$API.qm.qct.list,
				query: {search:''},
				isSaving: false,
				showDrawer: false,
				limitedVisible: false,
				visibleDrawer: false,
				type: "add",
				titleMap: {
					add: '新增',
					edit: '编辑',
					show: '查看'
				},
				qctId:'',
				//表单数据
				form: defaultForm,
				//验证规则
				rules: {
					name: [
						{required: true, message: '请输入名称'}
					],
					number: [
						{required: true, message: '请输入编号'}
					],
				},
				tagsOptions: [
					{value:"process",name:"过程检验"},
					{value:"inm",name:"库存检验"},
					{value:"fix",name:"返修检验"},
				],
				tags_:{
					"process":"过程检验",
					"inm":"库存检验",
					"fix":"返修检验",
				},
			}
		},
		mounted() {},
		methods: {
			//添加检验表
			tableAdd(){
				this.limitedVisible = true;
				this.type = "add";
				this.form.id="";
				this.form.name="";
				this.form.number="";
				this.form.max_defect_rate=0;
				this.form.tags=[];
			},
			//编辑
			tableEdit(row){
				this.type='edit';
				this.form.id=row.id;
				this.form.name=row.name;
				this.form.number=row.number;
				this.form.tags=row.tags;
				this.form.max_defect_rate=row.max_defect_rate;
				this.limitedVisible = true;
			},
			//查看
			tableDetail(row) {
				this.$TOOL.data.set('qctCurrent',row);
				this.type = row.type;
				this.qctId = row.id;
				this.visibleDrawer = true;
				this.$nextTick(() => {
					this.$refs.showDrawer.open();
				});
			},
			//提交
			submitHandle(){
				let that = this;
				that.$refs.form.validate( (valid) => {
					if (valid) {
						that.isSaving = true;
						if(that.type==='add'){
							that.$API.qm.qct.create.req(that.form).then(res=>{
								that.isSaving = false;
								that.limitedVisible = false;
								that.$refs.table.refresh();
							}).catch(e=>{that.isSaving = false;})
						}else{
							that.$API.qm.qct.update.req(that.form.id,that.form).then(res=>{
								that.isSaving = false;
								that.limitedVisible = false;
								that.$refs.table.refresh();
							}).catch(e=>{that.isSaving = false;})
						}
					}
				})
			},

			//删除检验表
			async tableDel(row){
				var id = row.id;
				var res = await this.$API.qm.qct.delete.req(id);
				if(res.err_msg){
					this.$message.error(res.err_msg)
				}else{
					this.$refs.table.refresh();
					this.$message.success("删除成功")
				}
			},
			//搜索
			handleQuery(){
				this.$refs.table.queryData(this.query)
			},
			dialogClose(){
				this.isSaving = false;
				this.limitedVisible = false;
			},
		}
	}
</script>
<style scoped>
	.treeMain {width: 100%;height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>
