<template>
  <!-- 添加汽运单价 111-->
  <div class="addTransportPrice">
    <page-title>新增</page-title>
    <div class="form">
      <div class="form_box">
        <dil-form :formId="379" v-model="form1" ref="from1"></dil-form>
        <el-form>
          <el-form-item label="承运起止地点">
            <el-select v-model="rangeId" placeholder="请选择承运起止地点">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" class="btnml" @click="materialDrawer"
            >浏览物资</el-button
          >
        </el-form>
      </div>
      <div class="liulan">
        <el-button type="primary" class="btn" @click="oilPriceFormulaClick"
          >浏览</el-button
        >
      </div>
      <div class="rangeStyle"></div>
    </div>
    <!-- 物资表格 -->
    <div class="selectionTable from">
      <el-table
        :data="selectionList"
        border
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <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
        >
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="deleteRow(scope.$index)"
              type="text"
              icon="el-icon-close"
              size="big"
            ></el-button>
          </template>
        </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>
    <!-- 油价联动公式模态框 -->
    <el-drawer
      title="请选择油价联动公式"
      :visible.sync="oilPriceFormulaDrawer"
      :direction="direction"
      :before-close="handleClose"
      close-on-press-escape
      modal
      wrapperClosable
      size="40%"
    >
      <div class="selectText">
        <!-- <span></span> -->
        <el-input v-model="LineText" placeholder="请输入内容"></el-input>
        <el-button
          type="primary"
          @click="selectLineClick"
          :loading="selectLineLoading"
          ><i class="el-icon-search"></i>查询</el-button
        >
        <el-button type="primary" @click="addoilPriceFormula">确定</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable
            v-bind.sync="oilPriceFormula"
            @radio-change="currentRadioChange"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="oilPriceFormulaDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
    <!-- 物资模态框 -->
    <el-drawer
      title="请选择物资"
      :visible.sync="drawerMaterial"
      :direction="direction"
      close-on-press-escape
      modal
      wrapperClosable
      size="40%"
    >
      <div class="selectText">
        <el-input v-model="materialText" placeholder="请输入内容"></el-input>
        <el-button
          type="primary"
          @click="selectMaterial"
          :loading="selectLineLoading"
          ><i class="el-icon-search"></i>查询</el-button
        >
        <el-button type="primary" @click="addMaterialList">确定</el-button>
      </div>
      <div class="LineTable">
        <vue-scroll :ops="ops" style="width:100%;height:100%">
          <dilTable
            v-bind.sync="materialOptions"
            @selection-change="selectionChange"
            :isKuang="isKuang"
            :loading="tableLoading"
            :drawer="oilPriceFormulaDrawer"
            @func="func"
          ></dilTable>
        </vue-scroll>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import { sjTime, isNumber } from "@/utils/sharedJsFile";
