<template>
  <div class="app-container">
    <layoutCom>
      <org-tree
        slot="leftBar"
        v-model="queryParams.orgId"
        @defaultKey="getDefaultKey"
        @checkChange="checkChange"
        @click="clickTreeNode"
      ></org-tree>
      <el-row slot="rightBar">
        <!--用户数据-->
        <el-col>
          <!--    搜索条件    -->
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
            v-show="showSearch"
            label-width="100px"
          >
            <el-form-item label="外包评价名称" prop="name">
              <el-input
                :maxlength="20"
                v-model="queryParams.name"
                placeholder="请输入外包评价名称"
                clearable
                
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="状态" prop="isLock">
              <el-select
                v-model="queryParams.isLock"
                placeholder="请选择状态"
                clearable
                
              >
                <el-option
                  v-for="dict in dict.type.sys_user_is_lock"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item prop="execOrgType" label="评价机构类型">
              <el-select
                @change="cleanExecOrgList"
                prop="execOrgType"
                label="评价机构类型"
                v-model="formData.execOrgType"
                placeholder="请选择评价机构类型"
                clearable
              >
                <el-option
                  v-for="item in dict.type.sys_org_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-form-item prop="roleIds" label="评价角色">
                <el-select
                  @visible-change="getRolesByOrg"
                  label="评价角色"
                  v-model="formData.roleIds"
                  placeholder="请选择评价角色"
                  multiple
                  filterable
                  @change="handleRolesChange"
                >
                  <el-option
                    v-for="item in planRoles"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="handleQuery"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
              <!-- <span style="margin-left: 50px">只显示管理人员:</span>
              <el-switch v-model="queryParams.onlyManager" active-text="是">
              </el-switch> -->
            </el-form-item>
          </el-form>

          <!--    按纽    -->
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['system:user:add']"
                >新增</el-button
              >
            </el-col>
           
          </el-row>
          <el-table
            border
            height="650"
            size="small"
            v-loading="loading"
            :data="dataList"
            align="center"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              
              label="序号"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column
              label="用户账号"
              key="username"
              prop="username"
              
            />
            <el-table-column
              label="操作"
              width="300"
              fixed="right"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-plus"
                  >补充信息</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </el-col>
      </el-row>
    </layoutCom>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { findAllRole } from "@/api/system/role";
import OrgTree from "@/components/orgTree";
export default {
  name: "SocWebIndex",
  dicts: ["sys_org_type", "plan_status"],
  components:{
    OrgTree
  },
  data() {
    const { params, query } = this.$route;
    return {
        loading:false,
      selectedValues: [],
      planRoles: [],
      formData: this.reset(),
      queryParams: {
        orgId: null,
        name: null,
        type: null,
        orgType: null,
        checkSub: true,
        pageNum: 1,
        pageSize: 10,
        ...query,
      },
      // 显示搜索条件
      showSearch: true,
      total:0,
      dataList:[{}]
    };
  },
  
  mounted() {},
  computed: {
    ...mapGetters(["orgId"]),
  },
  methods: {
    //获取列表
    getList(){

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
    //   this.ids = selection.map((item) => item.userId);
    //   this.single = selection.length != 1;
    //   this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {},
    //单选框状态改变
    checkChange(state) {
      this.queryParams.checkSub = state;
      this.getList();
    },
    // 节点单击事件
    clickTreeNode(data) {
      this.queryParams.orgId = data.id;
      this.getList();
    },
    getRolesByOrg() {
      let params = {
        orgType: null,
      };
      findAllRole(params).then((res) => {
        this.planRoles = res.data;
      });
    },
    cleanExecOrgList() {
      this.execOrgIds = null;
      this.formData.execOrgList = [];
    },
    handleRolesChange(val) {
      this.selectedValues = val.toString().split(",");
    },
    getDefaultKey(key) {
      this.queryParams.orgId = key;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.onlyManager = false;
      this.handleQuery();
    },
    reset() {
      return {
        planName: null,
        planType: null,
        planCycle: null,
        planStatus: null,
        execOrgType: null,
        roleNames: null,
        count: null,
        description: null,
        tableData: null,
        itemList: null,
        planExec: null,
        count: 0,
        note: null,
        planCreateOrgId: null,
        planCreateOrgName: null,
        roleList: null,
        roleIds: null,
        execOrg: null,
        checkOrg: null,
        buildTaskNow: false,
        checkOrgList: [],
        execOrgList: [],
        rulePointList: null,
        checkOrgIds: null,
        execOrgIds: null,
        rulePointIds: null,
        checkOrgType: null,
        checkType: null,
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
