<template>
  <div>
    <a-modal title="确认清运" :footer="null" v-model="isShow" @cancel="cancel" centered>
      <a-form-model ref="ruleForm" :model="queryParam" :label-col="{span:5}" :wrapper-col="{span:17}">
        <a-form-model-item label="清运司机">
          {{ driverName }}
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-textarea
            :maxLength="500"
            id="cleanModal-remarks"
            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" id="cleanModal-handleSubmit":style="{ marginRight: '15px' }">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '15px' }" id="cleanModal-cancel" @click="cancel" >
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { findDriverName, cleanByDevice } from '@/api/cleanManage.js'
export default {
  name: 'CleanModal',
  props: {
    openModal: {
      type: Boolean,
      default: false
    },
    cleanStationDeviceNo: {
      type: [Number, String],
      default: ''
    },
    dirverUserId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      optionData: [], // 司机列表数据
      isShow: this.openModal,
      queryParam: {
        remark: ''
      },
      driverName: ''
    }
  },
  methods: {
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    // 司机数据
    getDriverName () {
      findDriverName({ id: this.dirverUserId }).then(res => {
        if (res.status == 200) {
          console.log(res)
          this.driverName = res.data.name
        } else {
          this.driverName = ''
        }
      })
    },
    // 保存
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
        const _this = this
        if (valid) {
          const params = {
            cleanStationDeviceNo: this.cleanStationDeviceNo,
            remarks: this.queryParam.remarks
          }
          cleanByDevice(params).then(res => {
            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 = {
        remark: ''
      }
    }
  },
  watch: {
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (val) {
      if (!val) {
        this.$emit('close')
      } else {
        this.$nextTick(() => {
          this.$refs.ruleForm.resetFields()
        })
      }
    },
    cleanStationDeviceNo (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDriverName()
      }
    }
  }
}
</script>

<style>
</style>
