<template>
  <div class="addSaleOrderSend">
    <page-title>销售钢材订单授权承运商</page-title>
    <!-- 派车表格 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
        :span-method="cellMerge"
      >
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
          <template slot="scope" v-if="item.label !== '承运商'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '件数'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '重量'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '运输线路'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '运输单价'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '截止日期'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货客户'">
            <span>{{ item.label }}</span>
          </template>
          <template slot="scope" v-if="item.label !== '收货客户电话号码'">
            <span>{{ item.label }}</span>
          </template>
          <!-- 插入输入框 -->
          <template slot-scope="scope">
            <template v-if="item.slot">

              <!-- 承运商 -->
              <template v-if="item.prop == 'carrierName'">
                  <el-autocomplete
                    class="inline-input"
                    v-model="scope.row.carrierName"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入承运商名称"
                    :trigger-on-focus="false"
                    @change="batchUpdateValue(scope.row,scope.$index)"
                    @select="handleSelect"
                  >
                    <template slot-scope="{ item }">
                      <div class="name" v-if="item.carrierName">
                        {{ item.carrierName }}
                      </div>
                    </template>
                  </el-autocomplete>
              </template>

              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderPlanWeight'">
                <el-input
                  class="textinput"
                  @input="onInput"
                  placeholder="(必填)"
                  v-model.number="scope.row.orderPlanWeight"
                  disabled
                ></el-input>
              </template>

              <!-- 物资重量 -->
              <template v-if="item.prop == 'materialWeight'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.materialWeight"
                  disabled
                ></el-input>
              </template>

              <!-- 截止日期 -->
              <template v-if="item.prop == 'saleDateOfReceipt'">
                 <el-date-picker
                  class="textinput3"
                  type="date"
                  v-model.number="scope.row.saleDateOfReceipt"
                  style="width:135px"
                  disabled
                ></el-date-picker>
              </template>
              <!-- 收货客户 -->
              <template v-if="item.prop == 'saleOrderConsignee'">
                <el-input
                  class="textinput4"
                  placeholder="(非必填)"
                  v-model.number="scope.row.saleOrderConsignee"
                  disabled
                ></el-input>
              </template>
              <!-- 收货客户电话号码 -->
              <template v-if="item.prop == 'saleOrderConsigneeTel'">
                <el-input
                  class="textinput5"
                  placeholder="(非必填)"
                  v-model.number="scope.row.saleOrderConsigneeTel"
                  @input="onInput"
                  disabled
                ></el-input>
              </template>
            </template>
            <template v-else>
              <span>{{ scope.row[item.prop] }}</span>
            </template>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <!-- <el-table-column fixed="right" label="操作" width="100">
        </el-table-column> -->
      </el-table>
    </div>

    <div class="button_box">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="makeSure">确认授权</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { getCookie } from "@/utils/util.js";
