<template>
    <div class="order-wraper">
        <div class="wrap-filter-buttons">
            <div class="wrap-filters">
                <div class="filter_item">
                    <div class="filter_label">设备</div>
                    <div class="filter-input-wrap">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="wrap-buttons">
                <button class="button button--primary" @click="getDatas">查询</button>
                <button class="button button--primary" :disabled="disabled1" @click="_openStart">开工</button>
                <button class="button button--primary" :disabled="disabled2" @click="_saveReport">报工</button>
                <button class="button button--primary" :disabled="disabled3" @click="_tofinish">强制完成</button>
            </div>
        </div>
        <div class="grid_wraper">
            <table class="filter-table">
                <tr>
                    <th width="4%"></th>
                    <th width="8%">工单日期</th>
                    <th width="8%">工单号</th>
                    <th width="10%">状态</th>
                    <th width="8%">设备</th>
                    <th width="10%">物料规格</th>
                    <th width="10%">工序</th>
                    <th width="10%">计划生产</th>
                    <th width="9%">待生产</th>
                    <th width="9%">已生产</th>
                    <th width="13%">开工时间</th>
                </tr>
                <tr v-for="e in dataList" :key="e.workorder_id">
                    <td>
                        <button class="iconfont select_icon" :class="pkId === e.workorder_id ? 'selected_icon' : 'unselect_icon'" @click="toRadio(e)"></button>
                    </td>
                    <td>{{e.workorder_code}}</td>
                    <td>{{e.shift_type_scode_name}}</td>
                    <td>{{e.material_name}}</td>
                    <td>{{e.workprocedure_name}}</td>
                    <td>{{['创建','下发','生产中','暂停', '完成'][Number(e.order_status) - 1]}}</td>
                    <td>{{e.plan_qty}}</td>
                    <td>{{e.real_qty}}</td>
                    <td>
                    </td>
                    <td>{{e.realproducestart_date}}</td>
                    <td>{{e.realproduceend_date}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      options: [{
        value: '选项1',
        label: '超级管理员'
      }, {
        value: '选项2',
        label: '系统管理员'
      }, {
        value: '选项3',
        label: '普通用户'
      }, {
        value: '选项4',
        label: '开发人员'
      }],
      value: '',
      disabled1: false,
      disabled2: false,
      disabled3: false,
      dataList: [{workorder_id: '1'}, {workorder_id: '2'}],
      pkId: '',
      pkObj: {}
    }
  },
  methods: {
    getDatas () {

    },
    _openStart () {

    },
    _saveReport () {

    },
    _tofinish () {

    },
    toRadio (e) {
      this.pkId = this.pkId === e.workorder_id ? '' : e.workorder_id
      this.pkObj = this.pkId === e.workorder_id ? e : {}
    }
  }
}
</script>

<style lang="stylus" scoped>
.filter_label
    width 32px
.filter-input-wrap
    width calc(100% - 32px)
</style>