export default {
  components: { PageTitle },
  data() {
    return {
      //物资模态框默认隐藏
      drawerMaterial: false,
      //物资查询框
      materialText: null,
      selectionList: [],
      rangeId: null,
      //是否点击查询
      isKuang: false,
      //表格加载状态
      tableLoading: false,
      //公式内容
      formulaString: null,
      //油价联动公式Id
      oilPriceFormulaId: null,
      //是否打开油价联动公式的模态窗口
      oilPriceFormulaDrawer: false,
      //油价联动公式查询条件
      LineText: null,
      //油价联动公式模态框查询按钮状态
      selectLineLoading: false,
      //油价联动公式模态窗口的数据
      oilPriceFormula: {
        requestUrl: "",
        selectionType: "radio"
      },
      options: [],
      newsArr: [],
      //模态窗口的打开的方向
      direction: "rtl",
      materialOptions: {
        requestUrl: "",
        selectionType: "select"
      },
      //表单数据
      form1: {
        priceDate: new Date(),
        oilTypeId: 10,
        capacityTypeId: 1
      },
      tableTop: [
        {
          prop: "materialName",
          label: "物资名称"
        }
      ],

      //提交给后端的数据
      // map:{},
      ops: {
        vuescroll: {},
        scrollPanel: {},
        rail: {
          keepShow: true
        },
        bar: {
          hoverStyle: true,
          onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
          background: "#5f9ea0", //滚动条颜色
          opacity: 0.8, //滚动条透明度
          "overflow-x": "hidden"
        }
      }
    };
  },
  mounted() {
    this.axios.get("/api/v1/uc/getTransRange").then(res => {
      console.log(res.data.data);
      this.options = res.data.data;
    });
  },
  methods: {
    func(res) {
      this.selectLineLoading = false;
      this.isKuang = false;
      this.tableLoading = false;
    },
    materialDrawer() {
      this.drawerMaterial = true;
      this.materialOptions.requestUrl =
        "/api/v1/rms/getInwardContractMaterial?apiId=482&i=" + new Date();
    },
    selectMaterial() {
      if (this.materialText == null) {
        this.materialOptions.requestUrl =
          "/api/v1/uc/queryMaterialByLike?apiId=244&i=" + new Date();
      } else {
        this.materialOptions.requestUrl =
          "/api/v1/rms/getInwardContractMaterial?apiId=482&con=" +
          this.materialText;
      }
    },
    addMaterialList() {
      this.drawerMaterial = false;
      this.newsArr.forEach(e => {
        console.log(e.materialName);
        var addmap = {
          materialName: e.materialTypeName,
          materialId: e.materialTypeId
        };
        this.selectionList.push(addmap);
      });
      console.log(this.selectionList);
      this.newsArr = [];
    },
    //点击删除按钮删除当前点击的对象
    deleteRow(index) {
      this.selectionList.splice(index, 1);
    },
    selectionChange(selection) {
      console.log(selection);
      for (let i = 0; i < selection.length; i++) {
        if (this.newsArr.indexOf(selection[i]) === -1) {
          this.newsArr.push(selection[i]);
        }
      }
    },
    selectLineClick() {
      this.tableLoading = true;
      this.selectLineLoading = true;
      this.isKuang = true;
      if (this.LineText) {
        this.oilPriceFormula.requestUrl =
          "/api/v1/uc/getOilFormula?apiId=444&con=" + this.LineText;
      } else {
        this.oilPriceFormula.requestUrl =
          "/api/v1/uc/getOilFormula?apiId=444&i=" + new Date();
      }
    },
    //选定联动公式确定
    addoilPriceFormula() {
      let mapvalue = {
        shipperId: this.form1.shipperId,
        oilPriceFormula: this.formulaString,
        cargonameId: this.oilPriceFormulaId,
        capacityTypeId: this.form1.capacityTypeId,
        priceValue: this.form1.priceValue,
        priceDate: this.form1.priceDate,
        type: this.form1.type,
        oilpriceBase: this.form1.oilpriceBase,
        oilTypeId: this.form1.oilTypeId,
        oilpriceChangeThreshold: this.form1.oilpriceChangeThreshold
      };
      this.form1 = mapvalue;
      this.oilPriceFormulaDrawer = false;
    },
    currentRadioChange(val) {
      this.formulaString = val.formulaString;
      this.oilPriceFormulaId = val.formulaId;
    },
    //打开线路的模态窗口
    oilPriceFormulaClick() {
      this.oilPriceFormulaDrawer = true;
      this.oilPriceFormula.requestUrl = "/api/v1/uc/getOilFormula?apiId=444";
    },
    //模态窗口关闭时调用
    handleClose() {
      if (this.oilPriceFormulaDrawer) {
        this.oilPriceFormulaDrawer = false;
        this.LineText = null;
      }
    },
    makeSure() {
      let mapValue = {
        cargonameId: this.oilPriceFormulaId,
        capacityTypeId: this.form1.capacityTypeId,
        priceValue: this.form1.priceValue,
        priceDate: sjTime(this.form1.priceDate),
        type: this.form1.type,
        oilpriceBase: this.form1.oilpriceBase,
        oilTypeId: this.form1.oilTypeId,
        oilpriceChangeThreshold: this.form1.oilpriceChangeThreshold,
        rangeId: this.rangeId,
        mapList: this.selectionList
      };
      this.axios.post("/api/v1/ams/insertInwardPrice", mapValue).then(res => {
        if (res.data.code == "200") {
          // this.$router.go(-1);
          this.$message({
            type: "success",
            message: "新增运输单价成功!"
          });
          this.$router.go(-1);
        }
      });
    },
    // 取消
    cancel() {
      this.$router.push("/inwardTransPrice");
    }
  }
};
</script>
<style lang="scss">
.elForm {
  margin-left: 30%;
}
.addTransportPrice {
  .form {
    display: flex;
    .form_box {
      width: 320px;
      margin-left: 30%;
      margin-top: 30px;
      margin-right: 20px;
      .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;
              }
            }
          }
        }
      }
    }
    .liulan {
      width: 120px;
      margin-top: 30px;
      .el-button {
        width: 100px !important;
        margin: auto;
      }
      .btn {
        margin-top: 54px;
      }
    }
  }
  .button_box {
    margin-left: 45%;
  }
  .selectText {
    .el-input {
      width: 250px;
    }
  }
  .LineTable {
    width: 100%;
    height: 480px;
    overflow: hidden;
    margin-top: 10px;
  }
  .btnml {
    width: 250px;
    margin-left: 50px;
  }
}
</style>
<style lang="scss">
/deep/.__bar-is-vertical {
  right: -1px !important;
}
/deep/.__bar-is-horizontal {
  display: none !important;
}
</style>
