<template>
    <div class="app-container">
      <el-row style="height: 100%;">
        <el-col :span="10">
          <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="用户名称" prop="userName">
              <el-input
                v-model="queryParams.userName"
                placeholder="请输入用户名称"
                clearable
                size="small"
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table
            v-loading="loading"
            :data="userList"
            ref="multipleTable"
            id="user-table"
          >
            <el-table-column label="选择" width="55" align="center">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.row.userId"
                  v-model="selectUserId"
                  @input="selectUser"
                >
                  {{ '' }}
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
            <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
            <el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
            <el-table-column label="创建时间" align="center" prop="createTime" width="160">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getUserInfo"
          />
        </el-col>



        <el-col :span="14" style="height: 100%;">
          <div class="choice-title">
            <div class="choice-title-item">待选管线</div>
            <div class="choice-title-item">已选管线</div>
          </div>
          <div class="pipe-choice">
            <div class="pipe-choice-left">
              <div style="padding: 0px 1px 7px 0px;">
                <el-input
                  v-model="pipeParam.pipeName"
                  placeholder="管线名称"
                  clearable
                  size="small"
                  style="width: 117px;margin-right: 5px"
                />
                <el-select
                  v-model="pipeParam.isHasUser"
                  placeholder="是否选中"
                  size="small"
                  clearable
                  style="width: 105px;margin-right: 5px"
                >
                  <el-option label="未选" value="0"/>
                  <el-option label="已选" value="1"/>
                </el-select>
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-search"
                  @click="getPipeInfoList"
                >
                  搜索
                </el-button>
              </div>

              <el-table
                v-loading="pipeLoading"
                :data="pipeList"
                ref="pipeTable"
                @select="select"
                @select-all="selectAll"
              >
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="管道名称" align="left" prop="pipeName" :show-overflow-tooltip="true" >
                  <template slot-scope="scope">
                    <span>[{{ pipeTypeFormat(scope.row) }}]{{ scope.row.pipeName }}({{ scope.row.pointNum }})</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <div class="pipe-choice-middle">
              <div>>></div>
            </div>

            <div class="pipe-choice-right">

              <div class="select-box">
                <div
                  class="pipe-select"
                  v-for="(pipe,index) in selectPipeInfoList"
                >
                  <el-tooltip class="item" effect="dark" :content="pipe.pipeName" placement="bottom-start">
                    <div class="pipe-name">{{ pipe.pipeName }}</div>
                  </el-tooltip>

                  <div class="pipe-delete" @click="deletePipe(pipe,index)">X</div>
                </div>
              </div>

              <div class="bottom-text">已选择{{selectPipeInfoList.length}}条</div>

            </div>
          </div>

        </el-col>

      </el-row>
    </div>
</template>

