<template>
  <!-- 添加发运计划 -->
  <div class="addSalePlan">
    <page-title>新增</page-title>
    <el-divider content-position="left">发运计划</el-divider>
    <div class="form-box" style="margin-right: 10rem">
      <dil-form :formId="346" v-model="form1" ref="from1"></dil-form>
    </div>
    <div class="table_form">
      <div class="materialId">
        <span class="text"> 物资： </span>
        <el-button type="primary" class="btn" @click="table = true"
          >浏览</el-button
        >
      </div>
    </div>
    <div class="selectionTable">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column
          v-for="(item, i) in tableTop"
          :key="i"
          :prop="item.prop"
          :label="item.label"
          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="scope">
            <template v-if="item.slot">
              <!-- 物资件数 -->
              <template v-if="item.prop == 'orderPlanWeight'">
                <el-input
                  class="textinput"
                  v-model.number="scope.row.orderPlanWeight"
                ></el-input>
              </template>
              <!-- 车序号 -->
              <template v-if="item.prop == 'cxh'">
                <el-input
                  class="textinput1"
                  v-model.number="scope.row.cxh"
                ></el-input>
              </template>
              <!-- 收货地址id -->
              <template v-if="item.prop == 'saleShipperAddressName'">
                <el-input v-model="scope.row.saleShipperAddressName" disabled>
                </el-input>
                <el-button type="primary" @click="ondrawer(scope.row,scope.$index)"
                  >浏览</el-button
                >
              </template>
              <!-- 收货日期 -->
              <template v-if="item.prop == 'saleDateOfReceipt'">
                <el-date-picker
                  class="textinput3"
                  type="date"
                  v-model.number="scope.row.saleDateOfReceipt"
                ></el-date-picker>
              </template>
              <!-- 收货客户 -->
              <template v-if="item.prop == 'saleOrderConsignee'">
                <el-input
                  class="textinput4"
                  v-model.number="scope.row.saleOrderConsignee"
                ></el-input>
              </template>
              <!-- 收货客户电话号码 -->
              <template v-if="item.prop == 'saleOrderConsigneeTel'">
                <el-input
                  class="textinput5"
                  v-model.number="scope.row.saleOrderConsigneeTel"
                ></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">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, selectionList)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-drawer
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      size="30%"
    >
      <el-input
        placeholder="请输入内容"
        v-model="textInput"
        style="margin-top: 10px; margin-left: 20px"
        clearable
      >
      </el-input>
      <el-button
        type="primary"
        class="btn"
        @click="onclick1()"
        style="margin-bottom: 15px"
      >
        <i class="el-icon-search"></i>查询
      </el-button>
      <dilTable
        v-bind.sync="frist"
        @radio-change="currentRadioChange1"
      ></dilTable>
    </el-drawer>
    <el-drawer
      title="选择物资信息"
      :visible.sync="table"
      direction="rtl"
      size="50%"
      :show-close="false"
    >
      <el-input placeholder="请输入内容" v-model="input" style="margin-top: 10px; margin-left: 20px; width: 200px" clearable> </el-input
      ><el-button type="primary" class="btn" @click="onclick" style="margin-left: 5px;">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button @click="open">取消</el-button>
      <el-button type="primary" @click="makeSure1">确定</el-button>
      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable v-bind.sync="option" @selection-change="selectionChange">
        </dilTable>
      </div>
    </el-drawer>

    <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";

export default {
  components: { PageTitle },
  data() {
    return {
      textInput: "",
      input: "",
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/ams/getAllSteelMaterialMes?apiId=232",
        // 控制显示多选列
        selectionType: "select",
      },
      table: false,
      selectionList: [],
      selectionList1: [],
      drawer: false,
      direction: "rtl",
      form1: {},
      value: undefined,
      options: [
        {
          values: "yes",
          label: "是",
        },
        {
          values: "no",
          label: "否",
        },
      ],
      values: "yes",
      tableTop: [
        {
          prop: "materialCode",
          label: "物资编码",
          width: "160",
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140",
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          slot: true,
        },
      ],
      row: {},
    };
  },
  // mounted() {
  //   this.dianji();
  // },
  methods: {
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //点击浏览事件
    ondrawer(row,index) {
      this.row = row;
      this.row.index = index;
      this.drawer = true;
    },
    //监听模态框点击事件
    currentRadioChange1(radioList) {
      this.selectionList[this.row.index].saleShipperAddressId = radioList.addressId;
      this.selectionList[this.row.index].saleShipperAddressName = radioList.address;
    },
    onclick() {
      this.option.requestUrl =
        "/api/v1/ams/getAllSteelMaterialMes?apiId=232&con=" + this.input;
    },
    open() {
      if (this.selectionList1.length != 0) {
        this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.selectionList1 = [];
            this.table = false;
          })
          .catch(() => {});
      } else {
        this.table = false;
      }
    },
    // 返回主界面
    makeSure1() {
      this.selectionList1.forEach((e) => {
        var addmap = {
          materialCode: e.materialCode,
          cxh: null,
          materialName: e.materialName,
          Specification: e.Specification,
          orderPlanWeight: null,
          saleShipperAddressId: null,
          saleShipperAddressName:null,
          saleDateOfReceipt: null,
          saleOrderConsignee: null,
          saleOrderConsigneeTel: null,
          materialId: e.materialId,
          materialTheoreticalWeight: e.materialTheoreticalWeight,
        };
        this.selectionList.push(addmap);
      });
      this.selectionList1 = [];
      this.table = false;
    },
    // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
    },
    // 确定
    makeSure() {
      console.log(this.form1)
     
      var state = 1
      if (state == 1) {
        var saleOrderIsselfMention = null;

        this.options.forEach((e) => {
          if (this.values == e.values) {
            saleOrderIsselfMention = e.label;
          }
        });
        let amsSaleOrder = {
          dayPlanConsigneeName: this.form1.dayPlanConsigneeName,
          dayPlanConsigneeTel: this.form1.dayPlanConsigneeTel,
          dayPlanDate:sjTime(this.form1.dayPlanDate),       
          dayPlanDeliveryDate: sjTime(this.form1.dayPlanDeliveryDate),
          dayPlanOwnCarsAmount: this.form1.dayPlanOwnCarsAmount,
          dayPlanToTheStationId: this.form1.dayPlanToTheStationId,
          dayPlanWagonNumber:this.form1.dayPlanWagonNumber,         
          unitId: this.form1.unitId,
          shipperId:this.form1.shipperId,
          selectionList: this.selectionList,
        };
        // 将实体类和list放进map当中。后端接收数据类型格式为List<Map<String,Object>>。List<Map<String,Object>>嵌套List和Map
        this.axios.post("/api/v1/ams/addRailOffsetDayplan", amsSaleOrder).then((res) => {
          console.log(res);
          if (res.data.code == "200") {
            this.$router.go(-1);
          }
        });
      }
    },
    // 取消
    cancel() {
      this.$router.go(-1);
    },
    //关闭事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    CloseClick() {},
  },
};
</script>
<style lang='scss' scoped>
.form-box{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 20px;
}
.button-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
.select {
  margin-left: 33.9rem;
}
.demo-form-inline {
  margin-left: -4.5rem;
}
.table_form {
  margin-left: 21rem;
}
.textinput {
  width: 50px;
}
.textinput1 {
  width: 50px;
  text-align: center;
  size: small;
}
.textinput2 {
  width: 50px;
  margin-right: 30px;
}
.textinput3 {
  width: 270px;
}
.textinput4 {
  width: 60px;
}
.textinput5 {
  width: 120px;
}
</style>