<template>
    <div class="order-wraper">
        <div class="search-confirm-wrap">
            <div class="search-wrap">
                <div class="search-item">
                    <div class="search-label">仓库</div>
                    <div class="filter_input_wraper">
                        <el-select v-model="value1" filterable clearable placeholder="请选择">
                          <el-option
                              v-for="item in options1"
                              :key="item.stor_id"
                              :label="item.stor_name"
                              :value="item.stor_id">
                          </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="search-item">
                    <div class="search-label">单据类型</div>
                    <div class="filter_input_wraper">
                        <el-select v-model="value2" filterable clearable placeholder="请选择">
                          <el-option
                              v-for="item in options2"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="search-item">
                    <div class="search-label">入库点</div>
                    <div class="filter_input_wraper">
                        <el-select v-model="value3" filterable clearable placeholder="请选择">
                          <el-option
                              v-for="item in options3"
                              :key="item.point_code"
                              :label="item.point_name"
                              :value="item.point_code">
                          </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="search-item">
                    <div class="search-label">备注</div>
                    <div class="filter_input_wraper">
                        <input type="text" class="filter-input" v-model="remark">
                    </div>
                </div>
                <div class="search-item_2 flexend">
                    <button class="button button--primary" @click="toAddBillMater">添加单据物料</button>
                    <button class="button button--primary" :disabled="disabled2" :class="{'button--defalut': this.value1 === '' || this.value2 === '' || this.value3 === '' || this.dataList === [] || flag}" @click="showDialog">确认入库</button>
                    <button class="button button--primary" :class="{'button--defalut': pkId === ''}" @click="delRow">删除一行</button>
                    <button class="button button--primary" @click="toSearch">作业查询</button>
                </div>
            </div>
        </div>
        <div class="grid_wraper">
            <table class="filter-table">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>物料编号</th>
                        <th>物料名称</th>
                        <th>物料规格</th>
                        <th>入库数量</th>
                        <th>订单号</th>
                        <th>客户</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(e, i) in dataList" :key="i" :class="{'selected_icon': pkId === e.sale_code}" @click="toRadio(e)">
                        <td>{{i + 1}}</td>
                        <td>{{e.material_code}}</td>
                        <td>{{e.material_name}}</td>
                        <td>{{e.material_spec}}</td>
                        <td><input type="number" class="input" v-model="e.sale_qty"></td>
                        <!-- <td><input type="number" class="input" :min="0" v-model="el.sale_qty" @blur="e => {if (e.target.value === '') {el.sale_qty=0}}" v-enter-number></td> -->
                        <td>{{e.sale_code}}</td>
                        <td>{{e.remark}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
         <jxDialog
          ref="child"
          :title="title"
          :type="type"
          @toSure="toSureDialog"
          >
          <div class="form_wraper">确定继续操作吗？</div>
        </jxDialog>
    </div>
</template>

<script>
import { getBcpStor, getBillType, getPoint, confirmIn } from '../../../config/getData1.js'
import jxDialog from '@components/dialog.vue'
export default {
  name: 'finishedinstore',
  components: {
    jxDialog
  },
  data () {
    return {
      title: '提示',
      type: '2',
      options1: [],
      value1: '',
      options2: [],
      value2: '',
      options3: [],
      value3: '',
      remark: '',
      dataList: [],
      // dataList: [{material_code: '24007845L', material_spec: '23xcds', material_name: '垫片活接直通\DPHJS22\EHJA0703009B', sale_qty: '1000', sale_code: '0022060927', remark: '222'}],
      pkId: '',
      pkObj: {},
      disabled2: false
    }
  },
  computed: {
    flag () {
      let flag = false
      if (this.dataList.length) {
        this.dataList.map(el => {
          if (el.sale_qty === '' || Number(el.sale_qty) < 0) {
            flag = true
          }
        })
      }
      return flag
    }
  },
  beforeRouteLeave (to, from, next) {
    if (to.path === '/home' || to.path === '/login') {
      this.$store.dispatch('setKeepAlive', [])
    }
    next()
  },
  activated () {
    if (this.$store.getters.materArr.length > 0) {
      this.dataList = [...this.dataList, ...this.$store.getters.materArr]
    }
  },
  created () {
    this._getBcpStor()
    this._getBillType()
    this._getPoint()
  },
  methods: {
    toSureDialog () {
      this.toSure()
    },
    showDialog () {
      if (this.flag || this.value1 === '' || this.value2 === '' || this.value3 === '' || this.dataList === []) {
        // this.toast('请填写完整!')
        return
      }
      this.$refs.child.active = true
    },
    // 仓库下拉框
    async _getBcpStor () {
      let res = await getBcpStor()
      this.options1 = [...res.data]
    },
    // 单据类型下拉框
    async _getBillType () {
      let res = await getBillType()
      this.options2 = [...res.data]
    },
    // 入库点下拉框
    async _getPoint () {
      let res = await getPoint()
      this.options3 = [...res.data]
    },
    // 确认入库
    async toSure () {
      this.$refs.child.disabled = true
      this.disabled2 = true
      if (this.value1 === '' || this.value2 === '' || this.value3 === '' || this.dataList === []) {
        this.disabled2 = false
        return
      }
      try {
        let from = {
          stor_id: this.value1,
          bill_type: this.value2,
          point_code: this.value3,
          remark: this.remark,
          rows: this.dataList
        }
        let res = await confirmIn(from)
        this.toast(res.message)
        this.value1 = ''
        this.value2 = ''
        this.value3 = ''
        this.remark = ''
        this.dataList = []
        this.disabled2 = false
        this.$store.dispatch('setMaterObj', '')
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      } catch (e) {
        this.disabled2 = false
        this.$refs.child.active = false
        this.$refs.child.disabled = false
      }
    },
    toAddBillMater () {
      this.$store.dispatch('setMaterArr', [])
      this.$router.push('/selectfinishedmater')
    },
    toSearch () {
      this.$router.push('/finishedinstoresearch')
    },
    toRadio (e) {
      this.pkId = this.pkId === e.sale_code ? '' : e.sale_code
      this.pkObj = this.pkId === e.sale_code ? e : {}
    },
    delRow () {
      if (!this.pkId) {
        return
      }
      this.dataList = this.dataList.filter(el => el.sale_code !== this.pkId)
      this.$store.dispatch('setMaterArr', this.dataList)
    }
  }
}
</script>

<style lang="stylus" scoped>
.grid_wraper
    height calc(100% - 1.1rem)
.filter_input_wraper_1
    width calc(100% - 45px)
.search-label_1
    width 45px
.filter-table th, .filter-table td
    line-height 22px
.input
    width auto
    text-indent 0
    text-align center
</style>
