<template>
  <transition name="slide-fade">
    <div class="station-types" v-drag>
      <div class="header">
        <span class="title">电子围栏信息</span>
        <i class="el-icon-close" @click="cancel"></i>
      </div>
      <div class="content">
        <el-form ref="form" :model="form" label-width="70px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="围栏名称">
                <el-input v-model="form.name" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="围栏类型">
                <el-select v-model="form.ruleType" placeholder="请选择围栏类型" size="small">
                  <el-option :value="item.id" :label="item.name" v-for="(item, i) in typeList" :key="i"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="所属驻勤点" label-width="100px">
                <el-input v-model="form.stationName" size="small" :readonly="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label-width="20px">
                <el-button plain type="primary" @click="relationStation" v-if="!stationId">关联驻勤点</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="form.time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  size="small"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input type="textarea" :rows="2" v-model="form.note" size="small" style="width: 100%"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <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-row>
            <el-col :span="24">
              <el-form-item label="驻勤人员">
                <!--  <div class="btnContent">
                  <div class="btnContent-block success">添加成员</div>
                  <div class="btnContent-block primary">选择全部</div>
                  <div class="btnContent-block danger">删除选中</div>
                </div>-->
                <div class="peopleNum" @click="openPeopleNum">{{ form.peopleNum }}人</div>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="24">
              <el-form-item label="">
                <selfTable
                  :columns="columns"
                  :dataList="tableData"
                  :index="true"
                  maxHeight="200"
                  :hasPage="false"
                  :selection="true"
                >
                </selfTable>
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </div>
      <div class="footer">
        <div class="footer-left"></div>
        <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 { createRail, updateRail } 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;
      },
    },
  },
  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,
      columns: [
        {
          prop: "peopleType",
          label: "成员类型",
        },
        {
          prop: "name",
          label: "成员名称",
        },
      ],
      tableData: [
        {
          id: 1,
          peopleType: "保安员",
          name: "张三",
        },
        {
          id: 2,
          peopleType: "负责人",
          name: "张三",
        },
      ],
      typeList: [
        {
          id: "Exit",
          name: "离开告警",
        },
        {
          id: "Enter",
          name: "进入告警",
        },
        // {
        //   id: "Access",
        //   name: "进出告警",
        // },
      ],
      areaList: [
        {
          id: "Crib",
          icon: require("@/assets/images/mapToolbar/electronicFence/框选.png"),
          name: "框形选择",
        },
        {
          id: "Circle",
          icon: require("@/assets/images/mapToolbar/electronicFence/圈选.png"),
          name: "圆形选择",
        },
        {
          id: "Polygon",
          icon: require("@/assets/images/mapToolbar/electronicFence/多边形选择.png"),
          name: "多边形选择",
        },
      ],
      form: {
        id: "",
        name: "",
        ruleType: "Exit",
        stationId: "",
        stationName: "",
        peopleNum: "",
        time: "",
        note: "",
        shapeType: "",
        peopleList: [],
        shapedLocation: {
          geos: [],
          radius: "",
        },
      },
      Circle: null,
      mousetool: null,
    };
  },
  methods: {
    //关联驻勤点
    relationStation() {
      this.$emit("relationStation", this.info);
    },
    openPeopleNum() {
      console.log("openPeopleNum", this.info);
      console.log("openPeopleNum", this.electronicFenceInfo);
      this.$emit("openPeopleNum", this.form.stationId, this.form.stationName);
    },
    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.name) {
        this.$message({
          message: "请输入围栏名称",
          type: "warning",
        });
        return;
      }
      if (!this.form.time[0] && !this.form.time[1]) {
        this.$message({
          message: "请输入时间范围",
          type: "warning",
        });
        return;
      }
      if (this.form.shapedLocation.geos.length === 0) {
        this.$message({
          message: "请选择围栏区域",
          type: "warning",
        });
        return;
      }
      let params = {
        name: this.form.name,
        ruleType: this.form.ruleType,
        shapeType: this.form.shapeType,
        stationId: this.form.stationId,
        // id: this.form.id || nanoid(),
        id: this.form.id,
        note: this.form.note,
        beginTime: this.form.time[0],
        endTime: this.form.time[1],
        shapedLocation: this.form.shapedLocation,
      };
      if (this.isAdd) {
        createRail(params)
          .then((res) => {
            console.log("saveRail", res);
            if (this.mouseTool) {
              this.mouseTool.close(true);
            }
            this.$message({
              message: "新增成功",
              type: "success",
            });
            this.$emit("cancel");
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        updateRail(params)
          .then((res) => {
            console.log("updateRail", res);
            if (this.mouseTool) {
              this.mouseTool.close(true);
            }
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.$emit("cancel");
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    setForm({ shapedLocation, shapeType }) {
      this.form.shapedLocation = { ...{}, ...shapedLocation };
      this.form.shapeType = shapeType;
    },
  },
};
</script>
<style lang="scss" scoped>
.station-types {
  width: 680px;
  // height: 610px;
  background: #ffffff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 8px 8px;
  border: 2px solid #3e8dff;
  position: absolute;
  top: 50%;
  right: 10%;
  transform: translateY(-50%);
  padding: 0 24px;
  z-index: 999;

  .header {
    height: 54px;
    border-bottom: 1px solid #bdcfde;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .title {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
    }

    i {
      cursor: pointer;
      font-size: 16px;
      color: #999999;
    }
  }

  .content {
    border-bottom: 1px solid #bdcfde;

    .top {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      margin: 16px 0 19px 0;

      .location {
        width: 22px;
        height: 22px;
        background: url("~@/assets/images/mapSearch/驻勤点类型.png") no-repeat;
        background-size: 100% 100%;
        margin-right: 8px;
      }

      .title {
        font-size: 16px;
        font-weight: 500;
        color: #0e71ff;
      }
    }

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

    .el-col {
      //   margin-bottom: 24px;
    }

    ::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 #d9d9d9;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        cursor: pointer;

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

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

          img {
            width: 100%;
            height: 100%;
          }
        }

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

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

    .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>
