<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!--     卡片头   -->
        <div style="width: 100%;height: 100px;position: relative;">
          <el-form ref="pickTicketFromRes" :model="pickOutButton.pickOut" :rules="rules" size="small" label-width="80px">
            <div style="width: 60%;height: 100px;float: left">
              <el-form-item label="车牌号" prop="plateNo">
                <el-input v-model="pickOutButton.pickOut.plateNo" placeholder="车牌号" style="width: 100%" clearable/>
              </el-form-item>
              <div style="width: 100%;position: relative;height: 45px;">
                <div style="width: 50%;float: left">
                  <el-button type="primary" @click="savePickOut1()">提交</el-button>
                </div>
                <div style="width: 50%;float: right">
                  <el-form-item label="单号" prop="orderDate">
                    <el-input v-model="pickOutButton.pickOut.orderNo" placeholder="单号" :disabled="true" style="width: 100%" clearable/>
                  </el-form-item>
                </div>
              </div>
              <div style="width: 100%;position: relative;">
                <div style="width: 50%;float: left">

                </div>
              </div>
            </div>
            <div style="width: 40%;height: 100px;float: right">
              <el-form-item label="备注:">
                <el-input v-model="pickOutButton.pickOut.description" type="textarea" :autosize="{ minRows: 5, maxRows: 8}"
                          placeholder="备注" style="width: 90%;height: 100%;float: right"
                />
              </el-form-item>
            </div>
          </el-form>
        </div>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
<!--      <crudOperation >-->
<!--      -->
<!--      </crudOperation>-->
      <div>
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          size="mini"
          @click="returnIndex()"
        >
          返回
        </el-button>
        <el-button
          slot="left"
          class="filter-item"
          type="primary"
          size="mini"
          :disabled="pickOutButton.pickOut.id === null"
          @click="saveM"
        >
          添加
        </el-button>
      </div>
      <p></p>
      <el-form ref="form" :model="pickOutButton.pickOut" :rules="rules" size="small" label-width="80px">
        <el-input v-model="pickOutButton.itemCode" clearable style="width: 180px" class="filter-item"
                  placeholder="品番" @keyup.enter.native="selectYTJData"
        ></el-input>
        <el-input v-model="pickOutButton.srcPointCode" clearable style="width: 180px" class="filter-item"
                  placeholder="起始点位" @keyup.enter.native="selectYTJData"
        ></el-input>
<!--        <el-input v-model="pickOutButton.dstStockCode" clearable style="width: 180px" class="filter-item"-->
<!--                  placeholder="目标托盘号" @keyup.enter.native="selectYTJData"-->
<!--        ></el-input>-->
        <p></p>
        <!--表格渲染-->
        <el-table ref="table" :data="ytjTaskLogListDataS" height="250px" size="small" style="width: 100%;" border>
          <el-table-column prop="shArea.code" label="工位"/>
          <el-table-column prop="shArea.name" label="指示纳所" width="150px"/>
          <el-table-column prop="item.code" label="品番"/>
          <el-table-column prop="item.code" label="品番"/>
          <el-table-column prop="item.name" label="品名"/>
          <el-table-column prop="itemKey.propC1" label="批次号"/>
          <el-table-column prop="moveQty" label="拣货数量"/>
          <el-table-column prop="srcPoint.code" label="起始点位"/>
          <el-table-column prop="dstPoint.code" label="目标点位"/>
<!--          <el-table-column prop="dstStockCode" label="目标托盘号"/>-->
          <!--            <el-table-column prop="dstStockCode" label="目标容器编码"/>-->
          <!--            <el-table-column prop="srcStockCode" label="源容器编码"/>-->
          <el-table-column prop="createBy" label="创建人"/>
          <el-table-column prop="createTime" label="创建时间"/>
        </el-table>
      </el-form>
    </el-card>
    <!--   新增   -->
    <el-dialog :close-on-click-modal="false" :visible.sync="saveOnOff"
               :title="'新增'" width="80%" top="20px"
    >
      <el-form ref="form" :model="pickOutButton.pickOut" :rules="rules" size="small" label-width="80px">
        <el-input v-model="pickOutButton.itemCode" clearable style="width: 180px" class="filter-item"
                  placeholder="品番" @keyup.enter.native="selectData"
        ></el-input>
        <el-input v-model="pickOutButton.srcPointCode" clearable style="width: 180px" class="filter-item"
                  placeholder="起始点位" @keyup.enter.native="selectData"
        ></el-input>
