<template>
  <div>
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmitHandle()"
      label-width="120px"
    >
      <!--<el-form-item label="所属组织名称" prop="orgName">-->
        <!--<el-select v-model="dataForm.orgName" placeholder="所属组织名称">-->
          <!--<el-option-->
            <!--v-for="item in organizationList"-->
            <!--:key="item.value"-->
            <!--:label="item.label"-->
            <!--:value="item.value"-->
          <!--&gt;-->
          <!--</el-option>-->
        <!--</el-select>-->
      <!--</el-form-item>-->
      <el-form-item label="疫苗接种点名称" prop="name">
        <el-input
          v-model="dataForm.name"
          placeholder="疫苗接种点名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="接种日期" prop="inoculationDate">
        <el-input
          v-model="dataForm.inoculationDate"
          placeholder="接种日期"
        ></el-input>
      </el-form-item>
      <el-form-item label="接种上午开始时间" prop="moStartTime">
        <el-input
          v-model="dataForm.moStartTime"
          placeholder="接种上午开始时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="接种上午结束时间" prop="moEndTime">
        <el-input
          v-model="dataForm.moEndTime"
          placeholder="接种上午结束时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="接种下午开始时间" prop="afStartTime">
        <el-input
          v-model="dataForm.afStartTime"
          placeholder="接种下午开始时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="接种下午结束时间" prop="afEndTime">
        <el-input
          v-model="dataForm.afEndTime"
          placeholder="接种下午结束时间"
        ></el-input>
      </el-form-item>
      <el-form-item label="" prop="noAvailableVaccines">
        <el-checkbox
          v-model="dataForm.noAvailableVaccines"
          true-label="2"
          false-label="1"
          >暂无疫苗</el-checkbox
        >
      </el-form-item>
      <el-form-item label="咨询电话" prop="mobile">
        <el-input v-model="dataForm.mobile" placeholder="咨询电话"></el-input>
      </el-form-item>
      <el-form-item label="接种点地址" prop="address">
        <el-input
          v-model="dataForm.address"
          placeholder="接种点地址"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="位置坐标" class="position_label" prop="longitude" style="display: block">
        <div>
          <el-input
            class="item_width_4"
            maxlength="50"
            placeholder="例:青岛市时代国际广场"
            v-model="keyWords"
            style="width: 200px"
          >
          </el-input>
          <el-button
            style="margin-left: 10px"
            type="primary"
            size="small"
            @click="handleSearchMap"
            >查询</el-button
          >
          <div
            id="map_app"
            class="div_map"
            style="width: 500px; height: 300px; margin-top: 20px"
          ></div>
          <div style="margin-top: 10px">
            <span>经度</span>
            <el-input
              class="item_width_3"
              maxlength="50"
              placeholder="请输入经度"
              v-model="dataForm.longitude"
              disabled
              style="width: 200px; margin-left: 20px"
            >
            </el-input>
            <span style="margin-left: 20px">纬度</span>
            <el-input
              class="item_width_3"
              maxlength="50"
              placeholder="请输入纬度"
              v-model="dataForm.latitude"
              disabled
              style="width: 200px; margin-left: 20px"
            >
            </el-input>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="submit">
      <el-button @click="closeSubmit">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import debounce from "lodash/debounce";
