<template>
	<div>
		<a-modal title="确认清运" :footer="null" v-model="isShow" @cancel="isShow=false" centered>
			<a-form-model ref="ruleForm" :model="queryParam" :rules="rules" :label-col="{span:5}" :wrapper-col="{span:17}">
				<a-form-model-item label="清运司机" prop="stationNo">
				  <a-select
				    placeholder="请选择清运司机"
				    allowClear
				    v-model="queryParam.stationNo"
				    :showSearch="true"
				    option-filter-prop="children"
				    :filter-option="filterOption">
				    <a-select-option v-for="item in optionData" :key="item.stationNo" :value="item.stationNo">{{ item.name }}</a-select-option>
				  </a-select>
				</a-form-model-item>
				<a-form-model-item label="备注">
					<a-textarea
					  :maxLength="500"
					v-model="queryParam.remarks"
					  style="min-height: 60px;"
					  placeholder="请输入备注(最多500个字符)"
					  autoSize />
				</a-form-model-item>
				<a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
					<a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }">
					  保存
					</a-button>
					<a-button :style="{ marginLeft: '15px' }" @click="isShow=false" >
					  取消
					</a-button>
				</a-form-model-item>
			</a-form-model>
		</a-modal>
	</div>
	
</template>

<script>
	import {
	  stationList
	} from '@/api/releaseRecord.js'
	export default{
		name: 'cleanModal',
		props: {
		  visible: {
		    type: Boolean,
		    default: false
		  },
		  id: {
		    type: [Number, String],
		    default: ''
		  }
		},
		data(){
			return{
				optionData: [],
				isShow:this.visible,
				// form: this.$form.createForm(this, {
				//   name: 'ruleForm'
				// }),
				// 查询参数
				queryParam: {
				  stationNo: undefined,
				  remarks: ''
				},
				rules:{stationNo:[{required: true,
          message: '请输入司机姓名',
          trigger: 'blur'}]}
			}
		},
		methods:{
			filterOption (input, option) {
			  return (
			    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			  )
			},
			getStationList () {
			  stationList().then(res => {
			    if (res.status == 200) {
			      this.optionData = res.data || []
			    }
			  })
			},
			// 保存
			handleSubmit(){
				this.$refs.ruleForm.validate(valid => {
				  if (valid) {
				    const params = JSON.parse(JSON.stringify(this.queryParam))
					 console.log(params)
				    // saveUserPower(formData).then(res => {
				    //   console.log(res, 'rrrrrrrrr')
				    //   if (res.status == 200) {
				    //     _this.$message.success(res.message)
				    //     _this.$emit('refresh')
				    //     setTimeout(function () {
				    //       _this.isshow = false
				    //     }, 300)
				    //   }
				    // })
				  }
				})
			},
		},
		watch: {
		  visible (newValue, oldValue) {
			  // this.getStationList()
		    this.isShow = newValue
	
		  },
		  isShow (newValue, oldValue) {
		  if (!newValue) {
		    this.$emit('close')
		  }else{
			  // this.getStationList()
		  }
		  }
		}
	}
</script>

<style>
</style>
