
<template>
  <div>
    <JMetricBiz @handleOpen="handleOpen" :loading="loadingEcho" v-bind="attrs"></JMetricBiz>
    <MetricSelectModal @register="regModal" @getSelectResult="setValue" v-bind="getBindValue"></MetricSelectModal>
  </div>
</template>
<script lang="ts">
  import MetricSelectModal from './modal/MetricSelectModal.vue';
  import JMetricBiz from './base/JMetricBiz.vue';
  import { defineComponent, ref, unref, reactive, watchEffect, watch, provide } from 'vue';
  import { useModal } from '/@/components/Modal';
  import { propTypes } from '/@/utils/propTypes';
  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { SelectValue } from 'ant-design-vue/es/select';
  import { queryAllMetric } from '/@/api/common/api';

  export default defineComponent({
    name: 'JSelectMetric',
    components: {
      MetricSelectModal,
      JMetricBiz,
    },
    inheritAttrs: false,
    props: {
      value: propTypes.oneOfType([propTypes.string, propTypes.array]),
      labelKey: {
        type: String,
        default: 'mtrcName',
      },
      rowKey: {
        type: String,
        default: 'mtrcNo',
      },
      params: {
        type: Object,
        default: () => {},
      },
    },
    emits: ['options-change', 'change', 'update:value'],
    setup(props, { emit, refs }) {

      const emitData = ref<any[]>();
      const [regModal, { openModal }] = useModal();
      const [state] = useRuleFormItem(props, 'value', 'change', emitData);
      const selectOptions = ref<SelectValue>([]);
      let selectValues = reactive<Recordable>({
        value: [],
        change: false,
      });

      const loadingEcho = ref<boolean>(false);
      provide('selectOptions', selectOptions);
      provide('selectValues', selectValues);
      provide('loadingEcho', loadingEcho);

      const tag = ref(false);
      const attrs = useAttrs();
      watchEffect(() => {
        props.value && initValue();
        if (!props.value) {
          selectValues.value = [];
        }
      });

      watch(selectValues, () => {
        if (selectValues) {
          state.value = selectValues.value;
        }
      });

      function handleOpen() {
        tag.value = true;
        openModal(true, {
          isUpdate: false,
          //data:oldList.value
        });
      }
       async function initValue() {
        let value = props.value ? props.value : [];
        if (value && typeof value === 'string' && value != 'null' && value != 'undefined') {
          let options = await getMetricList(value)
          selectOptions.value = options
          selectValues.value = value.split(",")
        } 
      }
      
      function setValue(options, values) {
        selectOptions.value = options;
        state.value = values;
        selectValues.value = values;
        emit('update:value', values);
        emit('options-change', options);   
      }

      function handleChange(values) {
        emit('update:value', values);
      }

      async function getMetricList(mtrcnos) {
        let tmpAry = mtrcnos.split(",")
        let newAry = []
        let objTmp = {}
        for(let i=0;i<tmpAry.length;i++){
            newAry.push(tmpAry[i].substr(2));
            objTmp[tmpAry[i].substr(2)] = tmpAry[i].substr(0,1)
        }
        let strTmp = newAry.join(",")
        const mtrcList = await queryAllMetric({ mtrcnos: strTmp });
        let ret = []
        if (mtrcList && mtrcList.length > 0) {
            ret =  mtrcList.map((item) => {
              item['paramName'] = objTmp[item.mtrcNo]
              return { label: objTmp[item.mtrcNo] + ":" + item.mtrcName, value: objTmp[item.mtrcNo]+":"+item.mtrcNo };
            });
        }
        return ret;
      }

      const getBindValue = Object.assign({}, unref(props), unref(attrs));
      return {
        state,
        attrs,
        getBindValue,
        selectOptions,
        selectValues,
        loadingEcho,
        tag,
        regModal,
        setValue,
        handleOpen,
        handleChange

      };
    },
  });
</script>
<style lang="less" scoped>
  .j-select-row {
    @width: 82px;

    .left {
      width: calc(100% - @width - 8px);
    }

    .right {
      width: @width;
    }

    .full {
      width: 100%;
    }

    :deep(.ant-select-search__field) {
      display: none !important;
    }
  }
</style>
