<template>
  <el-dialog
    title="工单详情"
    append-to-body
    fullscreen
    :visible.sync="dialogVisible"
    @open="open"
    @close="close"
  >
    <el-card class="box-card" shadow="never">
      <el-form ref="form" disabled :inline="true" :model="form" :rules="rules" size="mini" label-width="180px">
        <el-form-item label="工单编码">
          <el-input v-model="form.produceorder_code" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="工单类型">
          <el-select v-model="form.order_type_scode" style="width: 200px" filterable placeholder="请选择">
            <el-option
              v-for="item in dict.PDM_BI_ORDERTYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="所属工序">
          <el-select
            v-model="form.workprocedure_id"
            clearable
            size="mini"
            class="filter-item"
            style="width: 200px;"
          >
            <el-option
              v-for="item in workprocedureList"
              :key="item.workprocedure_id"
              :label="item.workprocedure_name"
              :value="item.workprocedure_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-date-picker v-model="form.produce_date" type="date" value-format="yyyy-MM-dd" style="width: 200px;" />
        </el-form-item>
        <el-form-item v-if="false" label="物料标识">
          <el-input v-model="form.material_id" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="物料编码">
          <el-input
            v-model="form.material_code"
            style="width: 200px;"
            clearable
            @focus="materialShow=true"
            @clear="form.material_id='',form.material_code='',form.material_name='',form.material_spec=''"
          />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input
            v-model="form.material_name"
            style="width: 200px;"
            disabled
          />
        </el-form-item>
        <el-form-item label="物料规格">
          <el-input
            v-model="form.material_spec"
            style="width: 200px;"
            disabled
          />
        </el-form-item>
        <el-form-item label="物料单重">
          <el-input v-model="form.material_weight" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="计划数量">
          <el-input v-model="form.plan_qty" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="计划开始时间">
          <el-date-picker
            v-model="form.planproducestart_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="计划结束时间">
          <el-date-picker
            v-model="form.planproduceend_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="报工数量">
          <el-input v-model="form.report_qty" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="实际开始时间">
          <el-date-picker
            v-model="form.realproducestart_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="实际结束时间">
          <el-date-picker
            v-model="form.realproduceend_date"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="班次类型">
          <el-select
            v-model="form.shift_type_scode"
            style="width: 200px"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in dict.PDM_BI_SHIFTTYPE"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品系列">
          <treeselect
            disabled
            v-model="form.product_series"
            :options="classes3"
            :auto-load-root-options="false"
            :load-options="loadChildNodes"
            style="width: 200px;"
            placeholder=""
          />
        </el-form-item>
        <el-form-item label="销售单标识">
          <el-input v-model="form.sale_id" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="是否搬运">
          <el-radio
            v-for="item in dict.IS_OR_NOT"
            :key="item.id"
            v-model="form.is_needmove"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-form-item>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-form-item label="允许修改报工数量">
          <el-radio
            v-for="item in dict.IS_OR_NOT"
            :key="item.id"
            v-model="form.is_canupdate_update"
            :label="item.value"
          >{{ item.label }}
          </el-radio>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="crud-opts2" style="margin-top: 30px;margin-bottom: 15px">
      <span class="role-span">工单生产记录详情</span>
      <span class="crud-opts-right2">
        <!--左侧插槽-->
        <slot name="left" />
      </span>

    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%;"
      max-height="300"
      border
      :highlight-current-row="true"
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      <el-table-column prop="device_code" label="设备编码" align="center" />
      <el-table-column prop="device_name" label="设备名称" align="center" min-width="200" show-overflow-tooltip/>
      <el-table-column prop="produce_qty" label="生产数量" align="center" />
      <el-table-column prop="init_qty" label="期初数量" align="center" />
      <el-table-column prop="finish_qty" label="期末数量" align="center" />
      <el-table-column prop="finishproduct_qty" label="完成数量" align="center" />
      <el-table-column prop="report_qty" label="报工数量" align="center" />
      <el-table-column prop="operatetime_start" label="开始时间" align="center"  min-width="130" show-overflow-tooltip/>
      <el-table-column prop="operatetime_end" label="结束时间" align="center" min-width="130" show-overflow-tooltip />
      <el-table-column prop="nick_name" label="操作人" align="center" />
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { crud } from '@crud/crud'
import crudWorkProcedure from '@/api/wms/basedata/pdm/workProcedure'
import crudProduceshiftorder from '@/api/wms/mps/produceshiftorder'
import Treeselect, { LOAD_CHILDREN_OPTIONS } from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import crudClassstandard from '@/api/wms/basedata/master/classstandard'

