<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
        label="围栏状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.fenceState == 0">已启用</span>
          <span style="margin-left: 10px" v-if="scope.row.fenceState == 1">已停用</span>
        </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="出行状态">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-if="scope.row.fenceCondition == 0">驶入</span>
          <span style="margin-left: 10px" v-if="scope.row.fenceCondition == 1">驶出</span>
        </template>
      </el-table-column>
      <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="['business:fence:fenceUpdate']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleFenceUpdate(scope.row)"
          >编辑电子围栏
          </el-button>
          <el-button
            v-hasPermi="['business:fence:fenceState']"
            v-if="scope.row.fenceState==1"
            icon="el-icon-check"
            size="mini"
            type="text"
            @click="handleStateChange(scope.row)"
          >启用
          </el-button>
          <el-button
            v-hasPermi="['business:fence:fenceState']"
            v-if="scope.row.fenceState==0"
            icon="el-icon-close"
            size="mini"
            type="text"
            @click="handleFenceStateChange(scope.row)"
          >停用
          </el-button>
          <el-button
            v-hasPermi="['business:fence:fenceDelete']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleFenceDelete(scope.row)"
          >删除
          </el-button>
          <el-button
            v-hasPermi="['business:fence:fenceDelete']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(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="fenceInsertRequest.logoIds" @change="handleChange">
            <el-checkbox v-for="item in logo" :key="item.logoId"  :label="item.logoId"  >{{item.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>



    <el-dialog title="修改电子围栏" :visible.sync="dialogFormVisible2">
      <el-form :model="fenceUpdateRequest">
        <el-form-item label="围栏编号" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.fenceId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="围栏名称" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.fenceName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="经纬度" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.fenceLongitudeLatitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子围栏描述信息" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.fenceDescription" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子围栏创建时间" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.createTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子围栏修改时间" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.updateTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维护负责人" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.maintainerName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="fenceUpdateRequest.fenceState" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="运行状态" :label-width="formLabelWidth">
          <el-select v-model="fenceUpdateRequest.fenceCondition" placeholder="请选择运行状态">
            <el-option  label="驶入" value="0"></el-option>
            <el-option  label="驶出" value="1"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateFence">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import {fenceList, changeFenceStatus, queryByLogo, fenceDelete, fenceAdd, fenceUpdate} from "@/api/couplet/fence";
import path from "path";
export default {
  components: {},
  data() {
    return {
      // 查询参数
      queryParams: {},
      fence: [{}],
      fenceUpdateRequest:{},
      fenceInsertRequest:{
        logoIds:[]
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      formLabelWidth: '120px',
      checkAll: false,
      logo: [
        {
          logoId:'',
          logoName:'',
        }
      ],
      checkedLogo: [],
      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;
    },
    handleChange(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(){
      fenceAdd(this.fenceInsertRequest).then(
        res=>{
          this.$message.success("新增成功")
        }
      )
      this.dialogFormVisible = false;
    },
    /**
     * 查询多选框
     * @param row
     */
    findByLogo(){
      queryByLogo().then(
        res=>{
          this.logo=res.data
        }
      )
    },
    // 围栏状态修改
    handleFenceStateChange(row) {
      debugger
      if (row.fenceState === 0){
        row.fenceState = 1
        this.$modal.confirm('确认要停用状态吗？').then(function () {
          return changeFenceStatus(row);
        }).then(() => {
          this.$modal.msgSuccess( "停用成功");
        })
      }
    },
    handleStateChange(row) {
      /**
       * 启用
       */
      if (row.fenceState === 1) {
        row.fenceState = 0
        this.$modal.confirm('确认要启用状态吗？').then(function () {
          return changeFenceStatus(row);
        }).then(() => {
          this.$modal.msgSuccess("启用成功");
        })

      }
    },
    /**
     * 电子围栏删除
     * @param map
     */
    handleFenceDelete(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("删除失败");
      })
    },
    /**
     * 编辑电子围栏图形
     */
    handleFenceUpdate(row){
      this.$router.push({path: '/business/fence/container', query: {drawGraph: row}})
    },
    handleUpdate(row){
      this.dialogFormVisible2=true;
      this.fenceUpdateRequest=row

    },
    /**
     * 修改电子围栏
     */
    updateFence(){
      fenceUpdate(this.fenceUpdateRequest).then(
        res=>{
          this.$message.success("修改成功")
          this.dialogFormVisible2=false;
        }
      )
    }
  },
  created() {
    this.queryByFenceList()
    this.findByLogo()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {

  },
};
</script>

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

.fence-container {
  padding: 20px;
}

</style>
