<!-- 工作组 -->
<template>
	<div class="workingGroup">
		<!-- 新增弹出 -->
		<add-c :visible.sync="visible"  
		 :rows.sync="rows"
		 :warehouse_page="warehouse_page"
		@handleAdd="handleAdd"  />
		
		<p-card title="特殊人员安排表">
			<span slot="extra">
				<!-- 新增弹出 -->
				  <p-button type="primary" icon="plus" style="margin-right: 1rem;" @click="showModal({})">新增</p-button>
				  <p-button type="primary" icon="delete" @click="del(ids)">批量删除</p-button>
			</span>
			<p-form layout="inline" ref="search" :form="form" @submit="handleSubmit" >
				<!--查询 隐藏的仓库ID -->
				<p-form-item style="margin-right: 0;display: none;">
				  <p-input
				    type="hidden"
				    v-decorator="['warehouseId', 
					{ initialValue: warehouseId },
					{ rules: [{ required: false, message: '请输入！' }] }]"
				  />
				</p-form-item>
				<a-row>
					 <a-col :span="6">
						<p-form-item label="仓库名称">
						<p-search-modal
							title="仓库名称"
							v-decorator="[
							'warehouseName',
							{ initialValue: warehouse.warehouseName },
							{ rules: [{ required: false, message: '请输入！' }] }
							]"
							:target-click="true"
							:remoteUrl="{
							url: SERVICE_CTRL_TOWER+'/userDataAuth/allDataAuthByUser/?companyType=S',
							method: 'get'
							}"
							rowSelectType="radio"
							targetValueKey="companyName"
							rowKey="companyId"
							:tableConfig="{
							columns: [
								{ dataIndex: 'companyCode', title: '仓库编号' },
								{ dataIndex: 'companyName', title: '仓库名称' },
							]
							}"
							:toolBar="{
							items: [
								{
								type: 'input',
								name: 'companyName',
								label: '仓库名称',
								value: ''
								},
								{
								type: 'input',
								name: 'companyCode',
								label: '仓库编号',
								value: ''
								}
							]
							}"
							@ok="setWarehouseCode"
							@change="clearWarehouseCode"
						/>
						</p-form-item>
					</a-col>
					<!--查询 隐藏的库区ID -->
					<p-form-item style="margin-right: 0;">
						<p-input type="hidden" v-decorator="['workarea', { rules: [{ required: false, message: '请输入！' }] }]" />
					</p-form-item>
					<a-col :span="6" style="text-align: center;">
						<p-form-item label="作业区域">
						<p-search-modal
							title="作业区域"
							v-decorator="['warehouseAreaId']"
							:disabled="!warehouseId"
							:target-click="true"
							:remoteUrl="{
							url: upcloud_base_wh+'/baseWmsWarehouseArea/page2?warehouseId=' + warehouseId,
							method: 'get'
							}"
							rowSelectType="radio"
							targetValueKey="warehouseAreaId"
							rowKey="warehouseAreaId"
							:tableConfig="{
							columns: [
								{ dataIndex: 'warehouseAreaName', title: '库区名称' },
								{ dataIndex: 'warehouseAreaCode', title: '库区编号' },
								{ dataIndex: 'warehouseAreaType', title: '库区类型' },
								{ dataIndex: 'warehouseAreaId', title: '库区ID' },
								{ dataIndex: 'warehouseName', title: '仓库名称' }
							]
							}"
							:toolBar="{
							items: [
								{
								type: 'input',
								name: 'warehouseAreaName',
								label: '库区名称',
								value: ''
								},
								{
								type: 'input',
								name: 'warehouseAreaCode',
								label: '库区编号',
								value: ''
								}
							]
							}"
							@ok="onOkarehWouseArea"
							@change="onChangearehWouseArea"
						/>
						</p-form-item>
					</a-col>
					<a-col :span="6">
						<p-form-item label="名称/工号">
						      <p-input allow-clear placeholder="人员名称 / 工号"
							  v-decorator="['params', { rules: [{ required: false, message: '请输入！' }] }]"
						      />
						</p-form-item>
					</a-col>
					<a-col :span="6">
						<p-form-item>
							<p-button type="primary" icon="search" html-type="submit">查询</p-button>
							<p-button type="" icon="undo" @click="handleReset" style="margin-left: 1rem;">重置</p-button>
						</p-form-item>
					</a-col>
				</a-row>
				
			</p-form>
			<p-spin :spinning="spinning" style="margin-top: 16px;">
			<p-table :columns="columns" 
					 :data-source="data" 
					 rowKey="workId"
					 dragle
					 @checkRow="checkRow"
					 @change='changePagination'
					 :pagination="pagination"
					 bordered>
				
				<span slot="action" slot-scope="text, record,index">
					
				      <a @click="showModal(record)">编辑</a>
				      <a-divider type="vertical" style="" />
				      <a @click="del(record.workId)">删除</a>
				</span>
			</p-table>
			</p-spin>
		</p-card>
	</div>
