<template>
  <!-- 推送规则 -->
  <div class="alarmAnalys">
    <div class="searchBox">
      <n-space>
        <n-input v-model:value="platFormName" clearable placeholder="请输入平台名称" />
        <n-button type="primary" @click="handleClick('search')">
          <template #icon>
            <n-icon><Search /></n-icon>
          </template>
          搜索
        </n-button>
        <n-button type="primary" @click="handleClick('add')" :disabled="addDisabled">
          <template #icon>
            <n-icon><Add /></n-icon>
          </template>
          新增推送规则
        </n-button>
      </n-space>
    </div>
    <div class="tableBox">
      <n-data-table
        ref="tableRef"
        :bordered="false"
        :max-height="700"
        striped
        :columns="columns"
        :data="tableData"
        :loading="tableLoading"
        :remote="true"
        :pagination="pagination"
      ></n-data-table>
    </div>
    <!-- 查询推送 -->
    <n-modal v-model:show="showModal" :show-icon="false" :title="title" preset="card" :style="{ width: '500px' }">
      <n-form :label-width="100" :model="addFormValue" :size="medium" label-placement="left">
        <n-form-item label="平台名称：" path="platForm">
          <n-select
            v-model:value="addFormValue.platFormName"
            filterable
            clearable
            :options="nameOptions"
            placeholder="请选择平台"
            :disabled="editDisAbled"
          />
        </n-form-item>
        <n-form-item label="推送频率(小时)：" path="">
          <n-input-number v-model:value="addFormValue.pushFrequency" clearable style="width: 100%" />
        </n-form-item>
        <n-form-item label="开始推送：" path="startTime">
          <n-time-picker v-model:value="addFormValue.startTime" style="width: 100%" />
        </n-form-item>
        <n-form-item label="结束推送：" path="endTime">
          <n-time-picker v-model:value="addFormValue.endTime" default-formatted-value="90:00:00" style="width: 100%" />
        </n-form-item>
      </n-form>
      <template #action>
        <n-space>
          <n-button @click="() => (showModal = false)">取消</n-button>
          <n-button type="primary" @click="handleClick('sure')">确定</n-button>
        </n-space>
      </template>
    </n-modal>
  </div>
</template>

