<template>
  <div>
    <el-dialog size="mini" title="外加工单详情" :visible.sync="dialogVisible" width="1180px">
      <div style="margin-bottom: 10px;width: 100%;">
        <el-button size="mini" @click="dialogVisible = false" type="">关  闭</el-button>
        <!--        <el-button size="mini" @click="billPrintBtn" type="warning">打印外加工单</el-button>-->
      </div>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>外加工单</span>
        </div>
        <div>

          <el-form size="mini" label-width="100px" label-position="right">
            <el-row>
              <el-col :span="6">
                <el-form-item label="客户名称">
                  <el-input :disabled="billType==0" v-model="form.customerName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="印品名称">
                  <el-input :disabled="billType==0" v-model="form.printName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="施工单号">
                  <el-input :disabled="true" v-model="form.originPrintBillCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="订单编号">
                  <el-input :disabled="true" v-model="form.originOrderCode"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单据后工">
                  <el-input :disabled="billType==0" v-model="form.originOrderProcessStr"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="预计交货时间">
                  <el-date-picker
                    style="width: 160px"
                    :disabled="billType==0"
                    v-model="form.expectedDeliverDate"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单据金额">
                  <el-input :disabled="billType==0" v-model="form.billMoney"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="外协单号">
                  <el-input :disabled="true" v-model="form.originOutAssistBill"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="原外协单备注">
                  <el-input :disabled="billType==0" :rows="4" type="textarea" v-model="form.originBillMemo"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="单据备注">
                  <el-input  :rows="3" type="textarea" v-model="form.billMemo"></el-input>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>
      </el-card>

      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>工序</span>
        </div>
        <div>
          <el-table
            border
            class="tb-edit"
            row-key="id"
            size="mini"
            highlight-current-row
            :data="processList"
            style="width: 100%">
            <el-table-column
              label="工序名称"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.craftName }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="工序尺寸"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processSize }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="工序数量"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="已反馈数量"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="工序金额"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processCost }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="工序耗时"
            >
              <template  slot-scope="scope">
                <span>{{ scope.row.processNeedTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="备注"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.processMemo }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-card>
      <el-card style="margin-top: 10px" class="box-card">
        <div slot="header" class="clearfix">
          <span>收货信息</span>
        </div>
        <el-form size="mini" label-width="100px" label-position="right">
          <el-row>
            <el-col :span="8">
              <el-form-item label="收货人">
                <el-input :disabled="billType==0" v-model="form.receiveMan"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货电话">
                <el-input :disabled="billType==0" v-model="form.receivePhone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="收货地址">
                <el-input :disabled="billType==0" v-model="form.sendAddress"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import {
  getInfoById
} from '@/api/outsideFactory/queryCraftBill/index.js'
export default {
  name: 'printbillDetail',
  data() {
    return {
      innerForm:{},
      billType:0,
      innerVisible:false,
      dialogStatus: 1,//1增加，2修改
      form: {},
      options: [],
      confirmdialog: false,
      dialogVisible: false,
      dialogTitle: "",
      listLoading: false,
      processList: [],
      printVisible:false,
      idOrder: '',
      printBillBreedList: [],//生产信息
      printOrderList: [],//订单列表
      activities: [],
      printBillDetail: {},
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    getDetail() {
      const _that = this;
      _that.printVisible = true;
      var data = {
        idCraftBill:_that.idOrder
      }
      getInfoById(data).then(res => {
        //获取详情
        var datas = res.data;
        _that.processList = datas.processList;
        console.log(datas);
        var billMemo = "";
        if(datas.billMemo==null || datas.billMemo=="" || datas.billMemo==undefined){
          billMemo = datas.originBillMemo;
        }else {
          billMemo = datas.billMemo;
        }
        _that.form = {
          id: _that.idOrder,
          customerName: datas.customerName,
          billCode:datas.billCode,
          originOrderCode:datas.originOrderCode,
          originOutAssistBill:datas.originOutAssistBill,
          originPrintBillCode:datas.originPrintBillCode,
          originOrderProcessStr:datas.originOrderProcessStr,
          printName: datas.printName,
          billMoney: datas.billMoney,
          originBillMemo:datas.originBillMemo,
          billMemo: billMemo,
          expectedDeliverDate: datas.expectedDeliverDate,
          receiveMan: datas.receiveMan,
          sendAddress: datas.sendAddress,
          receivePhone: datas.receivePhone
        }
      }).catch(err => {
        _that.$message.error(err);
        // _that.printVisible = false;
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-dialog__header{
  padding: 10px 10px 10px;
}
::v-deep .el-dialog__body{
  padding: 5px 20px;
}
::v-deep .el-card__header{
  padding: 5px 20px;
}
</style>
