<template>
  <div class="pop-box" :style="'z-index:'+zIndex">
    <div>
      <div class="header-box">
        <i class="back el-icon-close" @click="dialogClose"></i>
        选择用户
      </div>
      <div class="search-H5box">
        <div class="txt">
          <el-input placeholder="姓名" suffix-icon="el-icon-search" v-model="formData.nickName"
                    @keyup.enter.native="searchEvent">
            <el-button slot="append" @click="searchEvent"> 搜索</el-button>
          </el-input>
        </div>
        <div class="icon-screen" @click="popStatus = true">
          <i class="iconfont icon-shaixuan1"></i>
          <span>高级筛选</span>
        </div>
      </div>
      <div class="flex">
        <div class="checkbox-all_list" @scroll="handleScroll">
          <div v-for="(row,rowIndex) in page.records" :key="rowIndex" class="order-item"
               :class="{on:checkList.includes(row.id)}" @click="changeCheck(row,rowIndex)">
            <div class="is-checked" v-if="checkList.includes(row.id)"><i class="el-icon-check"></i>已选择</div>
            <div class="t1">
              <i class="icon"></i>
              <span>{{ row.nickName }}</span>
            </div>
            <div class="t2">
              <p>登录名：{{ row.loginAccount }}</p>
              <p>角色：{{ row.roleNames }}</p>
              <p>机构：{{ row.saleOrgNames }}</p>
              <p>邮编：{{ row.zipCode }}</p>
              <p>地址：{{ row.address }}</p>
              <p>性别：{{ genderMap[row.gender] }}</p>
              <p>所属组织：{{ row.companyNames }}</p>
            </div>
          </div>
        </div>
        <div class="checkbox-all">
          <div class='ca-t'>已选择用户：</div>
          <div class="ca-c">
          <span v-for="(checkRow, rowIndex) in checkRows" :key="rowIndex">{{ checkRow.nickName }}<i
            class="el-icon-delete" @click="changeCheck(checkRow)"></i></span>
          </div>
        </div>
      </div>
      <div class="fixed-bottom-btns">
        <el-button type="primary" plain class="btn" @click="dialogClose" icon="el-icon-close">取 消
        </el-button>
        <el-button type="primary" class="btn" @click="dialogPrimary" icon="el-icon-check">确 定</el-button>
      </div>
      <h5SearchDialog v-if="popStatus" :visiable.sync="popStatus" @searchEvent="confirmSearchDialog"
                      @resetEvent="resetSearchDialog">
        <el-form label-position="top">
          <el-form-item label="登录名">
            <el-input v-model="formData.loginAccount" class="txt" clearable/>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formData.nickName" class="txt" clearable/>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="formData.mobile" class="txt" clearable/>
          </el-form-item>
        </el-form>
      </h5SearchDialog>
    </div>
  </div>
</template>

<script>
import selectDialogMixins from '../../../mixins/mobile/selectDialog/index.js';
import mixin from './mixins/addTaskUserdialogMixin';

export default {
  name: 'userDialog',
  props: ['visiable', 'multi', 'rows', 'param'],
  mixins: [selectDialogMixins, mixin]
};
</script>
