<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.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="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 flexend">
                    <button class="button button--primary" @click="_washQuery">查询</button>
                    <button class="button button--primary" :disabled="disabled1" :class="{'button--defalut': checkArr.length === 0}" @click="_washSubmitWash">确认上料</button>
                    <button class="button button--primary" @click="toJump">人工倒料</button>
                </div>
            </div>
        </div>
        <div class="grid_wraper">
            <table class="filter-table">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>设备号</th>
                        <th>物料编号</th>
                        <th>物料规格</th>
                        <th>重量(g)</th>
                        <th>数量</th>
                        <th>存在任务</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(e, i) in dataList" :key="i" @click="toRadio(e)">
                        <td>
                          <button class="iconfont select_icon select_square_icon" :class="e.checked ? 'selected_icon' : 'unselect_icon'"></button>
                        </td>
                        <td>{{ e.device_code }}</td>
                        <td>{{e.material_code}}</td>
                        <td>{{e.material_spec}}</td>
                        <td>{{e.deviceinstor_qty | numeric(3)}}</td>
                        <td>{{ e.deviceinstor_weight | numeric(3)  }}</td>
                        <td>{{ e.task_code }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import {dictAll, washSpecList, washQuery, washSubmitWash} from '@config/getData2.js'
export default {
  data () {
    return {
      options1: [],
      value1: '',
      options2: [],
      value2: '',
      dataList: [],
      checkArr: [],
      disabled1: false
    }
  },
  created () {
    this._dictAll()
    this._washSpecList()
  },
  methods: {
    // 车间下拉框
    async _dictAll () {
      let res = await dictAll()
      if (res.code === 200) {
        this.options1 = [...res.content]
      }
    },
    // 规格下拉框
    async _washSpecList () {
      let res = await washSpecList()
      if (res.code === 200) {
        this.options2 = [...res.content]
      }
    },
    // grid
    async _washQuery () {
      let res = await washQuery(this.value1, this.value2)
      if (res.code === 200) {
        res.content.map(el => {
          this.$set(el, 'checked', false)
        })
        this.dataList = [...res.content]
      }
    },
    // 确认上料
    async _washSubmitWash () {
      this.disabled1 = true
      if (this.checkArr.length === 0) {
        this.disabled1 = false
        return
      }
      try {
        let arr = []
        this.checkArr.map(el => {
          arr.push(el.device_code)
        })
        let res = await washSubmitWash(arr)
        if (res.code === 200) {
          this.toast(res.msg)
          this.value1 = ''
          this.value2 = ''
          this._washQuery()
        }
        this.disabled1 = false
      } catch (e) {
        this.disabled1 = false
      }
    },
    toJump () {
      this.$router.push('/manpour')
    },
    toRadio (e) {
      e.checked = !e.checked
      this.checkArr = this.dataList.filter(i => { return i.checked === true })
    }
  }
}
</script>

<style lang="stylus" scoped>
.grid_wraper
    height calc(100% - 95px)
</style>
