<template>
  <el-dialog :title="props.titleValue" width="1200px" :model-value="props.modelValue" :before-close="closed">
    <div>
      <!-- <div>
        <el-form ref="form" :model="formData" label-width="80px">
            <el-form-item label="月份">
              <el-date-picker v-model="formData.planImplementationDate" format="YYYY-MM" value-format="YYYY-MM" type="month" placeholder="选择月份"></el-date-picker>
            </el-form-item>
            <el-form-item label="计划名">
              <el-input v-model="formData.planName" placeholder="请输入计划名称"></el-input>
            </el-form-item>
        </el-form>
      </div> -->
      <div>
        <MOSTY.Search :searchArr="searchArr" noDisabledDate @submit="onSearch" />
      </div>
      <div class="tabBox" :class="props.Single ? 'table-box-radio' : ''" style="margin-top: 0px;height:50vh;">
        <el-table stripe ref="multipleUserRef" @selection-change="handleSelectionChange" :data="tableData"
                  v-model="currentRow"
                  @row-click="changecoose"  border
          :row-key="keyid" style="width: 100%" height="40vh">
          <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 label="培训名称" property="planName"> </el-table-column>
          <el-table-column label="举办时间(月)" property="planImplementationDate"> </el-table-column>
          <el-table-column label="培训人数" property="planTraineeNumber"> </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.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">

        <el-button type="primary" @click="onComfirm">确认</el-button>
        <el-button @click="closed">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { defineProps, getCurrentInstance, onMounted, reactive, ref, watch } from "vue"
import { getApi } from "@/api/tobAcco_api.js"

const { proxy } = getCurrentInstance();
const { D_TB_YWLX } = proxy.$dict("D_TB_YWLX");
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  titleValue: {
    type: String,
    default: "选择培训计划"
  },
  // 选择成员
  data: {
    type: Array,
    default: []
  },
  LeaderType: {
    type: String,
    default: ""
  },
  //是否单选
  Single: {
    type: Boolean,
    default: true
  },

});
const total = ref(0);
const currentRow = ref(-1); //选中的数据
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20
});
const searchObj = ref({})
const ridioIndex = ref(null);
const form = ref({});
const formData = ref({})
const searchArr = reactive([
  {
    showType: "month",
    prop: "planImplementationDate",
    width: "250px",
    placeholder: "请输入月份"
  }, {
    showType: "input",
    prop: "planName",
    width: "250px",
    placeholder: "请输入计划名"
  }
])
//查询
function onSearch(obj) {
  searchObj.value.planImplementationDate = obj.planImplementationDate
  searchObj.value.planName = obj.planName
  listQuery.value.pageCurrent = 1
  getListData()
}
const tableData = ref([]);
const emits = defineEmits(["update:modelValue", "listdata"]);
const closed = () => {
  emits("update:modelValue", false);
  currentRow.value = [];
  multipleUserRef.value.clearSelection();
};

const keyid = (row) => {
  return row.id;
};

watch(
  () => props.modelValue,
  (val) => {
    if (val === true) {
      handleFilter();
    } else {
    }
  }
);
watch(
  () => props.Single,
  (val) => {
  }
);
onMounted(() => {
})

function changecoose(val) {
  if (props.Single) {
    ridioIndex.value = val.id
  } else {
    if (currentRow.value && currentRow.value.length > 0) {
      let rowid = []
      rowid = currentRow.value.filter(it => { return it.id == val.id })
      if (rowid.length > 0) {
        multipleUserRef.value.toggleRowSelection(val, false);

      } else {
        multipleUserRef.value.toggleRowSelection(val, true);
      }

    } else {
      multipleUserRef.value.toggleRowSelection(val, true);
    }
  }

}

// 为用户分配角色
const onComfirm = () => {
  const userList = JSON.parse(JSON.stringify(multipleSelectionUser.value));
  let list = [];
  if (props.Single) {
    list[0] = tableData.value.find((item) => {
      return item.id === ridioIndex.value;
    })
    // emits("listdata", [info]);
    // closed();
  } else {
    list = userList
    // emits("listdata", userList);
    // closed();
  }
  multipleUserRef.value.clearSelection();
  console.log('获取查询数据', list)
  if (list[0] === undefined){
    ElMessage.error('至少要选择一项')
    return
  }
  emits("listdata", list);
  closed()
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
const getListData = async () => {
  tableData.value = []
  const params = {
    ...listQuery.value,
    ...searchObj.value
  }
  await getApi(params, '/mosty-jcgl/training/getJhListByDeptid').then((res) => {
    total.value = res.total
    tableData.value = res.records
  })
  multipleUser(props.data);

};

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

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

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

</script>

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

// .table-box-radio {
//   ::v-deep .el-checkbox__inner {
//     border-radius: 50% !important;
//   }
// }
::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;
}
</style>
