<template>
  <div>
    <Modal  title="人员列表" width="660" v-model="showuser">
         <Row style="margin-bottom:14px" type="flex"  justify="start" align="middle" >
                <Col span='6' v-if="!showapproval">
                  已选抄送人:<span style="color:#AF292E">{{selectuserdata.length}}</span><span v-text="info"></span>
                </Col>
                 <Col span='6' v-if="showapproval">
                  已选审批<span v-text="info"></span> :<span style="color:#AF292E">{{selectuserdata.length}}</span><span v-text="info"></span>
                </Col>
                <Col span='18'>
                    <Row type="flex"  justify="end" align="middle" >
                            <Button type="text" custom-icon="iconfont icon-custom-quanshan"    @click="delAll" >全部删除</Button>
                     </Row>
                </Col>
        </Row>
        <Row type="flex" justify="start" style="min-height:82px;border:1px dashed #DCDFE6;padding:10px">
            <Tag  v-for="(item,index) in selectuserdata" :key="'tag_' + index" :name="item.userCode" closable  @on-close="closeCommon(item.userCode,'selectuserdata')" style="margin-right:8px"> {{item.userName}}</Tag>
        </Row>
        <Card style="margin-top:16px;" :padding="0" dis-hover>
            <template #title>
            <Row v-if="!showapproval"  type="flex"  justify="start" align="middle" >
                <Col span='4'>
                  已勾选:<span style="color:#AF292E">{{select.length}}</span><span v-text="info"></span>
                </Col>
                <Col span='20'>
                    <Row type="flex"  justify="end" align="middle" >
                        <Input  placeholder="请输入用户名称/工号/手机号"  v-model="searchValue"  search style="width: 380px;border-radius:20px;margin-top:10xp" @on-search="searchUser" @on-enter="searchUser"/>
                    </Row>
                </Col>
            </Row>
             <Row  v-else type="flex"  justify="start" align="middle" >
                <Col span='8'>
                   <RadioGroup v-model="selectType" @on-change="selectTypeChange">
                        <Radio label="USER">
                         <span>审批人</span>
                        </Radio>
                        <Radio label="USERGROUP">
                            <span>岗位</span>
                        </Radio>
                    </RadioGroup>
                </Col>
                <Col span='16'>
                    <Row type="flex"  justify="end" align="middle" >
                       <Input  placeholder="请输入编码/名称"  v-model="searchValue"  search style="width: 380px;border-radius:20px;margin-top:10xp" @on-search="searchStation" @on-enter="searchStation"/>
                    </Row>
                </Col>
            </Row>
            </template>
             <CheckboxGroup class="checkbox-group" name="user" v-model="select" style="max-height:250px;padding-left:14px" @on-change="selectUser">
              <div class="checkbox" v-for='(item,index) in userdata'  :key="'checkbox_' + index" >
                <Checkbox :label='item.userCode' class="checkboxrow"  >
                  <div style="display: flex; align-items: center;">
                    <div class='icon'>
                        <div >{{item.userName}}</div>
                    </div>
                    <div class='uname'>{{item.userName}}</div>
                    </div>
                </Checkbox>
              </div>
            </CheckboxGroup>
        </Card>
        <template #footer>
         <div>
            <Row type="flex" justify="end" align="middle"  :gutter="8">
                <Col>
                    <Button style="width:66px"  @click="userCancel" >取消</Button>
                </Col>
                <Col>
                    <Button  style="width:66px;margin-left:14px" type="info"  @click="userOk" >确认</Button>
                </Col>
            </Row>
        </div>
        </template>
    </Modal>
    <Drawer class-name="efutureapproval" title="工作流" v-model="showDrawer" :width="534">
        <div class="drawer-box">
            <div ref="head">
                <div class="work-head">
                    <span>单据编号：{{value.billno}}</span>
                    <span>状态：{{value.statusName}}</span>
                </div>
                <div v-if='copyuser.length > 0' class="work-head">
                    <span>已抄送：<span><Tag v-for="(item,index) in copyuser"  :key="'taguser_' + index" style="margin-left:10px">{{item.name}}</Tag> </span></span>
                </div>
                <p class="title"><span class="text">审批日志</span></p>
            </div>
            <div :style="contentStyle">
                <ul class="content">
                    <li class="log-list" v-for="(item,index) in auditLog" :key="index">
                        <div class="line-wrap"></div>
                        <div class="left">
                            <template v-if="item.mulflag === 'N'">
                                <span>{{item.username}}</span>
                            </template>
                                <template v-else>
                                    <Icon custom="iconfont icon-custom-approve"   size="20" color="#fff"/>
                                </template>
                            <div class="icon-wrap">
                                <Icon  v-if="item.act_status_ === 'Y'" custom="iconfont icon-custom-wancheng" color="#739943" />
                                <Icon  v-else-if="item.act_status_ === 'M' || item.act_status_ === 'A'" custom="iconfont icon-custom-daishenpi" color="#f3b352" />
                                <Icon  v-else-if="item.act_status_ === 'N'" color="#9a9b9d" custom="iconfont icon-custom-chehui" />
                                <Icon  v-else custom="iconfont icon-custom-weishenpi"  color="#ef6e73" />
                            </div>
                        </div>
                        <div class="right">
                            <p class="top">
                                <span style="font-size:16px;">{{item.describe_}}</span>
                                <span class="status">{{item.act_status_name}}</span>
                            </p>
                            <div>
                                <p v-if="index === auditLog.length - 1 && item.candidateUserList && item.candidateUserList.length > 0" class="desc">
                                    待审批人：<span>{{ getCandidateUserText(item.candidateUserList) }}</span>
                                </p>
                                <span>{{item.act_time_}}</span>
                                <p class="desc">意见：<span v-text="getMessage(item.message)"></span></p>
                            </div>
                            <div class="card" v-if="item.tasklist.length > 1">
                                <ul class="main">
                                    <Row type="flex" justify="start" :gutter="16">
                                    <Col v-for="(tmp, index2) in item.tasklist"  :key="'task_' + index2" v-show="index2 < maxUser || (index2 >= maxUser && tmp.active)" >
                                        <li class="user-list">
                                        <div class="user">
                                            <span>{{tmp.username}}</span>
                                            <div class="icon-wrap">
                                                <Icon  v-if="item.status === 'Y'" custom="iconfont icon-custom-wancheng" color="#739943" />
                                                <Icon  v-else-if="item.status === 'M' || item.status === 'A'" custom="iconfont icon-custom-daishenpi" color="#f3b352" />
                                                <Icon  v-else-if="item.status === 'N'" color="#9a9b9d" custom="iconfont icon-custom-chehui" />
                                                <Icon  v-else custom="iconfont icon-custom-weishenpi"  color="#ef6e73" />
                                            </div>
                                        </div>
                                        <p style="z-index:99">{{tmp.username}}</p>
                                        </li>
                                    </Col>
                                    </Row>
                                </ul>
                                <Row v-if="item.tasklist > maxUser" type="flex" justify="center" align="middle">
                                        <Col>
                                        <Button  v-if="!item.active" icon="ios-arrow-down" type="text"  @click="showGroupUser(index)">展开 </Button>
                                            <Button  v-if="item.active" icon="ios-arrow-up" type="text" @click="showGroupUser(index)"> 收起</Button>
                                        </Col>
                                    </Row>
                            </div>
                        </div>
                    </li>
                </ul>
             </div>
        </div>
        <div ref="foot" class="footer">
            <Form  v-show="showBtn" :label-width="45">
                <FormItem label="抄送:">
                    <Row type="flex" justify="start" align="middle" >
                        <Col span='2'>
                            <span style="color:#AF292E"> {{copy.length}}</span> <span>人</span>
                        </Col>
                        <Col span='22'>
                            <Row type="flex" justify="end" align="middle">
                                <p  @click.stop="addUser" style="cursor:pointer">
                                        <Icon custom="iconfont icon-custom-add" size="12" color="#AF292E"/>
                                        <span style="margin-left:9px;color:#AF292E;font-size:14px"> 添加抄送人 </span>
                                </p>
                            </Row>
                        </Col>
                    </Row>
                    <Row type="flex" justify="start" align="middle" style="height:42px;border:1px solid #DCDFE6">
                        <Tag v-for="(item,index) in copy" :key="'tag2_' + index" :name="item.userCode" style="margin-left:8px" closable @on-close="closeCommon(item.userCode,'copy')"> {{item.userName}}</Tag>
                    </Row>
                </FormItem>
                 <FormItem v-show="false" label="审批:">
                    <Row type="flex" justify="start" align="middle" >
                        <Col span='2'>
                            <span style="color:#AF292E;cursor:pointer"> {{approvals.length}}</span> <span v-text="info2"></span>
                        </Col>
                        <Col span='22'>
                            <Row type="flex" justify="end" align="middle">
                                <p  @click.stop="addApproval" style="cursor:pointer">
                                        <Icon custom="iconfont icon-custom-add" size="12" color="#AF292E"/>
                                        <span style="margin-left:9px;color:#AF292E;font-size:14px"> 添加审批人 </span>
                                </p>
                            </Row>
                        </Col>
                    </Row>
                    <Row type="flex" justify="start" align="middle"  style="height:42px;border:1px solid #DCDFE6">
                        <Tag  v-for="(item,index) in approvals"  :key="'tag3_' + index"  :name="item.userCode" style="margin-left:8px"> {{item.userName}}</Tag>
                    </Row>
                </FormItem>
                <FormItem label="意见:">
                    <Input v-model="idea" type='textarea' :autosize="rowsConfig"></Input>
                </FormItem>
            </Form>
            <Row type="flex" v-if="showBtn" justify="end"  :gutter="10"  style="padding-top:20px;padding-bottom:4px">
                <Col v-if="showSubmit">
                    <Button  customIcon="iconfont icon-custom-submit"  @click="onSubmit" >提交</Button>
                </Col>
                 <Col v-if="showReset">
                    <Button  customIcon="iconfont icon-custom-recall"  @click="billBack" >撤回</Button>
                </Col>
                <Col v-show="false">
                    <Button  customIcon="iconfont icon-custom-jiaqian"  @click="billBack" >加签</Button>
                </Col>
                 <Col v-if="showReject">
                    <Button  customIcon="iconfont icon-custom-reject"  @click="reject" >驳回</Button>
                </Col>
                 <Col v-if="showApprove">
                    <Button  customIcon="iconfont icon-custom-approve"  @click="submitApprove" >审批</Button>
                </Col>
            </Row>
        </div>
    </Drawer>
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
import load from '@/components/base/load';
import size from '@/components/base/size';
export default {
    name: 'mapprovalbox',
    mixins: [load,size],
    data() {
        return {
            myConfig: {
                resources: '',
                classPrefix: '',
            },
            value: {
                billmoduleid: '',
                billno: '',
                billstatus: '',
                statusName: ''
            },
            buttonlist:[],
            auditLog: [],
            copyuser: [],
            isSub: false,
            showuser: false,
            isSubmit: false,
            showBtn:true,
            selectType: 'USER',
            list: [],
            select: [],
            showSubmit: false,
            showDrawer:false,
            showApprove:false,
            showReject:false,
            showReset:false,
            copy:[],
            approvals:[],
            idea:'',
            rowsConfig:{ minRows: 3, maxRows: 6 },
            maxUser:6,
            extraHeight:0,
            extraHeight2:0,
            userdata:[],
            searchValue:'',
            selectuserdata:[],
            showapproval:false,
            curlSelectType:'USER'
        };
    },
    created() {
        this.myConfig = Object.assign({}, this.myConfig, this.config);
    },
    computed: {
        contentStyle () {
            let height = this.$Store.state.app.clientHeight;
            if (this.extraHeight) {
                height =  height - Number(this.extraHeight);
            }
            if (this.extraHeight2) {
                height =  height - Number(this.extraHeight2);
            }
            height = height - 90;
            return 'overflow-y: auto;max-height:' + height + 'px;';
        },
        info () {
            if (this.selectType === 'USER') {
                return '人';
            } else {
                return '组';
            }
        },
        info2 () {
            if (this.curlSelectType === 'USER') {
                return '人';
            } else {
                return '组';
            }
        }
    },
    props:{
        config: {
            type:Object,
            default:null
        },
    },
    methods: {
        onSubmit() {
            let flag = true;
            if (this.$parent && typeof this.$parent.onSubmitBefore === 'function') {
                flag = this.$parent.onSubmitBefore();
            }
            if (flag) {
                this.billSubmit();
            }
        },
        setData(config) {
            this.clearData();
            this.$nextTick(() => {
                this.value ={};
                Object.assign(this.value, config);
                this.getAuditLog();
                if (this.value.billstatus === 'S') {
                    // this.getSubuser();
                }
                //this.initBtn();
            });
        },
        initBtn () {
            if (this.value.billstatus === 'N') {
                this.showSubmit = true;
            } else {
                this.showSubmit = false;
            }
            if (this.value.billstatus !== 'N' && this.value.billstatus !== 'S' && this.value.billstatus !== 'R' && this.value.billstatus !== 'A') {
                this.showBtn = false;
            } else {
                this.showBtn = true;
            }
        },
        clearData() {
            this.auditLog = [];
            this.selectType ='USER';
            this.curlSelectType ='USER';
            this.selectuserdata = [];
            this.userdata = [];
            this.select = [];
            this.idea = '';
            this.approvals = [];
        },
        getSubuser() { // 获取提交人
            this.isSub = false;
            this.doPost(
        '.getBillSubmitter',
        {billno: this.value.billno, modecode: this.value.billmoduleid},
        (data) => {
            let usercode  = this.getUserCode();
            if (data == usercode) {
                this.isSub = true;
            }
        }
      );
        },
        getAuditLog() { // 获取审批日志
         this.showSubmit = false;
         this.showReset = false;
         this.showReject = false;
         this.showApprove = false;
          this.doPost(
        '.getProcessList',
        {billno: this.value.billno, modecode: this.value.billmoduleid},
        (data) => {
            if (data.procinfo && data.procinfo.proclist) {
                let result = data.procinfo.proclist || [];
                let copylist = [];
                let candidateUserList = [];
                if (data.procinfo.cc && data.procinfo.cc.length > 0) {
                    data.procinfo.cc.forEach(item => {
                        let tmp = {};
                        tmp.active = false;
                        tmp.copyuser = item;
                        tmp.name = item.substr(-2, 2);
                        copylist.push(tmp);
                    });
                }
                if (data.procinfo && data.procinfo.flowerProgress) {
                    if (data.procinfo.flowerProgress.length > 0) {
                        let lastflowerProgress = data.procinfo.flowerProgress[data.procinfo.flowerProgress.length - 1];
                        if (lastflowerProgress && lastflowerProgress.candidateUserList) {
                            candidateUserList = lastflowerProgress.candidateUserList;
                        }
                    }

                }
                result.forEach((item, index) => {
                    item.active = false;
                    item.tasklist.forEach(list => {
                        if (list.usernam) {
                            list.userName = list.username.substr(-2, 2);
                        }
                    });
                    // 判断是否是最后一个item，添加candidateUserList
                    if (index === result.length - 1) {
                        item.candidateUserList = candidateUserList;
                    }
                });


                if (data.procinfo.btnlist) {
                    data.procinfo.btnlist.forEach(el => {
                        if (el === '提交') {
                            this.showSubmit = true;
                        }
                        if (el === '撤回') {
                            this.showReset = true;
                        }
                        if (el === '驳回') {
                            this.showReject = true;
                        }
                        if (el === '审批') {
                            this.showApprove = true;
                        }
                    })
                }

                this.auditLog = result;
                this.copyuser = copylist || [];
            }
            if (this.showSubmit || this.showReset || this.showApprove || this.showReject) {
                this.showBtn = true;
            } else {
                this.showBtn = false;
            }
        }
      );
        },
        showGroupUser(index) {
            this.auditLog[index].active = !this.auditLog[index].active;
        },
        billBack() { // 审批撤回
            this.doPost(
        '.billrepeal',
        {billno: this.value.billno},
        (data) => {
            // // 方式1：通过事件  没有生效
            // this.$emit('approvalOk', '');

            // 方式2：直接调用父组件方法（兜底）
            if (this.$parent && typeof this.$parent.approvalOk === 'function') {
                this.$parent.approvalOk();
            }
            this.alert(data.msg,null,3);
            this.showDrawer = false;
        }
      );
        },
        reject() { // 审批驳回
            if (!this.idea) {
                this.alert('意见不能为空',null,1);
                return;
            }
            let para = {};
            para = {billno: this.value.billno,comment: this.idea};
            this.doCc(para);
            this.doPost(
                '.billreject' ,
                para,
                (data) => {
                    // // 方式1：通过事件  没有生效
                    // this.$emit('approvalOk', '');

                    // 方式2：直接调用父组件方法（兜底）
                    if (this.$parent && typeof this.$parent.approvalOk === 'function') {
                        this.$parent.approvalOk();
                    }
                    this.showDrawer = false;
                    this.alert(data.msg,null,3);
                }
            );
        },
        doCc (param) {
            if (this.copy.length > 0) {
                let cc = [];
                this.copy.forEach(el => {
                    cc.push(el.userCode);
                });
                param.cc = cc;
            }
        },
        billSubmit() {
            let param = {
                billno: this.value.billno
            };
            this.doCc(param);
            if (this.idea) {
                param.comment = this.idea;
            }
            this.doPost('.billsubmit', param, (data) => {
                // // 方式1：通过事件  没有生效
                // this.$emit('approvalOk', '');

                // 方式2：直接调用父组件方法（兜底）
                if (this.$parent && typeof this.$parent.approvalOk === 'function') {
                    this.$parent.approvalOk();
                }
                this.showDrawer = false;
                this.$nextTick(() =>{
                    setTimeout(() => {
                        this.alert(data.msg,null,3);
                    }, 250);
                });
            });
        },
        submitApprove() {
            this.doPost(
                '.billapproval',
                {billno: this.value.billno,comment: this.idea},
                (data) => {
                    // // 方式1：通过事件  没有生效
                    // this.$emit('approvalOk', '');

                    // 方式2：直接调用父组件方法（兜底）
                    if (this.$parent && typeof this.$parent.approvalOk === 'function') {
                        this.$parent.approvalOk();
                    }
                    this.showDrawer = false;
                    this.alert(data.msg,null,3);
                });
        },
        addAuditUser() {
            if (!this.idea) {
                this.alert('意见不能为空',null,1);
                return;
            }
            if (this.approvals.length === 0) {
                this.alert('审批人不能为空');
                return;
            }
            let param = {
                billno: this.value.billno,
                userid: this.getUserCode(),
                comment: this.idea
            };
            param.addTaskInfo = {};
            param.addTaskInfo.type = this.curlSelectType;
            param.addTaskInfo.list = []
            this.approvals.forEach(el => {
                 param.addTaskInfo.list.push(el.userCode);
            })
            this.doCc();
            this.doPost(
                '.billaddtask',
                param,
                (data) => {
                    this.alert(data.msg,null,3);

            }
      );
        },
        doPost(method,postData,SuccessFun) {
            let self = this;
            this.showLoading();
            self.asyncPost(this.myConfig.resources, this.myConfig.classPrefix + method, postData, function(data){
                SuccessFun(data);
                self.hideLoading();
            },function(data) {
                self.hideLoading();
                self.$nextTick(() =>{
                    setTimeout(() => {
                        self.alert(data,null,2);
                    }, 250);
                });
            },function(data) {
                self.hideLoading();
                self.$nextTick(() =>{
                    setTimeout(() => {
                        self.alert(data,null,2);
                    }, 250);
                });
            });
        },
        open () {
            this.showDrawer = true;
        },
        addUser() {
            this.userdata = [];
            this.searchValue = '';
            this.selectuserdata = this.$Method.copy(this.copy);
            this.showuser = true;
            this.showapproval = false;
            this.selectType = 'USER';
        },
        getMessage(msg) {
            if (msg) {
                return msg;
            } else {
                return '-';
            }
        },
        setExtraHeight () {
            let height = 0;
            if (this.$refs.head) {
                height = this.$refs.head.offsetHeight;
            }
            this.extraHeight = height;
        },
        setExtraHeight2 () {
            let height = 0;
            if (this.$refs.foot) {
                height = this.$refs.foot.offsetHeight;
            }
            this.extraHeight2 = height;
        },
        searchUser() {
            this.getCopyUserData();
        },
        getCopyUserData () {
            if (!this.searchValue) {
                this.alert("查询内容不能为空");
                return;
            }
            let para = {};
            para.searchValue = this.searchValue;
            para.status= 1;
            para.page_size = 999;
            this.userdata = [];
            para.shopStatus = 1;
            para.usertype = '01';
            let portalMkt = this.getPortalMkt();
            if(portalMkt && portalMkt.shopCode) {
                para.shopCode = this.getPortalMkt().shopCode;
            }
            let self = this;
            this.asyncPost(this.OmdUrl.amp, 'usercenter.account.search', para, function (data) {
                if (data.account) {
                    self.userdata = data.account;
                }
            });
        },
        getStationData () {
            if (!this.searchValue) {
                this.alert("查询内容不能为空");
                return;
            }
            let para = {};
            para.searchValue = this.searchValue;
            para.page_size = 999;
            this.userdata = [];
            let self = this;
            this.asyncPost(this.OmdUrl.amp, 'usercenter.station.search', para, function (data) {
                if (data.station) {
                    let station = [];
                    data.station.forEach(el => {
                        let tmp = {};
                        tmp.userCode = el.stationCode;
                        tmp.userName = el.stationName;
                        station.push(tmp);
                    })
                    self.userdata = station;
                }
            });
        },
        selectUser(obj) {
            this.initSelectUserData(obj);
        },
        initSelectUserData(tmp) {
            let temp = [];
            tmp.forEach(el => {
                let index = this.userdata.findIndex(el2 => el2.userCode === el);
                if (index > -1) {
                    temp.push(this.$Method.copy(this.userdata[index]));
                }
            });
            let temp2 = [];
            this.selectuserdata.forEach(el => {
                let index = this.userdata.findIndex(el2 => el2.userCode === el.userCode);
                if (index > -1) {
                    let index2 = temp.findIndex(el3 => el3.userCode === el.userCode);
                    if (index2 > -1) {
                        temp2.push(this.$Method.copy(el));
                    }
                } else {
                    temp2.push(this.$Method.copy(el));
                }
            });
            temp.forEach(el => {
                let index = temp2.findIndex(el2 => el.userCode === el2.userCode);
                if (index === -1) {
                    temp2.push(this.$Method.copy(el))
                }
            })
            this.selectuserdata = temp2;
        },
        userCancel() {
            this.showuser = false;
        },
        userOk(){
            if (this.showapproval) {
                this.approvals = this.$Method.copy(this.selectuserdata);
                this.curlSelectType = this.selectType;
            } else {
                this.copy = this.$Method.copy(this.selectuserdata);

            }
            this.showuser = false;
        },
        addApproval(){
            this.userdata = [];
            this.searchValue = '';
            this.selectuserdata = this.$Method.copy(this.approvals);
            this.showapproval = true;
            this.showuser = true;
            this.selectType = this.curlSelectType;
        },
        closeCommon(usercode,name) {
            let index = this[name].findIndex(el => el.userCode === usercode);
            if (index > -1) {
                this[name].splice(index,1);
            }
        },
        delAll() {
            this.selectuserdata = [];
        },
        searchStation() {
            this.getStationData();
        },
        clearUser() {
            this.userdata = [];
            this.selectuserdata = [];
            this.searchValue = '';
        },
        selectTypeChange() {
            this.clearUser();
        },
        // 提前所有待审批人姓名
        getCandidateUserText(candidateUserList) {
            if (!candidateUserList || candidateUserList.length === 0) return '';
            // 提取所有待审批人姓名
            let approvers = candidateUserList.map(user => user.userName).join('、');
            return approvers;
        }
    },
    mounted () {
        this.observer = elementResizeDetectorMaker();
        if (this.$refs.head) {
            this.observer.listenTo(this.$refs.head, this.setExtraHeight);
        }
        if (this.$refs.foot) {
            this.observer.listenTo(this.$refs.foot, this.setExtraHeight2);
        }
    },
    beforeUnmount() {
        if (this.$refs.head) {
            this.observer.removeListener(this.$refs.head, this.setExtraHeight);
        }
        if (this.$refs.foot) {
            this.observer.removeListener(this.$refs.foot, this.setExtraHeight2);
        }
    }
};
</script>

