<template>
  <div class="page-box">
    <search-bar
      :formConfigs="formConfig"
      ref="searchBarForm"
      @headBtnClick="buttonClick"
    />
    <base-table
      :page="listQuery.current"
      :limit="listQuery.size"
      :table-props="tableProps"
      :table-data="tableData"
      :max-height="tableH"
    >
      <method-btn
        v-if="tableBtn.length"
        slot="handleBtn"
        :width="220"
        label="操作"
        fixed="right"
        :method-list="tableBtn"
        @clickBtn="handleClick"
      />
    </base-table>
    <pagination
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :total="total"
      @pagination="getList()"
    />
    <!-- 新增 -->
    <base-dialog
      :title="addOrEditTitle"
      :dialogVisible="centervisible"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      :before-close="handleCancel"
    >
      <off-shelf-packaging-add
        ref="offShelfPackagingAdd"
        @successSubmit="successSubmit"
      />
    </base-dialog>
    <!-- 详情抽屉 -->
    <off-shelf-packaging-detail v-if="detailVisible" ref="packagingDetail" />
  </div>
</template>
<script>
import { tableHeight } from '@/utils/index'
import { timeFormatter, dictionaryFormatter } from '@/utils'
import OffShelfPackagingAdd from './components/OffShelfPackagingAdd.vue'
import OffShelfPackagingDetail from './components/OffShelfPackagingDetail.vue'
import {
  unloadPalletPage,
  reloadRackEnd,
  reloadRack
} from '@/api/productionScheduling'
const tableProps = [
  {
    prop: 'proLineName',
    label: '产线',
    minWidth: 100
  },
  {
    prop: 'glassRackStation',
    label: '玻璃架工位',
    minWidth: 100
  },
  {
    prop: 'glassRackId',
    label: '玻璃架ID',
    minWidth: 100
  },
  {
    prop: 'proSpec',
    label: '产品型号',
    minWidth: 100
  },
  {
    prop: 'grind',
    label: '研磨面',
    minWidth: 150
  },
  {
    prop: 'loadTime',
    label: '上架时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'unloadTime',
    label: '下架时间',
    filter: timeFormatter,
    minWidth: 160
  },
  {
    prop: 'num',
    label: '当前数量',
    minWidth: 100
  },
  {
    prop: 'status',
    label: '状态',
    filter: dictionaryFormatter('packageState'),
    minWidth: 100
  },
  {
    prop: 'remark',
    label: '备注',
    minWidth: 150
  }
]
const tableBtn = [
  {
    type: 'end',
    btnName: '结束复投',
    showParam: {
      type: '&',
      data: [
        {
          type: 'equal',
          name: 'status',
          value: 1
        }
      ]
    }
  },
  {
    type: 'continue',
    btnName: '复投上架',
    showParam: {
      type: '&',
      data: [
        {
          type: 'equal',
          name: 'status',
          value: 2
        },
        {
          type: 'more',
          name: 'num',
          value: 1
        }
      ]
    }
  },
  {
    type: 'detail',
    btnName: '详情'
  },
  {
    type: 'edit',
    btnName: '编辑',
    showParam: {
      type: '&',
      data: [
        {
          type: 'equal',
          name: 'status',
          value: 2
        }
      ]
    }
  }
]
export default {
  name: 'reLaunching',
  components: {
    OffShelfPackagingAdd,
    OffShelfPackagingDetail
  },
  data() {
    return {
      formConfig: [
        {
          type: 'select',
          label: '产线',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .proLineVoList,
          param: 'proLineId',
          width: 120
        },
        {
          type: 'select',
          label: '玻璃架工位',
          selectOptions: JSON.parse(localStorage.getItem('publicList'))
            .glassRackStationVoList,
          labelField: 'dataName',
          valueField: 'dataName',
          param: 'glassRackStation',
          width: 100
        },
        {
          type: 'input',
          label: '玻璃架ID',
          placeholder: '玻璃架ID',
          param: 'glassRackId'
        },
        {
          type: 'datePicker',
          label: '上架时间',
          dateType: 'datetimerange',
          format: 'yyyy-MM-dd HH:mm:ss',
          valueFormat: 'yyyy-MM-ddTHH:mm:ss',
          rangeSeparator: '-',
          startPlaceholder: '开始时间',
          endPlaceholder: '结束时间',
          param: 'timeVal',
          width: 350
        },
        {
          type: 'button',
          btnName: '查询',
          name: 'search',
          color: 'primary'
        },
        {
          type: 'button',
          btnName: '重置',
          name: 'reset'
        }
        // {
        //   type: 'button',
        //   btnName: '新增',
        //   name: 'add',
        //   color: 'primary',
        //   plain: true
        // }
      ],
      tableProps,
      tableData: [],
      tableBtn,
      tableH: tableHeight(265),
      total: 0,
      listQuery: {
        current: 1,
        size: 20,
        proLineId: '',
        glassRackStation: '',
        glassRackId: '',
        startTime: '',
        endTime: ''
      },
      centervisible: false,
      addOrEditTitle: '',
      detailVisible: false
    }
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.tableH = tableHeight(265)
    })
    this.getList()
  },
  methods: {
    getList() {
      unloadPalletPage({ ...this.listQuery }).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      })
    },
    buttonClick(val) {
      console.log(val.proLineId)
      switch (val.btnName) {
        case 'search':
          this.listQuery.startTime = val.timeVal ? val.timeVal[0] : ''
          this.listQuery.endTime = val.timeVal ? val.timeVal[1] : ''
          this.listQuery.proLineId = val.proLineId
          this.listQuery.glassRackStation = val.glassRackStation
          this.listQuery.glassRackId = val.glassRackId
          this.listQuery.current = 1
          this.getList()
          break
        case 'reset':
          this.$refs.searchBarForm.resetForm()
          this.listQuery.startTime = ''
          this.listQuery.endTime = ''
          this.listQuery.proLineId = ''
          this.listQuery.glassRackStation = ''
          this.listQuery.glassRackId = ''
          this.listQuery.current = 1
          this.getList()
          break
        default:
          this.addOrEditTitle = '新增'
          this.$nextTick(() => {
            this.$refs.offShelfPackagingAdd.init()
          })
          this.centervisible = true
          break
      }
    },
    handleClick(val) {
      console.log(val)
      if (val.type === 'edit') {
        this.centervisible = true
        this.addOrEditTitle = '编辑'
        this.$nextTick(() => {
          this.$refs.offShelfPackagingAdd.init(val.data.id)
        })
      } else if (val.type === 'end') {
        this.$confirm(
          '确认结束复投玻璃架ID" ' + val.data.glassRackId + ' "吗？',
          {
            type: 'warning'
          }
        )
          .then(() => {
            reloadRackEnd({ id: val.data.id }).then(() => {
              this.$message({
                message: '结束复投成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
              this.getList()
            })
          })
          .catch(() => {})
      } else if (val.type === 'continue') {
        this.$confirm(
          '确认复投上架玻璃架ID" ' + val.data.glassRackId + ' "吗？',
          {
            type: 'warning'
          }
        )
          .then(() => {
            reloadRack({ id: val.data.id }).then(() => {
              this.$message({
                message: '复投上架成功',
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })
              this.getList()
            })
          })
          .catch(() => {})
      } else if (val.type === 'detail') {
        this.detailVisible = true
        this.$nextTick(() => {
          this.$refs.packagingDetail.init(val.data.id)
        })
      }
    },
    handleCancel() {
      this.$refs.offShelfPackagingAdd.formClear()
      this.centervisible = false
      this.addOrEditTitle = ''
    },
    handleConfirm() {
      this.$refs.offShelfPackagingAdd.submitForm()
    },
    successSubmit() {
      this.handleCancel()
      this.getList()
    }
  }
}
</script>