export default {
  name: 'ViewDialog',
  components: { Treeselect },
  dicts: ['PDM_BI_SHIFTTYPE', 'MPS_BD_ORDERSTATUS', 'is_used', 'PDM_BI_ORDERTYPE', 'IS_OR_NOT'],
  mixins: [crud()],
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    },
    bussConfig: {
      type: Object
    },
    openParam: {
      type: Object
    }
  },
  data() {
    return {
      dialogVisible: false,
      classes3: [],
      form: {
        sale_id: null,
        produceorder_id: null,
        produceorder_code: null,
        producedeviceorder_code: null,
        shift_type_scode: null,
        workprocedure_id: null,
        produce_date: null,
        plan_qty: null,
        real_qty: null,
        report_qty: null,
        material_id: null,
        material_code: null,
        material_weight: null,
        planproducestart_date: null,
        planproduceend_date: null,
        realproducestart_date: null,
        realproduceend_date: null,
        order_status: null,
        is_needmove: null,
        order_type_scode: null,
        create_id: null,
        create_name: null,
        create_time: null,
        update_optid: null,
        update_optname: null,
        update_time: null,
        sysdeptid: null,
        syscompanyid: null,
        is_delete: null,
        material_name: null,
        device_id: null,
        is_canupdate_update: null,
        material_spec: null
      },
      workprocedureList: [],
      tableData: [],
      rules: {
      }
    }
  },
  watch: {
    dialogShow: {
      handler(newValue) {
        this.dialogVisible = newValue
      }
    }
  },
  methods: {
    open() {
      this.getworkprocedure()
      this.initClass3()
      this.is_null()
      crudProduceshiftorder.getDtl({ produceorder_id: this.form.produceorder_id }).then(res => {
        this.tableData = res
      })
    },
    is_null() {
      // 物料系列为空，新增
      if (!this.form.product_series) {
        this.form.product_series = null // 必须为null，否则会出现unknown
      } else { // 更新
        this.getSubTypes('03', this.form.product_series)
      }
    },
    getSubTypes(type, id) {
      const that = this
      crudClassstandard.getClassSuperior(id).then(res => {
        const data = res.content
        that.buildTree(data)
        if (type === '03') {
          that.classes3 = data
        }
      })
    },
    queryClassId() {
      const param = {
        'class_idStr': this.class_idStr
      }
      crudClassstandard.queryClassById(param).then(res => {
        this.classes = res.content.map(obj => {
          if (obj.hasChildren) {
            obj.children = null
          }
          return obj
        })
      })
    },
    buildTree(classes) {
      classes.forEach(data => {
        if (data.children) {
          this.buildTree(data.children)
        }
        if (data.hasChildren && !data.children) {
          data.children = null // 重点代码
        }
      })
    },
    // 获取子节点数据
    loadChildNodes({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        crudClassstandard.getClass({ pid: parentNode.id }).then(res => {
          parentNode.children = res.content.map(function(obj) {
            if (obj.hasChildren) {
              obj.children = null
            }
            return obj
          })
          setTimeout(() => {
            callback()
          }, 100)
        })
      }
    },
    initClass3() {
      const param = {
        parent_class_code: '07'
      }
      crudClassstandard.getClassType(param).then(res => {
        const data = res.content
        this.buildTree(data)
        this.classes3 = data
      })
    },
    getworkprocedure() {
      // 查询工序
      crudWorkProcedure.downSelect({}).then(res => {
        this.workprocedureList = res
      })
    },
    close() {
      this.$emit('AddChanged')
    },
    setForm(row) {
      this.dialogVisible = true
      this.form = row
    }
  }
}
</script>

<style>
.crud-opts2 {
  padding: 0 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.crud-opts2 .crud-opts-right2 {
  margin-left: auto;
  padding: 4px 4px;
}
.input-with-select  {
  background-color: #fff;
}
</style>
