<template>
  <div>
    <el-drawer class="custom-drawer-form" title="项目分享" size="1000px" :visible.sync="drawer" direction="rtl"
      :before-close="close" destroy-on-close>
      <el-container class="project-share">
        <el-header>
          <el-form :inline="true" class="select-user-header-form">
            <el-form-item label="客户名称">
              <el-input v-model="queryParams.name" size="small" placeholder="请输入客户名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>
        </el-header>
        <el-main class="project-share-main">
          <el-table v-loading="loading" :data="tableData" :show-header="headerShow" @expand-change="expandChange" style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <ClientTable @getId="getId" :tenantId="scope.row.id" :projectId="projectId"></ClientTable>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="客户名称" align="center" show-overflow-tooltip></el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total"
              @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>
        </el-main>
        <el-footer class="footer-common">
          <el-button @click="close">关 闭</el-button>
          <el-button type="primary" @click="submit" :loading="btnLoading">确 定</el-button>
        </el-footer>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
import ClientTable from './ClientTable.vue'
export default {
  components: {
    ClientTable
  },
  data() {
    return {
      // 控制抽屉弹窗的开关
      drawer: false,
      // 表格的loading
      loading: false,
      // 抽屉弹窗确认按钮的loading
      btnLoading: false,
      // 总条数
      total: 0,
      // 是否显示表格表头
      headerShow: true,
      // 数据源
      tableData: [],
      // 暂无
      users: [],
      // 分页信息以及检索信息
      queryParams: {
        id: 0,
        name: "",
        size: 10,
        current: 1,
      },
      // 项目id
      projectId: 0,
      // 选择的用户
      userIds: [],
      // ？？？
      typeObj: {
        1: "分类人",
        2: "管理员",
        3: "查阅人",
        4: "查阅人(图表)",
      },
      genderObj: {
        0: "女",
        1: "男",
      },

    };
  },
  computed: {},
  mounted() { },
  methods: {
    expandChange(val) {
      // console.log(val);
    },
    // 查询分享
    // queryProjectShare() {//
    //   let params = {
    //     projectId: this.projectId,
    //     personName:'',
    //     ...this.queryParams,//分页信息以及检索信息
    //   }
    //   this.$api
    //     .queryProjectShare(params)
    //     .then((response) => {
    //       this.userIds=response.data.data.map(item => {
    //         return item.personId
    //       })
    //       // this.total = response.data.total;
    //       this.loading = false;
    //     })
    //     .catch((error) => {
    //       this.loading = false;
    //     });
    // },
    // 子组件传递的消息
    getId(id, users) {
      this.userIds = id;
      this.users = users
    },
    // 关闭抽屉弹窗
    close() {
      this.userIds = [];
      this.drawer = false;
      this.$emit("close");
    },
    // 打开抽屉弹窗
    open(projectId) {
      this.projectId = projectId;
      this.drawer = true;
      this.getList();
    },
    // ？？？
    onChange({ id }) {
      const index = this.userIds.indexOf(id);
      if (index === -1) {
        this.userIds.push(id);
      } else {
        this.userIds.splice(index, 1);
      }
    },
    // 获取表格数据
    getList() {
      this.loading = true;
      let params = {
        projectId: this.projectId,
        ...this.queryParams,//分页信息以及检索信息
      }
      this.$api
        .getAdminClientList(params)
        .then((response) => {
          this.tableData = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getList();
    },
    // 确认按钮事件
    submit() {
      if (this.userIds.length === 0) {
        this.$message.error("请选择用户");
        return false;
      }
      this.btnLoading = true;
      let params = {
        projectId: this.projectId,
        personIds: this.userIds,
      }
      this.$api
        .addProjectShare(params)
        .then((response) => {
          this.btnLoading = false;
          this.$message.success("分享成功");
          this.close();
        })
        .catch((error) => {
          this.btnLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.select-user-header-form {
  padding-left: 20px;
}

.project-share {
  .pagination {
    text-align: right;
    margin: 20px 0;
  }

  .el-checkbox__label {
    display: none !important;
  }

  .project-share-header-form {
    margin-left: 20px;
  }

  .project-share-main {
    background: #fff;
    padding: 5px 20px;
    margin-top: 20px;
  }
}
</style>
