<template>
  <div class="wh100">
    <a-input
      v-model:value="dataValueName"
      :disabled="props.readonly || props.disabled"
      class="w-full"
      :placeholder="props.record?.placeholderContent || props.placeholder"
      @focus="inputFocus"
      @blur="inputBlur"
      @change="inputChange"
      @click="inputClick"
    ></a-input>

    <a-form-item-rest>
      <!-- 视图选择 -->
      <guns-view-table-select
        v-model:visible="visibleSelection"
        v-if="visibleSelection"
        :list="dataValue"
        title="数据选择"
        :isRadio="isRadio"
        :viewId="viewId"
        :valueFieldCode="valueFieldCode"
        :labelFieldCode="labelFieldCode"
        @done="closeSelection"
      ></guns-view-table-select>
    </a-form-item-rest>
  </div>
</template>

<script setup name="FormViewSelect">
import { ref, onMounted, watch } from 'vue';

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  record: {
    type: Object,
    default: {}
  },
  //是否禁用
  disabled: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: '请选择'
  },
  // 是否只读
  readonly: {
    type: Boolean,
    default: false
  },
  // ref
  formRef: {
    type: Object,
    default: null
  },
});

const emits = defineEmits(['update:value', 'onChange', 'onClick', 'onBlur', 'onFocus']);

// 是否单选
const isRadio = ref(true);

// 视图id
const viewId = ref('');

// 值的字段
const valueFieldCode = ref('');

// 展示的字段
const labelFieldCode = ref('');

onMounted(() => {
  if (props.record?.itemMultipleChoiceFlag) {
    isRadio.value = false;
  } else {
    isRadio.value = true;
  }
  if (props.record?.formItemView) {
    viewId.value = props.record.formItemView.viewId;
    valueFieldCode.value = props.record.formItemView.valueFieldCode;
    labelFieldCode.value = props.record.formItemView.labelFieldCode;
  }
  setDataValue();
});

// 选中的值
const dataValue = ref([]);
// 名称
const dataValueName = ref('');

// 是否显示弹框
const visibleSelection = ref(false);

// 选择总数据
const selectedData = ref({
  selectOrgList: []
});

// 输入框点击
const inputClick = () => {
  if (dataValue.value?.length) {
    selectedData.value.selectOrgList = dataValue.value?.map(item => {
      return { bizId: item.id, name: item.name };
    });
  } else {
    selectedData.value.selectOrgList = [];
  }

  visibleSelection.value = true;
  emits('onClick', props.record);
};

const inputFocus = () => {
  emits('onFocus', props.record);
}

const inputBlur = () => {
  emits('onBlur', props.record);
}

const inputChange = () => {
  emits('onChange', props.record);
}

// 设置值
const setDataValue = () => {
  if (props.value) {
    dataValue.value = JSON.parse(props.value);
  } else {
    dataValue.value = [];
  }
  dataValueName.value = dataValue.value?.map(item => item[labelFieldCode.value]).join('；');
};

// 关闭弹框
const closeSelection = data => {
  dataValue.value = data?.map(item => {
    let obj = {};
    obj[valueFieldCode.value] = item[valueFieldCode.value];
    obj[labelFieldCode.value] = item[labelFieldCode.value];
    return obj;
  });
  dataValueName.value = dataValue.value.map(item => item[labelFieldCode.value]).join('；');
  dataValueChange();
};

// 更改值
const dataValueChange = () => {
  let valueData = [...dataValue.value];
  if (valueData?.length == 0) {
    valueData = '';
  } else {
    valueData = JSON.stringify(valueData);
  }
  emits('update:value', valueData);
  emits('onChange', props.record);
  checkField();
};

// 校验必填
const checkField = async () => {
  if (props.formRef?.validateFields) {
    await props.formRef.validateFields([props.record.fieldCode]);
  }
};

watch(
  () => props.value,
  val => {
    setDataValue();
  },
  { deep: true }
);
</script>

<style></style>
