<template>
  <div>

    <Modal :width="60" title="订单修改" :value.sync="isShow" @on-visible-change="$emit('update:isShow',$event)"
      @on-ok="submit">
      <div class="xy-table-item" style="margin-bottom: 20px;">
        <div class="xy-table-item-label">订单名称：
        </div>
        <div class="xy-table-item-content">
          {{detail.name}}
        </div>
      </div>
      <div style="display: flex;flex-wrap: wrap">
        <div class="xy-table-item" style="margin-bottom: 20px;">
          <div class="xy-table-item-label">
            地理位置选择
          </div>
          <div class="xy-table-item-content">
            <avue-input-map style="width: 300px;" :params="option" placeholder="请选择地图" v-model="map"></avue-input-map>
          </div>
        </div>

        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>具体地址：
          </div>
          <div class="xy-table-item-content">
            <el-input clearable placeholder="请填写具体地址到楼层" v-model="form.member_address" style="width: 300px;" />
          </div>
        </div>
      </div>

    </Modal>
  </div>
</template>

<script>
  import {
    save,
    getDetail
  } from "@/api/order"
  import {
    parseTime
  } from '@/utils'
  import {
    Message
  } from "view-design"

  export default {
    props: {
      id: Number,
      isShow: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        map: {

        },

        option: {
          column: [{
            label: '坐标',
            prop: 'map',
            type: 'map',
            //高德初始化参数
            params: {
              zoom: 10,
              // zoomEnable: false,
              // dragEnable: false,
            }
          }]
        },
        detail: {
          name: "",
        },
        form: {
          lat: "",
          lng: "",
          id: "",
          member_address: ""
        }
      }
    },
    methods: {
      submit() {
        if (this.form.lat == "") {
          Message({
            type: 'error',
            message: '请设置经纬度'
          })
          return false;
        }
        if (this.form.member_address == "") {
          Message({
            type: 'error',
            message: '请填写服务地址'
          })
          return false;
        }
        save(this.form).then(res => {
          this.$emit('refresh')
          Message({
            type: 'success',
            message: '编辑成功'
          })
          this.isShow = false;
          this.form.lat = "";
          this.form.lng = "";
          this.form.member_address = "";
          this.map = [];
        })

      }
    },
    watch: {
      map(newVal) {
        if (!newVal) return
        this.form.lat = newVal[1]
        this.form.lng = newVal[0]
        //this.form.member_address = newVal[2]
      },
      isShow(newVal) {
        if (newVal) {
          this.form.id = this.id;
          this.form.lat = "";
          this.form.lng = "";
          this.form.member_address = "";
          this.map = {};
          getDetail({
            id: this.id
          }).then(res => {
            this.detail.name = res.order_name
            this.form.member_address =res.member_address
          })
        }
      }
    }

  }
</script>

<style scoped lang="scss">
</style>
