<template>
  <!-- 新增编辑 -->
  <a-modal
    width="500px"
    :maskClosable="false"
    :visible="props.visible"
    :confirm-loading="loading"
    :forceRender="true"
    title="请选择"
    :body-style="{ paddingBottom: '8px', height: '450px' }"
    @update:visible="updateVisible"
    @ok="save"
    @close="updateVisible(false)"
  >
    <div class="select-modal-content">
      <div class="header">
        <a-input v-model:value="searchText" allowClear placeholder="请输入关键字搜索" @pressEnter="search" class="search-input">
          <template #prefix>
            <icon-font iconClass="icon-opt-search"></icon-font>
          </template>
        </a-input>
      </div>
      <div class="body">
        <a-radio-group v-if="props.isRadio" v-model:value="selectValue" @change="radioChange" style="width: 100%">
          <a-radio v-for="dict in newSelectList" class="body-radio" :key="dict[type]" :value="dict[type]">
            {{ dict.name }}
          </a-radio>
        </a-radio-group>
        <a-checkbox-group v-model:value="selectValue" style="width: 100%" v-if="!props.isRadio" @change="checkChange">
          <a-row>
            <a-col :span="24" v-for="(dict, index) in newSelectList" :key="index">
              <a-checkbox class="body-radio" :value="dict[type]">{{ dict.name }}</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
    </div>
  </a-modal>
</template>

<script setup name="SelectModalDialog">
import { deepClone } from '@/utils/common/util';
import { ref, onMounted } from 'vue';

const props = defineProps({
  visible: Boolean,
  // 数据列表
  dictList: {
    type: Array,
    default: []
  },
  //   选中的数据列表
  dataValue: {
    type: Array,
    default: []
  },
  //   下拉取值
  valueType: {
    type: Number,
    default: 1
  },
  //   是否单选
  isRadio: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(['update:visible', 'done']);
// 弹框加载
const loading = ref(false);

// 搜索名称
const searchText = ref('');

// 选中的值
const selectValue = ref(null);

// 赋值列表
const evalList = ref([]);

// 新的列表
const newSelectList = ref([]);

// 类型
const type = ref(props.valueType === 1 ? 'id' : 'code');

onMounted(() => {
  evalList.value = [...props.dataValue];
  newSelectList.value = deepClone(props.dictList);
  if (props.isRadio) {
    selectValue.value = '';
    if (props.dataValue?.length > 0) {
      selectValue.value = props.dataValue[0][type.value];
    }
  } else {
    selectValue.value = [];
    if (props.dataValue?.length > 0) {
      selectValue.value = props.dataValue.map(item => item[type.value]);
    }
  }
});

// 点击搜索
const search = () => {
  if (searchText.value) {
    newSelectList.value = props.dictList.filter(item => item.name.indexOf(searchText.value) != '-1');
  } else {
    newSelectList.value = deepClone(props.dictList);
  }
};

// 单选改变
const radioChange = e => {
  const data = props.dictList.find(item => item[type.value] == selectValue.value);
  evalList.value = [data];
};

// 多选改变
const checkChange = checkedValue => {
  let arr = [];
  if (checkedValue.length > 0) {
    arr = props.dictList.filter(item => checkedValue.find(cItem => cItem == item[type.value]));
  }
  evalList.value = [...arr];
};

// 更改弹框状态
const updateVisible = value => {
  emits('update:visible', value);
};

// 点击保存
const save = () => {
  updateVisible(false);
  emits('done', evalList.value);
};
</script>

<style lang="less" scoped>
.select-modal-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.header {
  margin-bottom: 10px;
}
.body {
  flex: auto;
  overflow: hidden auto;
}
.body-radio {
  padding: 10px 10px;
  width: 100%;
  &:hover {
    background-color: #eee;
  }
}
</style>