</template>

<script>
	import addC  from "./components/add.vue";
	import {
				workgroup_page,
				workgroup_update,
				workgroup_delete,
				workgroup_add,
				
				warehouse_page,
			} from	'./api/api.js';
	
	const columns = [
	  {dataIndex: 'personName', title: '职员名称',width:150,},
	  {dataIndex: 'workercode', title: '职员编号',width:150,},
	//   {dataIndex: 'workercode', title: '工号',width:150,},
	  // {dataIndex: 'worktype', title: '作业类型',width:150,},
	  {dataIndex: 'specialWorkType', title: '业务类型'},
	  {dataIndex: 'assistantCode', title: '助记码',width:150,},
	  // {dataIndex: 'packcode', title: '包装方式',width:150,
	  //  customRender:(text, record) => {
    //         let title = ''
    //         if (text == '01') {
		// 		title = '固定'
		// 	} else if(text == '02') {
		// 		title = '灵活'
		// 	} else {
		// 		title = text
		// 	}
    //         return title
    //       }
	  //   },
	  {dataIndex: 'action', title: '操作',scopedSlots: { customRender: 'action' },width:100,fixed:'right', align:'center',},
	  ]
import { SERVICE_CTRL_TOWER,upcloud_base_wh  } from "@/config/serviceSettings";
export default {
	components:{ addC:addC },
	data(){
		return {
			SERVICE_CTRL_TOWER,upcloud_base_wh,
			form: this.$form.createForm(this, { name: 'horizontal_login' }),
			columns,
			warehouse: this.$store.state.user.warehouse, //vuex库房共享资料
			warehouseId: this.$store.state.user.warehouse.warehouseId, //仓库id
			rows:{},
			data:[],
			visible:false,
			spinning:false,
			ids:'',
			warehouse_page:[],	//仓库
			pagination: {
			  total: 0,
			  pageSize: 10, //每页中显示10条数据
			  current: 1,
			  showSizeChanger: true,
			  pageSizeOptions: ['10', '15', '20'], //每页中显示的数据
			  showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
			}
		}
	},	//data
	methods:{
	getData(params) {
	  // 查询
		params = {
			pageNum: this.pagination.current, // 当前页码
			pageSize: this.pagination.pageSize ,// 每页数量
      businesstype: '3011', //页面类型:上架
			...params
		}
		this.spinning = true
	  // 工作组 分页查询
	  	workgroup_page(params).then(res=>{
	  		if(res.success){
	  			this.data = res.data.list;
				this.pagination.total = Number(res.data.totalCount);
	  			this.spinning = false;
	  		} else {
	  			this.spinning =false;
				this.$exception(res);
	  		}
	  	})
	},
	// 作业区域（库区）
	onOkarehWouseArea(event, selectId, selectData) {
			this.$refs.search.form.setFieldsValue({
			  workarea: selectData[0].warehouseAreaId ,//库区id
			})
		},
	// 作业区域（库区）
	onChangearehWouseArea(event, selectId, selectData) {
		if(!selectId){
			this.$refs.search.form.setFieldsValue({
			  workarea: '' ,//库区id
			})
		}
	// this.$set(this.rows,"dcName",selectData[0].dcName); //所属仓配中心名称
	},
	// 查询仓库时设置仓库代码
	setWarehouseCode(event, selectId, selectData) {
      ;(this.warehouseId = selectData[0].companyId), //仓库ID
        this.$refs.search.form.setFieldsValue({
          warehouseId: selectData[0].companyId //仓库ID
        })
    },
	// 清除查询仓库时设置仓库代码
	clearWarehouseCode(event, selectId, selectData) {
	  if (!selectId) {
		this.warehouseId = '';
	    this.$refs.search.form.setFieldsValue({
	      warehouseId: '' //仓库ID
	    })
	  }
	},
	showModal(rows){
		this.visible =true;
		this.$nextTick(()=>{
			if(rows.workId){
				this.rows = Object.assign(rows,{isEnable:rows.isEnable==1?true:false})  ;
				console.log("修改参数：",this.rows);
			} else{
				this.rows = {};
				this.rows = {isEnable:true};
				console.log("新增参数：",rows);
			}
		})
	},
	
	
		changePagination (pagination, filters, sorter) { // 分页变化
			  console.log(pagination, filters, sorter, '分页变化分页变化');
			  this.pagination = pagination;
			  this.getData();  //分页查询所有列表
		},
		// 查询
   handleSubmit(e) {
	  e.preventDefault();
	  this.form.validateFields((err, values) => {
		if (!err) {
		  console.log('接收的values值：', values);
		  // let params = {personName:values.personName,workercode:values.personName };
		  this.getData(values);  //分页查询所有列表
		}
	  });
	},
	 handleReset() {
		 this.warehouse='';
		 this.workarea='';
		 this.warehouseId = '';
		 this.form.resetFields();
			 this.$refs.search.form.setFieldsValue({
			   warehouseName:'',
			   warehouseId: '' ,//仓库ID
			   warehouseAreaName:'',
			   warehouseAreaId:'',
			   warehouseAreaCode:'',
			   workarea:'',
			 })
	    },
	// 选择时的变化, 必须点到 checkbox 上或者'hasRowSelectCheck=true'点击行
	  checkRow(selectedRowKeys, selectedRows){
	  	console.log("当前点击选择行：",selectedRowKeys, selectedRows);
		this.ids = selectedRowKeys.toString();
		console.log("ids:",this.ids);
	  },
	// 根据库存id删除一条或批量删除
	del(ids){
		console.log("删除ids:",ids);
		let _this = this;
		if (!ids) return this.$message.warn('请选择要删除的数据！')
		this.$confirm({
		  title: '是否删除?',
		  okText: '确认',
		  cancelText: '取消',
		  onOk() {
			  workgroup_delete({ids:ids}).then(res=>{
			  	if(res.success){
			  			_this.$message.success(`删除成功！${res.message}`);
			  			_this.getData({});  //分页查询所有列表
			  		}else {
			  			_this.$exception(res);
			  		}
			  })
		  }
		})
		
	},

	// 新增 / 修改
	handleAdd(rows) {
		this.spinning = true;
		this.$nextTick(()=>{
			console.log("合并前：",rows);
		 	rows = Object.assign(rows,{isEnable:rows.isEnable?1:0 });
			console.log("接收到的rows",rows);
			
			if(rows.workId){
				// id存在,则进入编辑状态。
					workgroup_update(rows).then( res=>{
						if(res.success){
								this.visible = false;
								this.$message.success(`编辑成功！${res.message}`);
								this.getData({});  //分页查询所有列表
							}else {
								this.$exception(res);
								this.spinning =false;
							}
						})
					
			} else {
				workgroup_add( rows ).then( res=>{
					if(res.success){
							this.visible = false;
							this.$message.success(`新增成功！${res.message}`);
							this.getData({});  //分页查询所有列表
						}else {
							this.$exception(res);
							this.spinning =false;
						}
					})
			} 
			
		})
		             
	   },
	

	},	//methods
	created() {
		this.getData();
		
		// 所属仓库
		warehouse_page({pageNum:1,pageSize:100}).then(res=>{
			if(res.success){
				this.warehouse_page = res.data.list.map(item=>{
					return {
						title:item.warehouseName,
						value:item.warehouseId,
					}
				})
			}
		});
		
	}
}
</script>

<style scoped lang="less">
.workingGroup{
	::v-deep {
		.ant-card-body { text-align: left; }
		.ant-card-head-title { text-align: left;}
		.ant-form-inline .ant-form-item { /* margin-right:2rem; */}
		.ant-form {
			.ant-row { 
				.ant-col {
					.ant-form-item { margin-right: 0; width: 100%;
						.ant-form-item-label { width: 29%;}
						.ant-form-item-control-wrapper { width: 70%;}
					 }
					&:last-child  .ant-form-item-control-wrapper { width: 100%; padding-left: 10%; box-sizing: border-box; }
				}
				}
		}
	}
}
</style>
