<template :class="$style.yourClassName">
  <div style="padding: 10px">
    <!-- <Description
        :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
        :column="3"
        :data="mockData"
        :schema="schema"
      /> -->
    <Title :titleName="'基础信息'" />

    <Description @register="registerDesOne" />
    <Title :titleName="'挡水、泄水、引水建筑物'" />

    <Description @register="registerDesTwo" />
    <Title :titleName="'厂房信息'" />

    <Description @register="registerDesThree" />
    <Title :titleName="'船闸信息'" />

    <Description @register="registerDesFour" />
    <Title :titleName="'施工与移民'" />

    <Description @register="registerDesFive" />
  </div>
</template>
<script lang="ts">
import Title from '/@/components/Title/index.vue';

import { defineComponent, ref, reactive } from 'vue';
import { Description, DescItem, useDescription } from '/@/components/Description/index';

const schemaOne: DescItem[] = [
  {
    field: 'famc',
    label: '方案名称',
    span: 3,
  },
  {
    field: 'sftjfa',
    label: '是否推荐方案',
  },
  {
    field: 'kffsid',
    label: '开发方式',
  },
  {
    field: 'zkr',
    label: '总库容(m³)',
  },
  {
    field: 'zzjl',
    label: '总装机量(MW)',
  },
  {
    field: 'nfdl',
    label: '年发电量(kw·h)',
  },
  {
    field: 'lyst',
    label: '利用水头(m)',
  },

  {
    field: 'fams',
    label: '方案描述',
    span: 3,
  },
];
const schemaTwo: DescItem[] = [
  {
    field: 'dsjzwlxid',
    label: '挡水建筑物类型',
  },
  {
    field: 'dsjzwgc',
    label: '挡水建筑物顶高程',
  },
  {
    field: 'dsjzwzdgd',
    label: '挡水建筑物最大高度(m)',
  },
  {
    field: 'xsjzwlxid',
    label: '泄水建筑物类型',
  },
  {
    field: 'xsjzwdgc',
    label: '泄水建筑物顶高程(m)',
  },
  {
    field: 'zdxhll',
    label: '最大泄洪流量(m³/s)',
  },
  {
    field: 'ysjzwlxid',
    label: '引水建筑物类型',
  },
  {
    field: 'ysjzwcd',
    label: '引水建筑物长度(m)',
  },
  {
    field: 'ysjzwdj',
    label: '引水建筑物洞泾(m)',
  },
];
const schemaThree: DescItem[] = [
  {
    field: 'cfxsid',
    label: '厂房型式',
    span: 2,
  },
  {
    field: 'cfgc',
    label: '厂房高程(m)',
  },
  {
    field: 'cfc',
    label: '厂房长(m)',
  },
  {
    field: 'cfk',
    label: '厂房宽(m)',
  },
  {
    field: 'cfg',
    label: '厂房高(m)',
  },
];
const schemaFour: DescItem[] = [
  {
    field: 'czlxid',
    label: '船闸类型',
    span: 3,
  },
  {
    field: 'czcd',
    label: '船闸长度(m)',
  },
  {
    field: 'czkd',
    label: '船闸宽度(m)',
  },
  {
    field: 'czgd',
    label: '船闸高度(m)',
  },
];
const schemaFive: DescItem[] = [
  {
    field: 'dljzwqk',
    label: '导流建筑物情况',
    span: 3,
  },
  {
    field: 'lfjzwqk',
    label: '临辅建筑物情况',
    span: 3,
  },
  {
    field: 'ymazhzxfjgcqk',
    label: '移民安置和专项复建工程情况',
    span: 3,
  },
];
export default defineComponent({
  components: { Description, Title },
  props: {
    componentData: {
      type: Object,
    },
  },
  setup(props) {
    const descriptionsDate: any = reactive({});
    const mockData: any = {};
    console.log('props', props.componentData);

    Object.assign(mockData, props.componentData);

    const [registerDesOne] = useDescription({
      // title: '基础信息',
      data: mockData,
      schema: schemaOne,
      column: 3,
      labelStyle: {
        textAlign: 'center',
        width: '13%',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #8BCDFF',
        border: '1px solid rgba(21, 186, 255, 0.3)',
        background: 'rgba(21, 186, 255, 0.1)',
      },
      contentStyle: {
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #E5F7FF',
        width: 'calc( 61% / 3)',
        border: '1px solid rgba(21, 186, 255, 0.3)',
      },
      // collapseOptions: { canExpand: true },
    });
    const [registerDesTwo] = useDescription({
      // title: '挡水、泄水、引水建筑物',
      data: mockData,
      schema: schemaTwo,
      column: 3,
      // collapseOptions: { canExpand: true },
      labelStyle: {
        textAlign: 'center',
        width: '13%',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #8BCDFF',
        border: '1px solid rgba(21, 186, 255, 0.3)',
        background: 'rgba(21, 186, 255, 0.1)',
      },
      contentStyle: {
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #E5F7FF',
        width: 'calc( 61% / 3)',
        border: '1px solid rgba(21, 186, 255, 0.3)',
      },
    });
    const [registerDesThree] = useDescription({
      // title: '厂房信息',
      data: mockData,
      schema: schemaThree,
      column: 3,
      // collapseOptions: { canExpand: true },
      labelStyle: {
        textAlign: 'center',
        width: '13%',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #8BCDFF',
        border: '1px solid rgba(21, 186, 255, 0.3)',
        background: 'rgba(21, 186, 255, 0.1)',
      },
      contentStyle: {
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #E5F7FF',
        width: 'calc( 61% / 3)',
        border: '1px solid rgba(21, 186, 255, 0.3)',
      },
    });
    const [registerDesFour] = useDescription({
      // title: '船闸信息',
      data: mockData,
      schema: schemaFour,
      column: 3,

      // collapseOptions: { canExpand: true },
      labelStyle: {
        textAlign: 'center',
        width: '13%',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #8BCDFF',
        border: '1px solid rgba(21, 186, 255, 0.3)',
      },
      contentStyle: {
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #E5F7FF',
        width: 'calc( 61% / 3)',
        border: '1px solid rgba(21, 186, 255, 0.3)',
      },
    });
    const [registerDesFive] = useDescription({
      // title: '施工与移民',
      data: mockData,
      schema: schemaFive,
      column: 3,
      // collapseOptions: { canExpand: true },
      labelStyle: {
        textAlign: 'center',
        width: '13%',
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #8BCDFF',
        border: '1px solid rgba(21, 186, 255, 0.3)',
        background: 'rgba(21, 186, 255, 0.1)',
      },
      contentStyle: {
        fontSize: '14px',
        fontFamily: 'Source Han Sans CN',
        fontWeight: 500,
        color: ' #E5F7FF',
        border: '1px solid rgba(21, 186, 255, 0.3)',
      },
    });
    return {
      descriptionsDate,
      mockData,
      registerDesOne,
      registerDesTwo,
      registerDesThree,
      registerDesFour,
      registerDesFive,
    };
  },
});
</script>
<style scoped lang="less">
:deep(.vben-basic-tree) {
  width: 100% !important;
}

:deep(.is-unflod) {
  display: none !important;
}

:deep(.is-flod) {
  display: none !important;
}

:deep(.ant-select-selection-item) {
  color: rgba(0, 0, 0, 0.85) !important;
}

:deep(.ant-input-number-disabled) {
  color: rgba(0, 0, 0, 0.85) !important;
}
.descriptionsBtm {
  :deep(.ant-descriptions-title) {
    flex: none;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-style: italic;
    color: #14baff;
  }
  :deep(.ant-descriptions-extra) {
    margin-left: 20px;
  }
}
.descriptionsTop {
  :deep(.ant-descriptions-title) {
    flex: none;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-style: italic;
    color: #14baff;
  }
  :deep(.ant-descriptions-extra) {
    margin-left: 20px;
  }
}
:deep(.ant-modal) {
  .ant-modal-body {
    background-color: rgba(12, 41, 61) !important;
  }
}
</style>
<style lang="less">
</style>
