<template>
  <div>
    <q-input v-model="scaneddata.request_time" style="display:none" />
    <!-- 退货详情单页面显示 -->
    <q-card v-show="!fab" flat :style="{ width: width, height: height }">
      <q-card-section>
        <q-input label="退货单号查询" v-model="dnReturn.id"  autofocus clearable @input="selectList" @clear="clearFn" ref="inputFoucs">
        </q-input>
      </q-card-section>
      <q-scroll-area ref="scrollArea" :thumb-style="thumbStyle" :bar-style="barStyle" :style="{ height: scroll_height, width: width }">
        <q-table
          :data="table_list"
          :columns="columns1"
          row-key="id"
          :title="title"
        >
          <template v-slot:body="props">
            <q-tr :props="props" @click="trClick(props.row)">
              <q-td key="materialsName" :props="props">{{ props.row.materialsName }}</q-td>
              <q-td key="specsName" :props="props">{{ props.row.specsName }}</q-td>
              <q-td key="returnQty" :props="props" >
              <q-chip color="blue-5">
                  {{ props.row.returnQty }}
              </q-chip >
            </q-td>
              <q-td key="materialsUnit" :props="props">
                <dict-tag :options="recordUnitMap" :value="props.row.materialsUnit"/>
              </q-td>
              <q-td key="materialsCode" :props="props">{{ props.row.materialsCode }}</q-td>
              <q-td key="dnCode" :props="props">{{ props.row.dnCode }}</q-td>
              <q-td key="jobNumber" :props="props">{{ props.row.jobNumber }}</q-td>
              <q-td key="recipient" :props="props">{{ props.row.recipient }}</q-td>
            </q-tr>
          </template>
        </q-table>
      </q-scroll-area>
    </q-card>

    <!-- 扫描窗口 -->
    <q-dialog v-model="promptDialog">
      <q-card style="min-width: 350px">
        <q-card-section>
          <div>请扫描：库位/容器/物料 Code</div>
        </q-card-section>
        <q-card-section class="q-pt-none">
          <q-input dense v-model="code" autofocus @input="codeInput"/>
        </q-card-section>
      </q-card>
    </q-dialog>

    <q-dialog v-model="qtyDialog">
      <q-card style="min-width: 350px">
        <q-card-section>
          <div>{{returnName}}</div>
        </q-card-section>
        <q-card-section class="q-pt-none">
          <q-input dense label="退货数量" v-model="dnReturn.returnQtying"/>
        </q-card-section>
        <q-card-section class="right">
          <div style="float: right; padding: 15px 15px 15px 0">
            <q-btn color="primary" @click="pickedSubmit()">{{ '提交' }}</q-btn>
          </div>
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>
<router-view />

<script>
import { getauth, putauth, postauth } from 'boot/axios_request'
import { LocalStorage, Screen } from 'quasar'

