// 新增运输路线
<template>
  <div class="transitRouteAdd">
    <page-title>新增</page-title>
    <div class="form_top">
      <div class="link_name" v-if="state > 0">
        <span>线路编号：</span>
        <el-input placeholder="请输入内容" class="el_input_suffix" v-model="lineNo" disabled>
        </el-input>
      </div>
      <div class="link_name">
        <span>线路名称：</span>
        <el-input
          placeholder="请输入内容"
          v-model="line_name"
          class="el_input_suffix"
          clearable
        >
        </el-input>
      </div>
      <div class="link_type">
        <span>线路类型：</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="spellNumber">
        <span class="text">拼数：</span>
        <el-input placeholder="请输入内容" class="input" v-model="spellNumber" clearable>
        </el-input>
      </div>
      <div class="link_zi_list">
        <span>环节：</span>
        <el-button
          type="primary"
          :key="index"
          v-for="(item, index) in btnList"
          :disable-transitions="false"
          @click="addClick(item)"
          class="link_zi_list_btn"
        >
          {{ item.linkName }}
        </el-button>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @blur="onBlur"
        >
        </el-input>
        <!-- <el-button
          v-else
          class="button-new-tag"
          size="small"
          @click="showInput"
        >
          + 新增</el-button
        > -->
      </div>
    </div>
    <div class="linkList">
      <div class="link_list">
        <div class="link_list_zi" v-for="(item,i) in linkList" :key="i">
          <div class="xhNumber">
            <span>{{i + 1}}</span>
          </div>
          <div class="link_list_name">
            {{item.linkName}}
          </div>
          <div class="link_meng_qicheheng" v-if="item.gjName">
            {{item.gjName}}
          </div>
          <i class="el-icon-delete" @click="deleteClick(i)"></i>
        </div>
      </div>
    </div>
    <div class="btn">
      <el-button class="cancel" @click="cancelClick">取消</el-button>
      <el-button class="confirm" type="primary" @click="confirmClick"
        >确认</el-button
      >
    </div>
    
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-select v-model="gateGuard" multiple placeholder="请选择">
        <el-option
          v-for="(item,i) in gateGuardList"
          :key="i"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="determine">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