import { sjTime,isNumber,isIntegerNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      //存放每一行记录的合并数
      spanArr: [],
      //pos是spanArr的索引
      pos:0,
      //所有选中承运商Id和承运商名称暂存
      carrierIdAndName: [],
      //承运商下拉框中的值
      carrierNameOptions:[],
      //当前车序号物资
      selectionList:[],
      tableTop: [
        {
          prop: "truckNo",
          label: "车序号",
          width: "50",
        },
        {
          prop: "carrierName",
          label: "承运商",
          width: "240",
          slot: true,
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140",
        },
        {
          prop: "materialCode",
          label: "物资编码",
          width: "140",
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          width: "80",
          slot: true,
        },
        {
          prop: "materialWeight",
          label: "重量",
          width: "100",
          slot: true,
        },
        {
          prop: "saleDateOfReceipt",
          label: "截止日期",
          width: "150",
          slot: true,
        },
        {
          prop: "saleShipperAddressName",
          label: "收货地址",
          width: "300",
        },
        {
          prop: "saleOrderConsignee",
          label: "收货客户",
          width: "150",
          slot: true,
        },
        {
          prop: "saleOrderConsigneeTel",
          label: "收货客户电话号码",
          slot: true,
          width: "150",
        },
      ],
    };
  },
  created(){
    this.getValue();
  },
  methods: {
    getValue(){
      this.axios
      .post("/api/v1/ams/getTruckNoMaterial?saleOrderMaterialId=" + this.$route.params.saleOrderMaterialId)
      .then((res)=>{
        if(res.data.data.length==0){
            this.$confirm("该销售订单尚未排车!是否先进行排车?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              center: true,
            })
            .then(() => {
              this.$router.push("/addSaleOrderArrange/" + this.$route.params.saleOrderId);
            })
            .catch(() => {
              this.$message({ type: "info", message: "取消!",});
            });
        }
        //赋值派车表格
        res.data.data.forEach((e) => {
          if(e.saleOrderConsignee=="null"){
            e.saleOrderConsignee = null
          }
          if(e.saleOrderConsigneeTel=="null"){
            e.saleOrderConsigneeTel = null
          }
          //判断是否已经定向派单
          if(!e.carrierId){
            //不带承运商初始化派车表格
            var addmap = {
                truckNo: e.truckNo,
                saleOrderMaterialId: e.saleOrderMaterialId,
                carrierName: null,
                carrierId: null,
                materialId: e.materialId,
                materialName: e.materialName,
                Specification: e.materialModelSpecification,
                materialCode: e.materialCode,
                orderPlanWeight: e.materialNumber,
                materialWeight: e.materialWeight,
                saleShipperAddressId: e.placeId,
                saleShipperAddressName:e.place,
                saleDateOfReceipt: e.receiptDate,
                saleOrderConsignee: e.saleOrderConsignee,
                saleOrderConsigneeTel: e.saleOrderConsigneeTel,
            };
            this.selectionList.push(addmap);
            //调用记录每一行的合并数的方法
            this.getSpanArr(this.selectionList);
          }
        });
      });
    },

    //承运商弹出层
    handleSelect(item) {
      let carrierIdAndNameItem = {
        carrierId : item.carrierId,
        carrierName : item.carrierName
      }
      this.carrierIdAndName.push(carrierIdAndNameItem);
    },
    //以下是承运商边输边查搜索
    querySearch(queryString, cb) {
      this.axios
        .post("/api/v1/uc/getCarrierMesByLike?index=" + queryString)
        .then((res) => {
          if (res.data.code == "200") {
            var restaurants = res.data.data;
            var results = queryString
              ? restaurants.filter(this.createFilter(queryString))
              : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
          }
        });
    },
    createFilter(queryString) {
      return (restaurants) => {
        return (
          restaurants.value.toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        );
      };
    },
    //以上是承运商边输边查搜索

    onInput(val){
      if(!isNumber(val)){
        this.$message.warning('重量/电话号码请输入数字')
      }
    },

    //点击确定按钮的事件
    makeSure(){
      //是否可发送请求
      var canSend = 1;
      if(this.selectionList.length>0){
          this.selectionList.forEach((e)=>{
          if(e.carrierName==null){
              canSend = 0;
          }
          if(isIntegerNumber(e.carrierName)){
              e.carrierId = e.carrierName;
          }
        });
      }else{
          canSend = -1;
      }
      if(canSend==0){
          //还有车序号未授权承运商
          this.$message.warning('还有车序号未授权承运商!')
      }else if(canSend==-1){
          this.$message.warning('该订单没有要授权承运商的车序号了!')
      }else{
          this.$confirm("请仔细确认是否授权这些承运商！", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              center: true,
            })
            .then(() => {
              var mapList = [];
              //取得要发送的车序号和它的承运商
              for(var i=0;i<this.spanArr.length;i++){
                  if(this.spanArr[i]>0){
                      //从所有选中承运商Id和承运商名称暂存中取出当前行的承运商Id
                      this.carrierIdAndName.forEach((item) => {
                        if(this.selectionList[i].carrierName==item.carrierName){
                          this.selectionList[i].carrierId = item.carrierId;
                        }
                      })
                      var oneCarAndCarrier = {
                          //车序号Id
                          saleOrderMaterialId : 0,
                          //省市县id
                          carrierId : 0,
                      }
                      oneCarAndCarrier.saleOrderMaterialId = this.selectionList[i].saleOrderMaterialId,
                      oneCarAndCarrier.carrierId = this.selectionList[i].carrierId,
                      mapList.push(oneCarAndCarrier);
                  }
              }
              this.axios.post('/api/v1/ams/dispatchToCarrier',mapList)
              .then((res)=>{
                this.cancel();
                 this.$message.success('授权成功！')               
              });
            })
            .catch(() => {
              this.$message({ type: "info", message: "取消!",});
            });
      }
    },
    //点击取消按钮的事件
    cancel(){
      this.$router.push('/saleOrderSteelCar')
    },
    //批量修改内层值
    batchUpdateValue(row,index){
      for(var i=index;i<this.spanArr[index]+index;i++){
        this.selectionList[i].carrierName=row.carrierName;
      }
    },
    //记录每一行的合并数
    getSpanArr(data) {
      //每次调用方法初始化
      this.spanArr = [];
      for (var i = 0; i < data.length; i++) {
            if (i === 0) {
                  this.spanArr.push(1);
                  this.pos = 0
            } else {
                // 判断当前元素与上一个元素是否相同
                if (data[i].truckNo === data[i - 1].truckNo) {
                  this.spanArr[this.pos] += 1;
                  this.spanArr.push(0);
                } else {
                  this.spanArr.push(1);
                  this.pos = i;
                }
            }
        }
    },
    //根据条件合并行
    cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 1) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 7) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 8) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 9) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 10) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 11) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
      if (columnIndex === 12) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
    },
  },
};
</script>

<style lang='scss'>
.addSaleOrderSend {
  .from {
    margin-top: 20px;
    .line {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        width: 350px;
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .sendCar {
      display: flex;
      justify-content: center;
      align-items: center;
      .el-input {
        width: 70px;
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 10px;
      }
    }
    .vehicle {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      .el-button {
        width: 250px;
        margin-left: 10px;
        margin-right: 10px;
      }
      .span {
        width: 70px;
      }
    }
  }
  .tablecls{
    margin-top: 20px;
  }
  .button_box{
    display: flex;
    justify-content: center;
    margin: 20px;
    .el-button{
      width: 100px;
      margin-left: 20px;
    }
  }
}
</style>