<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.domain"></a-input>
                     </a-form-item>
                 </a-col>
                 <a-col :lg="6">
                     <a-form-item label="标签">
                         <a-input placeholder="所属领域：" type="ge" v-model:value="queryParam.lable"></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-row :gutter="24">
              <a-col :lg="6">
                <a-form-item label="管理对象">
                  <a-checkbox-group style="width: 800px" v-model:value="queryParam.moList" :options="moOptions" />
                  </a-form-item>
              </a-col>
            </a-row> 
            <a-row :gutter="24">
              <a-col :lg="6">
                <a-form-item label="工作任务" >
                  <a-checkbox-group style="width: 800px" v-model:value="queryParam.taskList" :options="taskOptions" />
                  </a-form-item>
              </a-col>
            </a-row> 
            <a-row :gutter="24">
              <a-col :lg="6">
                <a-form-item label="重要级别" >
                  <a-checkbox-group  style="width: 800px" v-model:value="queryParam.levlList" :options="levelOptions" />
                  </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-col :span="12"></a-col>
          <a-col :span="6"><a-button>待检查项[{{ otherParam.checkCount }}]</a-button></a-col>
        </a-row>
        <a-table style="margin-top: 10px;" :dataSource="dataSource" :pagination="pagination" 
          :columns="columns" :bordered="true" 
          :customRow="customRow"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'tb'">
            <span>
              <ExclamationCircleOutlined style="color:red;font-size:28px"/>
            </span>
          </template>
          <template v-else-if="column.key === 'lable'">
            <span>
              <a-tag
                v-for="(tag,index) in record.lable"
                :key="tag"
                :color="index == 0 ? 'red' : index == 1 ? 'green': 'cyan'"
              >
                {{ tag}}
              </a-tag>
            </span>
            </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>
            <a-button type="link">加入检查</a-button>
          </template>
        </template>
        </a-table>
    </div>
    <div class="table-col-detail" v-show="otherParam.tbshow">
      <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter="otherParam.tabBarGutter">
        <a-tab-pane key="1" tab="度量指标[3]"><StMetric/></a-tab-pane>
        <a-tab-pane key="2" tab="合规要求[2]"><StCompliance /></a-tab-pane>
        <a-tab-pane key="3" tab="内控要求[1]"><StInnerControl/></a-tab-pane>
        <a-tab-pane key="4" tab="行业实践[2]"><StBestPractices/></a-tab-pane>
        <a-tab-pane key="5" tab="检查方法[1]"><StCheck/></a-tab-pane>
        <a-tab-pane key="6" tab="存在问题[2]"><StProblem/></a-tab-pane>
        <a-tab-pane key="7" tab="常见风险[10]"><StRisk></StRisk></a-tab-pane>
      </a-tabs>
    </div>
    <!--新建控制活动-->
    <div>
      <a-modal v-model:visible="visible" centered  width="900px" 
        title="新建控制活动"
        @ok="handleOk">
        <a-form class="jeecg-basic-table-form-container" :model="newCreateControl"
            :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="actNo" >
                <a-input disabled="true" v-model:value="newCreateControl.actNo" />
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                label="控制活动名称"
                name="actName"
                :rules="[{ required: true, message: '请输入控制活动名称！' }]"
              >
                <a-input v-model:value="newCreateControl.actName" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :lg="12">
              <a-form-item label="所属领域" name="domain" 
              :rules="[{ required: true, message: '请选择所诉领域!' }]"
              >
                <a-input v-model:value="newCreateControl.domain" />
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                label="标签"
                name="lables"
              >
                <a-input v-model:value="newCreateControl.lables" />
              </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="newCreateControl.desc" 
                :rows="4" 
                :maxlength="300" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
    </a-modal>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, ref } from 'vue';
import StBestPractices from './components/StBestPractices.vue';
import StCheck from './components/StCheck.vue';
import StCompliance from './components/StCompliance.vue';
import StInnerControl from './components/StInnerControl.vue';
import StMetric from './components/StMetric.vue';
import StProblem from './components/StProblem.vue';
import StRisk from './components/StRisk.vue';
import { CollapseContainer } from '/@/components/Container';
import { BasicForm } from '/@/components/Form';
import { PageWrapper } from '/@/components/Page';
import { useMessage } from '/@/hooks/web/useMessage';


