<!--
 * @Author: Devin
 * @Date: 2023-02-16 15:13:04
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-16 16:36:10
 * @Description: 描述信息demo
-->
<template>
  <common-panel :layer="'row'">
    <template #left>
      <div class="tree">
        <common-tree></common-tree>
      </div>
    </template>
    <template #right>
      <div class="__common-info-content">
        <common-info
          :extras="extras"
          :title="title"
          :desc-data="descData"
          :descriptions="descriptions"
        ></common-info>
      </div>
    </template>
  </common-panel>
</template>

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

function deleteFn() {}
function editFn() {}
const extras = ref<any>([
  { name: 'delete', type: 'danger', label: '删除', onCick: deleteFn },
  { name: 'edit', label: '编辑', onCick: editFn }
]);

const title = ref<any>('光伏板资产模型');

const descriptions = ref<any>([
  { label: '描述1', name: 'desc1', type: '', delete: true },
  { label: '描述2', name: 'desc2', type: '' },
  { label: '描述3', name: 'desc3', type: '' },
  { label: '描述4', name: 'desc4', type: '' },
  { label: '描述5', name: 'desc5', type: '' },
  { label: '描述6', name: 'desc6', type: '' },
  { label: '描述7', name: 'desc7', type: '' }
]);

const descData = ref<any>({
  desc1: '描述信息',
  desc2: '描述信息',
  desc3: '描述信息',
  desc4: '描述信息',
  desc5: '描述信息',
  desc6: '描述信息',
  desc7: '描述信息'
});
</script>

<style scoped lang="scss">
.tree {
  background: #fff;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.content {
  width: 100%;
  height: 100%;
  background: #fff;
}
// .__common-info-content {
//   padding: 16px;
// }
</style>