<template>
  <a-modal :footer="null" centered :title="titleText" v-model="isShow" @cancle="cancel">
    <a-spin :spinning="loading">
      <a-form-model :model="formData" ref="ruleForm" :rules="rules">
        <a-form-model-item label="选择网点" :label-col="{span:6}" :wrapper-col="{span:16}" prop="stationNo">
          <a-select
            id="addCollector-stationNo"
            placeholder="请选择网点名称"
            allowClear
            v-model="formData.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="采集员姓名" :label-col="{span:6}" :wrapper-col="{span:16}">
          <a-input placeholder="请输入网点标签名称(30个字符以内)" v-model.trim="formData.gatherName" allowClear :maxLength="30" id="addCollector-gatherName"/>
        </a-form-model-item>
        <a-form-model-item label="采集员手机" :label-col="{span:6}" :wrapper-col="{span:16}" prop="gatherPhone">
          <a-input
            placeholder="请输入采集员手机"
            v-model.trim="formData.gatherPhone"
            allowClear
            :maxLength="11"
            :disabled="collectorId ? true :false "
            id="addCollector-gatherPhone"/>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 24, offset: 8 }">
          <a-button type="primary" @click="handleSubmit()" :style="{ marginRight: '15px' }" id="addCollector-handleSubmit">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '15px' }" @click="cancel" id="addCollector-cancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { saveCollector, collectorDetails } from '@/api/collector.js'
import { stationList } from '@/api/releaseRecord.js'
export default {
  name: 'AddCollector',
  props: {
    openModal: {
      type: Boolean,
      default: false
    },
    collectorId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      formData: { gatherName: '', gatherPhone: '', stationNo: undefined },
      isShow: this.openModal, // 弹框状态
      titleText: '新增',
      rules: {
        stationNo: [{ required: true, message: '请选择网点', trigger: 'change' }],
        gatherPhone: [{ required: true, message: '请输入正确的手机号', trigger: 'blur', pattern: /^\d{11}$/ }]
      },
      loading: false,
      optionData: [] // 标签数据
    }
  },
  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 || []
        }
      })
    },
    // 数据详情
    getPageInfo () {
      const _this = this
      _this.loading = true
      collectorDetails({
        id: _this.collectorId
      }).then(res => {
        if (res.status == 200) {
          _this.loading = false
          _this.formData.gatherName = res.data.gatherName
          _this.formData.gatherPhone = res.data.gatherPhone
          _this.formData.stationNo = res.data.stationNo
        }
      })
    },
    // 保存
    handleSubmit () {
      this.$refs.ruleForm.validate(valid => {
        const _this = this
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData))
          params.id = _this.collectorId ? _this.collectorId : undefined
          saveCollector(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')
    },
    clear () {
      this.$refs.ruleForm.resetFields()
      delete this.formData.id
      this.formData.gatherPhone = ''
      this.formData.stationNo = undefined
      this.formData.gatherName = ''
    }
  },
  mounted() {
    this.getStationList()
  },
  // 监听弹窗
  watch: {
    // 父页面传过来的弹窗状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    isShow (newValue, oldValue) {
      if (newValue) {
        if (this.collectorId) { // 编辑
          this.titleText = '编辑'
          this.getPageInfo()
        } else {
          this.titleText = '新增'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style>
</style>
