<template>
  <div class="inner-wrap">
    <nav-bar title="工单管理"></nav-bar>
    <div class="wrap2">
      <section class="grid-wraper mgt15">
        <div class="slide_new">
          <table>
            <thead>
              <tr>
                <th>工单（明细）号</th>
                <th>工单（明细）状态</th>
                <th>物料编码</th>
                <th>物料名称</th>
                <th>外径</th>
                <th>壁厚</th>
                <th>长度（mm）</th>
                <th>是否刻字</th>
                <th>是否套冒</th>
                <th>是否裹膜</th>
                <th>是否捆扎</th>
                <th>是否贴标</th>
                <th>上料口</th>
                <th>下料数量</th>
                <th>客户编码</th>
                <th>客户名称</th>
                <th>图标前刻字信息</th>
                <th>刻字图标</th>
                <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="e.order_id">
                <td>
                  <div class="td_detail" @click="showSec(e, i)">
                     <p>{{e.order_code}}</p>
                    <div v-show="e.pid === 0" class="iconfont table_dropdown_icon" :class="{'rotate180': e.childShow}"></div>
                  </div>
                </td>
                <td v-show="e.pid === 0">{{['就绪', '已确认', '已下发', '执行中', '下发工单暂停', '工单暂停', '下发强制完成', '强制完成', '自动完成', '取消'][Number(e.order_status)]}}</td>
                <td v-show="e.pid !== 0">{{['就绪', '分拣中', '下发工单明细暂停', '工单明细暂停', '下发强制完成', '强制完成', '自动完成', '取消'][Number(e.order_status)]}}</td>
                <td>{{e.material_code}}</td>
                <td>{{e.material_name}}</td>
                <td>{{e.outer_diameter}}</td>
                <td>{{e.wall_thickness}}</td>
                <td>{{e.length}}</td>
                <td>{{e.is_lettering}}</td>
                <td>{{e.is_risking}}</td>
                <td>{{e.is_coating}}</td>
                <td>{{e.is_strapping}}</td>
                <td>{{e.is_labeling}}</td>
                <td>{{['A侧', 'B侧', '双侧'][Number(e.feeding_mouth) - 1]}}</td>
                <td>{{e.qty}}</td>
                <td>{{e.cust_code}}</td>
                <td>{{e.cust_name}}</td>
                <td>{{e.lettering_message}}</td>
                <td>{{e.lettering_icon}}</td>
                <td>{{e.lettering_message2}}</td>
                <td>{{['蓝色', '黑色', '红色', '白色', '黄色', '绿色', '粉色', '墨绿色', '紫色'][Number(e.color_type) - 1]}}</td>
                <td>{{e.strap_number}}</td>
                <td>{{e.labeling_template}}</td>
                <td>{{e.create_by}}</td>
                <td>{{e.create_time}}</td>
                <td>
                  <button v-show="e.pid === 0 && e.order_status === '00'" class="button--primary button--cancle button_table_font" :disabled="disabled1" @click="toOrderOperation1(e)">开始分拣</button>
                  <button v-show="e.pid === 0" class="button--primary button--cancle button_table_font" :disabled="disabled2" @click="toOrderOperation2(e)">强制完成工单</button>
                  <button v-show="e.pid !== 0" class="button--primary button--cancle button_table_font" :disabled="disabled3" @click="toOrderOperation3(e)">手动完成</button>
                  <button v-show="e.pid !== 0" class="button--primary button--cancle button_table_font" :disabled="disabled4" @click="toOrderOperation4(e)">强制完成明细</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import NavBar from '@components/NavBar.vue'
import {handOrder, orderOperation} from '@config/getData2.js'
export default {
  name: 'OrderManage',
  components: {
    NavBar
  },
  data () {
    return {
      interTime: this.$store.getters.setTime,
      timer: null,
      dataList: [],
      disabled1: false,
      disabled2: false,
      disabled3: false,
      disabled4: false
    }
  },
  created () {
    this.refresh()
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    refresh () {
      this._handOrder()
      this.timer = setInterval(() => {
        this._handOrder()
      }, this.interTime)
    },
    showSec (e, i) {
      e.childShow = !e.childShow
      if (e.childShow) {
        if (e.children.length > 0) {
          e.children.map((el, j) => {
            let obj = Object.assign({}, e, el, {children: [], pid: j + 1})
            this.dataList.splice(i + j + 1, 0, obj)
          })
        }
      } else {
        if (e.children.length > 0) {
          this.dataList.splice(i + 1, e.children.length)
        }
      }
    },
    /** 查询分拣工单及明细（定时查询） */
    async _handOrder () {
      let res = await handOrder()
      if (res.code === '1') {
        this.dataList = [...res.result]
        this.dataList.map(el => {
          this.$set(el, 'pid', 0)
          this.$set(el, 'childShow', false)
        })
      } else {
        this.Dialog(res.desc)
      }
    },
    /** 工单操作 */
    async _orderOperation (type, uuid, ouuid) {
      try {
        let res = await orderOperation(type, uuid, ouuid)
        if (res.code === '1') {
          this.toast(res.desc)
          clearInterval(this.timer)
          this.timer = null
          this.refresh()
        } else {
          this.Dialog(res.desc)
        }
        this.disabled1 = false
        this.disabled2 = false
        this.disabled3 = false
        this.disabled4 = false
      } catch (err) {
        this.Dialog(err)
        this.disabled1 = false
        this.disabled2 = false
        this.disabled3 = false
        this.disabled4 = false
      }
    },
    toOrderOperation1 (e) {
      this.disabled1 = true
      this._orderOperation('1', '', e.order_id)
    },
    toOrderOperation2 (e) {
      this.disabled2 = true
      this._orderOperation('2', '', e.order_id)
    },
    toOrderOperation3 (e) {
      this.disabled3 = true
      this._orderOperation('3', e.order_id, e.parent_order_id)
    },
    toOrderOperation4 (e) {
      this.disabled4 = true
      this._orderOperation('4', e.order_id, e.parent_order_id)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin.styl'
.wrap2
  _wh(100%, calc(100% - .4rem))
.wrap-filter-button
  padding 0.05rem 0.2rem
  margin 0
.wrap-button
  margin 0.01rem auto
.grid-wraper
  _wh(100%, 100%)
  overflow-y scroll
  box-sizing border-box
.slide_new
  table
    table-layout fixed
    min-width 100%
    border-collapse separate
    border-spacing 0
    border 0
    td, th
      box-sizing border-box
      overflow hidden
      white-space nowrap
      text-overflow ellipsis
      white-space nowrap
      padding 0 .15rem
      border-bottom .05rem solid #f5f5f5
      &:first-child
        position sticky
        left 0
      &:last-child
        position sticky
        right 0
    thead
      tr
        th
          position sticky
          top 0
          z-index 101
          background #d7d7d7
          _font(.13rem, .5rem, #696969, bold)
          border-right .01rem dashed #fff
          &:first-child
            background #d7d7d7
            z-index 102
          &:last-child
            border-right none
    tbody
      tr
        td
          _font(.13rem, .5rem, #323232)
          background #fff
          border-right .01rem dashed #d7d7d7
          z-index 99
          &:first-child
            z-index 100
          &:last-child
            border-right none
.td_detail
  _fj(flex-start)
.table_dropdown_icon
  _wh(.2rem, .2rem)
  _font(.13rem, .2rem, #c0c4cc,,center)
  margin-left .1rem
  &::before
    content: '\e62b'
.rotate180
  transform rotate(-180deg)
  transition transform 0.3s
</style>