<script>
import { reactive, toRefs, h, onMounted } from 'vue';
import { NButton, useDialog, NTag } from 'naive-ui';
import { Search, Add } from '@vicons/ionicons5';
import { getPushRule, addPushRule, editPushRule, deletePushRule } from '@/services';
import { formatDate } from '@/utils/util';
export default {
  name: 'alarmAnalys',
  components: {
    Search,
    Add,
  },
  setup() {
    const dialog = useDialog();
    const allData = reactive({
      // 搜索
      platFormName: null,
      options1: [],
      // 表格
      columns: [
        {
          title: '平台编号',
          key: 'platForm',
          align: 'userName',
        },
        {
          title: '平台名称',
          key: 'platFormName',
          align: 'center',
        },
        {
          title: '推送频率',
          key: 'pushFrequency',
          align: 'center',
          render(row) {
            return h(
              NTag,
              {
                bordered: false,
                color: {
                  color: 'transparent',
                },
              },
              {
                default: `${row.pushFrequency / 3600}小时`,
              }
            );
          },
        },
        {
          title: '推送开始时间',
          key: 'startTime',
          align: 'center',
        },
        {
          title: '推送结束时间',
          key: 'endTime',
          align: 'center',
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
        },
        {
          title: '操作',
          key: 'actions',
          width: '220',
          align: 'center',
          render(row) {
            const btn = allData.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: '10px',
                  },
                  type: item.btnType,
                  onClick: () => handleClick(item.type, row),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      tableData: [],
      tableLoading: true,
      actionColumn: [
        {
          size: 'small',
          btnType: 'primary',
          type: 'edit',
          default: '修改',
        },
        {
          size: 'small',
          btnType: 'error',
          type: 'delete',
          default: '删除',
        },
      ],
      // 弹窗
      showModal: false,
      title: '',
      nameOptions: [
        {
          label: '黄孝河、机场河水环境综合治理',
          value: 111188,
        },
      ],
      addFormValue: {
        platForm: 111188,
        platFormName: '黄孝河、机场河水环境综合治理',
        pushFrequency: 5,
        startTime: new Date(new Date(new Date().toLocaleDateString()).getTime() + 9 * 60 * 60 * 1000),
        endTime: new Date(new Date(new Date().toLocaleDateString()).getTime() + 22 * 60 * 60 * 1000),
      },
      addDisabled: false,
      editDisAbled: false,
    });
    //分页
    const paginationReactive = reactive({
      page: 1,
      pageSize: 10,
      showSizePicker: true,
      pageSizes: [10, 20, 50],
      showQuickJumper: true,
      pageCount: 0,
      itemCount: 0,
      onChange: (page) => {
        paginationReactive.page = page;
        getTableList();
      },
      onPageSizeChange: (pageSize) => {
        paginationReactive.pageSize = pageSize;
        paginationReactive.page = 1;
        getTableList();
      },
    });
    // 获取数据
    const getTableList = async () => {
      let pramas = {
        current: paginationReactive.page,
        size: paginationReactive.pageSize,
        data: {
          platFormName: allData.platFormName,
        },
      };
      let res = await getPushRule(pramas);
      allData.tableLoading = true;
      if (res && res.code == 200) {
        let datas = res.data;
        allData.tableData = datas.list || [];
        allData.tableData.length > 0 ? (allData.addDisabled = true) : (allData.addDisabled = false);
        paginationReactive.pageCount = datas.pages;
        paginationReactive.itemCount = datas.total;
      }
      allData.tableLoading = false;
    };
    // 获取平台列表
    const getPlatFormList = () => {};
    const handleClick = (type, row) => {
      switch (type) {
        case 'search':
          getTableList();
          break;
        case 'add':
          allData.showModal = true;
          allData.title = '新增推送规则';
          break;
        case 'edit':
          allData.title = '修改推送规则';
          allData.showModal = true;
          allData.editDisAbled = true;
          allData.addFormValue.platForm = 111188;
          allData.addFormValue.platFormName = row.platFormName;
          allData.addFormValue.pushFrequency = row.pushFrequency / 3600;
          allData.addFormValue.startTime = returnTime(row.startTime);
          allData.addFormValue.endTime = returnTime(row.endTime);
          break;
        case 'delete':
          allData.title = null;
          dialog.info({
            title: '提示',
            content: `确定对[${row.platFormName}]进行删除操作吗？`,
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: () => {
              let id = [row.id];
              submit(id);
            },
            onNegativeClick: () => {},
          });
          break;
        case 'sure':
          submit(allData.title);
          break;
      }
    };
    const submit = async (id) => {
      let timeS = formatDate(allData.addFormValue.startTime, 'hh:mm:ss');
      let timeE = formatDate(allData.addFormValue.endTime, 'hh:mm:ss');
      if (allData.title == '新增推送规则') {
        let pramas = {
          data: {
            pushFrequency: allData.addFormValue.pushFrequency * 3600,
            startTime: timeS,
            endTime: timeE,
            platForm: allData.addFormValue.platForm,
            platFormName: allData.addFormValue.platFormName,
          },
        };
        let res = await addPushRule(pramas);
        if (res && res.code == 200) {
          allData.showModal = false;
          getTableList();
        }
      } else if (allData.title == '修改推送规则') {
        let pramas = {
          data: {
            pushFrequency: allData.addFormValue.pushFrequency * 3600,
            startTime: timeS,
            endTime: timeE,
            platForm: allData.addFormValue.platForm,
          },
        };
        let res = await editPushRule(pramas);
        if (res && res.code == 200) {
          allData.showModal = false;
          getTableList();
        }
      } else {
        let res = await deletePushRule(id);
        if (res && res.code == 200) {
          getTableList();
        }
      }
    };
    // 时分秒转时间戳
    const returnTime = (time) => {
      let s = null;
      var hour = time.split(':')[0];
      console.log(hour * 60 * 60, 'hour');
      var min = time.split(':')[1];
      var sec = time.split(':')[2];
      // s = Number(hour * 3600) + Number(min * 60) + Number(sec);
      s = new Date(new Date(new Date().toLocaleDateString()).getTime() + hour * 3600 * 1000);
      return s;
    };
    onMounted(() => {
      getTableList();
    });
    return {
      ...toRefs(allData),
      pagination: paginationReactive,
      getTableList,
      handleClick,
      getPlatFormList,
      submit,
      returnTime,
    };
  },
};
</script>

<style lang="less" scoped>
.alarmAnalys {
  .tableBox {
    margin-top: 10px;
  }
}
</style>