<template>
  <div>
    <el-dialog :title="props.titleValue" width="1200px" v-model="props.modelValue" :before-close="closed">
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true" style="width: 100%;">
        <el-form-item label="关键字:">
          <el-input v-model="listQuery.relatedname" clearable placeholder="请输入相关方名称或社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="相关方类型:" prop="type" v-if="!props.type">
          <MOSTY.DictRidioAndSelect placeholder="请选择相关方类型" style='width:337px' :dictData="D_TB_RELATED_TYPE"
            v-model="listQuery.type" selectType="select" @getselect="handleSelectType" />
        </el-form-item>
        <el-form-item style="width: 144px;">
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="success" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <!-- 组织机构信息 -->
      <div class="tabBox" :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" @row-click="changecoose" border :row-key="keyid" style="width: 100%" height="450">
          <el-table-column type="selection" width="55" :reserve-selection="true" v-if="!props.Single" />
          <el-table-column width="55" #default="{ row }" v-else>
            <el-radio v-model="ridioIndex" :label="row.id"></el-radio>
          </el-table-column>
          <el-table-column sortable align="center" property="relatedname" width="300" label="相关方名称"></el-table-column>
          <el-table-column sortable align="center" property="orgname" label="所属单位"></el-table-column>
          <el-table-column sortable align="center" width="200" v-if="listQuery.type == '01'" property="businesslicense"
            label="社会信用代码"></el-table-column>
          <el-table-column sortable align="center" width="200" v-if="listQuery.type == '02'" property="idCard"
            label="身份证号"></el-table-column>
          <el-table-column sortable align="center" property="relatedtypes" width="300" label="业务类型">
            <template #default="{ row }">
              <dict-tag :options="D_TB_RELATED" :value="row.relatedtypes" :tag="true" />
            </template>
          </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,
  getCurrentInstance,
  watchEffect
} from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const { D_TB_RELATED, D_TB_RELATED_TYPE } = proxy.$dict("D_TB_RELATED", "D_TB_RELATED_TYPE");
const total = ref(0);
const tableData = ref([]);
const ridioIndex = ref(null);
const multipleUserRef = ref(null);
const tableloading = ref(false);
const type = ref('')
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
});
const selectObj = ref(null);//选中的对象
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  type: {
    type: String,
    default: null
  },
  titleValue: {
    type: String,
    default: "选择相关方"
  },
  // 默认选中成员
  defaultData: {
    type: Array,
    default: []
  },

  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  ids: {
    type: String,
    default: ''
  },
  dict: {
    type: Object,
    default: {
      D_BZ_RCLX: []
    }
  },
  deptid: {
    type: String,
    default: ''
  },
});

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

onMounted(() => {
  ridioIndex.value = props.ids
  listQuery.value.type = props.type
  getListData()
});
//重置
const reset = () => {
  listQuery.value = {
    pageCurrent: 1,
    pageSize: 20,
  }
  getListData()
}
function handleSelectType() {
  getListData()
}
//确认
const handleSave = () => {
  emits("confirm", selectObj.value);
  closed()
}
//每一项点击事件
function changecoose(val) {
  ridioIndex.value = val.id
  selectObj.value = val

}

//选中(多选)
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;
  listQuery.value.deptid = props.deptid

  if (props.type) {
    getApi(listQuery.value, '/mosty-jcgl/relatedpartyinfo/getXgfList').then(res => {
      if (res) {
        for (let i = 0; i < res.records.length; i++) {
          res.records[i].relatedtypes = res.records[i].relatedtype ? res.records[i].relatedtype.split(',') : []
        }
        tableData.value = res?.records;

        total.value = Number(res.total);
        multipleUser(tableData.value);
      }
    }).finally(() => {
      tableloading.value = false;
    })
  } else {
    postApi(listQuery.value, '/mosty-jcgl/relatedpartyinfo/getPageList').then(res => {
      if (res) {
        for (let i = 0; i < res.records.length; i++) {
          res.records[i].relatedtypes = res.records[i].relatedtype ? res.records[i].relatedtype.split(',') : []
        }
        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();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

</script>

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

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

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

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  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;
}

.box {
  width: 100%;
  overflow-y: hidden;
  // display: flex;
  // justify-content: space-between;
}

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