// 新增运输路线
<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="请输入内容" v-model="lineNo" disabled>
        </el-input>
      </div>
      <div class="link_name">
        <span>线路名称：</span>
        <el-input placeholder="请输入内容" v-model="line_name" 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="请输入内容" v-model="spellNumber" clearable>
        </el-input>
      </div>
      <div class="link_zi_list">
        <span>环节：</span>
          <el-tag
            :key="index"
            v-for="(item,index) in btnList"
            :disable-transitions="false"
            @click="addClick(item)"
            class="link_zi_list_btn"
          >
            {{item.linkName}}
          </el-tag>
          <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" id="tag">
        <el-tag
          class="tag"
          size="small"
          v-for="(item, i) in linkList"
          :key="i"
          @close="deleteClick(i)"
          closable
        >
          {{ item.linkName }}
        </el-tag>
      </div>
    </div>
    <div class="btn">
      <el-button class="cancel" @click="cancelClick">取消</el-button>
      <el-button class="confirm" type="primary" @click="confirmClick"
        >确认</el-button
      >
    </div>
  </div>
</template>

<script>
import PageTitle from "@/components/Page/Title";
import Sortable from "sortablejs";
export default {
  components: { PageTitle },
  data() {
    return {
      inputVisible:false,
      inputValue: '',
      lineNo: "",
      line_name: "",
      spellNumber: 1,
      options: [
        {
          value: "1",
          label: "内转",
        },
        {
          value: "2",
          label: "销售",
        },
        {
          value: "3",
          label: "采购",
        },
        {
          value: "4",
          label: "退货",
        },
      ],
      value: "",
      btnList: [],
      linkList: [],
      state: 0,
    };
  },
  created() {
    this.initialization();
  },
  mounted() {
    this.drag();
  },
  methods: {
    A(){
 // 获取所有的作业环节
            this.axios.post("/api/v1/rms/getLink").then((res) => {
              if (res.data.code == "200") {
                this.btnList = res.data.data;
              }
            });
    },
    //将新增变为输入框
    showInput() {
      this.inputVisible = true;
    },
    //当输入框失去焦点之后触发，新增作业环节
    onBlur() {
      console.log(this.inputValue);
      if (this.inputValue) {
        this.axios.post('/api/v1/rms/LinkInsertSelective',
        {
          linkName:this.inputValue,
          userName:""
        }).then((res)=>{
          if(res.data.code == "200"){
            this.A();
          }
        })
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    // 初始化页面的数据
    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) {
      this.linkList.push(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() {
      // 判断是否存在空值
      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,
        };
        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",
        });
      }
    },
    //拖动事件
    drag() {
      var _this = this;
      var $ul = document.getElementById("tag");
      new Sortable($ul, {
        onUpdate: function (event) {
          //修改items数据顺序
          var newIndex = event.newIndex,
            oldIndex = event.oldIndex,
            $li = $ul.children[newIndex],
            $oldLi = $ul.children[oldIndex];
          // 先删除移动的节点
          $ul.removeChild($li);
          // 再插入移动的节点到原有节点，还原了移动的操作
          if (newIndex > oldIndex) {
            $ul.insertBefore($li, $oldLi);
          } else {
            $ul.insertBefore($li, $oldLi.nextSibling);
          }
          // 更新items数组
          var item = _this.linkList.splice(oldIndex, 1);
          _this.linkList.splice(newIndex, 0, item[0]);
        },
        animation: 150,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.transitRouteAdd {
  .form_top {
    width: 100%;
    height: 10.625rem;
    .link_name {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1.25rem;
    }
    .link_type {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1.25rem;
    }
    .spellNumber {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1.25rem;
      .text {
        width: 80px;
        text-align: right;
      }
    }
    .link_zi_list {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 1.25rem;
      .link_zi_list_btn{
        width: 3.125rem; height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.625rem;
      }
      .input-new-tag {
        width: 4.375rem;
        margin-left: 0.625rem;
        vertical-align: bottom;
      }
    }
  }
  .linkList {
    margin-top: 5.625rem;
    display: flex;
    justify-content: center;
    .link_list {
      border: #8d8c8c 0.0625rem solid;
      width: 80%;
      height: 12.5rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      overflow: hidden;
      padding: 0.625rem;
      .tag {
        margin: 0.3125rem;
      }
    }
  }
  .btn {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>