<!--
 * @Author: Devin
 * @Date: 2023-01-12 14:49:40
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:02
 * @Description: 
-->
<template>
  <el-descriptions class="__common-description">
    <!-- custom title -->
    <template #title>
      <div class="__common-desc-title">
        <img
          v-if="url && url.length"
          class="__common-desc-img"
          :src="url"
          alt=""
        />
        <h5 v-if="title && !hasEdit" class="__common-title">{{ title }}</h5>
        <!-- edit title -->
        <el-input v-if="hasEdit" v-model="newTitle" size="small"></el-input>
        <common-icon
          v-if="hasIcon && !hasEdit"
          :name="editIcon"
          :size="18"
          @click.stop="() => (hasEdit = true)"
        ></common-icon>
        <common-icon
          v-if="hasEdit"
          name="common-guanbi"
          :size="24"
          @click.stop="() => (hasEdit = false)"
        ></common-icon>
        <common-icon
          v-if="hasEdit"
          :name="saveIcon"
          :size="24"
          @click.stop="editTitle"
        ></common-icon>
      </div>
    </template>

    <!-- custom extra -->
    <template #extra>
      <el-button
        v-for="(extra, index) in extras"
        :key="index"
        size="small"
        :type="extra['type'] || 'primary'"
        @click.stop="extra['onClick']"
      >
        {{ extra['label'] }}
      </el-button>
    </template>

    <!-- description list -->
    <el-descriptions-item
      v-for="(desc, index) in descriptions"
      :key="index"
      :label="`${desc?.['label']}：`"
      @mouseover="descMouseEnter(index)"
      @mouseout="descMouseLeave"
    >
      <span class="__common-description-label">
        <span class="__common-label">{{ descData?.[desc?.['name']] }}</span>
        <common-icon
          v-if="desc['delete'] && activeIdx === index"
          name="common-yuanxingguanbi"
          :size="16"
        ></common-icon>
      </span>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  // 描述信息头部btn集合
  extras: {
    type: Array<any>,
    default: () => []
  },
  // 描述标题
  title: {
    type: String,
    default: () => ''
  },
  // 描述信息label集合
  descriptions: {
    type: Array<any>,
    default: () => []
  },
  editIcon: {
    type: String,
    default: () => 'common-bianji'
  },
  saveIcon: {
    type: String,
    default: () => 'tool-baocun'
  },
  url: {
    // 标题图片
    type: String,
    default: () => ''
  },
  descData: {
    // 描述信息数据对象
    type: Object,
    default: () => {}
  },
  hasIcon: {
    // 是否有标题编辑icon
    type: Boolean,
    default: () => true
  }
});
// 编辑title
const newTitle = ref<any>(props.title);
const hasEdit = ref<any>(false);
const emits = defineEmits(['editTitle']);

// 编辑标题
function editTitle() {
  hasEdit.value = false;
  emits('editTitle', true);
}
const activeIdx = ref<any>(-1);
// 鼠标移入
function descMouseEnter(idx: any) {
  activeIdx.value = idx;
}
// 鼠标移出
function descMouseLeave() {
  activeIdx.value = -1;
}
</script>
<script lang="ts">
export default {
  name: 'CommonInfo'
};
</script>

<style scoped lang="scss">
.__common-description {
  background: #fff;
  padding: 10px 16px;
  .__common-desc-title {
    display: flex;
    align-items: center;
    .__common-desc-img {
      width: 24px;
      height: 24px;
      margin-right: 16px;
    }
    .__common-title {
      margin-right: 10px;
      color: #2d3e53;
      font-size: 20px;
      font-weight: 500;
    }
  }
  .__common-description-label {
    line-height: 22px;
    color: #2d3e53;
    .__common-label {
      margin-right: 10px;
    }
    .__common-icon {
      display: inline-block;
      padding-top: 3px;
    }
  }
}
:deep(.el-descriptions__label) {
  color: #455a74;
}
</style>