<template :class="$style.yourClassName">
  <div style="padding: 10px">
    <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: 'gcmc',
      label: '工程名称',
      span: 3,
    },
    {
      field: 'gcmc',
      label: '工程编号',
    },
    {
      field: 'jszt',
      label: '建设状态',
    },
    {
      field: 'gclxid',
      label: '工程类型',
    },
    {
      field: 'sjjdid',
      label: '设计阶段',
    },
    {
      field: 'gcdjid',
      label: '工程等级',
    },
    {
      field: 'tjid',
      label: '梯级级别',
    },
    {
      field: 'sssdjd',
      label: '所属水电基地',
    },
    {
      field: 'yzdw',
      label: '业主单位',
    },
    {
      field: 'jgbm',
      label: '监管部门',
    },
    {
      field: 'xzqs',
      label: '行政区划',
      span: 3,
    },
    {
      field: 'gcjj',
      label: '工程简介',
      span: 3,
    },
  ];
  const schemaTwo: DescItem[] = [
    {
      field: 'hzsj',
      label: '核准时间',
      span: 3,
    },
    {
      field: 'jlsj',
      label: '截流时间',
      span: 3,
    },
    {
      field: 'xssj',
      label: '蓄水时间',
      span: 3,
    },
    {
      field: 'stjztcsj',
      label: '首台机组投产时间',
      span: 3,
    },
    {
      field: 'jgyssj',
      label: '竣工验收时间',
      span: 3,
    },
  ];
  const schemaThree: DescItem[] = [
    {
      field: 'lyid',
      label: '流域',
      span: 3,
    },
    {
      field: 'sxid',
      label: '水系',
      span: 3,
    },
    {
      field: 'hlid',
      label: '河段',
      span: 3,
    },
  ];
  const schemaFour: DescItem[] = [
    {
      field: 'dzld',
      label: '地震烈度',
    },
    {
      field: 'dzdfzjsd',
      label: '地震动峰值加速度',
    },
    {
      field: 'dzfyptzzq',
      label: '反应谱特征周期',
    },
    {
      field: 'dzgs',
      label: '地震概述',
      span: 3,
    },
    {
      field: 'qydxdm',
      label: '区域地形地貌',
      span: 3,
    },
    {
      field: 'qydcyx',
      label: '区域地层岩性',
      span: 3,
    },
    {
      field: 'qydzgz',
      label: '区域地质构造',
      span: 3,
    },
    {
      field: 'qyswdztj',
      label: '区域水文地质条件',
      span: 3,
    },
    {
      field: 'qywldztj',
      label: '区域物理地质条件',
      span: 3,
    },
    {
      field: 'xgz',
      label: '新构造',
      span: 3,
    },
    {
      field: 'qhd',
      label: '所属气候带',
      span: 3,
    },
    {
      field: 'njy',
      label: '年降雨',
      span: 3,
    },
    {
      field: 'qw',
      label: '气温',
      span: 3,
    },
  ];
  const schemaFive: DescItem[] = [
    {
      field: 'qydxdm',
      label: '地形地貌描述',
      span: 3,
    },
    {
      field: 'qydcyx',
      label: '地层岩性描述',
      span: 3,
    },
    {
      field: 'qydzgz',
      label: '地质构造描述',
      span: 3,
    },
    {
      field: 'qyswdztj',
      label: '水文地质条件描述',
      span: 3,
    },
    {
      field: 'qywldztj',
      label: '物理地质条件描述',
      span: 3,
    },
  ];
  export default defineComponent({
    components: { Description, Title },
    props: {
      componentData: {
        type: Object,
      },
    },

    setup(props) {
      const mockData: any = {};
      console.log('props', props.componentData);
      const descriptionsDate: any = reactive({});
      Object.assign(mockData, props.componentData);
      const [registerDesOne] = useDescription({
        // title: '基础信息',
        data: mockData,
        schema: schemaOne,
        column: 3,
        labelStyle: {
          textAlign: 'center',
          width: '14%',
          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( 58% / 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: '14%',
          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)',
        },
      });
      const [registerDesThree] = useDescription({
        // title: '流域水系',
        data: mockData,
        schema: schemaThree,
        column: 3,
        // collapseOptions: { canExpand: true },
        labelStyle: {
          textAlign: 'center',
          width: '14%',
          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)',
        },
      });
      const [registerDesFour] = useDescription({
        // title: '环境条件',
        data: mockData,
        schema: schemaFour,
        column: 3,
        // collapseOptions: { canExpand: true },
        labelStyle: {
          textAlign: 'center',
          width: '14%',
          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( 58% / 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: '14%',
          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>
