<template>
  <!-- 海港-老区轨道衡导入2-->
  <div class="addWagonLoad">
    <page-title>返回</page-title>
    <div class="cp">
      <el-upload
        style="margin: 8px;"
        class="upload-excel"
        action=""
        :on-change="importExcel"
        :show-file-list="false"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        :auto-upload="false"
      >
        <el-button type="primary">导入车皮号(Excel)</el-button>
      </el-upload>
      <div style="margin-right:200px;">
        当前导入数量：{{ tableData.length }}
      </div>
    </div>
    <div class="importedTable" style="height:300px;overflow:scroll;">
      <el-table
        ref="importExcel"
        highlight-current-row
        :data="tableData"
        :row-style="{height:'40px'}"
         @row-click="rowClick"
         style="width: 100%;font-size: 14px"
        id="domesticTable">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
          type="index"
          width="50px"
          prop="number"
          label="序号"
          align="center"
          fixed="left"
          :resizable="false"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="purchaseOrderNo"
          label="采购订单号"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="productName"
          label="品  名"
          width="240px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="supplierName"
          label="发货单位"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="materialName"
          label="物资名"
          width="150px"
        >
        </el-table-column>
         <el-table-column
          align="center"
          prop="resultForeignShipName"
          label="外轮船名"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="wagonNo"
          label="车号"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="sendStation"
          label="发站"
          width="100px"
        >
        </el-table-column>
         <el-table-column
          align="center"
          prop="sendDate"
          label="发货日期"
          width="150px"
        >
        </el-table-column>
        <el-table-column
          align="center"
          width="150px"
          prop="arrivalDate"
          label="到货日期"
        >
        </el-table-column>
        <el-table-column
          align="center"
          width="100px"
          prop="weight"
          label="标重"
        >
        </el-table-column>
        <el-table-column
      fixed="right"
      label="操作"
      width="70">
      <template slot-scope="scope">
          <el-button
            @click.native.prevent="ondrawer(scope)"
            type="text"
            size="small">
            手动配单
          </el-button>
        </template>
      </el-table-column>
      </el-table>
    </div>
    <div class="form">
      <div class="form_box" style="margin-right: 10rem;margin-top:20px">
        <el-form>
          <div class="preview-group">
            <el-form-item label="到站:">
              <el-autocomplete
                class="inline-input"
                v-model="toTheStation"
                :fetch-suggestions="querySearchToTheStation"
                placeholder="请输入到站名称"
                :trigger-on-focus="false"
                @select="handleSelectToTheStation"
              >
                <template slot-scope="{ item }">
                  <div class="name">{{ item.arrivalName }}</div>
                </template>
              </el-autocomplete>
            </el-form-item>
          </div>
        </el-form>
        <dil-form :formId="364" v-model="form1" ref="from1"></dil-form>
      </div>
    </div>
    <!-- 模态框 -->
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="80%"
    >
    <el-input
        placeholder="发货单位"
        v-model="supplierName"
        style="margin-top: 10px; margin-left: 20px; width: 150px"
        clearable
      >
      </el-input>
      <el-input
        placeholder="物资名"
        v-model="materialName"
        style="margin-top: 10px; margin-left: 20px; width: 150px"
        clearable
      >
       </el-input>
       <el-input
        placeholder="外轮船名"
        v-model="resultForeignShipName"
        style="margin-top: 10px; margin-left: 20px; width: 150px"
        clearable
      >
       </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick"
        style="margin-bottom: 15px">
        <i class="el-icon-search"></i>查询
      </el-button>
      <div v-show="drawer">
        <dilTable
        ref="ordertable"
          v-bind.sync="purchaseOption"
          @radio-change="orderChange"
        ></dilTable>
      </div>
    </el-drawer>
    <div class="button_box_domestic">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" :loading="isLoading" @click="makeSure"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime, isNumber } from "@/utils/sharedJsFile";
