<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="疫苗接种点名称"
          :disabled='dialogTitle == "查看"'
        ></el-input>
      </el-form-item>
      <el-form-item label="接种日期" prop="inoculationDate">
        <!-- <el-input
          v-model="dataForm.inoculationDate"
          placeholder="接种日期"
        ></el-input> -->
        <el-date-picker
          v-model="dataForm.inoculationDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          :disabled='dialogTitle == "查看"'
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="上午接种时间">
        <el-time-picker
          is-range
          arrow-control
          v-model="startTime"
          format="HH:mm"
          value-format="HH:mm"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          @change="startTimeChange"
          :disabled='dialogTitle == "查看"'
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="下午接种时间">
        <el-time-picker
          is-range
          arrow-control
          v-model="endTime"
          format="HH:mm"
          value-format="HH:mm"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          @change="endTimeChange"
          :disabled='dialogTitle == "查看"'
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="" prop="noAvailableVaccines">
        <el-checkbox
          v-model="dataForm.noAvailableVaccines"
          true-label="2"
          false-label="1"
          :disabled='dialogTitle == "查看"'
          >暂无疫苗</el-checkbox
        >
      </el-form-item>
      <el-form-item label="咨询电话" prop="mobile">
        <el-input v-model="dataForm.mobile" :disabled='dialogTitle == "查看"' 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"
            :disabled='dialogTitle == "查看"'
          >
          </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 v-if='dialogTitle != "查看"' 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: [],
      startTime: null,
      endTime: null,
    };
  },
  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",
          },
        ],
      };
    },
  },
  props:{
    dialogTitle:{
      type:String,
      default:''
    }
  },
  methods: {
    startTimeChange() {
      if (Array.isArray(this.startTime) && this.startTime.length > 0) {
        let hour_0 = Number(this.startTime[0].substring(0, 2));
        let hour_1 = Number(this.startTime[1].substring(0, 2));
        if (hour_0 >= 12 || hour_1 >= 12) {
          this.$message.error("请选择00:00:00-11:59:59时间段的时间");
          this.startTime = null;
          return false;
        }
        this.dataForm.moStartTime = this.startTime[0];
        this.dataForm.moEndTime = this.startTime[1];
      }
    },
    endTimeChange() {
      if (Array.isArray(this.endTime) && this.endTime.length > 0) {
        let hour_0 = Number(this.endTime[0].substring(0, 2));
        let hour_1 = Number(this.endTime[1].substring(0, 2));
        if (hour_0 < 12 || hour_1 < 12) {
          this.$message.error("请选择12:00:00-23:59:59时间段的时间");
          this.endTime = null;
          return false;
        }
        this.dataForm.afStartTime = this.endTime[0];
        this.dataForm.afEndTime = this.endTime[1];
      }
    },
    closeSubmit() {
      this.$emit("closeDialog");
    },
    // 地图初始化函数，本例取名为init，开发者可根据实际情况定义
    initMap() {
      // 定义地图中心点坐标
      let _this = this;
      var center = new window.TMap.LatLng(
        _this.dataForm.latitude,
        _this.dataForm.longitude
      );
      // 定义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();
        } else {
          this.dataForm.ongitude = "120.38945519";
          this.dataForm.latitude = "36.0722275";
          this.initMap();
        }
      });
    },
    // 获取信息
    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,
          };
          this.startTime = [res.data.moStartTime,res.data.moEndTime]
          this.endTime = [res.data.afStartTime,res.data.afEndTime]
          this.initMap();
        })
        .catch(() => {});
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        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");
                  this.closeSubmit();
                },
              });
            })
            .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>
