<template>
  <div>
    <transition appear enter-active-class="animated fadeIn">
      <q-table class="my-sticky-header-table shadow-24" :data="table_list" row-key="id" :separator="separator"
        :loading="loading" :filter="filter" :columns="columns" hide-bottom :pagination.sync="pagination"
        no-data-label="No data" no-results-label="No data you want" :table-style="{ height: height }" flat bordered>
        <template v-slot:top>
          <q-btn-group push>
            <q-btn :label="$t('refresh')" @click="reFresh()">
              <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                content-style="font-size: 12px">{{ $t('refreshtip') }}</q-tooltip>
            </q-btn>
          </q-btn-group>
          <q-space />
          <q-input outlined rounded dense debounce="300" color="primary" v-model="filter" :placeholder="$t('search')"
            @blur="getSearchList()" @keyup.enter="getSearchList()">
          </q-input>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td key="bin_name" :props="props">{{ props.row.bin_name }}</q-td>
            <template v-if="props.row.id === editid">
              <q-td key="bin_size" :props="props">
                <q-select dense outlined square v-model="editFormData.bin_size" :options="bin_size_list"
                  transition-show="scale" transition-hide="scale" :label="$t('warehouse.view_binset.bin_size')"
                  :rules="[val => (val && val.length > 0) || error2]" />
              </q-td>
            </template>
            <template v-else-if="props.row.id !== editid">
              <q-td key="bin_size" :props="props">{{ props.row.bin_size }}</q-td>
            </template>
            <q-td key="bin_property" :props="props">{{ props.row.bin_property }}</q-td>
            <q-td key="empty_label" :props="props">{{ props.row.empty_label }}</q-td>
            <q-td key="creater" :props="props">{{ props.row.creater }}</q-td>
            <q-td key="create_time" :props="props">{{ props.row.create_time }}</q-td>
            <q-td key="update_time" :props="props">{{ props.row.update_time }}</q-td>
          </q-tr>
        </template>
      </q-table>
    </transition>
    <template>
      <div class="q-pa-lg flex flex-center">
        <q-btn v-show="pathname_previous" flat push color="purple" :label="$t('previous')" icon="navigate_before"
          @click="getListPrevious()">
          <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]" content-style="font-size: 12px">{{
            $t('previous') }}</q-tooltip>
        </q-btn>
        <q-btn v-show="pathname_next" flat push color="purple" :label="$t('next')" icon-right="navigate_next"
          @click="getListNext()">
          <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]" content-style="font-size: 12px">{{
            $t('next') }}</q-tooltip>
        </q-btn>
        <q-btn v-show="!pathname_previous && !pathname_next" flat push color="dark" :label="$t('no_data')"></q-btn>
      </div>
    </template>
  </div>
</template>
<router-view />

<script>
import { date, exportFile, LocalStorage } from 'quasar'
import { getauth, postauth, putauth, deleteauth, getfile } from 'boot/axios_request'

