<template>
  <PageWrapper dense>
    <div style="margin: 20px; border-radius: 10px; background: #fff">
      <div class="tabBox">
        <a-tabs v-model:activeKey="activeKey" size="large">
          <a-tab-pane key="1" tab="项目属性划定">
            <a-form
              :model="projectType"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 6 }"
              autocomplete="off"
              :rules="rule1"
            >
              <div class="title">项目信息</div>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="项目名称" name="projectName">
                    <a-input
                      v-model:value="projectType.projectName"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="项目时期" name="projectDate">
                    <a-date-picker
                      v-model:value="projectType.projectDate"
                      style="width: 360px"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="规划投资(万元)" name="planInvest">
                    <a-input
                      v-model:value="projectType.planInvest"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="实际完成投资(万元)" name="acualInvest">
                    <a-input
                      v-model:value="projectType.projectName"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="资金来源" name="investResource">
                    <a-select
                      v-model:value="projectType.investResource"
                      style="width: 360px"
                      :options="investResourceOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="是否为规划内项目" name="ifPlan">
                    <a-select
                      v-model:value="projectType.ifPlan"
                      style="width: 360px"
                      :options="ifPlanOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="批复等级" name="approvalLevel">
                    <a-select
                      v-model:value="projectType.approvalLevel"
                      style="width: 360px"
                      :options="approvalLevelOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="前期设计" name="earlyDesign">
                    <a-select
                      v-model:value="projectType.earlyDesign"
                      style="width: 360px"
                      :options="earlyDesignOptions"
                      mode="multiple"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="预期目标" name="expect">
                    <a-input
                      v-model:value="projectType.expect"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="所属区县" name="district">
                    <a-input
                      v-model:value="projectType.district"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="所属控制区" name="controlArea">
                    <a-input
                      v-model:value="projectType.controlArea"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="所属小流域" name="riverBasin">
                    <a-input
                      v-model:value="projectType.riverBasin"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <div class="title">项目类别</div>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="项目类别" name="projectTypeList">
                    <a-cascader
                      v-model:value="projectType.projectTypeList"
                      :options="projectTypeListOptions"
                      placeholder="请选择"
                      style="width: 360px"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="12">
                  <a-form-item label="城镇污水处理及配套" name="cityFomula">
                    <a-select
                      v-model:value="projectType.cityFomula"
                      style="width: 360px"
                      :options="cityFomulaOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="河道整治" name="riverDeal">
                    <a-select
                      v-model:value="projectType.riverDeal"
                      style="width: 360px"
                      :options="riverDealOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="农业农村面源污染治理" name="villageFomula">
                    <a-select
                      v-model:value="projectType.villageFomula"
                      style="width: 360px"
                      :options="villageFomulaOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="饮用水源地保护建设" name="waterProtect">
                    <a-select
                      v-model:value="projectType.waterProtect"
                      style="width: 360px"
                      :options="waterProtectOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="内源治理" name="internalDeal">
                    <a-select
                      v-model:value="projectType.internalDeal"
                      style="width: 360px"
                      :options="internalDealOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="水资源综合利用及调度" name="overall">
                    <a-select
                      v-model:value="projectType.overall"
                      style="width: 360px"
                      :options="overallOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col> -->
              </a-row>
              <div class="title">项目技术应用</div>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="水环境保护治理技术" name="projectTech">
                    <a-cascader
                      v-model:value="projectType.projectTech"
                      :options="projectTechOptions"
                      placeholder="请选择"
                      style="width: 360px"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="技术名称" name="techName">
                    <a-input
                      v-model:value="projectType.techName"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>

              <a-row>
                <a-col :span="12">
                  <a-form-item label="技术成本(元/㎡)" name="techCost">
                    <a-input
                      v-model:value="projectType.techCost"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                    <span style="color: red">注：实际投资/占地面积</span>
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="运行成本(元/㎡)" name="devCost">
                    <a-input
                      v-model:value="projectType.devCost"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                    <span style="color: red">注：实际投资/占地面积</span>
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="技术适用性" name="techUsability">
                    <a-select
                      v-model:value="projectType.techUsability"
                      style="width: 600px"
                      :options="techUsabilityOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="技术稳定性" name="techStability">
                    <a-select
                      v-model:value="projectType.techStability"
                      style="width: 600px"
                      :options="techStabilityOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="管理操作难易程度" name="OperationLevel">
                    <a-select
                      v-model:value="projectType.OperationLevel"
                      style="width: 600px"
                      :options="OperationLevelOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <div class="title">工程内容</div>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="规划项目内容" name="projectContent">
                    <a-input
                      v-model:value="projectType.projectContent"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="完工情况" name="projectProgress">
                    <a-select
                      v-model:value="projectType.projectProgress"
                      style="width: 360px"
                      :options="projectProgressOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="验收方式" name="acceptMethod">
                    <a-select
                      v-model:value="projectType.acceptMethod"
                      style="width: 360px"
                      :options="acceptMethodOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="运行效果" name="devResult">
                    <a-input
                      v-model:value="projectType.devResult"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="运行情况" name="devStatus">
                    <a-select
                      v-model:value="projectType.devStatus"
                      style="width: 360px"
                      :options="devStatusOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="目标实现(%)" name="goal">
                    <a-input
                      v-model:value="projectType.goal"
                      style="width: 360px"
                      allowClear
                      placeholder="百分制,例如80"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="巡查模式" name="patrolType">
                    <a-select
                      v-model:value="projectType.patrolType"
                      style="width: 360px"
                      :options="patrolTypeOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="管理模式" name="manageType">
                    <a-select
                      v-model:value="projectType.manageType"
                      style="width: 360px"
                      :options="manageTypeOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="长期运营" name="longOperation">
                    <a-select
                      v-model:value="projectType.longOperation"
                      style="width: 360px"
                      :options="longOperationOptions"
                      allowClear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="COD削减率(%)" name="cod">
                    <a-input
                      v-model:value="projectType.cod"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-item label="TN削减(%)" name="tn">
                    <a-input
                      v-model:value="projectType.tn"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="TP削减率(%)" name="tp">
                    <a-input
                      v-model:value="projectType.tp"
                      style="width: 360px"
                      allowClear
                      placeholder=""
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-form-item :wrapper-col="{ offset: 4, span: 8 }">
                <a-button type="primary" html-type="submit">提交</a-button>
              </a-form-item>
            </a-form>
          </a-tab-pane>
          <a-tab-pane key="2" tab="项目前期立项">
            <div v-for="item in earlySet" :key="item.id" style="margin-bottom: 20px">
              <span style="right: 20px; margin: 10px 10px 10px 0">{{ item.name }}</span>
              <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1">
                <a-button>
                  <upload-outlined />
                  文件上传
                </a-button>
              </a-upload>
            </div>
          </a-tab-pane>
          <a-tab-pane key="3" tab="联合体招投标">
            <div v-for="item in unitedTenders" :key="item.id" style="margin-bottom: 20px">
              <span style="right: 20px; margin: 10px 10px 10px 0">{{ item.name }}</span>
              <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1">
                <a-button>
                  <upload-outlined />
                  文件上传
                </a-button>
              </a-upload>
            </div>
          </a-tab-pane>
          <a-tab-pane key="4" tab="建设实施">
            <div v-for="item in buildEffect" :key="item.id" style="margin-bottom: 20px">
              <span style="right: 20px; margin: 10px 10px 10px 0">{{ item.name }}</span>
              <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1">
                <a-button>
                  <upload-outlined />
                  文件上传
                </a-button>
              </a-upload>
            </div>
          </a-tab-pane>
          <a-tab-pane key="5" tab="验收批复">
            <div v-for="item in acceptApproval" :key="item.id" style="margin-bottom: 20px">
              <span style="right: 20px; margin: 10px 10px 10px 0">{{ item.name }}</span>
              <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1">
                <a-button>
                  <upload-outlined />
                  文件上传
                </a-button>
              </a-upload>
            </div>
          </a-tab-pane>
          <a-tab-pane key="6" tab="运营管护">
            <div v-for="item in operationProtect" :key="item.id" style="margin-bottom: 20px">
              <span style="right: 20px; margin: 10px 10px 10px 0">{{ item.name }}</span>
              <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :max-count="1">
                <a-button>
                  <upload-outlined />
                  文件上传
                </a-button>
              </a-upload>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { reactive, ref } from 'vue';
  import { PageWrapper } from '@/components/Page';

  const activeKey = ref<String>('1');
  //项目类别表单
  const projectType = reactive({
    projectName: '',
    projectDate: '',
    planInvest: '',
    actualInvest: '',
    investResource: '',
    ifPlan: '',
    approvalLevel: '',
    expect: '',
    earlyDesign: [],
    district: '',
    controlArea: '',
    riverBasin: '',
    projectTypeList: [],
    // cityFomula: '',
    // riverDeal: '',
    // villageFomula: '',
    // waterProtect: '',
    // internalDeal: '',
    // overall: '',
    projectTech: '',
    techName: '',
    techCost: '',
    devCost: '',
    techUsability: '',
    techStability: '',
    OperationLevel: '',
    projectContent: '',
    projectProgress: '',
    acceptMethod: '',
    devResult: '',
    devStatus: '',
    goal: '',
    patrolType: '',
    manageType: '',
    longOperation: '',
    cod: '',
    tn: '',
    tp: '',
  });
  //Options
  const investResourceOptions = [
    {
      value: '资金不足而搁置',
    },
    {
      value: '自筹资金且无法保障',
    },
    {
      value: '自筹资金且充足',
    },
    {
      value: '市、区级政府专项资金',
    },
    {
      value: '国家、省级专项资金',
    },
  ];
  const ifPlanOptions = [
    {
      value: '是',
    },
    {
      value: '否',
    },
  ];
  const approvalLevelOptions = [
    {
      value: '审批材料不完整',
    },
    {
      value: '区级批复',
    },
    {
      value: '市级批复',
    },
    {
      value: '省级批复',
    },
    {
      value: '省级部门联合批复',
    },
  ];
  const earlyDesignOptions = [
    {
      value: '无',
    },
    {
      value: '内容基本完善',
    },
    {
      value: '有勘察或测绘报告',
    },
    {
      value: '有环境影响评估',
    },
    {
      value: '有水土保持报告',
    },
  ];
  const cityFomulaOptions = [
    {
      value: '城镇污水处理及配套',
      label: '城镇污水处理及配套',
    },
    {
      value: '排水系统完善建设',
      label: '排水系统完善建设',
    },
    {
      value: '城镇生活垃圾处理收集',
      label: '城镇生活垃圾处理收集',
    },
  ];
  const riverDealOptions = [
    {
      value: '生态修复、河道清淤、沿河截污',
      label: '生态修复、河道清淤、沿河截污',
    },
  ];
  const villageFomulaOptions = [
    {
      value: '农村污水治理',
      label: '农村污水治理',
    },
    {
      value: '农业面源治理',
      label: '农业面源治理',
    },
  ];
  const waterProtectOptions = [
    {
      value: '饮用水源保护',
      label: '饮用水源保护',
    },
  ];
  const internalDealOptions = [
    {
      value: '内源治理',
      label: '内源治理',
    },
  ];
  const overallOptions = [
    {
      value: '水资源综合利用',
      label: '水资源综合利用',
    },
    {
      value: '水资源调度',
      label: '水资源调度',
    },
  ];
  const projectTypeListOptions = [
    {
      value: '城镇污水处理及配套',
      label: '城镇污水处理及配套',
      children: [
        {
          value: '城镇污水处理及配套',
          label: '城镇污水处理及配套',
        },
        {
          value: '排水系统完善建设',
          label: '排水系统完善建设',
        },
        {
          value: '城镇生活垃圾处理收集',
          label: '城镇生活垃圾处理收集',
        },
      ],
    },
    {
      value: '河道整治',
      label: '河道整治',
      children: [
        {
          value: '生态修复、河道清淤、沿河截污',
          label: '生态修复、河道清淤、沿河截污',
        },
      ],
    },
    {
      value: '农业农村面源污染治理',
      label: '农业农村面源污染治理',
      children: [
        {
          value: '农村污水治理',
          label: '农村污水治理',
        },
        {
          value: '农业面源治理',
          label: '农业面源治理',
        },
      ],
    },
    {
      value: '饮用水源地保护建设',
      label: '饮用水源地保护建设',
      children: [
        {
          value: '饮用水源保护',
          label: '饮用水源保护',
        },
      ],
    },
    {
      value: '内源治理',
      label: '内源治理',
      children: [
        {
          value: '内源治理',
          label: '内源治理',
        },
      ],
    },
    {
      value: '水资源综合利用及调度',
      label: '水资源综合利用及调度',
      children: [
        {
          value: '水资源综合利用',
          label: '水资源综合利用',
        },
        {
          value: '水资源调度',
          label: '水资源调度',
        },
      ],
    },
  ];
  const projectTechOptions = [
    {
      value: '水环境监测预警与管理技术',
      label: '水环境监测预警与管理技术',
      children: [
        {
          value: '水环境监测预警技术',
          label: '水环境监测预警技术',
        },
        {
          value: '水环境管理技术',
          label: '水环境管理技术',
        },
      ],
    },
    {
      value: '控污技术',
      label: '控污技术',
      children: [
        {
          value: '点源污染控制技术',
          label: '点源污染控制技术',
        },
        {
          value: '城市面源污染控制技术',
          label: '城市面源污染控制技术',
        },
        {
          value: '农业农村面源污染控制技术',
          label: '农业农村面源污染控制技术',
        },
      ],
    },
    {
      value: '内源污染治理技术',
      label: '内源污染治理技术',
      children: [
        {
          value: '蓝藻控制与资源化技术',
          label: '蓝藻控制与资源化技术',
        },
        {
          value: '底泥控制技术',
          label: '底泥控制技术',
        },
      ],
    },
    {
      value: '生态修复技术',
      label: '生态修复技术',
      children: [
        {
          value: '河湖生态修复技术',
          label: '河湖生态修复技术',
        },
        {
          value: '水源地生态修复技术',
          label: '水源地生态修复技术',
        },
      ],
    },
  ];
  const techUsabilityOptions = [
    {
      value:
        '治理技术适用性广，取得多项发明专利，在经济、环境、能耗等方面取得重大突破，工程运行良好',
    },
    {
      value: '治理技术适用性较广，取得发明专利，工程在经济、环境、能耗等方面有较大提升',
    },
    {
      value: '治理技术适用性一般，取得实用新型专利，在经济、环境、能耗等方面有一定提升',
    },
    {
      value: '治理技术适用性较窄，治理技术通过工程示范，显示其在经济、环境、能耗等方面几乎无提升',
    },
    {
      value: '治理技术适用性窄，治理技术通过工程示范，显示其在经济、环境、能耗等方面完全无提升',
    },
  ];
  const techStabilityOptions = [
    {
      value: '技术很稳定，几乎不受降水、温度、污染物浓度等条件改变的影响',
    },
    {
      value: '技术较稳定，受降水、温度、污染物浓度等条件改变的影响较小',
    },
    {
      value: '技术稳定性一般，受到降水、温度、污染物浓度等条件改变的一定影响',
    },
    {
      value: '技术较不稳定，受降水、温度、污染物浓度等条件改变的影响较大',
    },
    {
      value: '技术很不稳定，受降水、温度、污染物浓度等条件改变的影响很大',
    },
  ];
  const OperationLevelOptions = [
    {
      value: '管理与操作很简单，可实现全自动化操作',
    },
    {
      value: '管理与操作简单，基本实现全自动化',
    },
    {
      value: '管理与操作难度一般，实现半自动化',
    },
    {
      value: '管理与操作较难，少部分过程可自动化',
    },
    {
      value: '管理与操作难，全人工操作',
    },
  ];
  const projectProgressOptions = [
    {
      value: '前期',
    },
    {
      value: '调试',
    },
    {
      value: '在建',
    },
    {
      value: '已完工',
    },
    {
      value: '未实施',
    },
    {
      value: '取消',
    },
    {
      value: '暂缓实施',
    },
    {
      value: '未运行',
    },
  ];

  const acceptMethodOptions = [
    {
      value: '合同与验收报告缺失',
    },
    {
      value: '材料基本齐全',
    },
    {
      value: '联合验收',
    },
  ];
  const devStatusOptions = [
    {
      value: '荒废',
    },
    {
      value: '短暂运行',
    },
    {
      value: '正常运行并有年度运行报告',
    },
    {
      value: '基本达到设计目标',
    },
    {
      value: '远超设计目标实现联合调度',
    },
  ];
  const patrolTypeOptions = [
    {
      value: '无',
    },
    {
      value: '主管部门定期巡查',
    },
    {
      value: '市级部门巡查',
    },
    {
      value: '市级部门联合巡查',
    },
    {
      value: '实时监控',
    },
  ];
  const manageTypeOptions = [
    {
      value: '属地管理并社会招标',
    },
    {
      value: '属地管理且由国企实际运行',
    },
    {
      value: '市级部门下属国企管理',
    },
    {
      value: '多部门联合管理',
    },
  ];
  const longOperationOptions = [
    {
      value: '实时监测',
    },
    {
      value: '定时监测',
    },
    {
      value: '人工巡检',
    },
    {
      value: '在线监测',
    },
    {
      value: '维持',
    },
    {
      value: '无',
    },
  ];
  //上传文件
  const earlySet = [
    {
      name: '项目建议书',
      id: 1,
    },
    {
      name: '可行性研究',
      id: 2,
    },
    {
      name: '初步设计',
      id: 3,
    },
    {
      name: '其他程序',
      id: 4,
    },
  ];
  const unitedTenders = [
    {
      name: '招标',
      id: 5,
    },
    {
      name: '投标',
      id: 5,
    },
    {
      name: '其他程序',
      id: 6,
    },
  ];
  const buildEffect = [
    {
      name: '工程开工',
      id: 7,
    },
    {
      name: '施工设计',
      id: 8,
    },
    {
      name: '资金来源',
      id: 9,
    },
    {
      name: '进度管理',
      id: 10,
    },
    {
      name: '成本管理',
      id: 11,
    },
    {
      name: '质量管理',
      id: 12,
    },
    {
      name: '合同管理',
      id: 13,
    },
    {
      name: '技术管理',
      id: 14,
    },
  ];
  const acceptApproval = [
    {
      name: '调试运行',
      id: 15,
    },
    {
      name: '环保验收',
      id: 16,
    },
    {
      name: '竣工验收',
      id: 17,
    },
    {
      name: '工程结算',
      id: 18,
    },
    {
      name: '项目总结',
      id: 19,
    },
  ];
  const operationProtect = [
    {
      name: '定期巡查',
      id: 20,
    },
    {
      name: '管理模式',
      id: 21,
    },
    {
      name: '运行日志',
      id: 22,
    },
  ];
  const rule1 = {
    value1: [{ required: true, message: '请选择', trigger: 'change' }],
  };
</script>
<style lang="less">
  .tabBox {
    margin: 20px;
  }

  .title {
    margin: 10px 0;
    font-size: 20px;
    font-weight: 550;
  }
</style>
