<template>
  <div v-for="(attr_item, key) in selectItemPropsSettingProps.propsInfo" :key="key">
    <el-form-item v-if="!attr_item.disabled" :label="attr_item.title" size="small">
      <el-select
        v-if="attr_item.type === 'select' && !attr_item.disabled"
        v-model="attr_item.val"
        placeholder="Select"
        size="small"
        :disabled="attr_item?.disabled"
      >
        <el-option
          v-for="item in attr_item.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <!-- number -->
      <el-input-number
        v-else-if="attr_item.type === 'number' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled"
      ></el-input-number>
      <!-- input -->
      <el-input
        v-else-if="attr_item.type === 'input' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled"
      ></el-input>
      <!-- textArea -->
      <el-input
        v-else-if="attr_item.type === 'textArea' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled"
        type="textarea"
      ></el-input>
      <!-- color -->
      <el-color-picker
        v-else-if="attr_item.type === 'color' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled"
      ></el-color-picker>
      <!--  switch -->
      <el-switch
        v-else-if="attr_item.type === 'switch' && !attr_item.disabled"
        v-model="attr_item.val"
        :disabled="attr_item?.disabled"
      ></el-switch>
      <!-- jsonEdit -->
      <div v-else-if="attr_item.type === 'jsonEdit' && !attr_item.disabled">
        <json-edit v-model:contentObj="attr_item.val"></json-edit>
      </div>
      <!-- upload -->
      <!-- :on-change="handleChange" -->
      <el-input-tag
        v-else-if="attr_item.type === 'upload' && !attr_item.disabled"
        :model-value="[attr_item.val]"
        tag-type="success"
        size="small"
        disabled
        :max="1"
        :max-collapse-tags="1"
        placeholder="请绑定"
      >
        <template #prefix>
          <el-icon @click="onImageDialog(attr_item)"><Search /></el-icon>
        </template>
      </el-input-tag>

      <!-- <el-upload
        v-else-if="attr_item.type === 'upload' && !attr_item.disabled"
        accept="image/*"
        :action="BASE_URL + '/fileStorage/saveFile'"
        :on-success="saveImageSuccess"
      >
        <el-button type="primary">绑定图片</el-button>
      </el-upload> -->

      <!-- inputTypeTag 类型标签 -->
      <el-tag v-else-if="attr_item.type === 'inputTypeTag' && !attr_item.disabled">
        {{ attr_item.val }}
      </el-tag>

      <!-- inputSelectId 输入类型标签 -->
      <el-input-tag
        v-else-if="attr_item.type === 'inputSelectId' && !attr_item.disabled"
        :model-value="[attr_item.val]"
        tag-type="success"
        size="small"
        disabled
        :max="1"
        :max-collapse-tags="1"
        placeholder="请绑定"
      >
        <template #prefix>
          <el-icon @click="handleIconClick(attr_item)"><Search /></el-icon>
        </template>
      </el-input-tag>
      <!-- END -->
    </el-form-item>
  </div>

  <!-- 图片模型 -->
  <imageModel
    :dialogImageVisible="dialogImageVisible"
    :isBinding="true"
    @update-dialog-image-visible="updateDialogImageVisible"
    @binding-img="bindingImg"
  />
  <!-- 表单 -->
  <el-dialog
    v-model="dialogTableVisible"
    class="elDialog"
    top="10vh"
    title="组件绑定"
    height="80%"
    width="60%"
  >
    <el-table :data="filteredData" :max-height="450">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="modeId" label="遥ID" />
      <el-table-column prop="name" label="名称" />

      <el-table-column
        v-if="inputTypeTagValue == undefined"
        prop="bType"
        label="类型筛选"
        :filters="[
          { text: '遥信', value: 1 },
          { text: '遥测', value: 2 },
          { text: '遥控', value: 3 },
          { text: '遥调', value: 4 },
          { text: '其他', value: 0 }
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
        filter-confirm-button-text="确定"
        filter-reset-button-text="重置"
      >
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
          <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
          <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
          <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
          <el-tag type="danger" v-else>{{ '其他' }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column v-if="inputTypeTagValue != undefined" label="类型">
        <template #default="scope">
          <el-tag type="primary" v-if="scope.row.bType === 1">{{ '遥信' }}</el-tag>
          <el-tag type="success" v-else-if="scope.row.bType === 2">{{ '遥测' }}</el-tag>
          <el-tag type="info" v-else-if="scope.row.bType === 3">{{ '遥控' }}</el-tag>
          <el-tag type="warning" v-else-if="scope.row.bType === 4">{{ '遥调' }}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)"> 绑定 </el-button>
        </template>
      </el-table-column> -->

      <el-table-column align="center">
        <template #header>
          <el-input v-model="search" size="small" placeholder="节点名称" />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"> 绑定 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <!-- END -->
