<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.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="一级分类">
              <a-input placeholder="请输入" type="ge" v-model:value="queryParam.pClassify"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="二级分类">
                <a-input placeholder="请输入" type="ge" v-model:value="queryParam.sClassify"></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 === 'lableName'">
            <span>
              <a-tag :color="'red'">
                {{ record.lableName }}
              </a-tag>
            </span>
            </template>
          <template v-else-if="column.key === 'operation'">
            <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({
    name: '',
    pClassify: '',
    sClassify: '',
})
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 7,
  showTotal: total => `共 ${total} 条数据`
})
const dataSource = [
    {
        pClassify: '管理对象',
        sClassify: '系统类别',
        lableName: '微信银行',
        lableDesc: '标签说明内容',
        updateTime: '2023-02-27 21:11:22'
    },
];
const columns = [
    {
        title: '一级分类',
        dataIndex: 'pClassify',
        key: 'pClassify',
    },
    {
        title: '二级分类',
        dataIndex: 'sClassify',
        key: 'sClassify',
    },
    {
        title: '标签名称',
        dataIndex: 'lableName',
        key: 'lableName',
    },
    {
        title: '标签说明',
        dataIndex: 'lableDesc',
        key: 'lableDesc',
    },
    {
        title: '更新日期',
        dataIndex: 'updateTime',
        key: 'updateTime',
    },
    {
        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>