<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!--     卡片头   -->
        <div style="width: 100%;height: 80px;position: relative;">
          <el-form ref="countMoveFromRes" :model="countMoveFrom" :rules="rules" size="small" label-width="80px">
            <div style="width: 100%;position: relative;height: 45px;">
                <div style="width: 50%;float: left">
                  <el-form-item label="单号" prop="code">
                    <el-input :disabled="true" v-model="countMoveFrom.code" style="width: 100%"/>
                  </el-form-item>
                </div>
              <div style="width: 50%;float: left">
                <el-form-item label="备注" prop="code">
                  <el-input :disabled="true" v-model="countMoveFrom.remark" style="width: 100%"/>
                </el-form-item>
              </div>
            </div>
            <div style="width: 100%;position: relative;height: 45px;">
              <div style="width: 50%;float: left">
                <el-form-item label="原库区" prop="code">
                  <el-input :disabled="true" v-model="countMoveFrom.srcArea.code" style="width: 100%"/>
                </el-form-item>
              </div>
              <div style="width: 50%;float: left">
                <el-form-item label="目标库区" prop="code">
                  <el-input :disabled="true" v-model="countMoveFrom.dstArea.code" style="width: 100%"/>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" :tableKey="this.$options.name">
        <el-upload
          class="upload-demo"
          ref="upload"
          slot='right'
          style="float: right;padding-left: 5px"
          :action="baseApi+'/api/importData/importCountMoveDetail?countId='+this.countMoveId"
          :file-list="fileList"
          :on-success=handleSuccess
          :on-error="handleError"
          :headers="headers"
          :show-file-list="true">
          <el-button size="mini" type="success" icon="el-icon-upload">导入</el-button>
        </el-upload>
      </crudOperation>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler" :height="crud.tableHeight"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="序号"/>
        <el-table-column prop="itemKey.item.code" label="品番号"/>
        <el-table-column prop="itemKey.item.name" label="品番" />
        <el-table-column prop="orderQty" label="订单数量"/>
        <el-table-column  prop="countQty" label="移位数量"/>
        <el-table-column :show-overflow-tooltip="true" prop="srcPoint.code" label="原库位"/>
        <el-table-column :show-overflow-tooltip="true" prop="dstPoint.code" label="目标库位"/>
        <el-table-column :show-overflow-tooltip="true" prop="itemKey.propC1" label="批次号"/>
        <el-table-column :show-overflow-tooltip="true" prop="itemKey.propC2" label="税别"/>
        <el-table-column :show-overflow-tooltip="true" prop="srcStockCode" label="箱单号"/>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </el-card>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation.vue'
import crudOperation from '@crud/CRUD.operation.vue'
import udOperation from '@crud/UD.operation.vue'
import pagination from '@crud/Pagination.vue'
import Search from '@/views/monitor/log/search.vue'
import DateRangePicker from '@/components/DateRangePicker/index.vue'
import { getToken } from '@/utils/auth'
import { getIdByCountMove } from '@/api/countMove'
import {mapGetters} from "vuex";
import crudCountMoveDetail from '@/api/countMoveDetail'

const defaultForm = {
  id: null
}
const countMoveQuery = {
  countMoveId: 0
}
export default {
  name: 'showCountMoveDetail',
  components: { DateRangePicker,Search, pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['count_status'],
  cruds() {
    return CRUD({
      title: '移位数据',
      url: 'api/countMoveDetail',
      idField: 'id',
      query: { countMoveId: 0 },
      sort: 'id,desc',
      crudMethod: { ...crudCountMoveDetail },
      optShow: {
        add: false,
        edit: false,
        del: true,
        reset: false,
        download: false
      }
    })
  },
  created() {
    //判断是否有数据
    this.crud.query = countMoveQuery
    let ids = this.$route.query.ids
    if (ids != null) {
      this.crud.query.countMoveId = ids
      this.countMoveId = ids
    } else {
      this.crud.query.countMoveId = 0
      this.countMoveId = 0
    }
    this.crud.refresh()
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  data() {
    return {
      headers: { 'Authorization': getToken() },
      permission: {
        add: ['admin', 'countMoveDetail:add'],
        edit: ['admin', 'countMoveDetail:edit'],
        del: ['admin', 'countMoveDetail:del']
      },
      // 新增主表
      countMoveFrom: {
        id: null,
        code: null
      },
      //主id
      countMoveId: 0,
      countMove: {},
      countMoveDetailButton: {
        button: 0,
        id: 0,
        oneRNumber: 0,
        oneRPoint: {},
        countMoveDetailData: {},
        countMoveDetailDataS: []
      },
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      console.log(111)
      this.countMoveTF()
      return true
    },
    //过滤重复数据
    filterListObj(listObj) {
      let date = []
      let onOff = true
      listObj.filter((i) => {
        onOff = true
        date.filter((ii) => {
          if (i.id === ii.id) {
            onOff = false
          }
        })
        if (onOff) {
          date.push(i)
        }
      })
      return date
    },
    //判断是否是新增主表和是查看明细新政附表
    countMoveTF() {
      if (this.countMoveId != 0) {
        getIdByCountMove(this.countMoveId).then(res => {
          //存储主表的对象
          this.countMove = res
          defaultForm.countMove = res
          //将主表数据在新增哪里展示
          this.countMoveFrom = res
          countMoveQuery.countMoveId = res.id
        })
      } else {
        this.getNewDate()
      }
    },
    handleSuccess(response, file, fileList) {
      this.crud.notify('上传成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
      this.$refs.upload.clearFiles()
      this.crud.status.add = CRUD.STATUS.NORMAL
      this.crud.resetForm()
      this.crud.toQuery()
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      const msg = JSON.parse(e.message)
      this.$notify({
        title: msg.message,
        type: 'error',
        duration: 2500
      })
      this.loading = false
    }
  }
}
</script>

<style scoped>

</style>
