<template>
  <div>
    <el-dialog :title='props.title' width="1200px" top="10%" v-model="props.modelValue" :before-close="handleClose">
      <div class="config">
        <div class="tabBox">
          <el-table ref="multipleTableRef" stripe :data="tableData" v-loading="tableloading" height="93%"
            element-loading-text="数据加载中..." style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column label="法律名称" style="width: 250" property="lawname"></el-table-column>
            <el-table-column label="法律类别" property="type">

              <template #default="{ row }">
                <dict-tag v-if="row.type" :options="D_TB_FLLB" :value="row.type" :tag="false" />
                <span v-else>无</span>
              </template>
            </el-table-column>
            <el-table-column label="颁发单位" property="promulgationcompany"></el-table-column>
            <el-table-column label="颁布时间" property="promulgationdate"></el-table-column>
            <el-table-column label="实施时间" property="implementationdate"></el-table-column>
          </el-table>
          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineEmits, getCurrentInstance, reactive, defineProps, watch } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const { D_TB_FLLB } = proxy.$dict("D_TB_FLLB");
const router = useRouter()
// 数据
const bigHeight = ref(); //整个高度
const emits = defineEmits(["update:modelValue", "close"]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  type: '',
});
const tableloading = ref(false)
const total = ref(0);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  },
  listQuery: {
    type: Object,
    default: {}
  },
  title: {
    type: String,
    default: ''
  }
});
const tableData = ref([]);


watch(
  () => props.modelValue,
  (val) => {
    listQuery.type = props.listQuery.type
    getDataList()
  }, {
  deep: true
}
)
onMounted(() => {
  // getDataList()
  bigHeightFn();
});
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
// 关闭
const handleClose = () => {
  emits("update:modelValue", false);
};

// 关闭×
const closeDialog = () => {
  // emits("changeAddVi", false);
  emits("update:modelValue", false);
};


//获取列表数据
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/lawRegulations/getLawRegulaList').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    }
  }).catch((err) => {
    tableData.value = []
    tableloading.value = false;
  })
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .fenye {
    top: 93%;
  }
}

.fj {
  .el-form {
    padding: 10px;
    margin-top: 10px;
    // display: block;
    flex-wrap: wrap;
    // width: 1170px;
    justify-content: flex-end;
  }

  .from_fix {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-top: 10px;

    // .el-form-item--default .el-form-item__content {
    //   flex-wrap: nowrap !important;
    // }

    .el-input {
      width: 100%;
    }
  }
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap !important;
}

.txbj {
  display: flex;
  justify-content: space-between;
}

.config {
  .el-form {
    padding: 10px 40px;
    margin-top: 10px;
    display: block;
    // flex-wrap: wrap;
    // justify-content: space-between;
  }

  .el-form-item {
    text-align: center;
  }
}

.pxdx_box {
  width: 500px;
}

.titleBox {
  align-items: center;
  margin: 0;
  padding: 0;
  height: 60px;
  border: 1px solid rgb(32, 75, 54);
  padding: 20px;
}

.form>div {
  position: relative;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    align-items: center;

    .el-select {
      width: 65%;
    }
  }
}

.el-input {
  width: 75%;
}

.two .el-input {
  width: 65%;
}

.three {
  justify-content: flex-start !important;

  .el-select {
    width: 15%;
  }
}

.four {
  display: flex;
  align-items: center;

  span {
    width: 5%;
  }

  .el-textarea__inner {
    width: 95%;
  }
}

.group {
  margin-top: 50px;
  // background-color: red;
  position: relative;
}

.fj {
  margin-top: 50px;
  width: 100%;

  .content {
    width: 100%;
    display: flex;
    padding: 20px;

    div {
      display: flex;
      width: 85%;
      align-items: center;
    }

    justify-content: space-between;
  }
}

.jc {
  margin-top: 50px;
}

.el-form-item__content {
  flex-wrap: nowrap;
}

.el-collapse {
  border-color: var(--el-color-primary);
  height: 460px;
}

::v-deep .el-collapse-item__header {
  border-bottom-color: var(--el-color-primary);
}

::v-deep .el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
</style>
