<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-input v-model="table1.parammaps.cownum" placeholder="牛号" style="width: 180px;" class="filter-item" clearable />
        <el-date-picker v-model="table1.parammaps.inputDatetime" type="daterange"  class="filter-item" range-separator="至" start-placeholder="最后接收时间" end-placeholder="最后接收时间" />
        <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="REGIST_NUM_2" />
          <el-table-column label="牛号" min-width="60px" align="center" prop="COW_NUM" />
          <el-table-column label="牛舍名称" min-width="60px" align="center" prop="HOUSE_NAME" />
          <el-table-column label="最后接收时间" min-width="60px" align="center" prop="createtime" />
          <el-table-column label="最后定位" min-width="60px" align="center">
            <template slot-scope="{row}">
              <a @click="clickFind(row)" style="text-decoration: underline;color: #0000FF;">查找</a>
            </template>
          </el-table-column>
          <el-table-column label="处理时间" min-width="60px" align="center" prop="measuretime" />
          <el-table-column label="处理措施" min-width="60px" align="center" prop="measure" />
          <el-table-column label="操作" min-width="60px" align="center">
            <template slot-scope="{row}">
              <a @click="clickHandle(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[find.dialogStatus]" :visible.sync="find.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="find">
        查找
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose1" @click="find.dialogFormVisible = false; ">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 处理 -->
    <el-dialog :title="textMap[handle.dialogStatus]" :visible.sync="handle.dialogFormVisible" :close-on-click-modal="false" width="40%">
      <div class="handle">
        <el-form ref="handleTemp" :rules="handle.rules" :model="handle.temp" label-position="right" label-width="150px" style="width: 100%;margin:0 auto 50px">
          <el-row>
            <el-col :span="20">
              <el-form-item label="脖环号:" prop="REGIST_NUM_2">
                <span>{{handle.temp.REGIST_NUM_2}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="牛号:" prop="COW_NUM">
                <span>{{handle.temp.COW_NUM}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="牛舍:" prop="HOUSE_NAME">
                <span>{{handle.temp.HOUSE_NAME}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="最后接收时间:" prop="createtime">
                <span>{{handle.temp.createtime}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="处理措施:" prop="measure">
                <el-select ref="measure" v-model="handle.temp.measureid"  filterable placeholder="处理措施" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in handle.treatmentMeasuresList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </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="clickhandleData()">确认</el-button>
        <el-button class="cancelClose" @click="handle.dialogFormVisible = false; ">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { postJson } from '@/api/common'
  import { parseTime } from '@/utils/index.js'
  import Cookies from 'js-cookie'
  export default {
    name: 'AbnormalNeckRing',
    components: { Pagination },
    data() {
      return {
        table1:{
          page: 1, offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
          parammaps: { cownum:'',code:'',inputDatetime:'',startdate:'',enddate:'' },
          tableKey: 0, list: [], total: 0, listLoading: false
        },
        // 查找
        find:{
          dialogStatus: '',
          dialogFormVisible: false,
        },
        // 处理
        handle:{
          dialogStatus: '',
          dialogFormVisible: false,
          rules:{
            measureid: [{ type: 'String', required: true, message: '必填', trigger: 'change' }],
          },
          temp:{},
          treatmentMeasuresList:[{id:'0',name:'信号范围之外'},{id:'1',name:'更换'}]
        },
        isokDisable:false,
        textMap: {
          handleTxt: '处理',
          findTxt: '查找'
        },
        rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
        cellStyle: { padding: 0 + 'px' }
      }
    },
    created() {
      this.getList1()
    },
    methods: {
      getList1() {
        this.table1.listLoading = true
        if(this.table1.parammaps.inputDatetime !== '' && this.table1.parammaps.inputDatetime !== null){
          this.table1.parammaps.startdate = parseTime(this.table1.parammaps.inputDatetime[0],'{y}-{m}-{d}')
          this.table1.parammaps.enddate = parseTime(this.table1.parammaps.inputDatetime[1],'{y}-{m}-{d}')
        }else{
          this.table1.parammaps.startdate = ''
          this.table1.parammaps.enddate = ''
          this.table1.parammaps.inputDatetime = ''
        }
        let data = {
          name:'getAbnormalStatistics',
          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= {
          cownum:'',
          code:'',
          startdate:'',
          enddate:'',
          inputDatetime:''
        }
        this.getList1()
      },
      clickFind(row){
        console.log('查找')
        this.find.dialogFormVisible = true
        this.find.dialogStatus = 'findTxt'
      },
      clickHandle(row){
        console.log('处理')
        this.handle.temp = Object.assign({}, row)
        this.handle.dialogFormVisible = true
        this.handle.dialogStatus = 'handleTxt'
      },
      clickhandleData(){
         console.log('处理确认')
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 3000)
        this.$refs['handleTemp'].validate(valid => {
          if (valid) {
            let data = {
              name:'updatejbqerr',
              parammaps:{
                measureid:this.handle.temp.measureid,
                id:this.handle.temp.id,
              }
            }
            let url = 'authdata/PostDataByName'
            postJson(url,data).then(response => {
              if (response.code == 200) {
                this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
                this.$refs.handleTemp.resetFields();
                this.handle.dialogFormVisible = false
                this.getList1()
              }else{
                this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
</style>