import { getCookie } from "@/utils/util.js";
export default {
  components: { PageTitle },
  data() {
    return {
      isLoading: false,
      file: null,
      list: [],
      form1: {},
      input: "",
      //是否匹配采购订单号
      matching: false,
      value: undefined,
      //船名
      remark: null,
      //采购订单id
      purchaseOrderId: null,
      //采购订单号
      purchaseOrderNo: null,
      //物资名称
      materialName: '',
      //发货单位名称
      supplierName: '',
      resultForeignShipName:'',
      //发货单位id
      supplierId: null,
      //物资id
      materialId: null,
      //表格数据
      tableData: [],
      unloadPointName: null,
      materials: [],
      suppliers: [],
      unloadPointId: null,
      //是否需要打开模态窗口
      drawer: false,
      a: 1,
      direction: "rtl",
      inputText: "",
      index:null,
      frist: {
        requestUrl: "/api/v1/uc/queryAPOMaterialByLike?apiId=244&startNum=050",
        selectionType: "radio",
        mapList1: []
      },
      secend: {
        requestUrl:
          "/api/v1/uc/getSupplierMesByMaterialId?apiId=247&materialId=",
        selectionType: "radio",
        mapList2: []
      },
      unloadPoint: {
        requestUrl: "/api/v1/uc/getUnloadingMesByLike?apiId=374",
        selectionType: "radio"
      },
      purchaseOption:{
         // 表格请求数据的地址
        requestUrl: "/api/v1/tms/findPurchaseOrderList?apiId=81",
        // 控制选择单列
        selectionType: "radio",
        pageSize:5,
      },
      sendStationId: null,
      toTheStationId: 1,
      sendStation: null,
      toTheStation: "老区轨道衡"
    };
  },
  watch: {
    matching(val) {
      if (val) {
        this.getPurchaseOrderNo();
      }
    }
  },
  created() {
    this.form1 = {
      arrivalStationId: 1
    };
  },
  mounted() {
    this.form1.resultLoadingDate = new Date();
  },
  methods: {
    getPurchaseOrderNo() {
      console.log(this.matching);
      let map = {
        materialId: this.materialId,
        supplierId: this.supplierId
      };
      if (this.remark) {
        map.remark = this.remark;
      }
      console.log(this.map);
      if (this.materialId && this.supplierId) {
        this.axios.post("/api/v1/oms/selectNewOrderId", map).then(res => {
          console.log(res);
          if (res.data.code == "200") {
            if (res.data.data == null) {
              this.$message({
                message: "没有匹配的采购订单号!",
                type: "warning"
              });
              this.form1 = [];
            } else {
              this.remark = res.data.data.remark;
              this.purchaseOrderId = res.data.data.purchaseOrderId;
              this.purchaseOrderNo = res.data.data.purchaseOrderNo;
            }
          } else {
            this.$message.error("请求失败");
          }
        });
      }
    },
    //到站弹出层
    handleSelectToTheStation(item) {
      this.toTheStationId = item.arrivalId;
      this.toTheStation = item.arrivalName;
    },
    //以下是到站边输边查搜索
    querySearchToTheStation(queryString, cb) {
      this.axios
        .get("/api/v1/uc/getArrivalByLike?index=" + this.toTheStation)
        .then(res => {
          if (res.data.code == "200") {
            var restaurantsSupplier = res.data.data;
            console.log(restaurantsSupplier);
            var results = queryString
              ? restaurantsSupplier.filter(
                  this.createFilterToTheStation(queryString)
                )
              : restaurantsSupplier;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    //到站
    createFilterToTheStation(queryString) {
      return restaurantsSupplier => {
        return (
          restaurantsSupplier.arrivalName
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) > -1
        );
      };
    },
    // 确定
    makeSure() {
      let that = this;
      let selection=this.$refs.importExcel.selection;
      this.isLoading = true;
      //校验
      if (
        this.tableData.length <= 0 ||
        !this.toTheStationId ||
        !selection ||
        selection.length<=0 ||
        !this.form1.resultLoadingDate
      ) {
        if (this.tableData.length <= 0) {
          this.$message({
            type: "warning",
            message: "请导入数据！"
          });
        }else if(!selection ||selection.length<=0){
           this.$message({
            type: "warning",
            message: "请选择车皮！"
          });
        }else if (!this.toTheStationId) {
          this.$message({
            type: "warning",
            message: "请选择到站！"
          });
        } else if (!this.form1.resultLoadingDate) {
          this.$message({
            type: "warning",
            message: "请选择装车时间！"
          });
        }
        this.isLoading = false;
        return;
      }
      let error=selection.find(item=>!item.purchaseOrderId || 
      !item.purchaseOrderNo || 
      !item.batchId || 
      !item.materialId || 
      !item.supplierId);
      if(error){
        this.$message({
            type: "warning",
            message: "请先配单再勾选！"
        });
        this.isLoading = false;
        return;
      }
      //绑定通用字段
      selection.forEach(row => {
        row.resultType = 2; //装车类型为海港-老区轨道衡
        row.arrivalStationId = that.form1.arrivalStationId; //到站id,默认老区轨道衡
        row.resultLoadingDate = sjTime(that.form1.resultLoadingDate); //装车日期
        row.resultRemarks = that.form1.resultRemarks; //备注
      });
      let data = {
        list: selection,
        userId: getCookie("userId")
      };
      console.log(data);
      //请求添加
      this.axios.post("/api/v1/tms/addDomesticLoadResult", data).then(res => {
        console.log(res);
        if (res.data.code == "200") {
          this.$message({
            type: "success",
            message: "新增成功"
          });
          this.cancel();
        } else {
          this.$message({
            type: "error",
            message: res.data.data
          });
        }
      }).then(()=>{
        this.isLoading = false;
      });
    },
    cancel() {
      this.$router.push("/wagonLoadEmergency");
    },
    // 导入excel
    importExcel(file) {
      let that = this;
      if (!file) {
        that.$message({
          message: "文件错误!",
          type: "warning"
        });
        return;
      }
      let excelData = [];
      var reader = new FileReader();
      var data = null;
      var workbook = null;
      //设置读取操作
      reader.onload = function(e) {
        console.log(e);
        data = e.target.result;
        workbook = XLSX.read(data, {
          type: "binary"
        });
        console.log(workbook);
        let rows = XLSX.utils.sheet_to_json(
          workbook.Sheets[workbook.SheetNames[0]]
        ); //只取第一页
        let index = 1;
        for (index = 1; index < rows.length; index++) {
          if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["A" + index] !=
            "undefined"
          ) {
            index++;
            break;
          }
        }
        console.log("表头行数:" + index);
        if(index>=rows.length){
          that.$message({
            message: "文件错误!",
            type: "warning",
          });
          return
        }
        //校验表头
        if (
          typeof workbook.Sheets[workbook.SheetNames[0]]["A" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["B" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["C" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["D" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["E" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["F" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["G" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["I" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["J" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["K" + index] == 'undefined' ||
          typeof workbook.Sheets[workbook.SheetNames[0]]["L" + index] == 'undefined' ||
          workbook.Sheets[workbook.SheetNames[0]]["A" + index].v != "序号" ||
          workbook.Sheets[workbook.SheetNames[0]]["B" + index].v != "发站" ||
          workbook.Sheets[workbook.SheetNames[0]]["C" + index].v != "到站" ||
          workbook.Sheets[workbook.SheetNames[0]]["D" + index].v !=
            "发货日期" ||
          workbook.Sheets[workbook.SheetNames[0]]["E" + index].v !=
            "到货日期" ||
          workbook.Sheets[workbook.SheetNames[0]]["F" + index].v !=
            "卸货地点" ||
          workbook.Sheets[workbook.SheetNames[0]]["G" + index].v != "品名" ||
          (workbook.Sheets[workbook.SheetNames[0]]["I" + index].v !=
            "计费\n吨位" &&
            workbook.Sheets[workbook.SheetNames[0]]["I" + index].v !=
              "计费吨位" &&
            workbook.Sheets[workbook.SheetNames[0]]["I" + index].v !=
              "计费&#10;吨位") ||
          workbook.Sheets[workbook.SheetNames[0]]["J" + index].v != "车号" ||
          workbook.Sheets[workbook.SheetNames[0]]["K" + index].v !=
            "计量吨位" ||
          workbook.Sheets[workbook.SheetNames[0]]["L" + index].v !=
            "计费吨位合计"
        ) {
          if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["A" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["A" + index].v != "序号"
          ) {
            that.$message({
              message: "表格格式错误:序号错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["B" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["B" + index].v != "发站"
          ) {
            that.$message({
              message: "表格格式错误:发站错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["C" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["C" + index].v != "到站"
          ) {
            that.$message({
              message: "表格格式错误:到站错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["D" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["D" + index].v != "发货日期"
          ) {
            that.$message({
              message: "表格格式错误:发货日期错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["E" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["E" + index].v != "到货日期"
          ) {
            that.$message({
              message: "表格格式错误:到货日期错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["F" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["F" + index].v != "卸货地点"
          ) {
            that.$message({
              message: "表格格式错误:卸货地点错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["G" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["G" + index].v != "品名"
          ) {
            that.$message({
              message: "表格格式错误:品名错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["I" + index] == 'undefined' ||
            (workbook.Sheets[workbook.SheetNames[0]]["I" + index].v !=
              "计费\n吨位" &&
            workbook.Sheets[workbook.SheetNames[0]]["I" + index].v !=
              "计费吨位" &&
            workbook.Sheets[workbook.SheetNames[0]]["I" + index].v !=
              "计费&#10;吨位")
          ) {
            that.$message({
              message: "表格格式错误:计费吨位错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["J" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["J" + index].v != "车号"
          ) {
            that.$message({
              message: "表格格式错误:车号错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["K" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["K" + index].v != "计量吨位"
          ) {
            that.$message({
              message: "表格格式错误:计量吨位错误",
              type: "warning"
            });
          } else if (
            typeof workbook.Sheets[workbook.SheetNames[0]]["L" + index] == 'undefined' ||
            workbook.Sheets[workbook.SheetNames[0]]["L" + index].v !=
            "计费吨位合计"
          ) {
            that.$message({
              message: "表格格式错误:计费吨位合计错误",
              type: "warning"
            });
          }else{
            that.$message({
              message: "表格格式错误!",
              type: "warning"
            });
          }
          return;
        }
        let groupNo=1;
        let isLoading=true;
        //读取表格
        for (let i = index+1; i <= rows.length + 1; i++) {
          let row = workbook.Sheets[workbook.SheetNames[0]]["A" + i];//先取A列，如果是数字则取该行数据
          if(row && typeof row.v == "number" && isLoading==false){
            isLoading=true;
            groupNo++;
          }else if(!row || typeof row.v != "number" && isLoading==true){
            isLoading=false;
          }
          if (
            row && typeof row.v == "number" &&
            workbook.Sheets[workbook.SheetNames[0]]["B" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["B" + i] != null &&
            workbook.Sheets[workbook.SheetNames[0]]["C" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["C" + i] != null &&
            workbook.Sheets[workbook.SheetNames[0]]["D" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["D" + i] != null &&
            workbook.Sheets[workbook.SheetNames[0]]["E" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["E" + i] != null &&
            workbook.Sheets[workbook.SheetNames[0]]["F" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["F" + i] != null &&
            workbook.Sheets[workbook.SheetNames[0]]["G" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["G" + i] != null &&
            workbook.Sheets[workbook.SheetNames[0]]["J" + i] != "undefined" &&
            workbook.Sheets[workbook.SheetNames[0]]["J" + i] != null
          ) {
            let tableRow = {
              sendStation: workbook.Sheets[workbook.SheetNames[0]]["B" + i].v,
              arrivalStation:workbook.Sheets[workbook.SheetNames[0]]["C" + i].v,
              sendDate: that.formatDate(workbook.Sheets[workbook.SheetNames[0]]["D" + i].v),
              arrivalDate: that.formatDate(workbook.Sheets[workbook.SheetNames[0]]["E" + i].v),
              unloadPoint: workbook.Sheets[workbook.SheetNames[0]]["F" + i].v,
              productName: workbook.Sheets[workbook.SheetNames[0]]["G" + i].v,
              wagonNo: workbook.Sheets[workbook.SheetNames[0]]["J" + i].v,
              weight: workbook.Sheets[workbook.SheetNames[0]]["I" + i].v,
              mineral: workbook.Sheets[workbook.SheetNames[0]]["H" + i].v,
              groupNo:groupNo
            };
            if ((tableRow.wagonNo + "").length != 7) {
              that.$message({
                message: "存在车皮号长度不等于7:" + tableRow.wagonNo,
                type: "warning"
              });
              continue;
            }
            excelData.push(tableRow);
          }
        }
        console.log("excelData",excelData);
        let map={
          list:excelData
        }
        //导入exceL
        that.axios.post("/api/v1/tms/importImportedLoadResult",map).then(res => {
          console.log(res);
          if (res.data.code == "200") {
            //赋值
            that.tableData=res.data.data;
            //查询匹配失败记录数
            let length=that.tableData.length;
            that.tableData.forEach((item)=>{
              if(item.purchaseOrderId)
                length--;
            });
            if(length<=0){
              that.$message({
                message: "导入"+that.tableData.length+"条数据，全部匹配成功！",
                type: "success",
              });
            }else if(length>0){
               that.$confirm("导入"+that.tableData.length+"条数据，"+length+"条数据匹配失败！请手动配单！")
                .then(_ => {
                  done();
                });
            }
          } else {
            that.$message({
              type: "error",
              message: res.data.data
            });
          }
        });
      };
      reader.readAsBinaryString(file.raw); //以二进制方式读取
    },
    formatDate(numb, format) {
      const time = new Date((numb - 1) * 24 * 3600000 + 1)
      time.setYear(time.getFullYear() - 70)
      const year = time.getFullYear() + ''
      const month = time.getMonth() + 1 + ''
      const date = time.getDate() + ''
      if (format && format.length === 1) {
        return year + format + month + format + date
      }
      return year + '年' + (month < 10 ? '0' + month : month)+ '月' + (date < 10 ? '0' + date : date) + '日'
    },
    //点击行勾选
    rowClick(row, column, event) {
      console.log("selected:",row);
      //没有配单直接返回
       if(!row.purchaseOrderId){
          return;
       }
       let importExcel = this.$refs.importExcel; // 获取表格对象
       //判断是否已存在
       let findRow = importExcel.selection.find(item => item.wagonNo == row.wagonNo);
       if (findRow) {
          importExcel.toggleRowSelection(row, false);
       }else{
          importExcel.toggleRowSelection(row);
       }
       console.log(importExcel.selection);
    },
    onclick() {
        this.purchaseOption.requestUrl=
        "/api/v1/tms/findPurchaseOrderList?apiId=81&supplierName="+this.supplierName
        +"&materialName="+this.materialName
        +"&resultForeignShipName="+this.resultForeignShipName
        +"&i="+new Date();
    },
    ondrawer(scope) {
      this.drawer = true;
      console.log("scope：",scope);
      this.index=scope.$index;
    },
    //修改选中
    orderChange(selection) {
        console.log("order：",selection);
        this.batchId=selection.batchId;
        this.purchaseOrderId=selection.purchaseOrderId;
        console.log("temp",this.tableData[0]);
        this.tableData[this.index].batchId=selection.batchId;
        this.tableData[this.index].purchaseOrderId=selection.purchaseOrderId;
        this.tableData[this.index].supplierId=selection.supplierId;
        this.tableData[this.index].supplierName=selection.supplierName;
        this.tableData[this.index].materialId=selection.materialId;
        this.tableData[this.index].materialName=selection.materialName;
        this.tableData[this.index].purchaseOrderNo=selection.purchaseOrderNo;
        this.tableData[this.index].unloadPoint=selection.resultForeignShipName;
        this.tableData[this.index].resultForeignShipName=selection.resultForeignShipName;
        console.log("index：",this.tableData[this.index]);
    },
    handleClose(done) {
      this.$refs.ordertable.$refs.mainTable.setCurrentRow();//清除选项
      done();
    }
  }
};
</script>

<style lang="scss">
.addWagonLoad {
  color: #606266;
  font-size: 0.675rem;
  font-weight: 500;
  .cp {
    width: 49%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    margin-left: 364px;
    .cp_title {
      .cp_top {
        width: 3.125rem;
        padding-right: 1.55rem;
      }
    }
  }
  .cpList {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 10rem;
    .list {
      width: 45%;
      border: #000 0.0625rem solid;
      padding: 0.625rem;
      display: flex;
      flex-wrap: wrap;
      overflow: auto;
      .cpList1 {
        background-color: #c9c7c7;
        height: 1.875rem;
        margin: 0.5rem;
        padding: 0.625rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .itu {
          position: absolute;
          top: -0.125rem;
          right: 0.0625rem;
          width: 0.625rem;
          height: 0.625rem;
        }
      }
    }
  }
  .matching {
    width: 20rem;
    height: 3.125rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24rem;
    .text {
      width: 8.75rem;
    }
    .span {
      display: inline-block;
      width: 310px;
      height: 0.0625rem;
    }
  }
  .material {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.75rem;
    margin-left: 24rem;
    width: 20rem;
    .text {
      text-align: right;
      width: 8.125rem;
    }
  }
  .forwardingUnit {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.75rem;
    margin-left: 24rem;
    width: 20rem;
    .text {
      text-align: right;
      width: 8.125rem;
    }
  }
  .remark {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.75rem;
    margin-left: 24rem;
    width: 22rem;
    .text {
      text-align: right;
      width: 5.625rem;
    }
    .span {
      display: inline-block;
      width: 1.875rem;
      height: 1.25rem;
    }
    .el-input {
      width: 13.5rem;
      margin-right: 2.375rem;
    }
  }
  .purchaseOrder {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24rem;
    width: 22rem;
    margin-bottom: 15px;
    .span {
      display: inline-block;
      width: 1.875rem;
      height: 0.0625rem;
    }
  }
  .form {
    display: flex;
    width: 340px;
    margin-left: 37.5%;
    margin-right: 20px;
    .form_box {
      .el-form {
        .preview-group {
          .el-form-item {
            .el-form-item__label {
              display: inline-block;
              width: 70px !important;
            }
            .el-form-item__content {
              .el-select {
                width: 250px;
              }
              .el-input {
                width: 250px;
              }
              .el-textarea {
                .el-textarea__inner {
                  width: 250px;

                  margin-top: 0.03rem;
                }
              }
            }
          }
        }
      }
    }
  }
  .button_box_domestic {
    display: flex;
    justify-content: center;
    padding-top: 10px;
  }
  .fromOther .el-input__inner {
    width: 250px;
  }
}
</style>
<style lang="scss" scoped></style>