<!--        <el-input v-model="pickOutButton.dstStockCode" clearable style="width: 180px" class="filter-item"-->
<!--                  placeholder="目标托盘号" @keyup.enter.native="selectData"-->
<!--        ></el-input>-->
        <p></p>
        <!--表格渲染-->
        <el-table ref="table" :data="taskLogListData" height="350px" size="small" style="width: 100%;"
                  @selection-change="selectionTaskLogM" border
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="item.code" label="品番"/>
          <el-table-column prop="item.name" label="品名"/>
          <el-table-column prop="itemKey.propC1" label="批次号"/>
          <el-table-column prop="moveQty" label="拣货数量"/>
          <el-table-column prop="srcPoint.code" label="起始点位"/>
          <el-table-column prop="dstPoint.code" label="目标点位"/>
<!--          <el-table-column prop="dstStockCode" label="目标托盘号"/>-->
          <!--            <el-table-column prop="dstStockCode" label="目标容器编码"/>-->
          <!--            <el-table-column prop="srcStockCode" label="源容器编码"/>-->
          <el-table-column prop="createBy" label="创建人"/>
          <el-table-column prop="createTime" label="创建时间"/>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="saveOnOff = false">取消</el-button>
        <el-button type="primary" @click="addPickOut1()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudPickOut, { getPickOutById, operationAll } from '@/api/pickOut'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'

