<template>
  <div class="app-container">
    <div class="table1">
      <div class="search">
        <el-select v-model="table1.parammaps.pastureid" filterable placeholder="全部牧场" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in table1.pastureList" :key="item.pastureid" :label="item.pasturename" :value="item.pastureid" />
        </el-select>
        <!-- <el-input v-model="table1.parammaps.drivername" placeholder="牧场编号" style="width: 180px;" class="filter-item" clearable /> -->
        <el-input v-model="table1.parammaps.barname" placeholder=" 牛舍名称" style="width: 180px;" class="filter-item" clearable />
        <el-button class="successBorder" @click="handleSearch1()">查询</el-button>
        <el-button class="successBorder" @click="handleRefresh1()">重置</el-button>
      </div>
      <div class="table">
        <el-table :key="table1.tableKey" v-loading="table1.listLoading" element-loading-text="给我一点时间"
          :data="table1.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle"
          :cell-style="cellStyle" class="elTable table-fixed">
          <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
              <span v-if="table1.pageNum">{{ scope.$index + (table1.pageNum-1) * table1.pageSize + 1 }}</span>
              <span v-else>1</span>
            </template>
          </el-table-column>
          <el-table-column label="牧场名称" min-width="60px" align="center" prop="FARM_NAME" />
          <el-table-column label="牛舍名称" min-width="60px" align="center" prop="PHYSICALNAME" />
          <el-table-column label="接收器总数" min-width="60px" align="center" prop="总数" />
          <el-table-column label="已启用" min-width="60px" align="center" prop="启用" />
          <el-table-column label="未启用" min-width="60px" align="center" prop="未启用" />
          <el-table-column label="操作" min-width="60px" align="center">
            <template slot-scope="{row}">
              <a @click="clickSet(row)" style="text-decoration: underline;color: #0000FF;">设置</a>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="table1.total>0" :total="table1.total" :page.sync="table1.offset" :limit.sync="table1.pagecount" @pagination="getList1()" />
      </div>
    </div>

    <!-- 编辑 -->
    <el-dialog :title="textMap[set.dialogStatus]" :visible.sync="set.dialogFormVisible" :close-on-click-modal="false"
      width="50%">
      <div class="set">
        <el-upload style="display: inline-block;margin-right: 10px;border-radius:5px;" class="save" :show-file-list="false" list-type="picture" :file-list="set.fileList" :action="set.uploadImageUrl" :on-success="handleSuccess" :headers="set.headers" :data="set.data" >
          <el-button class="save">上传平面图</el-button>
        </el-upload>
        <el-button class="save" :disabled= "set.bgImg == null || set.positionLength == 0 || set.positionLength == set.positionList.length" @click="addReceiver()">添加接收器</el-button>
        <div style="float: right;">
          <div style="display: inline-block;"><span style="width: 10px;height: 10px;display: inline-block;border-radius: 5px;background: green;margin-right:10px;"></span>已启用:{{set.enabledTotal}}</div>
          <div style="display: inline-block;margin-left: 10px;"><span style="width: 10px;height: 10px;display: inline-block;border-radius: 5px;background: red;margin-right:10px;"></span>未启用:{{set.notEnabledTotal}}</div>

        </div>
        <div class="content">
          <div class="draggable-box" id="box">
            <img :src="set.bgImg" style="height: 100%;width: 100%;">
            <div class="draggable-item"  v-for="(item,index) in set.positionList" :key="index" :style="item.style" @dblclick="dblclickReceiver(item)" @onmouseup="onmouseup(item)"  v-draggable="greet">
            {{item.title}}
            <span v-show="false" class="myspan">{{item.myId}}</span>
            <!-- <span class="myspan">{{item.myId}}</span> -->
              <div class="follow" v-if="item.display">
                <span @click="clickDel(item)">删除</span><br/>
                <span v-if="item.enable == 1" @click="clickIsenable(item,1)">停用</span>
                <span v-else @click="clickIsenable(item,0)">启用</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="save" :disabled="isokDisable" @click="setData()">确认</el-button>
        <el-button class="cancelClose" @click="set.dialogFormVisible = false; ">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { postJson,getJson,getUUID } from '@/api/common'
  import Cookies from 'js-cookie'
  import draggable from '@/directive/el-drag-dialog/drag2'
  import { getToken } from '@/utils/auth'
  export default {
    directives: { draggable },
    name: 'ReceiverInstallation',
    components: { Pagination },
    data() {
      return {
        table1: {
          pastureList:[],
          page: 1, offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
          parammaps: { pastureid: '', barname:'' },
          tableKey: 0, list: [], total: 0, listLoading: true
        },
        set: {
          dialogStatus: '',
          dialogFormVisible: false,
          rules: {},
          temp: {},
          positionLength:0,
          positionList:[],//位置列表
          noneList:[],
          num:0,
          enabledTotal:0,
          notEnabledTotal:0,
          fileList:[],//上传列表
          bgImg:null,
          // bgImg:'https://s3.bmp.ovh/imgs/2022/07/20/6c1ac9b5151fca72.png'
          headers: { id: 1, token: getToken() },
          uploadImageUrl: process.env.VUE_APP_BASE_API + 'housephy/image',
          data:{
            id:''
          }
        },
        isokDisable: false,
        textMap: {
          setTxt: '设置'
        },
        rowStyle: {
          maxHeight: 30 + 'px',
          height: 30 + 'px'
        },
        cellStyle: {
          padding: 0 + 'px'
        },
      }
    },
    created() {
      this.getList1()
      this.getPastureList()
    },
    methods: {
      getPastureList(){
        let data = 'index=' + 1
        + '&pagesize=' + ''
        let url = 'public/pasture?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.table1.pastureList = response.data.list
          } else {
            this.table1.pastureList = []
          }
        })
      },
      getList1() {
        this.table1.listLoading = true
        let data = {
          name:'getReceiverInfo',
          page: this.table1.page, offset: this.table1.offset, pagecount: this.table1.pagecount, returntype: 'Map',
          parammaps: this.table1.parammaps
        }
        let url = 'authdata/GetDataByName'
        postJson(url, data).then(response => {
          if (response.data.list !== null) {
            console.log('table数据', response.data.list)
            this.table1.list = response.data.list
            this.table1.pageNum = response.data.pageNum
            this.table1.pageSize = response.data.pageSize
          } else {
            this.table1.list = []
          }
          this.table1.total = response.data.total
          setTimeout(() => {
            this.table1.listLoading = false
          }, 100)
        })
      },
      handleSearch1() {
        this.table1.offset = 1
        this.getList1()
      },
      handleRefresh1() {
        this.table1.offset = 1
        this.table1.parammaps.pastureid = ''
        this.table1.parammaps.barname = ''
        this.getList1()
      },
      clickSet(row) {
        this.set.temp = Object.assign({}, row)
        this.set.dialogStatus = 'setTxt'
        this.set.data.id = this.set.temp.barid
        this.getImgList()
        this.getPositionList()
      },
      getImgList(){
        let data = 'id='+this.set.temp.barid
        let url = 'image?'
        getJson(url, data).then(response => {
            console.log('table数据', response)
          if (response.code == 200) {
            if(response.data !== null){
              this.set.bgImg = process.env.VUE_APP_BASE_API + response.data
            }else{
              this.set.bgImg = null
            }
            console.log(this.set.bgImg,'img')
          } else {
            this.set.bgImg = null
          }
          this.set.dialogFormVisible = true
        })
      },
      getPositionList(){
        let data = 'barid='+this.set.temp.barid
        let url = 'receiver/coordinates?'
        getJson(url, data).then(response => {
            console.log('table数据', response)
          if (response.code == 200) {
            this.set.positionList = []
             this.set.noneList = []
             this.set.enabledTotal = 0
             this.set.notEnabledTotal = 0
            response.data.list.forEach((item,key)=>{
              item.myId = getUUID(32, 16)
              item.display = false
              item.title = item.id
              item.enable == 1 ? item.style.background = 'green' : item.style.background = 'red'
              if(item.style.left !== '' && item.style.left !== ''){
                this.set.positionList.push(item)
                if(item.enable == 1){
                  this.set.enabledTotal += 1
                }else{
                  this.set.notEnabledTotal += 1
                }
              }else{
                this.set.noneList.push(item)
              }
            })
            this.set.positionLength = response.data.list.length
            // this.set.positionList = response.data.list
            console.log(this.set.noneList,'noneList')
            console.log(this.set.positionList.length,'positionList')
            console.log(this.set.positionLength,'positionLength')
          } else {
            this.set.positionLength = 0
            this.set.positionList = []
            this.set.noneList = []
          }
        })
      },
      handleSuccess(response, file, fileList){
        console.log(response, file, fileList)
        this.set.fileList = fileList
        this.set.bgImg = fileList[fileList.length-1].url
      },
      setData() {
        console.log('设置保存',this.set.positionList)
        let list = []
        this.set.positionList.forEach((item,key)=>{
          let obj = {}
          obj.barid = this.set.temp.barid
          obj.left = item.style.left
          obj.top = item.style.top
          obj.id = item.id
          obj.enable = item.enable
          obj.pastureid = item.pastureid
          list.push(obj)
        })
        if(this.set.noneList.length > 0){
          this.set.noneList.forEach((item,key)=>{
            let obj = {}
            obj.barid = this.set.temp.barid
            obj.left = ''
            obj.top = ''
            obj.id = item.id
            obj.enable = item.enable
            obj.pastureid = item.pastureid
            list.push(obj)
          })
        }
        let url = 'receiver/coordinates/edit'
        postJson(url,list).then(response => {
          if (response.code == 200) {
            this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
            this.set.dialogFormVisible = false
            this.getList1()
          }else{
            this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
          }
        })
      },
      addReceiver(){
        this.set.num +=1
        console.log('添加接收器',this.set.num)
        let obj = {}
        obj.title = this.set.noneList[0].id
        obj.id = this.set.noneList[0].id
        obj.pastureid = this.set.noneList[0].pastureid
        this.set.noneList.splice(0,1)
        obj.myId = getUUID(32, 16)
        obj.enable = 1
        obj.style = {
          background: 'green',
          left: '0px',
          top: '0px',
        }
        this.set.positionList.push(obj)
        // 添加后重新核算已启用跟未启用的数量
        this.set.enabledTotal = 0
        this.set.notEnabledTotal = 0
        this.set.positionList.forEach((value,key)=>{
          if(value.style.left !== '' && value.style.top !== ''){
            if(value.enable == 1){
              this.set.enabledTotal +=1
            }else{
              this.set.notEnabledTotal += 1
            }
          }
        })
        console.log('添加接收器',this.set.positionList)
      },
      dblclickReceiver(item){
        this.$set(item,'display',true)
      },
      clickDel(item){
        console.log('点击了删除',item)
        // 判断noneList是否为空,如果为空,直接push,else只添加没有对应的id的参数
        if(this.set.noneList.length == 0){
          let obj = {}
          obj.id = item.id
          obj.pastureid = item.pastureid
          obj.pastureid = item.pastureid
          this.set.noneList.push(obj)
        }else{
           this.set.noneList.forEach((value,key)=>{
             if(item.id !== value.id){
               let obj = {}
               obj.id = item.id
               obj.pastureid = item.pastureid
               obj.pastureid = item.pastureid
               this.set.noneList.push(obj)
             }
           })
        }
        // 删除对应的点
        this.set.positionList.forEach((value,key)=>{
          if(item.id == value.id){
            this.set.positionList.splice(key,1)
          }
        })
        // 删除后重新核算已启用跟未启用的数量
        this.set.enabledTotal = 0
        this.set.notEnabledTotal = 0
        this.set.positionList.forEach((value,key)=>{
          if(value.style.left !== '' && value.style.top !== ''){
            if(value.enable == 1){
              this.set.enabledTotal +=1
            }else{
              this.set.notEnabledTotal += 1
            }
          }
        })
         // this.set.positionLength =  this.set.positionList.length
         this.$set(item,'display',false)
         console.log('点击了删除positionList',this.set.positionList)
         console.log('点击了删除noneList',this.set.noneList)
      },
      clickIsenable(item,item2){
        if(item2 == 1){
          item.enable = 0
        }else{
          item.enable = 1
        }
        item.enable == 1 ? item.style.background = 'green' : item.style.background = 'red'
        this.set.enabledTotal = 0
        this.set.notEnabledTotal = 0
        this.set.positionList.forEach((item,key)=>{
          if(item.enable == 1){
            this.set.enabledTotal += 1
          }else{
            this.set.notEnabledTotal += 1
          }
        })
        this.$set(item,'display',false)
      },
      onmousemove(item){
        console.log('item', item)
      },
      greet(val) {
        console.log('val', val)
        this.set.positionList.forEach((item,key)=>{
          if(item.myId == val.myId){
            item.style.left = val.x
            item.style.top = val.y
          }
        })
        // this.val = val
        // this.set.positionList.
      },

    }
  }
</script>

<style scoped lang="scss">
  .draggable-box {
    position: relative;
    border: 1px solid #333;
    margin-left: 5%;
    margin-top: 20px;
    width: 90%;
    height: 500px;
  }
  .draggable-item{
    width: 30px;
    height: 30px;
    border-radius:50%;
    position: absolute;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  .follow{
    cursor: pointer;
    position: absolute;
    height: 40px;
    width: 40px;
    background: #fff;
    color: red;
    line-height: 20px;
    left: 35px;
    top: 0;
    z-index: 2;
    border-radius: 5px;
  }
  .follow span{
    text-decoration: underline;
  }
</style>
