<!-- eslint-disable vue/no-mutating-props -->
<template>
  <!-- input -->
  <el-input
    v-if="header?.type === 'input'"
    v-model="row[header.name]"
    v-bind="header?.attrs"
    @blur="blurEvent(header)"
    @change="changeEvent(header)"
  ></el-input>

  <!-- select -->
  <!-- <el-select
    
  ></el-select> -->
  <common-select
    v-if="header?.type === 'select'"
    v-model="row[header.name]"
    v-bind="header?.attrs"
    @change="changeEvent(header)"
  ></common-select>

  <!--时间选择器-->
  <el-date-picker
    v-if="header?.type === 'date-picker'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    @change="changeEvent(header)"
  ></el-date-picker>

  <!-- 数字 -->
  <el-input-number
    v-if="header?.type === 'input-num'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    controls-position="right"
    @change="changeEvent(header)"
    @blur="blurEvent(header)"
  ></el-input-number>

  <!-- radio -->
  <el-radio
    v-if="header?.type === 'radio'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    @change="changeEvent(header)"
  ></el-radio>
  <!-- switch -->
  <el-switch
    v-if="header?.type === 'switch'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    :radios="row[header.name]"
    @change="changeEvent(header)"
  ></el-switch>

  <!-- checkox -->
  <!-- <el-checkbox
    v-if="header?.type === 'checkbox'"
    v-bind="header?.attrs"
    v-model="row[header.name]"
    @change="changeEvent(header)"
  ></el-checkbox> -->
  <!-- chckgroup -->
  <common-check-group
    v-if="header.type === 'check-group'"
    v-model="header.value"
    v-bind="header?.attrs"
    @change="changeEvent(header)"
  ></common-check-group>

  <!-- 接收传入的行间样式修改颜色 -->
  <span
    v-if="header?.type === 'color'"
    :class="row[header?.name]"
    v-bind="header?.attrs"
  ></span>

  <!-- linkPage回调由父组件传入，父组件可以自定义回调的执行 -->
  <span v-if="header?.type === 'link'" class="link" @click="linkEvent(row)">
    {{ row[header?.name] }}
  </span>
  <el-tag v-if="header?.type === 'tag'" v-bind="row[header?.name]['attrs']">
    <!-- <span class="dian" :class="row[header?.name]['attrs'].type"></span> -->
    <!-- <span></span> -->
    {{ row[header?.name]['label'] }}
  </el-tag>
</template>

<script lang="ts" setup>
import CommonSelect from '../form/Select.vue';
import CommonCheckGroup from '../form/CheckGroup.vue';

defineProps({
  header: {
    type: Object,
    default: () => {}
  },
  row: {
    type: Object,
    default: () => {}
  },
  isDisable: {
    type: Boolean,
    default: true
  }
});
const emits = defineEmits(['changeEvent', 'blurEvent', 'linkEvent']);

const changeEvent = (form: any) => {
  emits('changeEvent', form);
};

// 触发blur事件
const blurEvent = (form: any) => {
  emits('blurEvent', form);
};

// 触发link事件
const linkEvent = (row: any) => {
  emits('linkEvent', row);
};
</script>

<style scoped lang="scss">
.red {
  width: 44px;
  height: 10px;
  display: inline-block;
  background: #f34871;
}
.blue {
  width: 44px;
  height: 10px;
  display: inline-block;
  background: #2d98ff;
}
.point {
  margin: 0 4px 2.5px 0;
}
.link-text {
  width: 85px;
  display: flex;
  justify-content: space-between;
  .link-left,
  .link-right {
    font-size: 14px;
  }
  .link-right {
    cursor: pointer;
    color: #2d98ff;
  }
}
.color-picker-wrapper {
  width: 101px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding-right: 5px;
}
.color-picker-noWrapper {
  display: inline-block;
}
.color-picker-wrapper {
  :deep(.el-color-picker__trigger) {
    padding: 1px;
    border: none;
    .el-color-picker__color {
      border: none;
    }
    .el-color-picker__color-inner {
      border-radius: 5px;
      .el-icon {
        font-size: 0;
      }
    }
  }
  .color-des {
    font-size: 14px;
  }
}
.ipu-svg {
  width: 6px;
  height: 6px;
  margin-top: 5px;
}
.svg-content {
  margin-left: 4px;
}
.link {
  color: #2d98ff;
  cursor: pointer;
}
.my-svg {
  width: 20px;
  height: 20px;
  position: relative;
  bottom: 4px;
}
.disabled {
  color: #cccccc !important;
  cursor: not-allowed !important;
}
:deep(.el-tag__content) {
  display: flex;
  align-items: center;
  .dian {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: #f34871;
  }
  .danger {
    background-color: var(--el-color-danger);
  }
  .warning {
    background-color: var(--el-color-warning);
  }
  .success {
    background-color: var(--el-color-success);
  }
  .info {
    background-color: var(--el-color-info);
  }
}
</style>