<template>
  <transition name="slide-fade">
    <div class="station-types" v-drag>
      <div class="content">
        <el-form ref="form" :model="form" label-width="70px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="选择区域">
                <div class="areaContent">
                  <div
                    class="areaContent-block"
                    @click="changeAreaType(item.id)"
                    v-for="(item, i) in areaList"
                    :key="i"
                    :class="form.shapeType === item.id ? 'areaContent-block-active' : ''"
                  >
                    <div class="areaContent-block-img">
                      <img :src="item.icon" alt="" />
                    </div>
                    <div class="areaContent-block-text">
                      {{ item.name }}
                    </div>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="footer-right">
          <!-- <el-button plain type="primary" @click="cancel">取消</el-button> -->
          <el-button plain type="primary" @click="reset">重置</el-button>
          <el-button type="success" @click="saveRail">确认</el-button>
        </div>
      </div>

    </div>
  </transition>
</template>
<script>
// import { parseTime } from "@/utils/index";
// import selfTable from "@/components/common/selfTable";
import { createRailAccess, updateRailAccess } from "@/api/security-station-rails-controller";
// import { nanoid } from "nanoid";

export default {
  name: "trajectory",
  components: {
    // selfTable,
  },
  props: {
    stationId: String,
    info: {
      type: Object,
      default() {
        return {};
      },
    },
    electronicFenceInfo: {
      type: Object,
      default() {
        return {};
      },
    },
    map: {
      type: Object,
      default() {
        return null;
      },
    },
    stationVisible: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    info: {
      handler(newVal) {
        console.log("newVal", newVal);
        if (Object.keys(newVal).length !== 0) {
          this.form.stationId = newVal.stationId;
          this.form.peopleNum = newVal.countOfSecurityMan;
          if (Object.keys(this.electronicFenceInfo).length === 0) {
            this.form.stationName = newVal.name;
          }
        }
      },
      immediate: true,
      deep: true,
    },
    electronicFenceInfo: {
      handler(newVal) {
        console.log("electronicFenceInfo", newVal);
        if (newVal && Object.keys(newVal).length !== 0) {
          let deepVal = JSON.parse(JSON.stringify(newVal));
          this.form.stationName = deepVal.stationName;
          this.form.id = deepVal.id;
          this.form.name = deepVal.name;
          this.form.ruleType = deepVal.ruleType;
          this.form.shapeType = deepVal.shapeType;
          this.form.shapedLocation = deepVal.shapedLocation;
          this.form.stationId = deepVal.stationId;
          this.form.peopleNum = deepVal.countOfSecurityMan;
          this.form.time = deepVal.time;
          this.form.note = deepVal.note;
          // if (deepVal.shapeType === "Circle") {
          //   this.setCircle(deepVal.shapedLocation);
          // } else if (deepVal.shapeType === "Crib") {
          //   this.setRectangle(deepVal.shapedLocation);
          // } else if (deepVal.shapeType === "Polygon") {
          //   this.setPolygon(deepVal.shapedLocation);
          // }
          // this.form = newVal
          this.isAdd = false;
        } else {
          this.isAdd = true;
          this.reset();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      isAdd: false,
      typeList: [
        {
          id: "Exit",
          name: "离开告警",
        },
        {
          id: "Enter",
          name: "进入告警",
        },
        // {
        //   id: "Access",
        //   name: "进出告警",
        // },
      ],
      areaList: [
        {
          id: "Crib",
          icon: require("@/assets/images/mapToolbar/框选.png"),
          name: "框形选择",
        },
        {
          id: "Circle",
          icon: require("@/assets/images/mapToolbar/圈选.png"),
          name: "圆形选择",
        },
        {
          id: "Polygon",
          icon: require("@/assets/images/mapToolbar/多边形选择.png"),
          name: "多边形选择",
        },
      ],
      form: {
        id: "",
        name: "",
        ruleType: "Exit",
        stationId: "",
        stationName: "",
        peopleNum: "",
        time: "",
        note: "",
        shapeType: "",
        peopleList: [],
        shapedLocation: {
          geos: [],
          radius: "",
        },
      },
      Circle: null,
      mousetool: null,
    };
  },
  methods: {
    changeAreaType(id) {
      let that = this;
      this.form.shapeType = id;
      if (this.mouseTool) {
        this.mouseTool.close(true);
      }
      this.$emit("cleanFigure");
      if (id === "Circle") {
        that.drawCircle();
      } else if (id === "Crib") {
        that.drawRectangle();
      } else if (id === "Polygon") {
        that.drawPolygon();
      }
    },
    drawPolygon() {
      // todo: draw Polygon
      this.$emit("draw", "Polygon");
    },
    drawCircle() {
      // todo: draw Circle
      this.$emit("draw", "Circle");
    },
    drawRectangle() {
      // todo: draw Rectangle
      this.$emit("draw", "Rectangle");
    },
    setCircle(data) {
      // todo: set circle
      console.log(data);
    },
    setRectangle(data) {
      console.log(data.geos);
    },
    setPolygon(data) {
      console.log(data.geos);
    },
    cancel() {
      if (this.mouseTool) {
        this.mouseTool.close(true);
      }
      this.$emit("cancel");
    },
    updateGeometry({ geos, radius }) {
      this.form.shapedLocation = {
        geos,
        radius,
      };
      console.log(this.form.shapedLocation);
    },
    updateStation(station) {
      console.log("updateStation", station);
      this.form.stationName = station.stationName;
      this.form.peopleNum = station.countOfSecurityMan;
      this.form.stationId = station.stationId;
    },
    reset() {
      console.log("reset", this.stationId);
      console.log("reset", this.form);
      this.form.id = "";
      this.form.name = "";
      this.form.ruleType = "Exit";
      this.form.time = [];
      this.form.note = "";
      this.form.shapeType = "";
      this.form.stationName = "";
      this.form.peopleNum = "";
      this.form.shapedLocation = {
        geos: [],
        radius: "",
      };
      this.$emit("cleanFigure");
    },
    saveRail() {
      if (this.form.shapedLocation.geos.length === 0) {
        this.$message.warning("请选择围栏区域");
        return;
      }
      // 发送数据到父窗口并请求关闭
      window.parent.postMessage({
          shapeType: this.form.shapeType,
          shapedLocation: this.form.shapedLocation
        }, '*');

      // 可选：本地提示
      this.$message.success('数据保存成功，即将关闭窗口');
    }
  },
};
</script>
<style lang="scss" scoped>
.station-types {
  width: 100%;
  background: #e9f2ebc4;
  position: fixed;
  top: 0;
  z-index: 999;
  .content {
    border-bottom: 1px solid #bdcfde;
    display: flex;
    justify-content: space-between;
    padding: 15px 15px 0;
    height: 65px;
    .top {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      margin: 16px 0 19px 0;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: #0e71ff;
      }
    }

    .type-icon {
      width: 16px;
      height: 16px;
    }

    ::v-deep .el-radio {
      display: flex;
      align-items: center;

      .el-radio__label {
        display: flex;
        align-items: center;
        padding-left: 8px;
        font-size: 16px;
        color: #666666;
      }
    }

    .areaContent {
      display: flex;
      align-items: center;

      &-block {
        width: 128px;
        height: 32px;
        line-height: 32px;
        border-radius: 6px;
        opacity: 1;
        border: 1px solid #b2a7a7;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        background-color: aliceblue;
        cursor: pointer;

        &:nth-child(3) {
          margin-right: 0;
        }

        &-img {
          width: 24px;
          height: 24px;

          img {
            width: 100%;
            height: 100%;
            vertical-align: baseline;
          }
        }

        &-text {
          margin-left: 8px;
          color: #333333;
          font-size: 14px;
        }

        &-active {
          background: rgba(14, 113, 255, 0.1);
          border: 1px solid #0e71ff;
        }
      }
      &-block:hover {
        background: rgba(14, 113, 255, 0.1);
        border: 1px solid #0e71ff;
      }
    }

    .peopleContent {
      display: flex;
      align-items: center;

      &-block {
        width: 128px;
        height: 32px;
        line-height: 32px;
      }
    }

    .peopleNum {
      width: 50px;
      font-size: 14px;
      color: #0e70ff;
      text-decoration: underline;
      cursor: pointer;
    }

    .btnContent {
      display: flex;
      align-items: center;

      &-block {
        width: 128px;
        height: 32px;
        line-height: 32px;
        border-radius: 6px;
        opacity: 1;

        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        cursor: pointer;
        color: #333333;
        font-size: 14px;

        &:nth-child(3) {
          margin-right: 0;
        }
      }

      .success {
        color: #00b40c;
        border: 1px solid #00b40c;

        &:hover {
          color: #ffffff;
          background: #00b40c;
        }
      }

      .primary {
        color: #1677ff;
        border: 1px solid #1677ff;

        &:hover {
          color: #ffffff;
          background: #1677ff;
        }
      }

      .danger {
        background: #ff4d4f;
        color: #ffffff;
        border: 1px solid #ff4d4f;
      }
    }

    .btn-row {
      display: flex;
      align-items: center;

      &-btn {
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #d9d9d9;
      }

      &-btnAc {
        background: rgba(22, 119, 255, 0.1);
        border-radius: 4px;
        border: 1px solid #1677ff;
      }

      &-btnSelf {
        width: 70px;
        height: 38px;

        ::v-deep .el-input {
          width: 70px;
          height: 38px;
          line-height: 38px;
          font-weight: 500;
          color: #666666;
          font-size: 14px;
        }

        ::v-deep .el-input__inner {
          border: 0;
        }
      }
    }
  }

  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 20px;

    &-left {
      .del {
        color: rgba(255, 77, 79, 1);
        background-color: #ffffff;
        border-color: rgba(255, 77, 79, 1);

        &:hover {
          color: #ffffff;
          background-color: rgba(255, 77, 79, 1);
          border-color: rgba(255, 77, 79, 1);
        }

        &:focus {
          background-color: rgba(255, 77, 79, 1);
          border-color: rgba(255, 77, 79, 1);
        }
      }
    }
  }
}
</style>
