<template>
<div class="craftDetail">
  <el-dialog size="mini" :title="dialogTitle" :visible.sync="dialogVisible" width="1250px" :modal-append-to-body='false' append-to-body>
    <div style="margin-bottom: 10px;width: 100%;">
      <el-button size="mini" @click="dialogVisible = false" type="primary">关  闭</el-button>
    </div>


    <el-card class="box-card">
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane  size="mini" label="外加工单" name="first">
          <div>

            <el-form size="mini" label-width="100px" label-position="right">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="客户名称">
                    <span>{{form.customerName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="印品名称">
                    <el-tooltip style="display: inline-block" class="item" effect="dark" :content="form.printName "
                                placement="top-start">
              <span style="width: 120px;display: inline-block;vertical-align:middle"
                    class="ellipsis"> {{ form.printName }}</span>
                    </el-tooltip>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="施工单号">
                    <span>{{form.originPrintBillCode}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="订单编号">
                    <span>{{form.originOrderCode}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="单据后工">
                    <span>{{form.originOrderProcessStr}}</span>
                  </el-form-item>
                </el-col>
                <el-col  :span="6">

                  <el-form-item label="交货日期">
                    <span>{{form.expectedDeliverDate | getTime}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="单据金额">
                    <span>{{form.billMoney}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="外协单号">
                    <span>{{form.originOutAssistBill}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="130px" label="原订单所有后工">
                    <span>{{form.origOrderAllProcess}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="原外协单备注">
                    <span>{{form.originBillMemo}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="单据备注">
                    <span>{{form.billMemo}}</span>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
        <el-tab-pane  size="mini" label="订单" name="two">
          <div>
            <el-form size="mini" label-width="100px" label-position="right">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="订单编号">
                    <span>{{fileInfoList.orderCode}}</span>
                  </el-form-item>
                  <el-form-item label="印品名称">
                    <span>{{fileInfoList.orderName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="样稿文件">
                    <span><el-link :href="fileInfoList.webProofFileLink" target="_blank" style="color: #20a0ff">{{ fileInfoList.proofFile}}
                    </el-link></span>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>

    </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"
          :data="processList"
          style="width: 100%">
          <el-table-column
            label="工序名称"
          >
            <template slot-scope="scope">
              <el-button v-show="backBtn" @click="backCraftBtn(scope.row)"  type="primary" plain size="mini">
                退回
              </el-button>
              <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
            prop="breedCutSize"
            label="展开尺寸">
            <template slot-scope="scope">
              <span>{{ scope.row.breedCutSize }}</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.feedbackNum }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="反馈状态"
          >
            <template slot-scope="{row}">
              <el-tag size="mini" type="info" v-if="row.processState==0">待排产</el-tag>
              <el-tag size="mini" type="danger" v-if="row.processState==1">待验收</el-tag>
              <el-tag size="mini" type="warning" v-if="row.processState==2">待生产</el-tag>
              <el-tag size="mini" type="primary" v-if="row.processState==3">待完工</el-tag>
              <el-tag size="mini" type="success" v-if="row.processState==4">待流转</el-tag>
              <el-tag size="mini" type="" v-if="row.processState==10">已完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="反馈版组"
          >
            <template  slot-scope="scope">
              <span>{{ scope.row.feedbackGroupName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.originProcessMemo }}</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="small" label-width="100px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="收货人">
              <span>{{ form.receiveMan }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货电话">
              <span>{{ form.receivePhone }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收货地址">
              <span>{{ form.sendAddress }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </el-dialog>
</div>
</template>

<script>
import {backCraftBill, getInfoById,viewRemoteOrder} from "@/api/outsideFactory/queryCraftBill";
import {ifPermissionList} from "@/api/printbill/printbill";
import {scheduleProcessBack} from "@/api/outsideFactory/processTos";

export default {
  name: "craftDetail",
  data() {
    return {
      fileInfoList:{},
      activeName: 'first',
      idOriginFactory:"",
      orderCode:"",
      backBtn:false,
      dialogTitle:"",
      idBill:"",
      dialogVisible:false,
      form:{},
      processList:[],
    }
  },
  mounted() {
    this.checkPermission();
  },
  methods: {
    checkPermission(){
      const _that = this;
      var data = {
        'permissions': 'outassistFactory:craftBillList:backProcess'
      }
      ifPermissionList(data).then(response => {
        // console.log('response', response)
        if (response.httpCode == 200) {
          var premArray = response.data.split("|")
          if(response.data=="0"){
            _that.backBtn = false;
          }else {
            _that.backBtn = true;
          }
        }
      }).catch(err => {
        // _that.$message.error(err)
      })
    },
    backCraftBtn(row){
      const _that = this;
      _that.$confirm('确认退回, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var process = {
          id: row.id,
          processState: row.processState
        }
        console.log(process);
        var data = {
          "process": JSON.stringify(process)
        }
        scheduleProcessBack(data).then(response => {
          // console.log("getAllEnableMachineInfo", response)
          _that.$message({
            type: 'success',
            message: '退回成功!'
          });
          _that.dialogVisible = false;
        }).catch(err => {
          _that.$message.error(err)
        })
      }).catch(() => {

      });

    },
    getDetail(){
      const _that = this;
      _that.dialogVisible = true;
      var data = {
        idCraftBill: _that.idBill
      }
      getInfoById(data).then(res => {
        //获取详情
        var datas = res.data;
        _that.processList = datas.processList;
        var billMemo = "";
        if(datas.billMemo==null || datas.billMemo=="" || datas.billMemo==undefined){
          billMemo = datas.originBillMemo;
        }else {
          billMemo = datas.billMemo;
        }
        _that.dialogTitle = '查看外加工单信息'+'('+datas.billCode+')';
        _that.form = {
          id: _that.idBill,
          origOrderAllProcess:datas.origOrderAllProcess,
          customerName: datas.customerName,
          billCode:datas.billCode,
          originOrderCode:datas.originOrderCode,
          originOutAssistBill:datas.originOutAssistBill,
          originOrderProcessStr:datas.originOrderProcessStr,
          originPrintBillCode:datas.originPrintBillCode,
          originBillMemo:datas.originBillMemo,
          billMemo: billMemo,
          printName: datas.printName,
          billMoney: datas.billMoney,
          expectedDeliverDate: datas.expectedDeliverDate,
          receiveMan: datas.receiveMan,
          sendAddress: datas.sendAddress,
          receivePhone: datas.receivePhone
        }
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    getOrderDetail(){
      const _that = this;
      _that.dialogVisible = true;
      var data = {
        idOriginFactory: _that.idOriginFactory,
        orderCode: _that.orderCode
      }
      viewRemoteOrder(data).then(res => {
        //获取详情
        _that.fileInfoList = res.data
        console.log("datas",_that.fileInfoList);
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    //序号
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style lang="scss" 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>

