<script lang="ts" setup>
import { IconSuccess } from '@computing/opendesign-icons';
import { PropType, ref, watch } from 'vue';

interface IDataListItem {
  disabled?: boolean;
  status?: string;
  key?: string;
  title?: string;
  checked?: boolean;
  id: string | number;
  Type: string;
  [propName: string]: any;
}

interface IpropData {
  value: string | number;
  option: IDataListItem[];
  checkList: IDataListItem[];
  [propName: string]: any;
}

const props = defineProps({
  // 模式
  mode: {
    type: String,
    default: '',
    required: false,
  },
  data: {
    type: Object as PropType<IpropData>,
    default: () => {
      return {
        // 固定设置选择的网口值
        value: '',
        // 固定设置的可选列表
        option: [],
        // 自动选择的可选列表
        checkList: [],
      };
    },
    required: true,
  },
  // 固定设置的id
  fixedItemId: {
    type: String,
    default: '',
    required: false,
  },
  // 自动选择的id
  automaticItemId: {
    type: String,
    default: '',
    required: false,
  },
  // 是否系统锁定
  lock: {
    type: Boolean,
    default: false,
    required: false,
  },
  // 用户权限
  permission: {
    type: Boolean,
    default: false,
    required: false,
  },
  baseNetPort: {
    type: Object as PropType<{ PortNumber: number | string; Type: string }>,
    default: () => {
      return {};
    },
    required: false,
  },
});

const emits = defineEmits(['setSaveBtnState', 'networkInternetChange']);

const showFixedValue = ref(props.data.value);

watch(
  () => props.data.value,
  (val: string | number) => {
    showFixedValue.value = val;
  },
);

// 自动选择-多选框发生change事件
function setSaveBtnState() {
  emits('setSaveBtnState');
}

// 固定模式-单选框发生change事件
function networkInternetChange(item: any, value: string) {
  emits('networkInternetChange', { checkRadioItem: item, value });
}
</script>

<template>
  <!-- 固定设置 -->
  <div v-show="mode === 'Fixed'" class="td value">
    <div class="checks">
      <el-radio
        v-for="(item, index) in data.option"
        :key="index"
        v-model="showFixedValue"
        v-addId.radio="fixedItemId + item.id"
        :disabled="item.disabled || !permission || lock"
        :label="item.id"
        size="large"
        @change="networkInternetChange(item, $event)"
      >
        <span class="item-title">{{ item.PortName }}</span>
        <el-icon
          v-if="item.status === 'Connected' && baseNetPort.Type === item.Type && baseNetPort.PortNumber === item.id"
          class="success-icon"
        >
          <IconSuccess />
        </el-icon>
        <span v-else-if="item.status === 'Connected'" class="circle bg1"></span>
        <span v-else-if="item.status === 'Disconnected'" class="circle bg2"></span>
      </el-radio>
    </div>
  </div>

  <!-- 自动选择 -->
  <div v-show="mode === 'Automatic'" class="td value">
    <div class="checks">
      <el-checkbox
        v-for="(item, index) in data.checkList"
        :key="index"
        v-model="item.checked"
        v-addId.checkbox="automaticItemId + item.id"
        :disabled="item.disabled || !permission || lock"
        size="large"
        @change="setSaveBtnState"
      >
        <span class="item-title">{{ item.PortName }}</span>
        <el-icon
          v-if="item.status === 'Connected' && baseNetPort.Type === item.Type && baseNetPort.PortNumber === item.id"
          class="success-icon"
        >
          <IconSuccess />
        </el-icon>
        <span v-else-if="item.status === 'Connected'" class="circle bg1"></span>
        <span v-else-if="item.status === 'Disconnected'" class="circle bg2"></span>
      </el-checkbox>
    </div>
  </div>
</template>
