<template>
  <Dialog
    :dialog-style="dialogStyle"
    :is-dialog-exist="showDialog"
    title="人数"
    @close-dialog="closeDialog"
  >
    <el-container>
      <el-main>
        <div class="data-container-useList">
          <div v-for="(item, index) in userList" :key="index" class="use-state-box">
            <el-radio>{{ item.phone }}</el-radio>
          </div>
        </div>
      </el-main>
      <el-footer height="20%">
<!--        <span>{{ this.userList.length === 0 ? 未分配 : 已分配}}</span>-->
          <span v-if="userList.length == 0" class="gray-color">未分配</span>
          <span v-else class="blue-color">已分配{{ userList.length }}人</span>
      </el-footer>
    </el-container>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index'
/**
 * 权限使用人数Dialog
 *
 */
export default {
  components: {
    Dialog
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    dialogStyle: {
      type: Object,
      default: () => {}
    },
    userList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container {
    width: 100%;
    height: 100%;
    .el-main {
      width: 100%;
      height: 80%;
      /*background: red;*/
      .data-container-useList {
        display: flex;
        flex-wrap: wrap;
        .use-state-box {
          margin-right: 10px;
          margin-left: 10px;
          margin-top: 10px;
          width: 120px;
          /*background: red;*/
        }

      }
    }
    .el-footer {
      /*background: yellow;*/
      display: flex;
      justify-content: center;
      align-items: center;

      .blue-color {
        color: #1890FF;
      }
      .gray-color {
        color: gray;
      }
    }
  }
</style>
