<template>
  <a-modal
    centered
    class="edit-network-modal"
    :footer="null"
    :maskClosable="false"
    :title="modalTit"
    v-model="isShow"
    @cancle="isShow=false"
    :width="1000">
    <a-form
      id="network-edit-form"
      :form="form"
      ref="form"
      v-bind="formItemLayout"
      @submit="handleSubmit">
      <a-form-item label="网点名称" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-input
          id="network-edit-name"
          :maxLength="30"
          v-decorator="[
            'formData.name',
            { initialValue: formData.name, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入网点名称' }] }
          ]"
          placeholder="请输入网点名称(最多30个字符)"
          allowClear />
      </a-form-item>
      <a-form-item label="地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-cascader
          id="network-edit-areas"
          v-decorator="[
            'options',
            {initialValue: areas,
             rules: [{ required: true, message: '请选择省市区' }]}
          ]"
          :options="options"
          placeholder="请选择省市区" />
      </a-form-item>
      <a-form-item label="详细地址" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-input
          id="network-edit-address"
          :maxLength="30"
          v-decorator="[
            'formData.address',
            { initialValue: formData.address, getValueFromEvent: $filterEmpty, rules: [{ required: true, message: '请输入详细地址' }] }
          ]"
          placeholder="请输入详细地址(最多30个字符)"
          allowClear />
      </a-form-item>
      <a-row :gutter="30">
        <a-col :span="10">
          <a-form-item label="纬度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
            <a-input
              id="network-edit-lat"
              v-decorator="[
                'formData.lat',
                { initialValue: formData.lat, rules: [
                  { required: true, message: '请输入纬度' },
                  { pattern: /^[\-\+]?([0-8]?\d{1}\.\d{1,8}|90\.0{1,8})$/, message: '请输入正确的纬度,整数部分为0～90，必须输入1到8位小数' }
                ] }
              ]"
              placeholder="请输入纬度"
              allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="10">
          <a-form-item label="经度" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
            <a-input
              id="network-edit-lng"
              v-decorator="[
                'formData.lng',
                { initialValue: formData.lng, getValueFromEvent: $filterEmpty, rules: [
                  { required: true, message: '请输入经度' },
                  { pattern: /^[\-\+]?(0?\d{1,2}\.\d{1,8}|1[0-7]?\d{1}\.\d{1,8}|180\.0{1,8})$/, message: '请输入正确的经度,整数部分为0～180，必须输入1到8位小数' }
                ] }
              ]"
              placeholder="请输入经度"
              allowClear />
          </a-form-item>
        </a-col>
        <a-col :span="4">
          <a href="https://lbs.qq.com/tool/getpoint/" target="_blank">
            <a-button type="primary" id="network-edit-search-jwd" class="network-edit-search-jwd" size="small">查询坐标</a-button>
          </a>
        </a-col>
      </a-row>
      <a-form-item label="选择兑换规则" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-select
          id="network-edit-rules"
          allowClear
          v-decorator="[
            'formData.goldExRuleNo',
            { initialValue: formData.goldExRuleNo,
              rules: [{ required: true, message: '请选择兑换规则' }] },
          ]"
          placeholder="请选择兑换规则"
        >
          <a-select-option v-for="(item,index) in goldExRuleNoList" :key="index" :value="item.goldExRuleNo">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="投递时间段" :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-select
          id="network-edit-times"
          allowClear
          v-decorator="[
            'formData.deliveryTimeRuleNo',
            { initialValue: formData.deliveryTimeRuleNo,
              rules: [{ required: true, message: '请选择投递时间段' }] },
          ]"
          placeholder="请选择投递时间段"
        >
          <a-select-option v-for="(item,index) in deliveryTimeRuleNoList" :key="index" :value="item.deliveryTimeRuleNo">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
        <a-button type="primary" html-type="submit" id="network-edit-submit" style="margin-right: 15px">保存</a-button>
        <a-button @click="isShow=false" style="margin-left: 15px" id="network-edit-close">取消</a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import addrData, { province, city, area } from '@/api/address'
import { stationSave, stationFind } from '@/api/station'
import { goldExListQuery } from '@/api/exchangeSetting.js'
import { deliveryTimeListQuery } from '@/api/openTimeSetting.js'
export default {
  name: 'EditModal',
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    networkId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 }
      },
      formData: {
        name: null, //  网点名称
        provinceCode: null, //  省
        cityCode: null, // 市
        districtCode: null, // 区
        address: '', //  详细地址
        lat: '', //  纬度
        lng: '', //  经度
        goldExRuleNo: undefined, //  兑换规则
        deliveryTimeRuleNo: undefined //  投递时间段
      },
      options: addrData, //  省市区下拉数据
      areas: [], //  省市区 值
      goldExRuleNoList: [], //  兑换规则下拉数据
      deliveryTimeRuleNoList: [] //  投递时间段下拉数据
    }
  },
  computed: {
    modalTit () {
      return this.networkId ? '编辑' : '新增'
    }
  },
  methods: {
    //  获取详情
    getDetails () {
      stationFind({ id: this.networkId }).then(res => {
        if (res.status == 200) {
          //  省市区
          this.areas = [res.data.provinceCode, res.data.cityCode, res.data.districtCode]
          this.form.setFieldsValue({ 'formData.name': res.data.name })
          this.form.setFieldsValue({ 'formData.address': res.data.address })
          this.form.setFieldsValue({ 'formData.lat': res.data.lat })
          this.form.setFieldsValue({ 'formData.lng': res.data.lng })
          this.form.setFieldsValue({ 'formData.goldExRuleNo': res.data.goldExRuleNo })
          this.form.setFieldsValue({ 'formData.deliveryTimeRuleNo': res.data.deliveryTimeRuleNo })
        }
      })
    },
    //  物流信息  保存
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          if (values.options.length) {
            values.formData.provinceCode = values.options[0]
            values.formData.provinceName = _.find(province, ['code', values.options[0]]).name
            values.formData.cityCode = values.options[1]
            values.formData.cityName = _.find(city, ['code', values.options[1]]).name
            values.formData.districtCode = values.options[2]
            values.formData.districtName = _.find(area, ['code', values.options[2]]).name
          }
          const formData = values.formData
          formData.id = this.networkId || null
          stationSave(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.$emit('success')
                _this.isShow = false
              }, 1000)
            }
          })
        }
      })
    },
    //  投递时间段
    getdeliveryTimeRule () {
      deliveryTimeListQuery({}).then(res => {
        if (res.status == 200) {
          this.deliveryTimeRuleNoList = res.data
        } else {
          this.deliveryTimeRuleNoList = []
        }
      })
    },
    //  兑换规则
    getgoldExRule () {
      goldExListQuery({}).then(res => {
        if (res.status == 200) {
          this.goldExRuleNoList = res.data
        } else {
          this.goldExRuleNoList = []
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      } else {
        this.getdeliveryTimeRule() //  投递时间段
        this.getgoldExRule() //  兑换规则
        this.areas = []
        this.form.resetFields()
      }
    },
    networkId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetails()
      }
    }
  }
}
</script>

<style lang="less">
  .edit-network-modal{
    .network-edit-search-jwd{
      margin-top: 8px;
    }
  }
</style>