</template>
<script setup lang="ts">
import type { ILeftAsideConfigItemPublicProps } from '@/components/mt-edit/store/types';
import {
  ElTabs,
  ElTabPane,
  ElForm,
  ElFormItem,
  ElInput,
  ElInputNumber,
  ElSelect,
  ElOption,
  ElOptionGroup,
  ElSwitch,
  ElText,
  ElColorPicker,
  ElUpload,
  ElIcon,
  type UploadUserFile,
  ElButton,
  type UploadFile,
  ElMessage
} from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import JsonEdit from './json-edit.vue';
import { ref, reactive, computed, onMounted } from 'vue';
import { el, fa } from 'element-plus/es/locales.mjs';
import { modelApi, BASE_URL } from '@/utils/request';
import imageModel from '@/components/mt-edit/components/layout/base-panel/imageModel.vue';
type SelectItemPropsSettingProps = {
  propsInfo: ILeftAsideConfigItemPublicProps | undefined;
};
const selectItemPropsSettingProps = withDefaults(defineProps<SelectItemPropsSettingProps>(), {});

// 定义组件可以触发的事件
const emits = defineEmits(['imgUpload', 'selectById', 'updateDialogImageVisible', 'bindingImg']);
function handleChange(uploadFile: UploadFile) {
  if (uploadFile.raw) {
    emits('imgUpload', uploadFile);
  }
}

function saveImageSuccess(response: any) {
  console.log('保存图片成功', response.code);
  console.log('保存图片成功', response);

  emits('imgUpload', response.data.base64Data);
}

onMounted(() => {
  setInputTagVal();
});

let dialogImageVisible = ref(false);
function updateDialogImageVisible() {
  dialogImageVisible.value = false;
}

let inputTypeTagValue = ref<string>();

//获取标签栏的值
function setInputTagVal() {
  for (const key in selectItemPropsSettingProps.propsInfo) {
    const item = selectItemPropsSettingProps.propsInfo[key];
    if (item.type === 'inputTypeTag') {
      inputTypeTagValue.value = item.val;
    }
  }
}

let attrItem: any;
const dialogTableVisible = ref(false);
function handleIconClick(obj: any) {
  assembleList();
  attrItem = obj;
  dialogTableVisible.value = true;
}

let attrImg: any;
// 打开图片模型弹窗
const onImageDialog = (obj: any) => {
  dialogImageVisible.value = true;
  attrImg = obj;
};
function bindingImg(obj: any) {
  console.log('绑定图片', obj, attrImg);
  attrImg.val = obj.id;
  emits('imgUpload', obj);
  dialogImageVisible.value = false;
}

let modelIds = ref<string[]>([]);

function handleEdit(obj: any) {
  console.log('绑定', modelIds.value);
  dialogTableVisible.value = false;
  modelIds.value = [obj.modeId];
  attrItem.val = obj.modeId;
  emits('selectById', obj.modeId);
}

function getNodeForName(bType: number) {
  switch (bType) {
    case 1:
      return '遥信';
    case 2:
      return '遥测';
    case 3:
      return '遥控';
    case 4:
      return '遥调';
    default:
      return '其他';
  }
}

function getNameForNode(nodeName: string): number {
  switch (nodeName) {
    case '遥信':
      return 1;
    case '遥测':
      return 2;
    case '遥控':
      return 3;
    case '遥调':
      return 4;
    default:
      return 0;
  }
}

const search = ref('');

const filterTag = (value: number, row: any) => {
  return row.bType === value;
};

// 根据搜索条件过滤数据
const filteredData = computed(() => {
  if (!search.value) {
    return gridData;
  }
  return gridData.filter((item) => {
    return item.name.toLowerCase().includes(search.value.toLowerCase());
  });
});

function assembleList() {
  let code: number | undefined;
  if (inputTypeTagValue.value !== undefined) code = getNameForNode(inputTypeTagValue.value);

  gridData.splice(0, gridData.length);
  const globalData = (window as any).globalData as Map<string, any>;
  for (const key in globalData) {
    if (code == undefined) {
      let modeId = key;
      let data = globalData.get(modeId);
      if (data) {
        let name = data.node.name;
        let bType = data.bType;
        // let bTypeName = getNodeName(data.bType);
        gridData.push({ modeId, name, bType });
      }
    } else {
      let data = globalData.get(key);
      if (data && code == data.bType) {
        let modeId = key;
        let name = data.node.name;
        let bType = data.bType;
        // let bTypeName = getNodeName(data.bType);
        gridData.push({ modeId, name, bType });
      }
    }
  }
}

interface GridDataItem {
  modeId: string;
  name: string;
  bType: number;
}

const gridData: GridDataItem[] = [];
</script>

<style lang="less" scoped>
.elDialog {
  padding: 0;
  margin: 0;
}
.demo-form-inline {
  padding: 15px 0;
}

.demo-form-inline .el-input {
  --el-input-width: 150px;
}

.demo-form-inline .el-select {
  --el-select-width: 150px;
}
</style>
