<template>
  <div>
    <el-dialog
      title="选择警用器械"
      width="1400px"
      v-model="props.modelValue"
      @close="closed"
    >
      <div v-if="props.modelValue">
        <el-form :model="listQuery" class="mosty-from-wrap" :inline="true">
          <el-form-item label="器械类型">
            <el-select
              v-model="listQuery.scode"
              class="m-2"
              placeholder="请选择器械类型"
            >
              <el-option
                v-for="item in D_BZ_JYQXFL"
                :label="item.label"
                :key="item.value"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属部门">
            <MOSTY.Department
              width="100%"
              clearable
              v-model="listQuery.ssbmdm"
            />
          </el-form-item>
          <el-form-item label="购置日期">
            <el-date-picker
              v-model="listQuery.cgrq"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="date"
              placeholder="请选择日期"
            />
          </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" style="margin-top: 0px">
          <el-table
            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
              type="index"
              show-overflow-tooltip
              align="center"
              width="60px"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="ssbm"
              label="所属部门"
              width="200px"
              align="center"
            ></el-table-column>
            <el-table-column
              sortable
              prop="scode"
              show-overflow-tooltip
              align="center"
              label="器械类型"
            >
              <template #default="{ row }">
                <dict-tag
                  :options="D_BZ_JYQXFL"
                  :value="row.scode"
                  :tag="false"
                />
              </template>
            </el-table-column>
            <el-table-column
              sortable
              prop="qxMc"
              show-overflow-tooltip
              align="center"
              label="器械名称"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="qxbh"
              show-overflow-tooltip
              align="center"
              label="器械型号"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="cgrq"
              show-overflow-tooltip
              label="生产日期"
              align="center"
              width="200px"
            >
            </el-table-column>
            <el-table-column
              sortable
              prop="qxPch"
              show-overflow-tooltip
              label="录入批次"
              align="center"
              width="200px"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye">
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="listQuery.pageNo"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="listQuery.pageSize"
            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>
  </div>
</template>

<script setup>
import * as rule from "@/utils/rules.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import {
  defineProps,
  watch,
  ref,
  onMounted,
  nextTick,
  getCurrentInstance
} from "vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
const { proxy } = getCurrentInstance();
const { D_BZ_JYQXFL } = proxy.$dict("D_BZ_JYQXFL");
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleIds: {
    type: Array,
    default: []
  }
});
const total = ref(0);
const listQuery = ref({
  pageNo: 1,
  pageSize: 20
});
const form = ref({});
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "choosedUsers"]);
onMounted(() => {
  handleFilter();
});
const closed = () => {
  emits("update:modelValue", false);
};
const reset = () => {
  listQuery.value = {
    pageNo: 1,
    pageSize: 20
  };
  getListData();
};
const keyid = (row) => {
  return row.id;
};
// 为用户分配角色
const onComfirm = () => {
  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
  let list = []
  let listId = []
  userList.forEach(val=>{
    if(listId.indexOf(val.id) == -1) {
      list.push(val);
      listId.push(val.id);
    }
  })
  emits("choosedUsers", list);
  closed();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageNo = currentPage;
  getListData();
};
const getListData = async () => {
  const params = listQuery.value;
  const res = await qcckGet(params, "/mosty-jcgl/tpJcglJyqx/selectJyqx");
  tableData.value = res?.records;
  total.value = Number(res.total);
  multipleUser();
};

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

const handleFilter = () => {
  listQuery.value.pageNo = 1;
  getListData();
};

const multipleUserRef = ref(null);
const multipleSelectionUser = ref([]);
const handleSelectionChange = (val) => {
  multipleSelectionUser.value = val;
};

watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {
      handleFilter();
    }
  }
);
</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>
