<!--suppress ALL -->
<template>
  <el-dialog
    :title="crud.status.title"
    append-to-body
    fullscreen
    :before-close="crud.cancelCU"
    :visible.sync="crud.status.cu > 0 || crud.status.view > 0"
    width="1200px"
    @open="open"
    @close="close"
  >
    <el-row v-show="crud.status.cu > 0" :gutter="20" style="margin-bottom: 5px;">
      <el-col :span="20" style="border: 1px solid white">
        <span/>
      </el-col>
      <el-col :span="4">
        <span>
          <el-button
            icon="el-icon-check"
            size="mini"
            :loading="crud.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >保存</el-button>
          <el-button icon="el-icon-close" size="mini" type="info" @click="crud.cancelCU">关闭</el-button>
        </span>
      </el-col>
    </el-row>

    <el-form
      ref="form"
      v-show="false"
      style="border: 1px solid #cfe0df;margin-top: 10px;padding-top: 10px;"
      :inline="true"
      :model="form"
      :rules="rules"
      size="mini"
      label-width="85px"
      label-suffix=":"
    >
      <el-form-item label="车间" prop="workshop_id">
        <label slot="label">车间</label>
        <el-select
          v-model="form.workshop_id"
          clearable
          size="mini"
          placeholder="全部"
          class="filter-item"
        >
          <el-option
            v-for="item in dict.product_area"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="物料编码" prop="material_code">
        <el-input v-model.trim="form.material_code" disabled class="input-with-select" style="width: 370px;">
          <el-button slot="append" icon="el-icon-search" @click="insertEvent"/>
        </el-input>
      </el-form-item>
      <el-form-item label="物料名称" prop="material_name">
        <label slot="label">物料名称:</label>
        <el-input v-model="form.material_name" size="mini" disabled style="width: 210px"/>
      </el-form-item>
      <el-form-item label="明细数" prop="detail_count">
        <label slot="label">明&nbsp;&nbsp;细&nbsp;数:</label>
        <el-input v-model="form.detail_count" size="mini" disabled style="width: 210px"/>
      </el-form-item>
      <el-form-item label="总重量" prop="total_qty">
        <label slot="label">总&nbsp;&nbsp;重&nbsp;量:</label>
        <el-input-number
          v-model.number="form.total_qty"
          :controls="false"
          :precision="3"
          :min="0"
          disabled
          style="width: 210px"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注:</label>
        <el-input
          v-model="form.remark"
          style="width: 380px;"
          rows="2"
          type="textarea"
          :disabled="crud.status.view > 0"
        />
      </el-form-item>
    </el-form>

    <!--表格渲染-->
    <el-table
      ref="table"
      :data="form.tableData"
      style="width: 100%;"
      border
      :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
    >
      <el-table-column type="index" label="序号" width="55" align="center"/>
      <el-table-column prop="ask_time" label="要求到货日期" width="150"/>
      <el-table-column prop="material_code" label="物料编码" width="150"/>
      <el-table-column show-overflow-tooltip prop="material_name" label="物料名称"/>
      <el-table-column prop="qty" label="需求数量" width="100"/>
      <el-table-column prop="qty_unit_name" label="数量单位" width="100"/>
      <el-table-column prop="ask_time" label="确认到货日期" width="250">
        <template slot-scope="scope">
          <el-date-picker
            v-model="form.tableData[scope.$index].agree_time"
            type="date"
            placeholder="选择日期"
            align="center"
            value-format="yyyy-MM-dd"
            :disabled="crud.status.view > 0"
          />
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="po_code" label="采购订单">
        <template slot-scope="scope">
          <el-input
            v-model="form.tableData[scope.$index].po_code"
            size="small"
            :controls="false"
            controls-position="right"
          />
        </template>
      </el-table-column>
<!--      <el-table-column show-overflow-tooltip prop="safe_qty" label="安全库存"/>-->
<!--      <el-table-column show-overflow-tooltip prop="remark" label="总需求数量"/>-->
    </el-table>

    <MaterDtl
      :dialog-show.sync="materShow"
      :is-single="true"
      @setMaterValue="tableChanged"
    />

  </el-dialog>
</template>

<script>
import CRUD, {crud, form} from '@crud/crud'
import MaterDtl from '@/views/wms/pub/MaterDialog'
import crudPurchase from '@/views/wms/pcs/purchaseorder/purchase'

const defaultForm = {
  product_code: '',
  status: '10',
  create_mode: '01',
  material_code: '',
  material_name: '',
  qty_unit_id: '',
  qty_unit_name: '',
  total_qty: 0,
  detail_count: '0',
  workshop_id: '',
  tableData: []
}

export default {
  name: 'AddDialog',
  components: {MaterDtl},
  mixins: [crud(), form(defaultForm)],
  dicts: ['IO_BILL_STATUS', 'ST_INV_RAW_IN_TYPE', 'ST_QUALITY_SCODE', 'bill_type', 'product_area'],
  methods: {
    close() {
      this.$emit('AddChanged')
    },
    [CRUD.HOOK.beforeToEdit]() {
      crudPurchase.getDtl(this.form).then(res => {
        for (let i = 0; i < res.length; i++) {
          const row = res[i]
          row.material_name = this.form.material_name
        }
        this.form.tableData = res
      })
    },

    [CRUD.HOOK.beforeSubmit]() {
      // 提交前校验
      if (this.form.tableData.length === 0) {
        this.crud.notify('请至少选择一条明细', CRUD.NOTIFICATION_TYPE.INFO)
        return false
      }
    }
  }
}
</script>

<style>
.crud-opts2 {
  padding: 4px 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.crud-opts2 .crud-opts-right2 {
  margin-left: auto;
}
</style>
