<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->

      <div class="right" :style="{ width: rgBoxWid }">
        <!-- 头部 -->
        <div class="headBox">
          <div class="title">法律法规和相关要求管理</div>
          <div class="btn">
            <el-input placeholder="请输入人员姓名查询" v-model="listQuery.username"></el-input>
            <el-button type="primary" @click="Searchdata">
              <el-icon>
                <Search />
              </el-icon>
              <span>查询</span>
            </el-button>
            <el-button type="primary" @click="reset">
              <span>重置</span>
            </el-button>
            <el-button type="primary" @click="addUserHander">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" stripe v-loading="tableloading" @selection-change="handleSelectionChange" border>
            <el-table-column label="法律名称" property="lawname"></el-table-column>
            <el-table-column label="操作">
              <template #default="{ row }">
                <span class="operate" @click="See(row)" style="color: yellowgreen">责任清单查看</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <!-- 修改 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <AqzrqdEdit @close="comprehensiveShow = false" :userid="userid" :rowData="rowData" @edit="edit" />
    </div>
    <div v-if="comprehenShow" class="dialog-box">
      <zrqd @close="comprehenShow = false" :rowData="rowData" />
    </div>
  </div>
</template>
  
<script setup>
// 引入
import { reactive, onMounted, ref } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import AqzrqdEdit from "./commponents/aqzrqdEdit.vue";
import zrqd from "./commponents/zrqd.vue";
import { getApi, postApi, putApi } from "@/api/tobAcco_api.js";
// 数据
const comprehensiveShow = ref(false);
const comprehenShow = ref(false);
const bigHeight = ref(); //整个高度
function Searchdata () {
  getdata();
}
const tableData = ref([
]);
// 分页
function reset () {
  listQuery.lawname = ''
  getdata();
}
const listQuery = reactive({});
const total = ref(0);
//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgid = val;
  getdata();
};
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");

// 方法
const tableloading = ref(false);
function getdata () {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/dutyList/getUserList`).then((res) => {

    if (res) {
      tableloading.value = false;
      tableData.value = res;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}
//查看
const See = (row) => {
  comprehenShow.value = true
  let params = {
    userid: row.userid
  }
  getApi(params, "/mosty-jcgl/dutyList/getUserDuty").then(
    (res) => {
      if (res) {
        rowData.value = res;
        rowData.value.username = row.username
      }
    }
  );
}

//修改
const rowData = ref({});
const userid = ref("")
const edit = (row) => {
  comprehensiveShow.value = true
  let params = {
    userid: row.userid
  }
  userid.value = row.userid
  getApi(params, "/mosty-jcgl/dutyList/getUserDuty").then(
    (res) => {
      if (res) {
        rowData.value = res;
      }
    }
  );
}
//导出
const handout = (row) => {
  comprehensiveShow.value = true
}
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};

onMounted(() => {
  bigHeightFn();
  getdata();
});
</script>
  
<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    padding: 0 10px;
    width: 300px;
    // height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);

    .treeBox {
      margin-top: 15px;
      overflow: auto;
    }
  }

  .right {
    // width: calc(100% - 300px);
    padding: 0 10px;

    .headBox {
      height: 60px;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}
</style>