<template>
  <div>
    <a-modal title="确认清运" :footer="null" v-model="isShow" @cancel="cancel" centered>
      <a-form-model ref="ruleForm" :model="queryParam" :rules="rules" :label-col="{span:5}" :wrapper-col="{span:17}">
        <a-form-model-item label="清运司机" prop="diverId">
          <a-select
            placeholder="请选择清运司机"
            allowClear
            v-model="queryParam.diverId"
            :showSearch="true"
            option-filter-prop="children"
            :filter-option="filterOption">
            <a-select-option v-for="item in optionData" :key="item.id" :value="item.id">{{ 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 { driverQueryList, cleanByDevice } from '@/api/cleanManage.js'
export default {
  name: 'CleanModal',
  props: {
    openModal: {
      type: Boolean,
      default: false
    },
    stationNo: {
		  type: [Number, String],
		  default: ''
    },
    deviceNo: {
		  type: [Number, String],
		  default: ''
    }
  },
  data () {
    return {
      optionData: [], // 司机列表数据
      isShow: this.openModal,
      queryParam: {
        diverId: undefined,
        remarks: ''
      },
      // 校验规则
      rules: { diverId: [{ required: true, message: '请选择清运司机', trigger: ['blur', 'change'] }] }
    }
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    getDriverList () {
      driverQueryList({ loginFlag: 1 }).then(res => {
        if (res.status == 200) {
          this.optionData = res.data || []
        } else {
          this.optionData = []
        }
      })
    },
    // 保存
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
			const _this = this
        if (valid) {
          const params = {
            stationNo: this.stationNo,
            deviceNo: this.deviceNo,
            dirverUserId: this.queryParam.diverId,
            remarks: this.queryParam.remarks
          }
          cleanByDevice(params).then(res => {
            console.log(res, 'rrrrrrrrr')
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            }
          })
        }
      })
    },
    // 取消
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    // 重置input框
    clear () {
      this.$refs.ruleForm.resetFields()
      this.queryParam = {
        diverId: undefined,
        remarks: ''
      }
    }
  },
  watch: {
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields()
        })
      }
    },
    stationNo (newValue, oldValue) {
      console.log(this.isShow, newValue)
      if (this.isShow && newValue) {
        this.getDriverList()
      }
    }
  }
}
</script>

<style>
</style>