<script>
  import { selectUserByPostCode } from "@/api/system/user";
  import { selectPipeInfoByUser } from "@/api/baseinfo/pipeInfo";
  import { pipeUserList, deleteTPipeUserByUserIdAndPipeId, addUser } from "@/api/linepatrol/user";
  export default {
    name: "index",
    data(){
      return {
        loading: false,
        pipeLoading: false,
        total: 0,
        userList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          userName: null,
          postCode: "linePatrol",
        },
        pipeList: [],
        pipeParam: {
          isHasUser: null
        },
        selectPipeInfoList: [],
        selectUserId: "",
        pipeTypeOptions: [],
      }
    },
    created(){
      //巡检员信息
      this.getUserInfo();
      this.getPipeType();
    },
    methods: {
      //巡检员信息查询
      getUserInfo(){
        this.loading = true;
        selectUserByPostCode(this.queryParams).then(res =>{
          this.loading = false;
          if(res.code == 200){
            this.total = res.total;
            this.userList = res.rows;
            if(this.userList){
              this.selectUserId = res.rows[0].userId;
              //管线信息查询
              this.getPipeInfoList();
            }
          }
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getUserInfo();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //管道信息查询
      getPipeInfoList(){
        this.pipeLoading = true;
        this.pipeParam.userId = this.selectUserId;
        selectPipeInfoByUser(this.pipeParam).then(res =>{
          this.pipeLoading = false;
          if(res.code == 200){
            this.pipeList = res.data;
            this.returnShow();
          }
        })
      },
      select(all,row){
        let index = this.selectPipeInfoList.findIndex(item => item.pipeId == row.pipeId);
        if(index >= 0) {
          deleteTPipeUserByUserIdAndPipeId({userId:this.selectUserId,pipeId:this.selectPipeInfoList[index].pipeId});
          this.selectPipeInfoList.splice(index, 1);
        }else{
          this.selectPipeInfoList.push(
            {
              pipeId: row.pipeId,
              pipeName: row.pipeName
            }
          )
          addUser({userId:this.selectUserId,pipeId:row.pipeId})
        }
      },
      //全选
      selectAll(all){
        //删除所有
        if (all.length == 0 || (all.length == 1 && [0] == undefined)){
          this.selectPipeInfoList.forEach(item =>{
            deleteTPipeUserByUserIdAndPipeId({userId:this.selectUserId,pipeId:item.pipeId})
          });
          this.selectPipeInfoList = [];
        }
        //全选
        if(all.length >0){
          all.forEach((item) => {
            let index = this.selectPipeInfoList.findIndex(pipeItem => pipeItem.pipeId ==  item.pipeId);
            if(index == -1){
              this.selectPipeInfoList.push(
                {
                  pipeId: item.pipeId,
                  pipeName: item.pipeName
                }
              )
              addUser({userId:this.selectUserId,pipeId:item.pipeId})
            }
          })
        }

      },
      //删除管道
      deletePipe(pipe,index){
        this.selectPipeInfoList.splice(index, 1);
        let item = this.pipeList.find(item => item.pipeId == pipe.pipeId);
        this.$refs.pipeTable.toggleRowSelection(item,false);
        deleteTPipeUserByUserIdAndPipeId({userId:this.selectUserId,pipeId:item.pipeId})
      },
      //选择用户
      selectUser(val){
        //this.queryPatrolPipe(val);
        this.getPipeInfoList();
      },
      //选中回显
      returnShow(){
        this.$nextTick(() => {
            this.$refs.pipeTable.clearSelection();
            this.selectPipeInfoList = [];
            this.pipeList.forEach(item =>{
                if(item.isHasUser != -1){
                  this.$refs.pipeTable.toggleRowSelection(item);
                  this.selectPipeInfoList.push(
                    {
                      pipeId: item.pipeId,
                      pipeName:item.pipeName
                    }
                  );
                }
            })
        })
      },
      //管线类型
      getPipeType(){
        this.getDicts("t_pipe_type").then(response => {
            this.pipeTypeOptions = response.data;
        });
      },
      // 管线类型字典翻译
      pipeTypeFormat(row, column) {
        return this.selectDictLabel(this.pipeTypeOptions, row.pipeType);
      },
    }
  }
</script>

<style scoped lang="scss">

  .app-container{
    height: calc(100vh - 84px);
  }

  ::v-deep .el-radio__inner {
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    width: 14px;
    height: 14px;
    background-color: #fff;
    cursor: pointer;
    box-sizing: border-box;
  }

  ::v-deep .el-radio__input.is-checked .el-radio__inner::after {
    content: '';
    width: 8px;
    height: 5px;
    border: 2px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 2px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  }

  .pipe-choice{
    display: flex;
    padding: 0px 10px 5px 10px;
    height: 100%;
  }

  .choice-title{
    display: flex;
    .choice-title-item{
      flex: 1;
      padding: 0px 0px 6px 12px;
      font-size: 13px;
      color: #82848a;
    }
  }

  .pipe-choice-left{
    border: 1px solid #e5e6eb;
    width: 48%;
    height: 100%;
    padding: 13px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 3px;
      background:  #dfe4ed;
      position: absolute;
      top: 0;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      // border-radius: 10px;
      // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #cccccc;
      border-radius: 5px;
    }
  }

  .pipe-choice-middle{
    height: 100%;
    width: 4%;
    align-items: center;
    justify-content: center;
    display: flex;
    color: #1890ff;
  }

  .pipe-choice-right{
    border: 1px solid #e5e6eb;
    height: 100%;
    width: 48%;
    .select-box{
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      overflow-y: auto;
      height: 94%;
      width: 100%;
      &::-webkit-scrollbar {
        width: 3px;
        background:  #dfe4ed;
        position: absolute;
        top: 0;
      }
      &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        // border-radius: 10px;
        // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #cccccc;
        border-radius: 5px;
      }
      .pipe-select{
        border: 1px solid #a3d3ff;
        border-radius: 3px;
        height: 40px;
        width: 48%;
        display: flex;
        padding: 5px;
        margin: 3px;
        color: #3d3d3d;
        font-size: 12px;
        .pipe-name{
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          line-height: 26px;
          width: 90%;
          text-align: center;
        }
        .pipe-delete{
          line-height: 26px;
          cursor: pointer;
        }
      }
    }

    .bottom-text {
      padding: 8px 5px 0px 0px;
      font-size: 14px;
      height: 20px;
      line-height: 20px;
      text-align: right;
      color: #1890ff;
    }
  }

</style>
