<template>
  <PageWrapper :contentStyle="{background: 'white'}">
    <div class="jeecg-basic-table-form-container" @keyup.enter="searchQuery">
      <a-form :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item label="控制活动">
              <a-input placeholder="请输入名称模糊查询" v-model:value="queryParam.actName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="所属领域">
              <a-input placeholder="全部" type="ge" v-model:value="queryParam.domainCode" :allowClear="true"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="适用范围">
                <a-input placeholder="请选择" type="ge" v-model:value="queryParam.applicableCode" ></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item>
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
    </a-form>
    <a-row :gutter="24">
        <a-col :lg="6">
            <a-button type="primary" preIcon="ant-design:plus-outlined" @click="showModal">
            新建
            </a-button>
            <a-button class="button-start" >批量导入</a-button>
        </a-col>
    </a-row>
    <a-table style="margin-top: 10px;" :dataSource="dataSource" :pagination="pagination" 
          :columns="columns" :bordered="true" >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'execRule'">
            <p style="white-space: pre-wrap;">
                {{ record.execRule }}
            </p>
            </template>
          <template v-else-if="column.key === 'operation'">
            <a-button type="link">删除</a-button>
            <a-button type="link">修改</a-button>
            <a-button type="link">详情</a-button>
          </template>
        </template>
    </a-table>
  </div>
  <!--新建问题-->
  <div>
      <a-modal v-model:visible="visible" centered  width="900px" 
        title="选择控制活动"
        @ok="handleOk">
        <a-form class="jeecg-basic-table-form-container" :model="newLableData"
            :labelCol="{xs: {span: 24},sm: {span: 6},}"
            :wrapperCol="{xs: {span: 24},sm: {span: 18},}"
        >
          <a-row :gutter="24">
            <a-col :lg="12">
              <a-form-item label="一级分类" name="pClassify"
              :rules="[{ required: true, message: '请选择一级分类！' }]" >
                <a-input  v-model:value="newLableData.pClassify" placeholder="管理对象" />
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                label="二级分类"
                name="pClassify"
                :rules="[{ required: true, message: '请选择二级分类！' }]"
              >
                <a-input v-model:value="newLableData.sClassify" placeholder="业务类别" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :lg="24">
              <a-form-item label="标签名称" name="lableName" 
              :labelCol="{xs: {span: 24},sm: {span: 3},}"
              :wrapperCol="{xs: {span: 24},sm: {span: 21},}"
              :rules="[{ required: true, message: '请输入标签名称!' }]"
              >
                <a-input v-model:value="newLableData.lableName" placeholder="请输入" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :lg="24">
            <a-form-item
                label="标签说明"
                name="desc"
                :labelCol="{xs: {span: 24},sm: {span: 3},}"
                :wrapperCol="{xs: {span: 24},sm: {span: 21},}"
              >
              <a-textarea
                v-model:value="newLableData.lableDesc" 
                placeholder="请输入"
                :rows="4" 
                :maxlength="300" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
    </a-modal>
    </div>
</PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { PageWrapper } from '/@/components/Page';
const labelCol = reactive({
  xs: {span: 24},
  sm: {span: 4},
})
const wrapperCol = reactive({
    xs: {span: 24},
    sm: {span: 20},
})
const visible = ref<boolean>(false);
const queryParam = reactive({
    actName: '',
    domainCode: '',
    applicableCode: '',
})
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 7,
  showTotal: total => `共 ${total} 条数据`
})
const dataSource = [
    {
        actNo: 'ACT00001',
        actName: '备份介质存放方式',
        domainName: '信息科技外包',
        practiceInfo: '多种备份介质同城灾备中心和异地灾备中心存放',
        applicableName: '所有信息系统',
        execRule: '根据业务影响分析，RPO要求：'+
        '\n1、重要信息系统数据库数据每天1次全备，每XX分钟进行一次增量备份；'+
        '\n日志数据每天一次全备；'+
        '\n备份介质（多于1种，如磁带库、光盘）同城、异地灾备中心存放'+
        '\n2、一般信息系统…',
    },
];
const columns = [
    {
        title: '活动编号',
        dataIndex: 'actNo',
        key: 'actNo',
    },
    {
        title: '控制活动名称',
        dataIndex: 'actName',
        key: 'actName',
    },
    {
        title: '所属领域',
        dataIndex: 'domainName',
        key: 'domainName',
    },
    {
        title: '行业实践',
        dataIndex: 'practiceInfo',
        key: 'practiceInfo',
    },
    {
        title: '适用范围',
        dataIndex: 'applicableName',
        key: 'applicableName',
    },
    {
        title: '执行规则',
        dataIndex: 'execRule',
        key: 'execRule',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
    },
];
const newLableData = {
    pClassify: '',
    sClassify: '',
    lableName: '',
    lableDesc: '',
}
function searchQuery() {

}
function searchReset() {
    
}
function showModal() {
    visible.value = true;
}
function handleOk() {
    visible.value = false;
}
</script>
<style lang="less" scoped>
 .jeecg-basic-table-form-container {
    padding: 20px;
  }
  .button-start {
    margin-left: 40px;
  }
</style>