export default {
  name: 'Pagezebra_picking',
  data () {
    return {
      columns1:[
        { name: 'materialsName', label: '物料名称', field: 'materialsName', align: 'center' },
        { name: 'specsName', label: '规格', field: 'specsName', align: 'center' },
        { name: 'returnQty', label: '待退货数量', field: 'returnQty', align: 'center' },
        { name: 'materialsUnit', label: '单位', field: 'materialsUnit', align: 'center' },
        { name: 'materialsCode', required: true, label: '物料编码', align: 'center', field: 'materialsCode' },
        { name: 'dnCode', label: '入库单号', align: 'left', field: 'dnCode' },
        { name: 'jobNumber', label: '工号', align: 'left', field: 'jobNumber' },
        { name: 'recipient', label: '领料人', field: 'recipient', align: 'center' },
      ],
      recordUnitMap:{},
      title:'',
      openid: '',
      login_name: '',
      authin: '0',
      pathname: 'picking/',
      width: '',
      height: '',
      scroll_height: '',
      table_list: [],
      thumbStyle: {
        right: '4px',
        borderRadius: '5px',
        backgroundColor: '#E0E0E0',
        width: '5px',
        opacity: 0.75
      },
      barStyle: {
        right: '2px',
        borderRadius: '9px',
        backgroundColor: '#EEEEEE',
        width: '9px',
        opacity: 0.2
      },
      bar_scanned: '',
      dn_scan: '',
      bin_scan: '',
      goods_scan: '',
      id: '',
      promptDialog: false,
      qtyDialog: false,
      code: '',
      
      dnReturn:{
        id: '',
        dnReturnDetailId: '',
        returnQtying:0,
        type:0,
        codeId:'',
      },

      returnQty:0,
      returnName:'',
    }
  },
  methods: {
    // 出库单文本框监听事件
    selectList() {
      if(this.dnReturn.id != null){
        if(this.dnReturn.id.length === 19) {
          this.getDnReturnDetailById()
        }
      }
    },
    //清除事件
    clearFn() {
        this.dnReturn.id = ''
        this.table_list = [] 
    },
    //查询所有
    getDnReturnDetailById() {
      // c 代表容器code  b代表库位code  m代表物料code
      if(this.dnReturn.id.indexOf('B') == 0 || this.dnReturn.id.indexOf('C') == 0) {
        this.$q.notify({
            message: '请选择退货单',
            position: 'top',
            icon: 'close',
            color: 'negative'
        })
        return
      } 
      this.table_list = [];
      postauth('dnReturnDetail/list', {dnReturnId:this.dnReturn.id,gt:1})
        .then(res => {
          if(res.data.length == 0) {
            this.dnReturn.id = ''
             this.$q.notify({
                message: '没有退货信息，请检查二维码',
                position: 'top',
                icon: 'close',
                color: 'negative'
            })
            return;
          }
          this.table_list = res.data
          this.title = "退货单号 : "+res.data[0].code
          this.$refs.inputFoucs.blur()
        }).catch(err => {
          this.$q.notify({
            message: err.detail,
            position: 'top',
            icon: 'close',
            color: 'negative'
          })
        })
    },
    //扫描文本框监听事件
    // c 代表容器code  b代表库位code  m代表物料code
    codeInput() {
      if(this.code != null){
        if(this.code.length == 20) {
          if(this.code.indexOf('M') == 0) {
            const stockMaterialsId = this.code.slice(1)
            postauth('stockMaterialsView/list-all', {id:stockMaterialsId})
            .then(res => {
              if(res.data == null || res.data == []){
                this.$q.notify({
                  message: '二维码有误',
                  position: 'top',
                  icon: 'close',
                  color: 'negative'
                })
                this.code = ''
                return
              }
              this.dnReturn.codeId = stockMaterialsId
              this.dnReturn.type = 1 
              this.returnName = '物料：'+ res.data[0].materialsName +'         /待退货数量:        '+this.returnQty
            }).catch(err => {
            })

          }else if (this.code.indexOf('C') == 0) {
            const containerId = this.code.slice(1)
            postauth('containers/list', {id:containerId})
            .then(res => {
              this.dnReturn.codeId = containerId
              this.dnReturn.type = 2 
              this.returnName = '容器：'+ res.data[0].containerName +'         /待退货数量:        '+this.returnQty
            }).catch(err => {
            })
          }else if(this.code.indexOf('B') == 0) {
            const binId = this.code.slice(1)
            postauth('binset/list', {id:binId})
            .then(res => {
              this.dnReturn.codeId = binId
              this.dnReturn.type = 3 
              this.returnName = '库位'+ res.data[0].binName +'         /待退货数量:        '+this.returnQty
            }).catch(err => {
            })
          }
          this.dnReturn.returnQtying = this.returnQty
          this.promptDialog = false
          this.qtyDialog = true
        }
      }
    },
    trClick(row) {
      this.code = ''
      this.returnQty = row.returnQty
      this.dnReturn.dnReturnDetailId = row.id
      this.promptDialog = true
    },
    pickedSubmit(){
      postauth('dnReturn/returnSave', this.dnReturn)
      .then(res => {
        this.getDnReturnDetailById()
        this.qtyDialog = false
      }).catch(err => {
      })
    }
  },
  computed: {
    fab: {
      get () {
        return this.$store.state.fabchange.fab
      }
    },
    scaneddata: {
      get () {
        return this.$store.state.scanedsolve.scaneddata
      }
    }
  },
  created () {
    var _this = this
    getauth('materialsunit/getUnitList/2/',{}).then(res =>{
       _this.recordUnitMap = res.data
    })
    if (LocalStorage.has('openid')) {
      _this.openid = LocalStorage.getItem('openid')
    } else {
      _this.openid = ''
      LocalStorage.set('openid', '')
    }
    if (LocalStorage.has('login_name')) {
      _this.login_name = LocalStorage.getItem('login_name')
    } else {
      _this.login_name = ''
      LocalStorage.set('login_name', '')
    }
    if (LocalStorage.has('auth')) {
      _this.authin = '1'
    } else {
      _this.authin = '0'
    }
  },
  mounted () {
    var _this = this
    _this.width = Screen.width * 1 + '' + 'px'
    _this.height = Screen.height - 50 + '' + 'px'
    _this.scroll_height = Screen.height - 0 + '' + 'px'
  },
  updated () {
    var _this = this
    if (_this.scaneddata !== '') {
      if (_this.bar_scanned !== _this.scaneddata.request_time) {
        if (_this.scaneddata.mode === 'DN') {
          _this.bar_scanned = _this.scaneddata.request_time
          _this.bin_scan = ''
          _this.goods_scan = ''
          _this.dn_scan = ''
          _this.getPickingList(_this.scaneddata.code)
        } else if (_this.scaneddata.mode === 'BINSET') {
          _this.bar_scanned = _this.scaneddata.request_time
          _this.bin_scan = ''
          _this.goods_scan = ''
          _this.getBinList(_this.scaneddata.code)
        } else if (_this.scaneddata.mode === 'GOODS') {
          _this.bar_scanned = _this.scaneddata.request_time
          _this.getGoodsList(_this.scaneddata.code)
        } else {
          _this.$q.notify({
            message: 'No Query Data',
            position: 'top',
            icon: 'close',
            color: 'negative'
          })
        }
      }
    }
  },
  beforeDestroy () {
  }
}
</script>