const defaultForm = {
  id: null,
  orderNo: null,
  plateNo: null,
  orderQty: 0,
  dispatchQty: 0,
  enabled: true,
  description: null,
  createBy: null,
  updateBy: null,
  createTime: null,
  updateTime: null,
  status: 'OPEN'
}
export default {
  name: 'PickOutSave',
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['pick_status'],
  cruds() {
    return CRUD({
      title: '出库单维护',
      url: 'api/pickOut',
      idField: 'id',
      sort: 'id,desc',
      crudMethod: { ...crudPickOut }, optShow: {
        add: false,
        edit: false,
        del: false,
        reset: false,
        download: false
      }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'pickOut:add'],
        edit: ['admin', 'pickOut:edit'],
        del: ['admin', 'pickOut:del']
      },
      rules: {},
      queryTypeOptions: [
        { key: 'orderNo', display_name: '单号' },
        { key: 'plateNo', display_name: '车牌号' }
      ],
      //未绑定出库单的的数据
      taskLogListData: [],
      selectionTaskLogListData: [],
      //新政开关
      saveOnOff: false,
      pickOutButton: {
        //按钮 1、新增功能 2、出库确认
        button: 0,
        //选择的tasklog的id
        taskLogIdS: [],
        //选着的PickOut的id
        pickOutIdS: [],
        //出库单维护的数据
        pickOut: {
          id: null,
          orderNo: null,
          plateNo: null,
          orderQty: 0,
          dispatchQty: 0,
          enabled: true,
          description: null,
          createBy: null,
          updateBy: null,
          createTime: null,
          updateTime: null,
          status: 'OPEN'
        },
        //品番
        itemCode: null,
        //起始点位
        srcPointCode: null,
        //目标容器
        dstStockCode: null,
        pickOutId: null
      },
      //出库确认的数据
      taskLogListDataS: [],
      //已添加的数据
      ytjTaskLogListDataS:[],
      selectionTaskLogListDataS: [],
      onOff: false
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    initData() {
      let pickOutId = this.$route.query.id;
      if (!(pickOutId === undefined || pickOutId === null)){
        //TaskLog未绑定出库单的的数据
        this.selectYtjTaskLogListDataS(pickOutId);
        getPickOutById(pickOutId).then(res=>{
          this.pickOutButton.pickOut = res;
        })
      }
      this.selectWtjTaskLogListDataS();
    },
    saveM() {
      //查询
      this.saveOnOff = true
    },
    selectionTaskLogM(data) {
      this.selectionTaskLogListData = data
    },
    selectionTaskLogMS(data) {
      this.selectionTaskLogListDataS = data
    },
    selectData() {
      let data = {};
      data = this.pickOutButton;
      data.pickOutId = null;
      crudPickOut.queryTaskLog(data).then(res => {
        this.taskLogListData = res
      })
    },
    selectYTJData(){
      this.selectYtjTaskLogListDataS(this.$route.query.id);
    },
    //新增数据 主表数据
    savePickOut1(){
      let data_ = {};
      data_ = this.pickOutButton;
      data_.button = 1;
      data_.pickOutId = null;
      crudPickOut.operationAll(data_).then(res => {
        this.$message.success("新增成功");
        this.$router.push({ path: '/business-pick/pickOutSave', query: { id: res.id } })
        this.initData();
      })
    },
    //向表中加数据
    addPickOut1(){
      let data_ = {};
      data_ = this.pickOutButton
      data_.button = 1
      data_.pickOutId = this.$route.query.id;
      //选择的tasklog
      data_.taskLogIdS = []
      for (const datum of this.selectionTaskLogListData) {
        data_.taskLogIdS.push(datum.id)
      }
      crudPickOut.operationAll(data_).then(res => {
        this.saveOnOff = false
        this.$message.success(res)
        this.initData()
      })
    },
    //出库确认
    confirmOutbound(data) {
      if (data.length === 0) {
        this.$message.error('你未选着数据')
      }
      let data_ = this.pickOutButton
      if (data.length === 1){//单条数据的操着
        let data_ = this.pickOutButton
        data_.itemCode = null
        data_.srcPointCode = null
        data_.dstStockCode = null
        data_.pickOutId = data[0].id
        crudPickOut.queryTaskLog(data_).then(res => {
          data_ = {};
          this.taskLogListDataS = res
          this.onOff = true
        })
      }
      if (data.length>1){
        //选择的数据 getPickOutIdS
        data_.button = 2
        data_.pickOutIdS = []
        for (const datum of data) {
          data_.pickOutIdS.push(datum.id);
        }
        crudPickOut.operationAll(data_).then(res=>{
          data_ = {};
          this.crud.toQuery();
          this.$message.success(res)
          this.selectData();
        })
      }
      data_ = {};
    },
    confirmOutboundM(data) {
      let data_ = this.pickOutButton
      data_.button = 2
      data_.pickOutIdS = []
      data_.taskLogIdS = []
      for (const datum of data) {
        data_.pickOutIdS.push(datum.id)
      }
      for (const selectionTaskLogListData of this.selectionTaskLogListDataS) {
        data_.taskLogIdS.push(selectionTaskLogListData.id)
      }
      crudPickOut.operationAll(data_).then(res => {
        data_ = {};
        this.onOff = false
        this.crud.toQuery()
        this.$message.success(res)
        this.selectData()
      })
      data_ = {};
    },
    returnIndex(){//返回主页
      this.$router.push({ path: '/business-pick/pickOut', query: {} })
    },
    //已添加的
    selectYtjTaskLogListDataS(id){
      let data = {};
      data = this.pickOutButton;
      data.pickOutId = id;
      crudPickOut.queryTaskLog(data).then(res => {
        this.ytjTaskLogListDataS = res
      })
    },
    //未添加的
    selectWtjTaskLogListDataS(){
      let data = {};
      data = this.pickOutButton;
      data.pickOutId = null;
      crudPickOut.queryTaskLog(data).then(res => {
        this.taskLogListData = res
      })
    }
  }
}
</script>

<style scoped>

</style>
