<template>
  <!-- 修改销售订单 -->
  <div id="contractDetails">
    <page-title>编辑</page-title>
    <div class="main">
      <span class="text">销售订单</span>
      <span class="a"></span>
    </div>
    <div class="contractTitle">
      <div class="form-box">
        <div class="form-one">
          <dil-form :formId="286" v-model="form1"></dil-form>
        </div>
      </div>
    </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 v-model.number="scope.row.orderPlanWeight"></el-input>
              </template>
              <template v-if="item.prop == 'cxh'">
                <el-input v-model.number="scope.row.cxh"></el-input>
              </template>
            </template>
            <!-- 收货地址下拉框 -->
             <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 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" clearable> </el-input
      ><el-button type="primary" class="btn" @click="onclick">
        <i class="el-icon-search"></i>查询
      </el-button>
      <el-button @click="open">取消</el-button>
      <el-button type="primary" @click="makeSure1(2)">确定</el-button>
      <div class="tablecls">
        <!-- 查询所有的物资 -->
        <dilTable v-bind.sync="option" @selection-change="selectionChange">
        </dilTable>
      </div>
    </el-drawer>
    <!-- 界面按钮 -->
    <div class="button-box">
      <el-button type="primary" @click="onClickConfirm">确认</el-button>
      <el-button @click="onClickCancel">返回</el-button>
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
export default {
  components: { PageTitle },
  data() {
    return {
      option: {
        // 表格请求数据的地址
        requestUrl: "/api/v1/ams/getAllSteelMaterialMes?apiId=232",
        // 控制显示多选列
        selectionType: "select",
      },
      frist: {
        requestUrl: "/api/v1/ams/getAddressDeliveryAddress?apiId=255",
        selectionType: "radio",
        mapList:[]
      },
      drawer:false,
      selectionList: [],
      selectionList1: [],
      table: false,
      value: undefined,
      input:'',
      //  option:{},
      form1: {},
      tableTop: [
        {
          prop: "materialCode",
          label: "物资编码",
          width: "140",
        },
        {
          prop: "cxh",
          label: "车序号",
          slot: true,
        },
        {
          prop: "materialName",
          label: "物资名称",
          width: "140",
        },
        {
          prop: "Specification",
          label: "规格型号",
          width: "140",
        },
        {
          prop: "orderPlanWeight",
          label: "件数",
          slot: true,
        },
        {
          prop: "saleShipperAddressName",
          label: "收货地址",
          slot: true,
        },
        {
          prop: "saleDateOfReceipt",
          label: "收货日期",
          slot: true,
        },
        {
          prop: "saleOrderConsignee",
          label: "收货客户",
          slot: true,
        },
        {
          prop: "saleOrderConsigneeTel",
          label: "收货客户电话号码",
          slot: true,
        },
      ],
      options1: [],
      row: {},
    };
  },
  mounted() {
    this.information();
  },
  methods: {
    //点击收货地址浏览事件
     //点击浏览事件
      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;
    },
    //收货地址模态框查询
    onclick1(){
    this.option.requestUrl =
        "/api/v1/ams/getAddressDeliveryAddress?apiId=255&con=" + this.textInput;
    },
    // 关闭功能
     deleteRow(index, rows) {
        rows.splice(index, 1);
      },
    information() {
      //编辑
      this.axios
        .post(
          "/api/v1/ams/getAmsSaleOrderBySaleOrderId?saleOrderId=" +
            this.$route.params.saleOrderId
        )
        .then((res) => {
          console.log(res.data.data);
          console.log();
          this.form1 = res.data.data.maps;
          this.selectionList = res.data.data.maps1;
        });
    },
     open() {
      if (this.selectionList1.length != 0) {
        this.$confirm("取消会将已选择的数据清空, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.selectionList1 = [];
            this.table = false;
          })
          .catch(() => {});
      } else {
        this.table = false;
      }
    },
        // 框计算
    onclick() {
      this.option.requestUrl =
        "/api/v1/ams/getAllSteelMaterialMes?apiId=232&con=" + this.input;
    },
    // 返回
    onClickCancel() {
      this.$router.go(-1);
    },
      // 返回选中的物资信息
    selectionChange(selection) {
      this.selectionList1 = [];
      this.selectionList1 = selection;
    },
       // 返回主界面
    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;
    },
    //关闭事件
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },

    // 确认
    onClickConfirm() {
      // debugger
      console.log(this.form1)
      var state = 0;
       if (  
        this.form1.shipperId &&
        this.form1.reciveId &&
        this.form1.saleOrderReceiveCustomer &&
        this.values &&
        this.form1.saleRemark
      ) {
        state = 1;
      }
      this.selectionList.forEach((e) => {
        if (e.cxh && e.orderPlanWeight) {
          state = 1;
        } else {
          state = 0;
          return;
        }
      });
      if (state == 0) {
        this.$message.error("不能存在空值！");
      }
        if (state == 1) {
        let amsSaleOrder = {
        saleOrderId: this.$route.params.saleOrderId,
        shipperId: this.form1.shipperId,
        receiveId: this.form1.reciveId,
        saleOrderReceiveCustomer: this.form1.saleOrderReceiveCustomer,
        saleOrderIsselfMention: this.form1.saleOrderIsselfMention,
        saleRemark: this.form1.saleRemark,
      };
       let map = {
        amsSaleOrder: amsSaleOrder,
        selectionList: this.selectionList,
      };
      console.log(this.selectionList)
       this.axios.post("/api/v1/ams/updateAmsSaleOrder", map).then((res) => {
          if (res.data.code == "200") {
            this.$router.go(-1);
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.form-box,
.from {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 20px;
}
.table_form {
  margin-left: -16rem;
}
.button-box{
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  margin-top: 0.3125rem;
  margin-bottom: 1.25rem;
}
</style>