<template>
  <Modal
    :maskClosable="false"
    :visible="true"
    title="编辑指标"
    @ok="handleSave"
    @cancel="handleCancel"
    :confirmLoading="loading"
  >
    <Alert message="场景联动页面可引用指标配置触发条件" type="warning" showIcon />
    <Form layout="vertical" ref="formRef" :model="modelRef" style="margin-top: 20px">
      <template v-for="(item, index) in modelRef.metrics" :key="index">
        <Row type="flex" justify="space-between" :align="'bottom'">
          <Col :span="item.range ? 11 : 24">
            <FormItem
              :rules="{
                required: true,
                message: `请${['date', 'boolean'].includes(data?.valueType?.type) ? '选择' : '输入'}指标值`
              }"
              :name="['metrics', index, 'value', 0]"
            >
              <template #label>
                <Ellipsis>{{ item?.name || '指标值' }}</Ellipsis>
              </template>
              <ValueItem
                v-model:modelValue="item.value[0]"
                :itemType="data.valueType?.type"
                :options="
                  data.valueType?.type === 'boolean'
                    ? [
                        {
                          label: data.valueType?.trueText,
                          value: String(data.valueType?.trueValue)
                        },
                        {
                          label: data.valueType?.falseText,
                          value: String(data.valueType?.falseValue)
                        }
                      ]
                    : undefined
                "
              />
            </FormItem>
          </Col>
          <template v-if="item.range">
            <Col><div class="center-icon">~</div></Col>
            <Col :span="11">
              <FormItem
                :name="['metrics', index, 'value', 1]"
                :rules="{
                  required: true,
                  message: `请${['date', 'boolean'].includes(data?.valueType?.type) ? '选择' : '输入'}指标值`
                }"
              >
                <ValueItem v-model:modelValue="item.value[1]" :itemType="data.valueType?.type" />
              </FormItem>
            </Col>
          </template>
        </Row>
      </template>
    </Form>
  </Modal>
</template>

<script lang="ts" setup>
  import { ref, reactive, watch, toRaw } from 'vue';
  import { queryMetric, saveMetric } from '../../../../../../api/device/instance';
  import { useInstanceStore } from '@jdlinker/func';
  import { onlyMessage } from '@jdlinker/utils';
  import { isNumber } from 'lodash-es';
  import { ValueItem } from '@jdlinker/ui';
  // @ts-ignore
  import { Modal, Form, Row, Col, Alert, FormItem, Ellipsis } from 'linker-ui-components';

  const props = defineProps({
    data: {
      type: Object,
      default: () => {}
    }
  });

  const emit = defineEmits(['close']);

  const loading = ref<boolean>(false);
  const instanceStore = useInstanceStore();
  const formRef = ref();

  const modelRef = reactive<{
    metrics: any[];
  }>({
    metrics: []
  });

  const handleCancel = () => {
    emit('close');
  };

  watch(
    () => props.data.id,
    (newVal) => {
      if (newVal && instanceStore.current.id) {
        queryMetric(instanceStore.current.id, props.data.id).then((resp) => {
          if (resp.code === 200) {
            if (Array.isArray(resp?.result) && resp?.result.length) {
              const list = resp?.result.map((item: any) => {
                const val = Array.isArray(item?.value) ? item?.value : isNumber(item?.value) ? [item.value] : item?.value?.split(',');
                return {
                  ...item,
                  value: val
                };
              });
              modelRef.metrics = list as any;
            } else {
              const type = props.data.valueType?.type;
              if (type === 'boolean') {
                const list = props.data.expands?.metrics.map((item: any) => {
                  const value = (item?.value || {}).map((i: any) => String(i)) || {};
                  return {
                    ...item,
                    value
                  };
                });
                modelRef.metrics = list || [];
              } else {
                modelRef.metrics = props.data.expands?.metrics || [];
              }
            }
          }
        });
      }
    },
    { immediate: true, deep: true }
  );

  const handleSave = () => {
    formRef.value
      .validate()
      .then(async (_data: any) => {
        loading.value = true;
        const list = (toRaw(modelRef)?.metrics || []).map((item: any) => {
          return {
            ...item,
            value: item.value.join(',')
          };
        });
        const resp = await saveMetric(instanceStore.current.id || '', props.data.id || '', list).finally(() => {
          loading.value = false;
        });
        if (resp.code === 200) {
          onlyMessage('操作成功！');
          emit('close');
          formRef.value.resetFields();
        }
      })
      .catch((err: any) => {
        console.log('error', err);
      });
  };
</script>

<style lang="less" scoped>
  .center-icon {
    height: 86px;
    display: flex;
    align-items: center;
  }
</style>