export default {
  components: { PageTitle },
  data() {
    return {
      gateGuardList:[],
      gateGuard:null,
      title:"请选择门岗",
      dialogVisible:false,
      form:{},
      inputVisible: false,
      inputValue: "",
      lineNo: "",
      line_name: "",
      spellNumber: 1,
      options: [
        {
          value: "1",
          label: "内转",
        },
        {
          value: "2",
          label: "销售",
        },
        {
          value: "3",
          label: "采购",
        },
        {
          value: "4",
          label: "退货",
        },
        {
          value: "5",
          label: "零星",
        },
      ],
      value: "",
      btnList: [],
      linkList: [],
      state: 0,
      linkItem:{},
    };
  },
  created() {
    this.initialization();
  },
  methods: {
    determine(){
      let text = "";
      this.gateGuardList.forEach((e)=>{
        for(var i = 0;i < this.gateGuard.length;i++){
          if(this.gateGuard[i] == e.value){
            text += e.label + "/"
          }
        }
      })
      let index = text.lastIndexOf("/")
      text =text.substring(0,index);
      console.log(this.linkItem);
      this.linkList.push({
        linkId:this.linkItem.linkId,
        linkName:this.linkItem.linkName,
        gjName:text,
        gateGuard:this.gateGuard
      })
      this.dialogVisible = false;
    },
    A() {
      // 获取所有的作业环节
      this.axios.post("/api/v1/rms/getLink").then((res) => {
        if (res.data.code == "200") {
          this.btnList = res.data.data;
        }
      });
    },
    // 初始化页面的数据
    initialization() {
      this.state = this.$route.params.addup;
      // 获取所有的作业环节
      this.A();
      if (this.state == 0) {
        console.log("新增");
      } else {
        this.axios
          .post("/api/v1/rms/getLinkToUpdate?lineId=" + this.state)
          .then((res) => {
            if (res.data.code == "200") {
              this.lineNo = res.data.data.lineNo;
              this.line_name = res.data.data.lineName;
              this.options.forEach((e) => {
                if (e.value == res.data.data.lineType) {
                  this.value = e.value;
                }
              });
              this.linkList = res.data.data.mapList;
            }
          });
        console.log("修改");
      }
    },
    // 将点击的对象添加到linkList的数组中
    addClick(item) {
      if(item.linkId == 4 || item.linkId == 5 || item.linkId == 6){
        this.linkList.push({
          linkId:item.linkId,
          linkName:item.linkName,
          gjName:"",
          gateGuard:[]
        })
      }else{
        this.gateGuard = [];
        this.gateGuardList = [];
        if(item.linkId == 1 || item.linkId == 7){
          this.axios.get('/api/v1/tms/getGatepost').then((res)=>{
            this.gateGuardList = res.data.data
          })
          this.dialogVisible = true;
        }else if(item.linkId == 2 || item.linkId == 3){
          this.axios.get('/api/v1/uc/getAllCalculateMes').then((res)=>{
            this.gateGuardList = res.data
          })
          this.dialogVisible = true;
        }
        this.linkItem = item;
      }
    },
    // 删除被点击的对象
    deleteClick(index) {
      this.linkList.splice(index, 1);
    },
    // 点击取消按钮
    cancelClick() {
      // 若linkList数组有数据，则提示用户数据将会清空，若没有，则直接退出
      if (this.linkList.length > 0) {
        this.$confirm("离开此页面,修改的数据不会保存, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$router.go(-1);
          })
          .catch(() => {});
      } else {
        this.$router.go(-1);
      }
    },
    // 点击确定按钮
    confirmClick() {
      console.log("sdsd")
      // 判断是否存在空值
      if (this.line_name && this.value && this.linkList.length > 0) {
        var map = {
          spellNumber: parseInt(this.spellNumber),
          lineId: parseInt(this.state),
          line_name: this.line_name,
          line_type: parseInt(this.value),
          linkList: this.linkList,
        };
        console.log(map)
        var URL = "";
        var messageText = "";
        // 若上一个页面传递的值为0则新增
        if (this.state == 0) {
          URL = "/api/v1/rms/insertSelective";
          messageText = "新增成功！";
        } else if (this.state > 0) {
          // 若上一个页面传递的值大于0，则更新
          URL = "/api/v1/rms/updateByPrimaryKeySelective";
          messageText = "修改成功!";
        }
        this.axios.post(URL, map).then((res) => {
          if ((res.data.code = "200")) {
            this.$message({
              showClose: true,
              message: messageText,
              type: "success",
            });
            this.$router.go(-1);
          }
        });
      } else {
        this.$message({
          showClose: true,
          message: "不能存在空值",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.transitRouteAdd {
  .form_top {
    width: 100%;
    height: 170px;
    .link_name {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .el_input_suffix {
        width: 220px;
      }
    }
    .link_type {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
    }
    .spellNumber {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .text {
        width: 60px;
        text-align: right;
      }
      .input{
        width: 220px;
      }
    }
    .link_zi_list {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20px;
      .link_zi_list_btn {
        width: 50px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
      }
      .input-new-tag {
        width: 70px;
        margin-left: 10px;
        vertical-align: bottom;
      }
    }
  }
  .linkList {
    margin-top: 120px;
    display: flex;
    justify-content: center;
    .link_list{
      border: #8d8c8c 1px solid;
      width: 80%;
      min-height: 200px;
      .link_list_zi{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px #9b9898cc solid ;
        height: 40px;
        .xhNumber{
          background-color: #006eff;
          color: #fff;
          width: 20px;height: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          margin-right: 10px;
        }
        .link_list_name{
          font-size: 18px;
          font-weight: 700;
          margin-right: 30px;
        }
        .link_meng_qicheheng{
          font-size: 14px;
          font-weight: 600;
          margin-right: 50px;
        }
        i{
          cursor: pointer;
        }
      }
    }
    // .link_list {
    //   border: #8d8c8c 1px solid;
    //   width: 80%;
    //   height: 200px;
    //   display: flex;
    //   flex-wrap: wrap;
    //   justify-content: flex-start;
    //   overflow: hidden;
    //   padding: 10px;
    //   .tag {
    //     margin: 5px;
    //   }
    // }
  }
  .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 1.25rem;
  }
}
</style>