<template>
  <div class="app-container">
    <div class="table1">
      <div class="search">
        <el-input v-model="table1.parammaps.code" placeholder="接收器编号" style="width: 180px;" class="filter-item" clearable />
        <el-select v-model="table1.parammaps.status" filterable placeholder="启用状态" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in table1.enableStatusList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-button class="successBorder" @click="handleSearch1">查询</el-button>
        <el-button class="successBorder" @click="handleRefresh1">重置</el-button>
      </div>
      <div class="operation">
        <el-button  class="success" icon="el-icon-plus" @click="clickCreate">新增</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="接收器ID" min-width="60px" align="center" prop="id" />
          <el-table-column label="接收器编号" min-width="60px" align="center" prop="code" />
          <el-table-column label="牧场名称" min-width="60px" align="center" prop="pasturename" />
          <el-table-column label="牧场编号" min-width="60px" align="center" prop="pasturecode" />
          <el-table-column label="牛舍名称" min-width="60px" align="center" prop="barname" />
          <el-table-column label="SIM卡号" min-width="60px" align="center" prop="card" />
          <el-table-column label="启用状态" min-width="60px" align="center" prop="status">
            <template slot-scope="{row}">
              <span v-if="row.status == '1'">已启用</span>
              <span v-else>未启用</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="安装位置" min-width="60px" align="center" prop="location" /> -->
          <el-table-column label="最后更新时间" min-width="60px" align="center" prop="updatedate" />
          <el-table-column label="操作" min-width="60px" align="center">
            <template slot-scope="{row}">
              <a @click="clickEdit(row)" style="text-decoration: underline;color: #0000FF;">编辑</a>
              <a @click="clickSee(row)" style="text-decoration: underline;color: #0000FF;margin-left: 10px;">查看位置</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[edit.dialogStatus]"  :visible.sync="edit.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="edit">
        <el-form ref="temp" :rules="edit.rules" :model="edit.temp" label-position="right" label-width="150px" style="width: 100%;margin:0 auto 50px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="启用状态:" prop="status">
                <el-switch v-model="edit.temp.status" active-value="1" inactive-value="0" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="接收器编号:" prop="code">
                <el-input v-model="edit.temp.code" placeholder="接收器编号" style="width: 100%;" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="牧场:" prop="pastureid">
                <el-select v-model="edit.temp.pastureid" filterable placeholder="牧场名称" class="filter-item" style="width: 100%;" @change="changePasture">
                  <el-option v-for="item in pastureList" :key="item.pastureid" :label="item.pasturename" :value="item.pastureid" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="16">
              <el-form-item label="牧场编号:" prop="pasturecode">
                <el-input v-model="edit.temp.pasturecode" placeholder="牧场编号" style="width: 100%;" class="filter-item" disabled />
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col :span="16">
              <el-form-item label="牛舍名称:" prop="barid">
                <el-select v-model="edit.temp.barid" filterable placeholder="牛舍名称" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in cowshedList" :key="item.id" :label="item.bname" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="SIM卡号:" prop="simid">
                <el-select v-model="edit.temp.simid" filterable placeholder="SIM卡号" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in simCardList" :key="item.id" :label="item.card" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="16">
              <el-form-item label="安装位置:" prop="location">
                <el-input v-model="edit.temp.location" placeholder="安装位置" style="width: 100%;" class="filter-item" :disabled="edit.dialogStatus == 'editTxt'" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="save" :disabled="isokDisable" @click="edit.dialogStatus =='createTxt'?createData():editData()">确认</el-button>
        <el-button class="cancelClose" @click="edit.dialogFormVisible = false; ">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog  :title="textMap[see.dialogStatus]"  :visible.sync="see.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="see">
        <div>
          <b style="margin-right: 10px;display:inline-block;width:100px;text-align:right;">接收器编号:</b>
          <span>{{see.temp.code}}</span>
        </div>
        <div>
          <b style="margin-right: 10px;display:inline-block;width:100px;text-align:right;">启用状态:</b>
          <span v-if="see.temp.status == 1">启用</span>
          <span v-else>未启用</span>
        </div>
        <div>
          <b style="margin-right: 10px;display:inline-block;width:100px;text-align:right;">最后更新时间:</b>
          <span>{{see.temp.updatedate}}</span>
        </div>
        <div class="content">
          <div class="draggable-box" id="box">
            <img :src="see.bgImg" style="height: 100%;width: 100%;">
            <div class="draggable-item"  v-for="(item,index) in see.positionList" :key="index" :style="item.style">
            {{item.title}}
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose1" @click="see.dialogFormVisible = false; ">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { postJson,getJson } from '@/api/common'
  // import draggable from '@/directive/el-drag-dialog/drag2'
  import Cookies from 'js-cookie'
  export default {
    // directives: { draggable },
    name: 'NeckRingList',
    components: { Pagination },
    data() {
      return {
        pastureList:[],   //牧场名称
        cowshedList:[],   //牛舍名称
        simCardList:[],   //SIM卡号
        table1:{
          enableStatusList:[{id:1,name:'已启用'},{id:0,name:'未启用'}],
          parammaps: {status: '', code:''},
          offset: 1, pagecount: parseInt(Cookies.get('pageCount')),pageNum:'',pageSize:'',total: 0, listLoading: true, tableKey: 0, list: []
        },
        edit:{
          dialogStatus: '',
          dialogFormVisible: false,
          rules:{
            code:[{ type: 'string', required: true, message: '必填', trigger: 'change' }],
          },
          temp:{}
        },
        isokDisable:false,
        textMap: {
          editTxt: '编辑',
          createTxt:'新增',
          seeTxt:'查看位置'
        },
        see:{
          dialogStatus: '',
          dialogFormVisible: false,
          temp:{},
          positionList:[],
          bgImg:''
        },
        rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
        cellStyle: { padding: 0 + 'px' }
      }
    },

    created() {
      this.getList1()
      this.getPastureList()
      // this.getCowshedList()
      this.getSimCardList()
    },
    methods: {
      getList1() {
        this.table1.listLoading = true
        let status = ''
        if(this.table1.parammaps.status === '' || this.table1.parammaps.status === null){
          status = -1
        }else{
          status = this.table1.parammaps.status
        }
        let data = 'index=' + this.table1.offset
        + '&pagesize=' + this.table1.pagecount
        + '&code=' + this.table1.parammaps.code
        + '&status=' + status

        let url = 'receiver/list?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.table1.list = response.data.list
            this.table1.pageNum = this.table1.offset
            this.table1.pageSize = this.table1.pagecount
          } 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 = {
          status: '',
          code:''
        },
        this.getList1()
      },
      getPastureList() {
        let data = 'index=' + 1
        + '&pagesize=' + ''
        let url = 'public/pasture?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.pastureList = response.data.list
          }else{
            this.pastureList = []
          }
        })
      },
      getCowshedList() {
        let data = 'index=' + 1
        + '&pagesize=' + ''
        + '&pastureid=' + this.edit.temp.pastureid
        let url = 'public/housephy?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.cowshedList = response.data.list
          }else{
            this.cowshedList = []
          }
        })
      },
      getSimCardList() {
        let data = 'index=' + 1
        + '&pagesize=' + ''
        let url = 'sim/pull?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.simCardList = response.data.list
          }else{
            this.simCardList = []
          }
        })
      },
      changePasture(item){
        this.edit.temp.pasturecode = this.pastureList.find(obj => obj.pastureid === item).pasturecode
        this.edit.temp.barid = ''
        this.getCowshedList()
      },
      clickCreate(){
        console.log('新增')
        this.edit.dialogFormVisible = true
        this.edit.dialogStatus = 'createTxt'
        this.edit.temp = {
          status:'',
          code:'',
          pastureid:'',
          barid:'',
          location:'',
          simid:''
        }
      },
      createData(){
        console.log('新增保存')
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 3000)
        this.$refs['temp'].validate(valid => {
          if (valid) {
            console.log(this.edit.temp,'this.edit.temp')
            let data = {
              status:this.edit.temp.status,
              code:this.edit.temp.code,
              pastureid:this.edit.temp.pastureid,
              barid:this.edit.temp.barid,
              simid:this.edit.temp.simid,
              location:this.edit.temp.location
            }
            let url = 'receiver/add'
            postJson(url,data).then(response => {
              if (response.code == 200) {
                this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
                this.edit.dialogFormVisible = false
                this.getList1()
                this.getSimCardList()
              }else{
                this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
              }
            })
          }
        })
      },
      clickEdit(row){
        console.log('编辑')
        row.status =  String(row.status)
        this.edit.temp = Object.assign({}, row)
        this.edit.dialogFormVisible = true
        this.edit.dialogStatus = 'editTxt'
        this.getCowshedList()
      },
      editData(){
        console.log('编辑保存')
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 3000)
        this.$refs['temp'].validate(valid => {
          if (valid) {
            console.log(this.edit.temp,'this.edit.temp')
            let data = {
              id:this.edit.temp.id,
              status:this.edit.temp.status,
              code:this.edit.temp.code,
              pastureid:this.edit.temp.pastureid,
              barid:this.edit.temp.barid,
              simid:this.edit.temp.simid,
              location:this.edit.temp.location
            }
            let url = 'receiver/edit'
            postJson(url,data).then(response => {
              if (response.code == 200) {
                this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
                this.edit.dialogFormVisible = false
                this.getList1()
                this.getSimCardList()
              }else{
                this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
              }
            })
          }
        })
      },
      clickSee(row){
        this.see.positionList = []
        this.see.bgImg = process.env.VUE_APP_BASE_API+row.image
        row.status == 1 ? row.style.background = 'green' : row.style.background = 'red'
        if(row.style.left !== '' && row.style.left !== ''){
          row.title = row.id
          this.see.positionList.push(row)
        }
        console.log(this.see.positionList,'this.see.positionList')
        this.see.temp = Object.assign({}, row)
        this.see.dialogFormVisible = true
        this.see.dialogStatus = 'seeTxt'
      }
    }
  }
</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>
