<template>
  <div>
    <el-dialog :title="props.titleValue" width="1200px" :before-close="closed" v-model="props.modelValue"
      :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
        <el-form-item label="模板名称1:">
          <el-input v-model="listQuery.tname" clearable placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item style="width: 144px;">
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="info" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <!-- 组织机构信息 -->
      <div :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:90%;">
        <el-table stripe ref="multipleUserRef" v-loading="tableloading" @selection-change="handleSelectionChange"
          :data="tableData" border :row-key="keyid" @row-click="rowClick">
          <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
          <el-table-column width="55" type="selection" #default="{ row }" v-else>
            <el-radio v-model="ridioIndex" :label="row.id" @click="onClickRadio(row)"></el-radio>
          </el-table-column>
          <el-table-column sortable align="center" property="tname" label="模板名称"></el-table-column>
          <el-table-column sortable align="center" property="jccount" label="基础数量"></el-table-column>
        </el-table>
      </div>
      <template #footer>
        <div class="flex just-between">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
            layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          <span class="dialog-footer">
            <el-button type="primary" @click="handleSave">
              <el-icon>
                <DocumentChecked />
              </el-icon>
              <span>确定</span>
            </el-button>
            <el-button @click="closed" type="primary">
              <el-icon>
                <DocumentDelete />
              </el-icon>
              <span>关闭</span>
            </el-button>
          </span>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
// 引入
import { defineProps, onMounted, ref, defineEmits, watchEffect } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
const total = ref(0);
const tableData = ref([]);
const ridioIndex = ref(null);
const multipleUserRef = ref(null);
const tableloading = ref(false);
const listQuery = ref({
  pageCurrent: 1,
  depcode: getItem('deptId').ssdwid + 'XN',
  pageSize: 5,
});
const selectObj = ref(null);//选中的对象
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "选择模板"
  },
  // 默认选中
  defaultData: {
    type: Array,
    default: []
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  dict: {
    type: Object,
    default: {
      D_BZ_RCLX: []
    }
  },
  orgid: String,//部门
});

const emits = defineEmits(["update:modelValue", "confirm"]);

onMounted(() => {
  listQuery.value = { ...listQuery.value, deptCode: props.orgid }
  getListData()
});
//重置
const reset = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 5,
    deptCode: props.orgid
  }
  getListData()
}
//确认
const handleSave = () => {
  emits("confirm", selectObj.value);
}
//d单选
const onClickRadio = (val) => {
  selectObj.value = val
}
//d单选
const rowClick = (val) => {
  selectObj.value = val?.id
  ridioIndex.value = val?.id
}
//选中(多选)
const handleSelectionChange = (val) => {
}
//关闭
const closed = () => {
  multipleUserRef.value.clearSelection();
  emits("update:modelValue", false);
};
const handleFilter = () => {
  listQuery.value.pageCurrent = 1;
  getListData();
  //
};
//列表信息
const getListData = async () => {
  tableData.value = [];
  tableloading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/zhjcmb/getListPc").then(res => {
    if (res) {
      tableData.value = res?.records;
      total.value = Number(res.total);
      multipleUser(tableData.value);
    }
  }).finally(() => {
    tableloading.value = false;
  })
};
// 列表回显
function multipleUser(row) {
  props.defaultData.forEach(item => {
    tableData.value.forEach((val) => {
      if (item == val.id) {
        multipleUserRef.value.toggleRowSelection(val, true);
      }
    });
  })
}

const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};

const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};
watchEffect(() => {

})
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-dialog__body {
  height: 50vh;
}

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

:v-deep .el-tree-node {
  .is-leaf+el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
}

::v-deep .el-overlay-dialog {
  overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
  display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
  display: none;
}

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

.el-form-item {
  text-align: center;
  // width: 400px;
}

.fenye {
  margin-top: 10px;
}
</style>