// 查询参数
const queryParam = reactive({
  name: '',
  domain: '',
  lable: '',
  moList: ['all'],
  taskList: ['all'],
  levlList: ['all'],
});
const moOptions = [
  { label: '全部', value: 'all' },
  { label: '业务类别', value: 'bizType' },
  { label: '系统类别', value: 'sysType' },
  { label: '设备类别', value: 'deviceType' },
  { label: '组织', value: 'org' },
  { label: '人员', value: 'persion' },
  { label: '数据', value: 'data' },
];
const taskOptions = [
  { label: '全部', value: 'all' },
  { label: '安全检查', value: 'safeCheck' },
  { label: '尽职调查', value: 'dutyCheck' },
  { label: '风险评估', value: 'rbi' },
];
const levelOptions = [
  { label: '全部', value: 'all' },
  { label: '重要', value: 'important' },
  { label: '一般', value: 'commonly' },
  { label: '不重要', value: 'unimportance' },
];
const otherParam = reactive({
  checkCount: 3,
  tabBarGutter: (window.innerWidth-(7*85)) / 7,
  tbshow: false
})
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 7,
  showTotal: total => `共 ${total} 条数据`
})
const newCreateControl = reactive({
  actNo: '',
  actName: '',
  domain: '',
  lables: [],
  desc: ''
})
const labelCol = reactive({
  xs: {span: 24},
  sm: {span: 8},
})
const wrapperCol = reactive({
    xs: {span: 24},
    sm: {span: 16},
})
const visible = ref<boolean>(false);

const showModal = () => {
  visible.value = true;
};
const handleOk = (e: MouseEvent) => {
  console.log(e);
  visible.value = false;
};
const dataSource = [
  {
    key: '1',
    actNo: 'ACT00001',
    actName: '信息科技外包活动分类管理机制',
    domain: '信息科技外包',
    lable: ['标签一','标签二','标签三'],
    update: '2022-09-21  08:50:08'
  },
  {
    key: '2',
    actNo: 'ACT00002',
    actName: '信息科技外包活动分类管理机制',
    domain: '信息科技外包',
    lable: ['标签一','标签二','标签三'],
    update: '2022-09-21  08:50:08'
  },
  {
    key: '3',
    actNo: 'ACT00003',
    actName: '信息科技外包活动分类管理机制',
    domain: '信息科技外包',
    lable: ['标签一','标签二','标签三'],
    update: '2022-09-21  08:50:08'
  },
];
const columns = [
  {
    title: '',
    dataIndex: 'tb',
    key: 'tb',
  },
  {
    title: '活动编号',
    dataIndex: 'actNo',
    key: 'actNo',
  },
  {
    title: '控制活动名称',
    dataIndex: 'actName',
    key: 'actName',
  },
  {
    title: '所属领域',
    dataIndex: 'domain',
    key: 'domain',
  },
  {
    title: '标签',
    dataIndex: 'lable',
    key: 'lable',
  },
  {
    title: '更新日期',
    dataIndex: 'update',
    key: 'update',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
  },
];
function customRow(_record, _index) {
    return {
      onClick: (event) => {
        otherParam.tbshow = true
        let oldList = document.querySelectorAll(".ant-table-row-selected")
          if(oldList){
              for (let j = 0; j < oldList.length; j++) {
                  oldList[j].classList.remove("ant-table-row-selected")
              }
          }

          let node = event.target.parentNode
          node.classList.add("ant-table-row-selected")
      },
    };
  }
function searchQuery(){
    // setProps({searchInfo:toRaw(queryParam)});
    // reload()
}
function searchReset(){
    Object.assign(queryParam,{ name: '',age_begin: '',age_end: '',sex: '',id: ''});
    //reload();
}

  export default defineComponent({
    components: { 
      BasicForm, 
      CollapseContainer,
      PageWrapper,
      ExclamationCircleOutlined,
      StMetric,
      StCompliance,
      StInnerControl,
      StBestPractices,
      StCheck,
      StProblem,
      StRisk,
    },
    setup() {
      const { createMessage } = useMessage();
      return {
        queryParam,
        otherParam,
        moOptions,
        taskOptions,
        levelOptions,
        labelCol,
        pagination,
        wrapperCol,
        dataSource,
        columns,
        activeKey: ref('1'),
        visible,
        newCreateControl,
        showModal,
        handleOk,
        customRow,
        searchQuery,
        searchReset,
        handleSubmit: (values: any) => {
          createMessage.success('click search,values:' + JSON.stringify(values));
        },
      };
    },
  });
</script>
<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    padding: 20px;
  }
  .button-start {
    margin-left: 40px;
  }
  .table-col-detail {
    border-top: 10px solid #f0f2f5;
    padding-left: 20px;
    padding-right: 20px;
  }
</style>