<template>
  <div class=''>
    <el-dialog :visible.sync="userDialogParams.show" width="70%" append-to-body>
    <div class="secTitle" >手动选择用户</div>
      <el-form label-width="90px">
        <el-row>
          <el-col :span="3" >
            <el-form-item>
              <el-button style="float: right" type="primary" plain @click="getUser">搜索</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="ID">
              <el-input v-model="searchUserFrom.userId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="昵称">
              <el-input v-model="searchUserFrom.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="电话">
              <el-input v-model="searchUserFrom.mobile"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userDialogParams.show = false">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
      <div class="tableBox" >
        <div class="item" >
          <p>筛选列表</p>
          <el-table
          :data="userList"
          ref="multipleTable"
          @select="handleSelectionChange"
          @select-all="handleSelectionAll"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            className="f-c"
            label="用户">
            <template slot-scope="scope">
              <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
        </el-table>
        </div>
        <div class="item" >
          <p>已选中列表</p>
          <el-table
          :data="handSecUser"
          ref="multipleTable"
          style="width: 100%">
          <el-table-column
            className="f-c"
            label="用户">
            <template slot-scope="scope">
              <img style="margin-right:5px;width: 50px;height: 50px;border-radius: 50px" :src="scope.row.avatar">{{scope.row.nickname}}(ID:{{scope.row.user_id}})
            </template>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号">
          </el-table-column>
          <el-table-column
           label="操作"
          width="148" v-if="!$store.state.readonly"  fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="danger"  plain @click="userdel(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </div>
      <page :total="userDialogParams.total" :limit="userDialogParams.limit" @pageChange="onUserPageChange" @sizeChange="onUserSizeChange"/>
    </el-dialog>
  </div>
</template>


<script>
  import tinymce from 'tinymce/tinymce'
  import page from "../framework/page";
import {
  getUserListApi,
} from "../../service/api";
  export default {
    name: 'tinymce1',
    props:[
      'lookData1'
    ],
    data () {
      return {
       userDialogParams: {
        total: 0,
        limit: 5,
        nowPage: 1,
        show: false
      },
      userList:[],
      searchUserFrom: {},
      handSecUser:[],
      }
    },
    activated(){
      this.show = true
    },
    created:function(){
    },
    components: {page},
    methods:{
        getUser() {
        let json = {
          page: this.userDialogParams.nowPage,
          limit: this.userDialogParams.limit
        };
        if (this.searchUserFrom.userId) {
          json.user_id = this.searchUserFrom.userId;
        }
        if (this.searchUserFrom.nickName) {
          json.nickname = this.searchUserFrom.nickName;
        }
        if (this.searchUserFrom.mobile) {
          json.mobile = this.searchUserFrom.mobile;
        }
        getUserListApi(json).then(res => {
          this.userList = res.list;
          this.userDialogParams.total = res.total;
        });
      },
      onUserPageChange(val) {
        this.userDialogParams.nowPage = val;
        this.getUser();
      },
      onUserSizeChange(val) {
        this.userDialogParams.nowPage = 1;
        this.userDialogParams.limit = val;
        this.getUser();
      },
       handleSelectionChange(val,el) {
      this.multipleSelection = val;
      for(let i=0;i<this.handSecUser.length;i++){
        if(el.user_id==this.handSecUser[i].user_id){
          return
        }
      }
      this.handSecUser.push(el)
    },
    handleSelectionAll(val){
      if(this.handSecUser.length==0){
          this.handSecUser = [...val]
        }else{
          let length = this.handSecUser.length
          for(let j=0;j<val.length;j++){
            for(let i=0;i<=length;i++){
              if(val[j].user_id==this.handSecUser[i].user_id){
                break
                }else{
                  if(i==length-1){
                    this.handSecUser.push(val[j])
                    break
                  }
                }
              }
          }
        }
    },
    userdel(el){
      for(let i=0;i<this.handSecUser.length;i++){
        if(el.user_id==this.handSecUser[i].user_id){
          this.handSecUser.splice(i,1)
        }
      }
    },
    onSelectUser() {
      this.userDialogParams.show = true;
      this.getUser();
    },
    onConfirm() {
      this.$emit('userConfirm',this.handSecUser)
      console.log(this.handSecUser)
    },
    }
  }
</script>
<style scoped lang="less">
.tableBox{display: flex;}
.tableBox .item{flex: 1;}
</style>