export default {
  name: 'Pagebinset',
  data() {
    return {
      bin_name: '',
      bin_property: '',
      openid: '',
      login_name: '',
      authin: '0',
      pathname: 'binset/',
      pathname_previous: '',
      pathname_next: '',
      separator: 'cell',
      loading: false,
      height: '',
      table_list: [],
      bin_size_list: [],
      bin_property_list: [],
      viewForm: false,
      printObj: {
        id: 'printMe',
        popTitle: this.$t('inbound.asn')
      },
      columns: [
        { name: 'bin_name', required: true, label: this.$t('warehouse.view_binset.bin_name'), align: 'left', field: 'bin_name' },
        { name: 'bin_size', label: this.$t('warehouse.view_binset.bin_size'), field: 'bin_size', align: 'center' },
        { name: 'bin_property', label: this.$t('warehouse.view_binset.bin_property'), field: 'bin_property', align: 'center' },
        { name: 'empty_label', label: this.$t('warehouse.view_binset.empty_label'), field: 'empty_label', align: 'center' },
        { name: 'creater', label: this.$t('creater'), field: 'creater', align: 'center' },
        { name: 'create_time', label: this.$t('createtime'), field: 'create_time', align: 'center' },
        { name: 'update_time', label: this.$t('updatetime'), field: 'update_time', align: 'center' }
      ],
      filter: '',
      pagination: {
        page: 1,
        rowsPerPage: '30'
      },
      newForm: false,
      newFormData: {
        bin_name: '',
        bin_size: '',
        bin_property: '',
        creater: ''
      },
      editid: 0,
      editFormData: {},
      editMode: false,
      deleteForm: false,
      deleteid: 0,
      bar_code: '',
      error1: this.$t('warehouse.view_binset.error1'),
      error2: this.$t('warehouse.view_binset.error2'),
      error3: this.$t('warehouse.view_binset.error3')
    }
  },
  methods: {
    getList() {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname, {})
          .then(res => {
            _this.table_list = res.results
            if (LocalStorage.getItem('lang') === 'zh-hans') {
              _this.table_list.forEach((item, index) => {
                if (item.bin_property === 'Damage') {
                  item.bin_property = '破损'
                } else if (item.bin_property === 'Inspection') {
                  item.bin_property = '质检'
                } else if (item.bin_property === 'Holding') {
                  item.bin_property = '锁货'
                } else if (item.bin_property === 'Normal') {
                  item.bin_property = '正常库位'
                }
                if (!item.empty_label) {
                  item.empty_label = '否'
                } else if (item.empty_label) {
                  item.empty_label = '是'
                }
              })
            }
            _this.bin_property_list = res.bin_property_list
            _this.bin_size_list = res.bin_size_list
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
      }
    },
    getSearchList() {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname + '?bin_name__icontains=' + _this.filter, {})
          .then(res => {
            _this.table_list = res.results
            if (LocalStorage.getItem('lang') === 'zh-hans') {
              _this.table_list.forEach((item, index) => {
                if (item.bin_property === 'Damage') {
                  item.bin_property = '破损'
                } else if (item.bin_property === 'Inspection') {
                  item.bin_property = '质检'
                } else if (item.bin_property === 'Holding') {
                  item.bin_property = '锁货'
                } else if (item.bin_property === 'Normal') {
                  item.bin_property = '正常库位'
                }
                if (!item.empty_label) {
                  item.empty_label = '否'
                } else if (item.empty_label) {
                  item.empty_label = '是'
                }
              })
            }
            _this.bin_property_list = res.bin_property_list
            _this.bin_size_list = res.bin_size_list
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
      }
    },
    getListPrevious() {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_previous, {})
          .then(res => {
            _this.table_list = res.results
            if (LocalStorage.getItem('lang') === 'zh-hans') {
              _this.table_list.forEach((item, index) => {
                if (item.bin_property === 'Damage') {
                  item.bin_property = '破损'
                } else if (item.bin_property === 'Inspection') {
                  item.bin_property = '质检'
                } else if (item.bin_property === 'Holding') {
                  item.bin_property = '锁货'
                } else if (item.bin_property === 'Normal') {
                  item.bin_property = '正常库位'
                }
                if (!item.empty_label) {
                  item.empty_label = '否'
                } else if (item.empty_label) {
                  item.empty_label = '是'
                }
              })
            }
            _this.bin_property_list = res.bin_property_list
            _this.bin_size_list = res.bin_size_list
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
      }
    },
    getListNext() {
      var _this = this
      if (LocalStorage.has('auth')) {
        getauth(_this.pathname_next, {})
          .then(res => {
            _this.table_list = res.results
            if (LocalStorage.getItem('lang') === 'zh-hans') {
              _this.table_list.forEach((item, index) => {
                if (item.bin_property === 'Damage') {
                  item.bin_property = '破损'
                } else if (item.bin_property === 'Inspection') {
                  item.bin_property = '质检'
                } else if (item.bin_property === 'Holding') {
                  item.bin_property = '锁货'
                } else if (item.bin_property === 'Normal') {
                  item.bin_property = '正常库位'
                }
                if (!item.empty_label) {
                  item.empty_label = '否'
                } else if (item.empty_label) {
                  item.empty_label = '是'
                }
              })
            }
            _this.bin_property_list = res.bin_property_list
            _this.bin_size_list = res.bin_size_list
            _this.pathname_previous = res.previous
            _this.pathname_next = res.next
          })
          .catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
      }
    },
    reFresh() {
      var _this = this
      _this.getList()
    },
    newDataSubmit() {
      var _this = this
      var binsets = []
      _this.table_list.forEach(i => {
        binsets.push(i.bin_name)
      })
      if (binsets.indexOf(_this.newFormData.bin_name) === -1 && _this.newFormData.bin_name.length !== 0) {
        _this.newFormData.creater = _this.login_name
        postauth(_this.pathname, _this.newFormData)
          .then(res => {
            _this.getList()
            _this.newDataCancel()
            _this.$q.notify({
              message: 'Success Create',
              icon: 'check',
              color: 'green'
            })
          })
          .catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else if (binsets.indexOf(_this.newFormData.bin_name) !== -1) {
        _this.$q.notify({
          message: _this.$t('notice.warehouseerror.binseterror'),
          icon: 'close',
          color: 'negative'
        })
      } else if (_this.newFormData.bin_name.length === 0) {
        _this.$q.notify({
          message: _this.$t('warehouse.view_binset.error1'),
          icon: 'close',
          color: 'negative'
        })
      }
      binsets = []
    },
    newDataCancel() {
      var _this = this
      _this.newForm = false
      _this.newFormData = {
        bin_name: '',
        bin_size: '',
        bin_property: '',
        creater: ''
      }
    },
    editData(e) {
      var _this = this
      _this.editMode = true
      _this.editid = e.id
      _this.editFormData = {
        bin_name: e.bin_name,
        bin_size: e.bin_size,
        bin_property: e.bin_property,
        creater: _this.login_name
      }
    },
    editDataSubmit() {
      var _this = this
      if (_this.editFormData.bin_name) {
        putauth(_this.pathname + _this.editid + '/', _this.editFormData)
          .then(res => {
            _this.editDataCancel()
            _this.getList()
            _this.$q.notify({
              message: 'Success Edit Data',
              icon: 'check',
              color: 'green'
            })
          })
          .catch(err => {
            _this.$q.notify({
              message: err.detail,
              icon: 'close',
              color: 'negative'
            })
          })
      } else {
        _this.$q.notify({
          message: 'Content Cannot Be Empty',
          icon: 'close',
          color: 'negative'
        })
      }
    },
    editDataCancel() {
      var _this = this
      _this.editMode = false
      _this.editid = 0
      _this.editFormData = {
        bin_name: '',
        bin_size: '',
        bin_property: '',
        empty_label: '',
        creater: ''
      }
    },
    deleteData(e) {
      var _this = this
      _this.deleteForm = true
      _this.deleteid = e
    },
    deleteDataSubmit() {
      var _this = this
      deleteauth(_this.pathname + _this.deleteid + '/')
        .then(res => {
          _this.deleteDataCancel()
          _this.getList()
          _this.$q.notify({
            message: 'Success Edit Data',
            icon: 'check',
            color: 'green'
          })
        })
        .catch(err => {
          _this.$q.notify({
            message: err.detail,
            icon: 'close',
            color: 'negative'
          })
        })
    },
    deleteDataCancel() {
      var _this = this
      _this.deleteForm = false
      _this.deleteid = 0
    },
    downloadData() {
      var _this = this
      if (LocalStorage.has('auth')) {
        getfile(_this.pathname + 'file/?lang=' + LocalStorage.getItem('lang')).then(res => {
          var timeStamp = Date.now()
          var formattedString = date.formatDate(timeStamp, 'YYYYMMDDHHmmssSSS')
          const status = exportFile(_this.pathname + formattedString + '.csv', '\uFEFF' + res.data, 'text/csv')
          if (status !== true) {
            _this.$q.notify({
              message: 'Browser denied file download...',
              color: 'negative',
              icon: 'warning'
            })
          }
        })
      } else {
        _this.$q.notify({
          message: _this.$t('notice.loginerror'),
          color: 'negative',
          icon: 'warning'
        })
      }
    },
    viewData(e) {
      var _this = this
      var QRCode = require('qrcode')
      QRCode.toDataURL(e.bar_code, [
        {
          errorCorrectionLevel: 'H',
          mode: 'byte',
          version: '2',
          type: 'image/jpeg'
        }
      ])
        .then(url => {
          _this.bin_name = e.bin_name
          _this.bin_property = e.bin_property
          _this.bar_code = url
        })
        .catch(err => {
          console.error(err)
        })
      _this.viewForm = true
    }
  },
  created() {
    var _this = this
    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'
      _this.getList()
    } else {
      _this.authin = '0'
    }
  },
  mounted() {
    var _this = this
    if (_this.$q.platform.is.electron) {
      _this.height = String(_this.$q.screen.height - 290) + 'px'
    } else {
      _this.height = _this.$q.screen.height - 290 + '' + 'px'
    }
  },
  updated() { },
  destroyed() { }
}
</script>
