<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="950px"
    @close="close"
  >
    <el-form
      ref="form"
      :inline="true"
      label-width="80px"
      :model="form"
      :rules="rules"
    >
      <el-form-item
        :label="__('选择省市区')"
        label-width="90px"
        prop="store_area"
      >
        <Area v-model="queryArea" width="350" />
      </el-form-item>
      <el-form-item
        :label="__('详细地址')"
        label-width="90px"
        prop="store_address"
      >
        <keyword
          :keyword="form.store_address"
          :location="queryArea.city.name"
          :style="{ width: '350px' }"
          @change="changeAddr"
          @getAddress="getAddress"
        />
      </el-form-item>
      <el-form-item
        :label="__('经度')"
        label-width="90px"
        prop="store_longitude"
      >
        <el-input
          v-model="form.store_longitude"
          :placeholder="__('经度')"
          style="width: 350px"
        />
      </el-form-item>
      <el-form-item
        :label="__('纬度')"
        label-width="90px"
        prop="store_latitude"
      >
        <el-input
          v-model="form.store_latitude"
          :placeholder="__('纬度')"
          style="width: 350px"
        />
      </el-form-item>

      <el-form-item
        :label="__('营业时间')"
        label-width="90px"
        prop="store_opening_hours"
      >
        <el-time-picker
          v-model="form.store_opening_hours"
          format="HH:mm"
          :placeholder="__('选择时间')"
          style="width: 350px"
          value-format="HH:mm"
        />
      </el-form-item>
      <el-form-item
        :label="__('打烊时间')"
        label-width="90px"
        prop="store_close_hours"
      >
        <el-time-picker
          v-model="form.store_close_hours"
          format="HH:mm"
          :placeholder="__('选择时间')"
          style="width: 350px"
          value-format="HH:mm"
        />
      </el-form-item>
    </el-form>

    <template>
      <baidu-map
        :center="mapCenter"
        class="map"
        :zoom="zoom"
        @click="getClickInfo"
        @moveend="syncCenterAndZoom"
        @moving="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
      >
        <bm-marker
          animation="BMAP_ANIMATION_BOUNCE"
          :dragging="false"
          :position="mapCenter"
        >
          <bm-label
            content=""
            :label-style="{ color: 'red', fontSize: '24px' }"
            :offset="{ width: 6, height: 20 }"
          />
        </bm-marker>
      </baidu-map>
    </template>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { translateTitle as __ } from '@/utils/i18n'
import Area from '@/components/VabArea/area'
import keyword from '@/components/baiduMap/keyword'
import { storeSetUp } from '@/api/store/base'

