<template>
  <el-dialog
    :title="titleValue"
    width="900px"
    :model-value="modelValue"
    append-to-body
    @close="closed"
  >
    <div>
      <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
        <el-form-item label="线索名称">
          <el-input
            placeholder="请输入线索名称"
            v-model="listQuery.xsMc"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="handleFilter">查询</el-button>
          <el-button type="info" @click="reset()"> 重置 </el-button>
        </el-form-item>
      </el-form>
      <div
        class="tabBox"
        :class="props.Single ? 'tabBoxRadio' : ''"
        style="margin-top: 0px"
      >
        <el-table
          v-loading="loading"
          ref="multipleUserRef"
          @selection-change="handleSelectionChange"
          :data="tableData"
          border
          :row-key="keyid"
          style="width: 100%"
          height="450"
        >
          <el-table-column
            type="selection"
            width="55"
            :reserve-selection="true"
          />
          <el-table-column prop="xsMc" align="center" label="线索名称" />
          <el-table-column prop="xsBh" align="center" label="线索编号" />
          <el-table-column prop="xsLy" align="center" label="线索来源">
            <template #default="{ row }">
              <DictTag :value="row.xsLy" :tag="false" :options="D_GS_XS_LY" />
            </template>
          </el-table-column>

          <el-table-column prop="xsFxdj" align="center" label="风险等级">
            <template #default="{ row }">
              <DictTag
                :value="row.xsFxdj"
                :tag="false"
                :options="D_GS_XS_FXDJ"
              />
            </template>
          </el-table-column>
          <el-table-column prop="startTime" align="center" label="开始时间" />
          <el-table-column prop="endTime" align="center" label="结束时间" />
          <el-table-column prop="xsZxdd" align="center" label="指向地点" />
          <el-table-column prop="xsNr" align="center" label="线索内容" />
          <el-table-column prop="xsQtlx" align="center" label="群体类型">
            <template #default="{ row }">
              <DictTag
                :value="row.xsQtlx"
                :tag="false"
                :options="D_GS_ZDQT_LB"
              />
            </template>
          </el-table-column>
          <el-table-column prop="xsQtmc" align="center" label="群体名称" />
          <el-table-column prop="sbDwMc" align="center" label="上报单位" />
          <el-table-column prop="sbSj" align="center" label="上报时间" />
          <el-table-column prop="xsSjrs" align="center" label="涉及人数" />
          <el-table-column prop="xsZtCz" align="center" label="处置状态">
            <template #default="{ row }">
              <DictTag
                :value="row.xsZtCz"
                :tag="false"
                :options="D_GS_XS_CZZT"
              />
            </template>
          </el-table-column>
          <el-table-column prop="xsZt" align="center" label="状态">
            <template #default="{ row }">
              <DictTag :value="row.xsZt" :tag="false" :options="D_GS_XS_ZT" />
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="fenye" :style="{ top: tableHeight + 'px' }">
        <el-pagination
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="listQuery.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closed">取消</el-button>
        <el-button type="primary" @click="onComfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, ref, onMounted, getCurrentInstance } from "vue";
import { qcckGet } from "@/api/qcckApi.js";
const { proxy } = getCurrentInstance();
const { D_GS_XS_LY, D_GS_XS_FXDJ, D_GS_ZDQT_LB, D_GS_XS_CZZT, D_GS_XS_ZT } =
  proxy.$dict(
    "D_GS_XS_LY",
    "D_GS_XS_FXDJ",
    "D_GS_ZDQT_LB",
    "D_GS_XS_CZZT",
    "D_GS_XS_ZT"
  ); //获取字典数据

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  dic: {
    type: Object,
    default: () => {}
  },
  bqDl: {
    type: String,
    default: "01"
  },
  bqLx: {
    type: String,
    default: "01"
  },
  titleValue: {
    type: String,
    default: "选择大类"
  },
  LeaderType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },
  roleIds: {
    type: Array,
    default: []
  }
});
const total = ref(0);
const listQuery = ref({
  current: 1,
  size: 20
});
const loading = ref(false);
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "chooseDate"]);
onMounted(() => {
  handleFilter();
});
const closed = () => {
  emits("update:modelValue", false);
};
const reset = () => {
  listQuery.value = { current: 1, size: 20 };
  getDataList();
};

const keyid = (row) => {
  return row.id;
};
// 为用户分配角色
const onComfirm = () => {
  const userList = multipleSelectionUser.value;
  let list = [];
  let listId = [];
  userList.forEach((val) => {
    if (listId.indexOf(val.id) == -1) {
      list.push(val);
      listId.push(val.id);
    }
  });
  emits("chooseDate", list);
  let data = { type: props.LeaderType, userList: userList };
  emits("chooseDateLeader", data);
  closed();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.size = currentSize;
  getDataList();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.current = currentPage;
  getDataList();
};

// 查询线索列表
const getDataList = () => {
  const data = listQuery.value;
  loading.value = true;
  qcckGet(data, "/mosty-gsxt/tbGsxtXs/selectPage").then((res) => {
    tableData.value = res?.records;
    total.value = Number(res.total);
    loading.value = false;
    multipleUser();
  });
};

//列表回显
function multipleUser() {
  tableData.value.forEach((item) => {
    if (props.roleIds.some((id) => id == item.id)) {
      multipleUserRef.value.toggleRowSelection(item, true);
    }
  });
}

const handleFilter = () => {
  listQuery.value.current = 1;
  getDataList();
};

const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
  if (props.Single) {
    if (val.length > 1) {
      let del_row = val.shift();
      multipleUserRef.value.toggleRowSelection(del_row, false);
    }
    multipleSelectionUser.value = val;
  } else {
    multipleSelectionUser.value = val;
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";
</style>
<style>
.tabBoxRadio .el-checkbox__inner {
  border-radius: 50% !important;
}
.tabBoxRadio .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
