<template>
  <ns-drawer
    v-model:visible="visible"
    width="600"
    :title="'设置通知联系人'"
    :ok="btnClick"
    :cancel="handleClose"
    placement="right"
    :footer-style="{ textAlign: 'right' }"
    @close="handleClose">
    <div style="width: 100%; overflow: hidden; overflow-y: hidden; height: 100%">
      <a-form ref="formRef" :model="infoObject" :rules="rules" style="width: 80%">
        <a-form-item ref="notification" label="通知方式" name="notification">
          <a-select
            ref="select"
            v-model:value="infoObject.notification"
            style="width: 100%"
            mode="multiple"
            :options="devicePointData"
            show-search
            :allowClear="true"
            placeholder="请选择通知方式"
            :filter-option="filterDevicePoint" />
        </a-form-item>
        <a-form-item label="启用规则">
          <a-switch
            :checked="infoObject.enableRules === 1 ? true : false"
            :class="{
              'blue-background': infoObject.enableRules === 1 ? true : false,
              'grey-background': infoObject.enableRules === 1 ? false : true,
            }"
            @click="clickSwitch" />
        </a-form-item>
      </a-form>
      <div style="width: 100%; height: 765px; overflow-y: auto">
        <div style="margin-bottom: 8px">
          <div style="width: 100%; display: flex; position: relative">
            <div
              style="
                border-width: 0px;
                position: absolute;
                left: 0px;
                top: 5px;
                width: 5px;
                height: 15px;
                background: inherit;
                background-color: rgba(251, 156, 67, 1);
                border: none;
                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
              "></div>
            <span style="margin-left: 24px; color: #333333">联系人名单</span>
          </div>
          <img
            style="width: 100%; margin-top: -10px"
            src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
        </div>
        <div style="margin-bottom: 16px">
          <a-button type="primary" @click="chengUser">选择联系人 </a-button>
        </div>
        <a-table
          :dataSource="dataSource"
          :columns="columns"
          :scroll="{ x: 800, y: 700 }"
          :pagination="pagination">
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'operation'">
              <a style="color: rgb(210, 0, 5)" @click="remove(record)">移除</a>
            </template>
          </template>
        </a-table>
      </div>
    </div>
    <linkPeople
      v-show="visibleModel"
      ref="linkPeoples"
      @handleCancel="handleCancel"
      @handleOk="handleOk" />
  </ns-drawer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  // import { NsMessage } from '/nerv-lib/component';
  // import { http } from '/nerv-lib/util';
  // import { number } from 'vue-types';
  import linkPeople from './linkPeople/index.vue';

  // import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';

  //table 数据
  const columns = [
    {
      title: '序号',
      dataIndex: 'address',
      width: 80,
      fixed: 'left',
      customRender: (text: any) => {
        return text.index + 1;
      },
    },
    {
      title: '姓名',
      dataIndex: 'deviceName',
      width: 80,
      fixed: 'left',
      key: 'deviceName',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      width: 80,
      key: 'sex',
    },
    {
      title: '组织关系',
      dataIndex: 'site',
      key: 'site',
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
    },
    {
      title: '操作',
      width: 80,
      dataIndex: 'operation',
      fixed: 'right',
    },
  ];
  const visibleModel = ref(false);
  const dataSource = ref([]);
  const visible = ref(false);
  const linkPeoples = ref(null);
  const handleChangePage = (current: number, pageSize: number) => {
    pagination.value.current = current;
    pagination.value.pageSize = pageSize;
  };
  const pagination = ref({
    total: 0,
    size: 'small',
    current: 1,
    pageSize: 10,
    showQuickJumper: true,
    showLessItems: true,
    // showSizeChanger: true,
    showTotal: (total: number, range: any) =>
      total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
    onChange: handleChangePage,
  });
  //点击联系人
  const chengUser = () => {
    visibleModel.value = true;
    let ids = [];
    dataSource.value.forEach((item) => {
      ids.push(item.id);
    });
    linkPeoples.value.getData({ id: ids, data: dataSource });
  };
  //取消弹窗
  const handleCancel = () => {
    visibleModel.value = false;
  };
  //确定选择人
  const handleOk = (data: any) => {
    visibleModel.value = false;
    dataSource.value = data.data;
  };
  //表单数据
  const infoObject = ref({
    enableRules: 0,
  });
  //设备点位搜索
  const filterDevicePoint = (input: string, option: any) => {
    return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
  };
  //开关
  const clickSwitch = () => {
    if (infoObject.value.enableRules === 1) {
      infoObject.value.enableRules = 0;
    } else {
      infoObject.value.enableRules = 1;
    }
  };
  // 通知信息
  const devicePointData = ref([
    { label: '站内信息', value: 1 },
    { label: '邮件', value: 2 },
  ]);

  const rules = {
    notification: [{ required: true, message: '请选择通知方式', trigger: 'change' }],
    user: [{ required: true, message: '请选择通知人', trigger: 'change' }],
  };
  const formRef = ref();
  const emit = defineEmits(['editObject']);
  const toggle = (value: any) => {
    //判断 是新增 还是修改
    if (value) {
      // 获取接口
      infoObject.value = {
        enableRules: 0,
      };
      // await http
      //   .post(group.queryDeviceGroupTree, {
      //     pageNum: 1,
      //     pageSize: 999,
      //     energyType: selectedOptions[0].dicKey,
      //     orgId: orgId.value,
      //   })
      //   .then((res) => {
      //     jdTreeData.value = res.data;
      //   });
    } else {
      infoObject.value = {
        enableRules: 0,
      };
    }
    visible.value = !visible.value;
  };
  //移除数据
  const remove = (data: any) => {
    dataSource.value.forEach((item, index) => {
      if (item.id === data.id) {
        dataSource.value.splice(index, 1);
      }
    });
    dataSource.value = [...dataSource.value];
  };
  const btnClick = () => {
    console.log(infoObject.value);
    //发送请求数据
    let obj = {};
    obj.selectList = [];
    dataSource.value.forEach((item) => {
      obj.selectList.push({
        people: item.id,
      });
    });
    console.log(obj, '数据');
    //表单校验
    formRef.value.validate().then(() => {
      //调用接口
      // http.post(deviceAlarms.addOrUpNewData, infoObject.value).then(() => {
      //   NsMessage.success('操作成功');
      //   visible.value = false;
      //   emit('editObject', null);
      // });
    });
  };
  const handleClose = () => {
    // 清楚校验错误信息
    formRef.value.resetFields();
    visible.value = false;
    visibleModel.value = false;
  };
  defineExpose({
    toggle,
    handleClose,
    handleCancel,
    handleChangePage,
    formRef,
  });
</script>
<style scoped lang="less">
  .drawerContainer {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
  .blue-background.ant-switch-checked {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch {
    background-color: grey !important;
  }

  .blue-background.ant-switch-checked .ant-switch-handle {
    background-color: linear-gradient(
      180deg,
      rgba(1, 206, 255, 1) 0%,
      rgba(0, 150, 229, 1) 100%
    ) !important;
  }

  .grey-background.ant-switch .ant-switch-handle {
    background-color: grey !important;
  }
  :deep(.ant-form-item-label) {
    z-index: 20;
    text-align: left;
    width: 20%;
  }
</style>