export default {
  name: 'LocationEdit',
  components: { keyword, Area },
  data() {
    return {
      form: {},
      title: '',
      map_show: false,
      zoom: 15,
      mapCenter: { lng: '', lat: '' },
      rules: {
        store_district_id: [{ required: true, message: '省市区' }],

        store_area: [{ required: true, message: '省市区' }],

        store_address: [{ required: true, message: '详细地址' }],

        store_longitude: [{ required: true, message: '经度' }],
        store_latitude: [{ required: true, message: '纬度' }],
        store_opening_hours: [
          { required: true, message: '请选择营业时间', trigger: 'blur' },
        ],
        store_close_hours: [
          { required: true, message: '请选择关闭时间', trigger: 'blur' },
        ],
      },
      dialogFormVisible: false,
      queryArea: {
        province: { code: '', name: '' },
        city: { code: '', name: '' },
        district: { code: '', name: '' },
      },
    }
  },
  created() {},
  mounted() {
    this.$forceUpdate()
  },
  methods: {
    __,
    showEdit(row) {
      if (!row) {
        this.title = this.__('添加')
      } else {
        this.title = this.__('编辑')
        this.form = Object.assign({}, row)
        this.initData(row)
      }
      this.dialogFormVisible = true

      //不允许同时为0
      if (this.form.store_longitude == 0 && this.form.store_latitude == 0) {
        this.form.store_longitude = ''
        this.form.store_latitude = ''
      }

      this.$forceUpdate()
    },
    initData(row) {
      if (row.store_area) {
        this.form.store_area = row.store_area.split('/')
      }

      this.form.store_district_id = row.store_district_id.split('/')

      if (this.form.store_district_id.length > 0) {
      } else {
        this.form.store_district_id = ''
      }

      this.initQueryArea(this.form.store_district_id, this.form.store_area)

      // 地图回显地位
      this.mapCenter.lat = this.form.store_latitude
      this.mapCenter.lng = this.form.store_longitude
    },

    initQueryArea(store_district_id, store_area) {
      if (!store_district_id && store_area) return
      if (!store_area) return
      if (store_district_id[0]) {
        this.queryArea.province.code = store_district_id[0]
      }
      if (store_district_id[1]) {
        this.queryArea.city.code = store_district_id[1]
      }
      if (store_district_id[2]) {
        this.queryArea.district.code = store_district_id[2]
      }
      if (store_area[0]) {
        this.queryArea.province.name = store_area[0]
      }
      if (store_area[1]) {
        this.queryArea.city.name = store_area[1]
      }
      if (store_area[2]) {
        this.queryArea.district.name = store_area[2]
      }
    },

    /***
     * 地图点击事件。
     */
    getClickInfo(e) {
      this.mapCenter.lng = e.point.lng
      this.mapCenter.lat = e.point.lat

      this.form.store_latitude = this.mapCenter.lat
      this.form.store_longitude = this.mapCenter.lng
    },
    syncCenterAndZoom(e) {
      const { lng, lat } = e.target.getCenter()
      this.mapCenter.lng = lng
      this.mapCenter.lat = lat
      this.zoom = e.target.getZoom()

      console.info(this.zoom)
      console.info(this.mapCenter)

      this.form.store_latitude = this.mapCenter.lat
      this.form.store_longitude = this.mapCenter.lng
    },
    getAddress(address) {
      console.info('address')
      console.info(address)
      this.form.store_address = address.value
      this.form.store_longitude = address.lng
      this.form.store_latitude = address.lat
      // 地图回显地位

      this.mapCenter.lat = this.form.store_latitude
      this.mapCenter.lng = this.form.store_longitude
    },
    changeAddr(addr) {
      this.form.store_address = addr
    },
    close() {
      this.dialogFormVisible = false

      this.form = {}
      this.queryArea = {
        province: { code: '', name: '' },
        city: { code: '', name: '' },
        district: { code: '', name: '' },
      }

      this.$forceUpdate()
    },
    save() {
      console.info(this.mapCenter)
      let params = {}
      params = this.form

      delete params.store_district_id

      if (this.queryArea.province.name) {
        params.store_area = this.queryArea.province.name
      }
      if (this.queryArea.city.name) {
        params.store_area += '/' + this.queryArea.city.name
      }
      if (this.queryArea.district.name) {
        params.store_area += '/' + this.queryArea.district.name
      }

      if (this.queryArea.province.code) {
        params.store_district_id = this.queryArea.province.code
      }
      if (this.queryArea.city.code) {
        params.store_district_id += '/' + this.queryArea.city.code
      }
      if (this.queryArea.district.code) {
        params.store_district_id += '/' + this.queryArea.district.code
      }

      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          // const chain_category_id =
          //   params.chain_category_id[
          //   params.chain_category_id.length - 1
          //     ]
          // params.chain_category_id = chain_category_id

          const { msg, status } = await storeSetUp(params)
          if (200 == status) {
            this.$baseMessage(msg, 'success')
          } else {
            this.$baseMessage(msg, 'error')
          }
          this.$emit('fetch-data')
          this.close()
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style>
.map {
  width: 100%;
  height: 300px;
}
.admin_info {
  margin-top: 20px;
  font-size: 18px;
  color: #b1eca4;
}
.sel_time {
  float: right;
  width: 325px;
  margin-right: 10px;
}

.el-form-item--small.el-form-item {
}
</style>
