<template>
  <div class="app-container">
    <div class="table1">
      <div class="search">
        <el-input v-model="table1.parammaps.batch" placeholder="出厂批次号" style="width: 180px;" class="filter-item" clearable />
        <el-select v-model="table1.parammaps.genre" filterable placeholder="类型" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in table1.typeList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-input-number v-model="table1.parammaps.startcount" class="filter-item" :controls="false" placeholder="出厂数量" />
        <span style="margin-right: 5px;">-</span>
        <el-input-number v-model="table1.parammaps.endcount" class="filter-item" :controls="false" placeholder="出厂数量" />
        <el-input v-model="table1.parammaps.createname" 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="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="出厂批次号" min-width="60px" align="center" prop="batch" />
          <el-table-column label="类型" min-width="60px" align="center" prop="genre">
            <template slot-scope="{row}">
              <span v-if="row.genre == 0">购买</span>
              <span v-else>置换</span>
            </template>
            </el-table-column>
          <el-table-column label="出厂数量" min-width="60px" align="center" prop="count">
            <template slot-scope="{row}">
              <a @click="clickQuantity(row)" style="text-decoration: underline;color: #0000FF;">{{row.count}}</a>
            </template>
          </el-table-column>
          <el-table-column label="关联召回批次数" min-width="60px" align="center" prop="recall">
            <template slot-scope="{row}">
              <a @click="clickRecall(row)" style="text-decoration: underline;color: #0000FF;">{{row.recall}}</a>
            </template>
          </el-table-column>
          <el-table-column label="登记人" min-width="60px" align="center" prop="createname" />
          <el-table-column label="登记日期" min-width="60px" align="center" prop="createtime" />

        </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[quantity.dialogStatus]" :visible.sync="quantity.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="quantity">
        <el-table
          :key="quantity.table1.tableKey"
          v-loading="quantity.table1.listLoading"
          element-loading-text="给我一点时间"
          :data="quantity.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 + (quantity.table1.pageNum-1) * quantity.table1.pageSize + 1 }}</span>
              <span v-else>1</span>
            </template>
          </el-table-column>
          <el-table-column label="脖环号" min-width="60px" align="center" prop="code" />
        </el-table>
        <pagination v-show="quantity.table1.total>0" :total="quantity.table1.total" :page.sync="quantity.table1.offset" :limit.sync="quantity.table1.pagecount" @pagination="getQuantityList" />
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose1" @click="quantity.dialogFormVisible = false; ">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 关联召回批次数 -->
    <el-dialog :title="textMap[recall.dialogStatus]" :visible.sync="recall.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="recall">
        <el-table
          :key="recall.table1.tableKey"
          v-loading="recall.table1.listLoading"
          element-loading-text="给我一点时间"
          :data="recall.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 + (recall.table1.pageNum-1) * recall.table1.pageSize + 1 }}</span>
              <span v-else>1</span>
            </template>
          </el-table-column>
          <el-table-column label="召回批次号" min-width="60px" align="center" prop="batch" />
          <el-table-column label="召回数量" min-width="60px" align="center" prop="count" />
          <el-table-column label="登记人" min-width="60px" align="center" prop="createname" />
          <el-table-column label="登记日期" min-width="60px" align="center" prop="createtime" />
        </el-table>
        <pagination v-show="recall.table1.total>0" :total="recall.table1.total" :page.sync="recall.table1.offset" :limit.sync="recall.table1.pagecount" @pagination="getRecallList" />
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose1" @click="recall.dialogFormVisible = false; ">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 新增 -->
    <el-dialog  :title="textMap[edit.dialogStatus]"  :visible.sync="edit.dialogFormVisible" :close-on-click-modal="false" @close="close" width="70%">
      <div class="edit">
        <el-form ref="editTemp" :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="pastureid">
                <el-select v-model="edit.temp.pastureid" filterable placeholder="牧场" class="filter-item" style="width: 100%;">
                  <el-option v-for="item in table1.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="genre">
                <el-select v-model="edit.temp.genre" filterable placeholder="类型" class="filter-item" style="width: 100%;" @change="changeType">
                  <el-option v-for="item in table1.typeList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="edit.temp.genre !== '' && edit.temp.genre == 0">
            <el-col :span="16">
              <el-form-item label="脖环数量:" prop="count">
                <el-input v-model="edit.temp.count" placeholder="脖环数量" style="width: 100%;" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="batch" v-if="edit.temp.genre == 1" style="border-top: 1px solid #000;">
          <div class="search">
            <el-input v-model="edit.batch.parammaps.batch" placeholder="召回批次号" style="width: 180px;" class="filter-item" clearable />
            <el-input-number v-model="edit.batch.parammaps.startcount" class="filter-item" :controls="false" placeholder="召回数量" />
            <span>-</span>
            <el-input-number v-model="edit.batch.parammaps.endcount" class="filter-item" :controls="false" placeholder="召回数量" />
            <el-input v-model="edit.batch.parammaps.createname" placeholder="登记人" style="width: 180px;" class="filter-item" clearable />
            <el-date-picker v-model="edit.batch.parammaps.inputDatetime" type="daterange"  class="filter-item" range-separator="至" start-placeholder="登记开始日期" end-placeholder="登记结束日期" />
            <el-button class="successBorder" @click="handleBatchSearch">查询</el-button>
            <el-button class="successBorder" @click="handleBatchRefresh">重置</el-button>
          </div>
          <div class="table" style="margin-bottom: 10px;">
            <el-table
              :key="edit.batch.tableKey"
              v-loading="edit.batch.listLoading"
              element-loading-text="给我一点时间"
              :data="edit.batch.list"
              border
              fit
              highlight-current-row
              style="width: 100%;"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
              @selection-change="handleSelectionChange">
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" align="center" type="index" width="50px" />
              <el-table-column label="召回批次号" min-width="60px" align="center" prop="batch" />
              <el-table-column label="召回数量" min-width="60px" align="center" prop="count" />
              <el-table-column label="登记人" min-width="60px" align="center" prop="createname" />
              <el-table-column label="登记日期" min-width="60px" align="center" prop="createtime" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="save" :disabled="isokDisable" @click="createData()">确认</el-button>
        <el-button class="cancelClose" @click="close()">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { postJson,getJson  } from '@/api/common'
  import Cookies from 'js-cookie'
  import { parseTime } from '@/utils/index.js'
  export default {
    name: 'FactoryRegistration',
    components: { Pagination },
    data() {
      return {
        table1:{
          typeList:[{id:0,name:'购买'},{id:1,name:'置换'}],
          pastureList:[],
          page: 1, offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
          parammaps: { batch:'',genre:'',startcount:undefined,endcount:undefined,createname:'',inputDatetime:'',startdate:'',enddate:'' },
          tableKey: 0, list: [], total: 0, listLoading: false
        },
        // 出厂数量
        quantity:{
          dialogStatus: '',
          dialogFormVisible: false,
          temp:{},
          table1:{
            page: 1, offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
            parammaps: { batch:'',genre:'',startcount:undefined,endcount:undefined,createname:'',inputDatetime:'',startdate:'',enddate:'' },
            tableKey: 0, list: [], total: 0, listLoading: false
          },
        },
        // 关联召回批次数
        recall:{
          dialogStatus: '',
          dialogFormVisible: false,
          temp:{},
          table1:{
            page: 1, offset: 1, pagecount: parseInt(Cookies.get('pageCount')),
            parammaps: { batch:'',genre:'',startcount:undefined,endcount:undefined,createname:'',inputDatetime:'',startdate:'',enddate:'' },
            tableKey: 0, list: [], total: 0, listLoading: false
          },
        },

        // 新增
        edit:{
          dialogStatus: '',
          dialogFormVisible: false,
          rules:{
            pastureid: [{ type: 'string', required: true, message: '必填', trigger: 'change' }],
            // count: [{ type: 'string', required: true, message: '必填', trigger: 'change' }],
            genre: [{ type: 'number', required: true, message: '必填', trigger: 'change' }]
          },
          temp:{},
          batch:{
            page: 1, offset: 1, pagecount: '',
            parammaps: { batch:'',startcount:undefined,endcount:undefined,createname:'',inputDatetime:'',startdate:'',enddate:'' },
            tableKey: 0, list: [], total: 0, listLoading: false,
            selectList:[],
            sumCount:''
          },
        },
        isokDisable:false,
        textMap: {
          revokeTxt: '撤销',
          quantityTxt: '',
          recallTxt:'',
          createTxt:'出厂登记',
          batchTxt:'选择批次'
        },
        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 genre = ''
        if(this.table1.parammaps.genre === '' || this.table1.parammaps.genre === null){
          genre = -1
        }else{
          genre = this.table1.parammaps.genre
        }
        let startdate = ''
        let enddate = ''
        if(this.table1.parammaps.inputDatetime !== '' && this.table1.parammaps.inputDatetime !== null){
          startdate = parseTime(this.table1.parammaps.inputDatetime[0],'{y}-{m}-{d}')
          enddate = parseTime(this.table1.parammaps.inputDatetime[1],'{y}-{m}-{d}')
        }else{
          startdate = ''
          enddate = ''
        }
        let startcount = ''
        let endcount = ''
        if(this.table1.parammaps.startcount == undefined){
          startcount = ''
        }else{
          startcount = this.table1.parammaps.startcount
        }
        if(this.table1.parammaps.endcount == undefined){
          endcount = ''
        }else{
          endcount = this.table1.parammaps.endcount
        }
        let data = 'index=' + this.table1.offset
        + '&pagesize=' + this.table1.pagecount
        + '&batch=' + this.table1.parammaps.batch
        + '&startcount=' + startcount
        + '&endcount=' + endcount
        + '&createname=' + this.table1.parammaps.createname
        + '&startdate=' + startdate
        + '&enddate=' + enddate
        + '&genre=' + genre

        let url = 'factory/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 = {
          batch:'',
          genre:'',
          startcount:undefined,
          endcount:undefined,
          createname:'',
          inputDatetime:'',
          startdate:'',
          enddate:''
        },
        this.getList1()
      },
      clickQuantity(row){
        console.log('出厂数量')
        this.quantity.dialogFormVisible = true
        if(row.genre == 0){
          this.textMap.quantityTxt = '脖环列表'+'——类型：'+ '购买'
        }else{
          this.textMap.quantityTxt = '脖环列表'+'——类型：'+ '置换'
        }
        this.quantity.dialogStatus = 'quantityTxt'
        this.quantity.temp = Object.assign({}, row)
        this.quantity.table1.offset = 1
        this.getQuantityList()
      },
      getQuantityList() {
        this.quantity.table1.listLoading = true
        let data = 'index=' + this.quantity.table1.offset
        + '&pagesize=' + this.quantity.table1.pagecount
        + '&factoryid=' + this.quantity.temp.id

        let url = 'ring/listing?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.quantity.table1.list = response.data.list
            this.quantity.table1.pageNum = this.quantity.table1.offset
            this.quantity.table1.pageSize = this.quantity.table1.pagecount
          } else {
            this.quantity.table1.list = []
          }
          this.quantity.table1.total = response.data.total
          setTimeout(() => {
            this.quantity.table1.listLoading = false
          }, 100)
        })
      },
      clickRecall(row){
        console.log('关联召回批次数')
        this.recall.dialogFormVisible = true
        this.recall.dialogStatus = 'recallTxt'
        this.recall.temp = Object.assign({}, row)
        this.recall.table1.offset = 1
        this.getRecallList()
      },
      getRecallList() {
        this.recall.table1.listLoading = true
        let data = 'index=' + this.recall.table1.offset
        + '&pagesize=' + this.recall.table1.pagecount
        + '&recallid=' + this.recall.temp.id

        let url = 'recall/list?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.recall.table1.list = response.data.list
            this.recall.table1.pageNum = this.recall.table1.offset
            this.recall.table1.pageSize = this.recall.table1.pagecount
          } else {
            this.recall.table1.list = []
          }
          this.recall.table1.total = response.data.total
          setTimeout(() => {
            this.recall.table1.listLoading = false
          }, 100)
        })
      },

      clickCreate(){
        this.edit.dialogFormVisible = true
        this.edit.dialogStatus = 'createTxt'
        this.edit.temp = {
          count:'',
          genre:'',
          pastureid:'',
          recall:'',
          recallid:''
        }
        this.edit.batch.selectList = []
      },
      createData(){
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 3000)
        this.$refs['editTemp'].validate(valid => {
          if (valid) {
            console.log(this.edit.temp,'this.edit.temp')
            let data = {
              count:this.edit.temp.count,
              genre:this.edit.temp.genre,
              pastureid:this.edit.temp.pastureid,
              recall:this.edit.batch.sumCount,
              recallid:this.edit.batch.selectList
            }
            if(this.edit.temp.genre == 0){
              if(this.edit.temp.count == ''){
                this.$message({ type: 'warning', message: '请填写脖环数量' })
                return
              }
            }
            if(this.edit.temp.genre == 1){
              if(this.edit.batch.selectList.length == 0 ){
                this.$message({ type: 'warning', message: '请选择召回批次' })
                return
              }
            }
            let url = 'factory/add'
            postJson(url,data).then(response => {
              if (response.code == 200) {
                this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
                this.$refs.editTemp.resetFields();
                this.edit.dialogFormVisible = false
                this.getList1()
              }else{
                this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
              }
            })
          }
        })
      },
      close(){
        this.$refs['editTemp'].resetFields()
        this.edit.dialogFormVisible = false
        this.getList1()
      },
      changeType(item){
        if(item == 1){
          if(this.edit.temp.pastureid == ''){
            this.$message({ type: 'warning', message: '请选择牧场' })
            this.edit.temp.genre = ''
            return
          }
          this.edit.batch.parammaps = {
            pastureid:'',
            batch:'',
            batch:'',
            startcount:undefined,
            endcount:undefined,
            createname:'',
            inputDatetime:''
          }
          this.getBatchList()
        }
      },
      getBatchList() {
        this.table1.listLoading = true
        let startdate = ''
        let enddate = ''
        if(this.edit.batch.parammaps.inputDatetime !== '' && this.edit.batch.parammaps.inputDatetime !== null){
          startdate = parseTime(this.edit.batch.parammaps.inputDatetime[0],'{y}-{m}-{d}')
          enddate = parseTime(this.edit.batch.parammaps.inputDatetime[1],'{y}-{m}-{d}')
        }else{
          startdate = ''
          enddate = ''
        }
		let startcount = ''
		let endcount = ''
		if(this.edit.batch.parammaps.startcount == undefined){
		  startcount = ''
		}else{
		  startcount = this.edit.batch.parammaps.startcount
		}
		if(this.edit.batch.parammaps.endcount == undefined){
		  endcount = ''
		}else{
		  endcount = this.edit.batch.parammaps.endcount
		}
        let data = 'index=' + this.edit.batch.offset
        + '&pagesize=' + this.edit.batch.pagecount
        + '&pastureid=' + this.edit.temp.pastureid
        + '&batch=' + this.edit.batch.parammaps.batch
        + '&startcount=' + startcount
        + '&endcount=' + endcount
        + '&createname=' + this.edit.batch.parammaps.createname
        + '&startdate=' + startdate
        + '&enddate=' + enddate
        + '&replacement=' + 1


        let url = 'recall/list?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.edit.batch.list = response.data.list
          } else {
            this.edit.batch.list = []
          }
          this.edit.batch.total = response.data.total
          setTimeout(() => {
            this.edit.batch.listLoading = false
          }, 100)
        })
      },
      handleSelectionChange(val){
        this.edit.batch.selectList = []
        this.edit.batch.sumCount = 0
        val.forEach((ele)=> {
          this.edit.batch.selectList.push(ele.id)
          this.edit.batch.sumCount += ele.count
        });
      },
      handleBatchSearch(){
        this.edit.batch.offset = 1
        this.getBatchList()
      },
      handleBatchRefresh(){
        this.edit.batch.offset = 1
        this.edit.batch.parammaps = {
          batch:'',
          batch:'',
          startcount:undefined,
          endcount:undefined,
          createname:'',
          inputDatetime:''
        }
        this.getBatchList()
      },

    }
  }
</script>

<style>
</style>