<style lang="less" scoped>
.efutureapproval .content .line-wrap::after{
    position: absolute;
    content:'';
    width: 1px;
    height: calc(100% - 42px);
    background-color: #eee;
}
.checkbox-group {
  height: 390px;
  overflow-y: auto;
}

.checkbox-group .checkbox{
  padding: 5px 0;
}

.checkbox .icon{
  width: 35px;
  height: 35px;
  color: #fff;
  line-height: 35px;
  font-size: 12px;
  text-align: center;
  border-radius: 50%;
  margin: 0 10px;
  background-color: #AF292E;
}

.checkbox .uname{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.checkboxrow {
  width: 100%;
  display: flex;
  align-items: center;
}


.username,
.user-item {
  position: relative;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 38px;
  color: #fff;
  margin-right: 17px;
  border-radius: 50%;
  background-color: #3389ff;
}

.username .icon,
.user-item .icon {
  position: absolute;
  bottom: -1px;
  right: 0;
  width: 15px;
  height: 15px;
  line-height: 14px;
  border-radius: 50%;
  background-color: #fff;
}

.user-item .icon {
  width: 15px;
  height: 15px;
}

.username .icon .iconfont {
  font-size: 15px;
}

.user-item .icon .iconfont {
  font-size: 15px;
}
.checkboxrow {
    .ivu-checkbox-label-text {
        display: flex;
        align-items: center
    }
}

.user-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-list .user-list-wrap {
  display: flex;
  margin: 10px 0px;
  align-items: center;
}

.user-list-wrap .name {
  color: #808385;
}


.user-item {
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-right: 0;
  line-height: 40px;
}
</style>
