<template>
  <div>
    <br>
    <el-form ref="queryParams" :inline="true" :model="queryParams" size="small">
      <el-form-item label="围栏名称" prop="roleName">
        <el-input
          v-model="queryParams.fenceName"
          clearable
          placeholder="请输入围栏名称"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.fenceState" placeholder="请选择活动区域">
          <el-option label="启用" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-refresh-left" size="mini" type="danger" @click="refreshList" />
      </el-form-item>
    </el-form>
    <template>
      <el-button type="info" @click="dialogFormVisible = true">新增</el-button>
    </template>

    <el-table :data="fence">
      <el-table-column label="围栏名称" prop="fenceName" width="120"/>
      <el-table-column label="围栏经纬度" prop="fenceLongitudeLatitude" width="150"/>
      <el-table-column label="围栏描述" prop="fenceDescription" width="150"/>
      <el-table-column align="center" label="状态" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.fenceState"
            active-value="0"
            inactive-value="1"
            @change="handleFenceStateChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="最近修改时间" prop="updateTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="维护人" prop="maintainerName" width="100"/>
      <el-table-column label="围栏标识" prop="logoName" width="100"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['system:role:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            v-hasPermi="['system:role:remove']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleFenceDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </div>
    <!-- Form -->

    <el-dialog title="新增电子围栏" :visible.sync="dialogFormVisible">
      <el-form :model="fenceInsertRequest">
        <el-form-item label="围栏名称" :label-width="formLabelWidth">
          <el-input v-model="fenceInsertRequest.fenceName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电子围栏描述信息" :label-width="formLabelWidth">
          <el-input v-model="fenceInsertRequest.fenceDescription" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维护负责人" :label-width="formLabelWidth">
          <el-input v-model="fenceInsertRequest.maintainerName" autocomplete="off"></el-input>
        </el-form-item>
        <template>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="logoIds" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="logo in logo" :label="logo.logoName" :key="logo.logoId">{{logo.logoName}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFence">确 定</el-button>
      </div>
    </el-dialog>

    <div class="mapBox">
      <!--    使用高德地图的组件-->
      <el-amap vid="amapDemo" :zoom="zoom" :center="center" style="height: 600px">
        <!--      el-amap-marker>: 通过v-for指令循环遍历markers数组，-->
        <!--      并为每个标记创建一个el-amap-marker组件，将标记的位置(position)绑定到数组中的相应数据。-->
        <el-amap-marker
          v-for="marker in markers"
          :position="marker.position"
          :events="marker.events"
          :key="marker.index"
        ></el-amap-marker>
        <el-amap-info-window
          v-for="window in windows"
          :offset="window.offset"
          :position="window.position"
          :content="window.content"
          :open="window.open"
          :key="window.index"
        ></el-amap-info-window>
      </el-amap>
    </div>

  </div>


</template>

<script>
import {fenceList, changeFenceStatus, queryByLogo, fenceDelete, fenceAdd} from "@/api/couplet/fence";
import {changeRoleStatus} from "@/api/system/role";
import log from "@/views/monitor/job/log.vue";

export default {
  components: {},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 单位信息
      unit: "xxxxx政府司法局",
      address: "xx省xx市xxxxx大道东433号",
      // markers和windows数组用于存储地图标记和信息窗口的数据结构。
      markers: [],
      windows: [],
      center: [116.39, 39.9],
      zoom: 16,
      // currentPosition: null, // 新增一个用于存储当前经纬度的变量
      label: {
        content: "自定义标题",
        offset: [10, 12],
      },
      // 查询参数
      queryParams: {},
      fence: [{}],
      fenceUpdateRequest:{},
      fenceInsertRequest:{},
      dialogFormVisible: false,
      formLabelWidth: '120px',
      checkAll: false,
      logo: [],
      logoIds:{},
      // cities: cityOptions,
      isIndeterminate: true,
      fenceChangeState:{}

    };
  },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryByFenceList();
    },
    /**
     * 列表按钮
     */
    queryByFenceList(){
      let queryParams = this.queryParams;
      fenceList(queryParams).then(
        res=>{
          this.$message.success("查询成功")
          this.fence=res.data.rows
        }
      )
    },
    /**
     * 重置
     */
    resetQuery(){
      this.queryParams.fenceState='';
      this.queryParams.fenceName='';
    },
    /**
     * 刷新列表
     */
    refreshList(){
      this.queryByFenceList()
    },
    /**
     * 全选
     * @param val
     */
    handleCheckAllChange(val) {
      this.checkedCities = val ? this.logo : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.logo.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.logo.length;
    },
    /**
     * 分页
     * @param val
     */
    handleSizeChange(val) {
      this.queryParams.pageSize = val
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.queryByFenceList()
    },
    /**
     * 新增数据
     */
    addFence(){
      this.dialogFormVisible = false;
      fenceAdd(this.fenceInsertRequest).then(
        res=>{
          this.$message.success("新增成功")
        }
      )
    },
    /**
     * 查询多选框
     * @param row
     */
    findByLogo(){
      queryByLogo().then(
        res=>{
          this.logo=res.data
          console.log(res)
        }
      )

    },
    // 围栏状态修改
    handleFenceStateChange(row) {
      // let text = row.status === "0" ? "启用" : "停用";
      // this.$modal.confirm('确认要"' + text + '"状态吗？').then(function () {
      this.$modal.confirm('确认要修改状态吗？').then(function () {
        return changeFenceStatus(row);
      }).then(() => {
        this.$modal.msgSuccess( "成功");
        // this.$modal.msgSuccess(text + "成功");
      }).catch(function () {
        row.status = row.status === "0" ? "1" : "0";
      });
    },
    /**
     * 电子围栏删除
     * @param map
     */
    handleFenceDelete(row){
      console.log(row)
      var fenceId = row.fenceId;
      this.$modal.confirm('确认要修改编号为'+fenceId+'的信息吗？').then(function () {
        return fenceDelete(fenceId)
      }).then(() => {
        this.$modal.msgSuccess("删除成功啦!");
        this.queryByFenceList()
      }).catch(function () {
        this.$modal.msgError("删除失败");
      })
    },

    // parseTime,
    // 初始化地图
    initMap(map) {
      this.markers.push({
        position: [116.39, 39.9],
      });
      this.windows.push({
        position: [116.39, 39.9],
        // position: this.currentPosition,
        content:
          "<h2 style='font-weight: bold;width: 400px;margin: 10px'>" +
          this.unit +
          "</h2>" +
          "<div style='margin: 10px'>" +
          "地址：" +
          this.address +
          "</div>",
        offset: [0, -20],
        open: true,
      });

      // var map = new AMap.Map("container", {
      //   zoomEnable: true, //是否禁止缩放
      //   zoom: 12, //缩放比例
      //   dragEnable: false, //禁止拖动
      //   cursor: "hand", // 鼠标在地图上的表现形式，小手
      // });
      // // 初始化工具条
      // map.plugin(["AMap.ToolBar"], function () {
      //   map.addControl(new AMap.ToolBar());
      // });
    },
  },
  created() {
    this.queryByFenceList()
    this.findByLogo()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
    this.initMap();
  },
};
</script>

<style lang="scss" scoped>
.mapBox {
  position: relative;
  width: 50%;
  height: 600px;
}

.fence-container {
  padding: 20px;
}

</style>