var map;
var search;
var markers;
var geocoder;
var infoWindowList;
export default {
  data() {
    return {
      visible: false,
      dataForm: {
        id: "",
        customerId: "",
        orgId: "",
        orgName: "",
        pid: "",
        pids: "",
        name: "",
        inoculationDate: "",
        moStartTime: "",
        moEndTime: "",
        afStartTime: "",
        afEndTime: "",
        noAvailableVaccines: "",
        mobile: "",
        address: "",
        longitude: "120.38945519",
        latitude: "36.0722275",
      },
      keyWords: null,
      // organizationList: [],
    };
  },
  computed: {
    dataRule() {
      return {
        customerId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        inoculationDate: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        moStartTime: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        moEndTime: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        afStartTime: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        afEndTime: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        noAvailableVaccines: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        mobile: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  mounted() {
    this.initMap();
  },
  methods: {
    closeSubmit(){
      this.$emit('closeDialog')
    },
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      // 定义地图中心点坐标
      var center = new window.TMap.LatLng(36.0722275, 120.38945519);
      // 定义map变量，调用 TMap.Map() 构造函数创建地图
      map = new window.TMap.Map(document.getElementById("map_app"), {
        center: center, // 设置地图中心点坐标
        zoom: 17.2, // 设置地图缩放级别
        pitch: 43.5, // 设置俯仰角
        rotation: 45, // 设置地图旋转角度
      });
      search = new window.TMap.service.Search({ pageSize: 10 });
      // 新建一个地点搜索类
      markers = new TMap.MultiMarker({
        map: map,
        geometries: [],
      });
      infoWindowList = Array(10);
      geocoder = new TMap.service.Geocoder(); // 新建一个正逆地址解析类
      // 监听地图平移结束
      map.on("panend", () => {
        this.handleMoveCenter();
      });
      this.handleMoveCenter();
      this.convert();
    },
    handleMoveCenter() {
      //修改地图中心点
      const center = map.getCenter();
      const lat = center.getLat();
      const lng = center.getLng();
      this.dataForm.latitude = lat;
      this.dataForm.longitude = lng;
      this.setMarker(lat, lng);
      this.convert(lat, lng);
    },
    // 地图查询
    handleSearchMap() {
      infoWindowList.forEach((infoWindow) => {
        infoWindow.close();
      });
      infoWindowList.length = 0;
      markers.setGeometries([]);
      // 在地图显示范围内以给定的关键字搜索地点
      search
        .searchRectangle({
          keyword: this.keyWords,
          bounds: map.getBounds(),
        })
        .then((result) => {
          let { data } = result;
          if (Array.isArray(data) && data.length > 0) {
            const {
              location: { lat, lng },
            } = data[0];
            map.setCenter(new TMap.LatLng(lat, lng));
            this.setMarker(lat, lng);
            this.dataForm.latitude = lat;
            this.dataForm.longitude = lng;
            this.convert();
          } else {
            this.$message.error("未检索到相关位置坐标");
          }
        });
    },
    convert(lat, lng) {
      markers.setGeometries([]);
      // var input = document.getElementById('location').value.split(',');
      let location;
      if (lat && lng) {
        location = new TMap.LatLng(lat, lng);
      } else {
        location = new TMap.LatLng(
          this.dataForm.latitude,
          this.dataForm.longitude
        );
      }

      // map.setCenter(location);
      markers.updateGeometries([
        {
          id: "main", // 点标注数据数组
          position: location,
        },
      ]);
      geocoder
        .getAddress({ location: location }) // 将给定的坐标位置转换为地址
        .then((result) => {
          this.dataForm.address = result.result.address;
          // 显示搜索到的地址
        });
    },

    setMarker(lat, lng) {
      markers.setGeometries([]);
      markers.add([
        {
          id: "4",
          styleId: "marker",
          position: new TMap.LatLng(lat, lng),
          properties: {
            title: "marker4",
          },
        },
      ]);
    },
    // 获取所属组织列表
    // getFormInfo() {
    //   this.$http
    //     .post(`/gov/org/agency/community-list`)
    //     .then(({ data: res }) => {
    //       if (res.code !== 0) {
    //         return this.$message.error(res.msg);
    //       }
    //       this.organizationList = res.data;
    //     })
    //     .catch(() => {});
    // },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get(`/epmetuser/icPointVaccinesInoculation/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        console.log(this.dataForm);
        // this.$refs['dataForm'].validate((valid) => {
        //   if (!valid) {
        //     return false
        //   }
        //   this.$http[!this.dataForm.id ? 'post' : 'put']('/epmetuser/icPointVaccinesInoculation/', this.dataForm).then(({ data: res }) => {
        //     if (res.code !== 0) {
        //       return this.$message.error(res.msg)
        //     }
        //     this.$message({
        //       message: this.$t('prompt.success'),
        //       type: 'success',
        //       duration: 500,
        //       onClose: () => {
        //         this.visible = false
        //         this.$emit('refreshDataList')
        //       }
        //     })
        //   }).catch(() => {})
        // })
      },
      1000,
      { leading: true, trailing: false }
    ),
  },
};
</script>
<style scoped>
.position_label >>> .el-form-item__label::before{
  color:#fff!important;
}
.submit{
  text-align: center;
  margin: auto;
}
</style>
