<template>
  <el-dialog
    class="setPermissionDialog"
    title="权限管理"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    width="470px"
    @close="handleclose"
  >
    <div class="setContain">
      <p class="labeltitle">用户名：{{ userinfo.name }}</p>
      <el-checkbox v-model="ywchecked"
        >是否可进行运维操作(<span v-if="ywchecked">是</span
        ><span v-else>否</span>)</el-checkbox
      >
      <el-divider></el-divider>
      <p class="labeltitle">活动列表权限分配</p>
      <div class="activityBox">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="(item, index) in activityData"
            :label="item.title"
            :key="item.id"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submitForm()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
// import { addUserApi, updateUserApi } from "@/utils/api/index";
import {  } from "@/utils/api/index";

export default {
  props: {},
  data() {
    return {
      roleUser: "",
      userinfo: "",
      ywchecked: true,
      isShow: false,
      checkAll: false,
      checkedCities: [],
      isIndeterminate: false,
      activityData: [],
    };
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedCities = val ? activityData : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.activityData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.activityData.length;
    },
    //获取活动列表
    getactivityList() {
      getqueryActivityApi({
        act: "list",
      })
        .then((res) => {
          console.log(res);
          this.activityData = res.data;
        })
        .catch((err) => {});
    },
    // 保存确定操作
    submitForm() {
      this.isShow = false;
    },
    display(val) {
      this.isShow = true;
      this.userinfo = val;
      console.log(val);
      this.getactivityList();
    },
    hide() {
      this.isShow = false;
    },
    handleclose() {},
  },
  mounted() {},
};
</script>
<style lang="less">
.setPermissionDialog {
  .el-dialog__body {
    padding: 12px 20px;
  }
  .setContain {
    .el-checkbox {
      line-height: 32px;
    }
    .labeltitle {
      line-height: 32px;
      font-size: 14px;
      margin-bottom: 8px;
    }
    .el-divider--horizontal {
      margin: 12px 0px;
    }

    .activityBox {
      max-height: 200px;
      overflow: auto;

      .el-checkbox-group {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
