<!--
 * @Author: tangqihui tangqihui@yuan-info.com
 * @Date: 2023-09-18 10:04:45
 * @LastEditors: tangqihui tangqihui@yuan-info.com
 * @LastEditTime: 2023-09-18 15:35:32
 * @FilePath: /御安项目/火影资管/yuan-asset-module-browser/src/views/collection/assetsFound/snmpQuest.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  watch,
  nextTick,
  getCurrentInstance,
} from 'vue';
import { openSocket, registerSockets } from '@/utils/socket/useSocket';
import { ElMessage, ElMessageBox, ElTable } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { downLoadFile, deepCopy } from '../../../utils/utils';
import { usePermissions } from '../../../composables/usePermissions';
import {
  getList,
  delAll,
  add,
  delOne,
  update,
  queryTargetDetail,
  execute,
  executeByIds,
  pauseDetect,
  cancelDetect,
} from '../../../api/collection/infoCollection/collectionPlan';
import { getDownloadFile, postDownloadFile } from '../../../api/common';
import { getDeptData } from '../../../api/digitalAssets/networkAssets/hostAssets';
import { getLeftTreeJson } from '../../../api/permission/userManagement';
import {
  getDictTypeList,
  getDeptList,
  getRecordList,
} from '../../../api/common';
import {
  collectionTableColumn,
  taskRocordTableColumn,
} from '../components/config.ts';
import RecordDialog from '../components/recordDialog.vue';
import AddPopUp from '../components/addPopUp.vue';
import { yaConfirmMessage } from 'yuan-plus';
import stop from '@/assets/image/collection/stop.png';
import loading from '@/assets/image/collection/loading.gif';
import end from '@/assets/image/collection/end.png';
import cancel from '@/assets/image/collection/cancel.png';

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
// 清空选择的值
const clearSelect = () => {
  multipleTableRef.value.getTableMethods().clearSelection();
};
const { proxy } = getCurrentInstance();
/**
 * @description: 列表socket
 */
const sockets = {
  message(res) {
    if (res.type == 'ws_gather') {
      const { data, code } = res.data;
      if (code == 200) {
        tableData.value = data.records;
        total.value = data.total;
      }
    }
  },
};
const { permissionsButtons } = usePermissions();
const bottomData = new Map();
const rightButtons = ref([]);
onMounted(() => {
  // registerSockets(sockets, proxy);
  init();
});
/**
 * 按钮权限
 */
const buttons = ref([]) as any;
const btnPower = () => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
  if (bottomData.has(400156)) {
    buttons.value.push({
      eventName: 'add',
    });
  }
  if (bottomData.has(400158)) {
    buttons.value.push({
      eventName: 'delete',
    });
  }
};
// 分页参数
const total = ref(0);
/**
 * @description: 初始化方法
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const init = () => {
  btnPower();
  getDictList();
};
// 表格数据
const tableData = ref([]) as any;
const tableColumn: any[] = reactive([
  {
    type: 'selection',
    width: '65px',
    fixed: 'left',
    reserveSelection: true,
  },
  {
    prop: 'name',
    label: '任务名称',
    type: 'input',
    search: true,
    minWidth: '180px',
    drawer: true,
    rules: true,
  },
  {
    prop: 'name',
    label: '设备类型',
    type: 'radio',
    tableHide: true,
    drawer: true,
    options: [
      {
        key: '路由器',
        value: 1,
      },
      {
        key: '交换机',
        value: 2,
      },
      {
        key: '其他',
        value: 3,
      },
    ],
  },
  {
    label: '采集范围',
    slotName: 'colection',
    minWidth: '180px',
  },
  {
    prop: 'detectionRange',
    label: '采集范围',
    type: 'select',
    drawerSlotName: 'detectionRange',
    tableHide: true,
    drawer: true,
    rules: true,
    options: [
      {
        label: '自定义',
        value: 1,
      },
      {
        label: '资产地址库',
        value: 2,
      },
    ],
    onChange(e) {
      formData.value.detectionRange = e;
    },
  },
  {
    prop: 'deptIdSet',
    label: '所属部门',
    tableHide: true,
    type: 'cascader',
    props: {
      checkStrictly: true,
      value: 'id',
      emitPath: false,
    },
    showAllLevels: false,
    drawer: true,
  },
  {
    prop: 'networkArea',
    label: '网络域',
    tableHide: true,
    type: 'select',
    rules: true,
    drawer: true,
    hide: false,
  },
  {
    prop: 'detectionEngine',
    label: '采集引擎',
    tableHide: true,
    type: 'select',
    rules: true,
    drawer: true,
    hide: false,
    multiple: true,
    drawValue: [],
  },
  {
    prop: 'typeName',
    label: '执行方式',
    minWidth: '180px',
  },
  {
    prop: 'type',
    label: '执行方式',
    type: 'select',
    drawerSlotName: 'type',
    tableHide: true,
    drawer: true,
    rules: true,
    onChange(e) {
      formData.value.type = e;
    },
  },
  {
    prop: 'taskDescription',
    label: '任务描述',
    tableHide: true,
    type: 'textarea',
    drawer: true,
    rows: 6,
  },
  {
    formItemClassName: 'slotName-no-label',
    drawerSlotName: 'levelHeight',
    tableHide: true,
  },
  {
    prop: 'fingerprint',
    label: 'SNMP设置',
    tableHide: true,
    type: 'radio',
    drawer: true,
    hide: true,
    drawValue: 1,
    showHeight: 'showHeight1',
    options: [
      {
        key: 'SNMP v1/SNMP v2c',
        value: 1,
      },
      {
        key: 'SNMP v3',
        value: 2,
      },
    ],
    onChange(e) {
      tableColumn.forEach((item) => {
        if (item.prop == 'fingerprint') {
          item.drawValue = '';
        }
        if (item.showHeight == 'showHeight2') {
          item.hide = !item.hide;
        }
        if (item.showHeight == 'showHeight') {
          item.hide = !item.hide;
        }
      });
    },
  },
  {
    prop: 'networkArea',
    label: '团队名',
    showHeight: 'showHeight2',
    tableHide: true,
    type: 'input',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '用户名',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'input',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '安全级别',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'select',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '认证方式',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'select',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '认证密码',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'input',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '加密方式',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'select',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '加密密码',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'input',
    drawer: true,
    hide: true,
  },
  {
    prop: 'networkArea',
    label: '上下文',
    showHeight: 'showHeight',
    tableHide: true,
    type: 'input',
    drawer: true,
    hide: true,
  },
  {
    prop: 'schedule',
    label: '进度',
    align: 'center',
    minWidth: '180px',
    slotName: 'schedule',
  },
  {
    label: '执行状态',
    slotName: 'status',
    minWidth: '180px',
    search: true,
    type: 'select',
  },
  {
    label: '最新结果',
    width: '180px',
    slotName: 'result',
  },
  {
    prop: 'networkAreaEngine',
    label: '引擎-网络域',
    width: '180px',
    slotName: 'networkAreaEngine',
    search: true,
    type: 'input',
  },
  {
    prop: 'nextTime',
    label: '下次执行时间',
    minWidth: '200px',
  },
  {
    prop: 'gmtCreate',
    label: '添加时间',
    minWidth: '200px',
    type: 'daterange',
    search: true,
    valueFormat: 'YYYY-MM-DD',
    sortable: 'custom',
  },
  {
    prop: 'gmtCreate',
    label: '操作人',
    width: '180px',
  },
  {
    label: '操作',
    slotName: 'deal',
    fixed: 'right',
    width: '250px',
    buttons: [
      {
        title: '开始',
        icon: stop,
        eventName: 'state_stop',
        hide: function (row) {
          if (
            bottomData.has(400159) &&
            (row.status == 'none' ||
              row.status == 'finish' ||
              row.status == 'cancel')
          ) {
            return true;
          } else {
            return false;
          }
        },
      },
      {
        title: '继续执行',
        icon: end,
        eventName: 'state_end',
        hide: function (row) {
          if (bottomData.has(400159) && row.status == 'pause') {
            return true;
          } else {
            return false;
          }
        },
      },
      {
        title: '取消',
        icon: cancel,
        eventName: 'state_cancel',
        hide: function (row) {
          if (bottomData.has(400159)) {
            return true;
          } else {
            return false;
          }
        },
      },
      {
        title: '编辑',
        disabled: function (row) {
          if (bottomData.has(400157)) {
            return false;
          } else {
            return true;
          }
        },
        eventName: 'edit',
      },
      {
        title: '删除',
        eventName: 'delete',
        disabled: function (row) {
          if (bottomData.has(400158)) {
            return false;
          } else {
            return true;
          }
        },
      },
    ],
  },
]);
/**
 * @description: 表格多选操作
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const selectData = ref([]);
const handleSelect = (data) => {
  selectData.value = data;
};

/**
 * @description: 获取表格数据
 * @param {*}
 * @return {*}
 * @author: xuch
 */
const getTableData = async (type) => {
  let _data = JSON.parse(JSON.stringify(type))._value;
  if (_data && _data.gmtCreate) {
    let begin = _data.gmtCreate[0] + ' 00:00:00';
    let End = _data.gmtCreate[1] + ' 23:59:59';
    _data.createTimeStart = begin;
    _data.createTimeEnd = End;
    delete _data.gmtCreate;
  }
  try {
    const params = {
      ..._data,
    };
    // openSocket('ws_gather', params, sockets);
    const res = await getList(params);
    if (res.code !== 200) return;
    tableData.value = res.data.records;
    total.value = res.data.total;
  } catch (error) {
    console.log(error);
  }
};
/**
 * @description: 批量删除
 * @return {*}
 * @author: tqh
 */
const handleDel = async (id, type) => {
  // @ts-ignore
  const data = selectData.value.map((item) => item.id);
  if (type == 'one') {
    delOne({
      id: id,
    }).then((res) => {
      if (res.code == 200) {
        ElMessage.success(res.message);
        clearSelect();
        multipleTableRef.value.initData();
      }
    });
  } else {
    delAll(id).then((res) => {
      if (res.code == 200) {
        ElMessage.success(res.message);
        clearSelect();
        multipleTableRef.value.initData();
      }
    });
  }
};
const tableBtnClick = (btn, row) => {
  const { eventName } = btn;
  switch (eventName) {
    case 'add': // 新增
      tableColumn.forEach((item) => {
        if (item.prop == 'name' || item.prop == 'targetType') {
          item.disabled = false;
        }
      });
      formData.value = {};
      disabled.value = false;
      formDataObj.value = {};
      break;
    case 'edit': // 编辑
      formDataObj.value = row;
      formData.value.targetType = row.targetType;
      formData.value.type = row.type;
      disabled.value = true;
      tableColumn.forEach((item) => {
        if (item.prop == 'name' || item.prop == 'targetType') {
          item.disabled = true;
        }
      });
      break;
    case 'state_stop':
      executeBtn(row);
      break;
    case 'state_loading':
      executeBtn(row);
      break;
    case 'state_end':
      executeBtn(row);
      break;
    case 'state_cancel':
      executeBtn({
        status: 'state_cancel',
        id: row.id,
      });
      break;
    case 'record':
      recordBtn('record', row);
      break;
  }
};
const formDataObj = ref({});
const disabled = ref(false);
/**
 * @description: 字典数据初始化
 */
const resetDictData = (e) => {
  let list = e.map((item) => {
    return {
      label: item.dictName,
      value: item.dictValue,
    };
  });
  return list;
};
const getDictList = () => {
  // 网络域
  getDictTypeList({ dictType: 'networkArea' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'networkArea' || item.prop == 'networkAreaCode') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 执行方式
  getDictTypeList({ dictType: 'executeType' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'type') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 目标类型
  getDictTypeList({ dictType: 'targetType' }).then((res) => {
    if (res.code == 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'targetType') {
          item.options = resetDictData(res.data);
        }
      });
    }
  });
  // 获取部门层级
  getLeftTreeJson().then((res) => {
    const { code, data } = res || {};
    if (code === 200) {
      tableColumn.forEach((item) => {
        if (item.prop == 'deptIdSet') {
          item.options = data.treeData || [];
        }
      });
    }
  });
};
/**
 * @description: 执行操作
 */
const executeBtn = (e) => {
  let send, title;
  if (e.status == 'none' || e.status == 'finish' || e.status == 'cancel') {
    send = execute;
    title = '任务开始执行!';
  } else if (e.status == 'running') {
    send = pauseDetect;
    title = '任务暂停！';
  } else if (e.status == 'pause') {
    send = pauseDetect;
    title = '任务继续执行！';
  } else if (e.status == 'state_cancel') {
    send = cancelDetect;
    title = '任务取消！';
  }
  send({ id: e.id }).then((res) => {
    if (res.code == 200) {
      ElMessage.success(title);
      multipleTableRef.value.initData();
    }
  });
};
const formData = ref({});
const refAddPopUp = ref(null);
watch(
  () => formData.value.type,
  () => {
    nextTick(() => {
      console.log(refAddPopUp.value);
      if (refAddPopUp.value) {
        refAddPopUp.value.resetDateObj();
      }
    });
  }
);
watch(
  () => formData.value.targetType,
  () => {
    nextTick(() => {
      if (refAddPopUp.value) {
        refAddPopUp.value.resetDateObj1();
      }
    });
  }
);
/**
 * @description: 获取组件传参
 */
const getTargetTypeValue = (e) => {
  formData.value.targetList = e.targetList;
};
const getTypeValue = (e) => {
  console.log(e, 'formData.type', formData.value.type);
  if (formData.value.type == 'custom_point') {
    formData.value.startTime = e.time;
  } else {
    formData.value.executeTime = e.time;
  }

  if (e.allWeek) {
    formData.value.typeParam = e.allWeek + ',' + e.weekDay;
  } else {
    formData.value.typeParam = e.weekDay;
  }
};
/**
 * @description 模板提交事件
 * @param eventName 事件名称 export: 批量导出
 * @param data 表单提交数据
 * @param cb  { Function } 组件回调  （ 新增，编辑，删除，上传需要参数: Boolean true(关闭loading,弹窗)/false(关闭loading) ）
 */
const btnSubmit = (eventName, data, cb) => {
  switch (eventName) {
    case 'batchDelete': // 批量删除
      let ids = selectData.value.map((item) => {
        return item.id;
      });
      handleDel(ids, 'some');
      break;
    case 'delete':
      handleDel(data.id, 'one');
      break;
    case 'edit': // 编辑
      handleSubmit(data, cb);
      break;
    case 'add': // 新增
      handleSubmit(data, cb);
      break;
  }
};
/**
 * @description: 新增，编辑提交确认
 */
const handleSubmit = (data, cb) => {
  let send;
  if (data.id) {
    send = update;
  } else {
    send = add;
  }
  let params = {
    ...data,
    ...formData.value,
  };
  send(params)
    .then((res) => {
      if (res.code == 200) {
        cb(true);
        ElMessage.success(data.id ? '新增成功！' : '编辑成功！');
        clearSelect();
      } else {
        cb(false);
      }
    })
    .catch(() => {
      cb(false);
    });
};

/**
 * @description 打开记录弹窗
 */
const tableColumnList = ref([]);
const tableDataList = ref([]);
const childDialog = ref<any>();
const RecordDialogType = ref(2);
const sizeWidth = ref('380px');
const taskId = ref('');
const recordBtn = (type, e) => {
  taskId.value = e.id;
  tableTotal.value = 0;
  tablePage.value = 1;
  tableSize.value = 20;
  if (type == 'targetName') {
    tableColumnList.value = collectionTableColumn;
    RecordDialogType.value = 2;
    sizeWidth.value = '580px';
    childDialog.value.dialogProps.title = '采集对象';
    getTargetDetail('');
  } else if (type == 'result') {
    tableColumnList.value = collectionTableColumn;
    RecordDialogType.value = 2;
    sizeWidth.value = '580px';
    childDialog.value.dialogProps.title = '最新结果';
    getTargetDetail('');
  } else {
    tableColumnList.value = taskRocordTableColumn;
    RecordDialogType.value = 1;
    childDialog.value.dialogProps.title = '执行记录';
    sizeWidth.value = '580px';
    getRecordDetail();
  }
};
/**
 * @description: ip信息搜索条件
 */
const getSearch = (e) => {
  getTargetDetail(e);
};
const tableTotal = ref(0);
const tablePage = ref(1);
const tableSize = ref(20);
/**
 * @description: 页面容量切换
 */
const tableSizeChange = function (val: number) {
  tableSize.value = val;
  tablePage.value = 1;
  if (RecordDialogType.value == 2) {
    getTargetDetail('');
  } else {
    getRecordDetail();
  }
};
/**
 * @description: 分页切换
 */
const tableCurrentChange = function (val: number) {
  tablePage.value = val;
  if (RecordDialogType.value == 2) {
    getTargetDetail('');
  } else {
    getRecordDetail();
  }
};
/**
 * @description: 获取ip信息
 */
const getTargetDetail = (e) => {
  queryTargetDetail({
    taskId: taskId.value,
    ip: e,
    pageIndex: tablePage.value,
    pageSize: tableSize.value,
  }).then((res) => {
    if (res.code == 200) {
      tableDataList.value = res.data.records.map((item, index) => {
        let obj = {
          number: Number(
            (tablePage.value - 1) * tableSize.value + index + 1 > 9
              ? (tablePage.value - 1) * tableSize.value + index + 1
              : `${(tablePage.value - 1) * tableSize.value + index + 1}`
          ),
          ip: item,
        };
        return obj;
      });
      tableTotal.value = res.data.total;
      childDialog.value.openDialog();
    }
  });
};
/**
 * @description: 任务记录
 */
const getRecordDetail = () => {
  getRecordList({
    taskId: taskId.value,
    pageIndex: tablePage.value,
    pageSize: tableSize.value,
  }).then((res) => {
    if (res.code == 200) {
      tableDataList.value = res.data.records.map((item, index) => {
        item.number = Number(
          (tablePage.value - 1) * tableSize.value + index + 1 > 9
            ? (tablePage.value - 1) * tableSize.value + index + 1
            : `${(tablePage.value - 1) * tableSize.value + index + 1}`
        );
        return item;
      });
      tableTotal.value = res.data.total;
      childDialog.value.openDialog();
    }
  });
};
/**
 * @description 文件上传
 */
const handleChangeUpload = (e) => {
  let fd = new FormData();
  fd.append('file', e.raw);
  // let res = await checkoutFile(fd);
  // checkoutFile(fd).then((res) => {
  //   const reader = new FileReader()
  //   reader.readAsText(res, 'utf-8')
  //   reader.addEventListener('loadend', function () {
  //     if (typeof reader.result === 'string') {
  //       try {
  //         let data = JSON.parse(reader.result)
  //         if (data.code != 200) {
  //           yaMessage(data.message, 'error')
  //         } else {
  //           if(data.data) {
  //             defaultObj.value.targetList = data.data;
  //             resetTableData()
  //           } else {
  //             yaMessage('上传文件有误', 'error')
  //           }
  //         }
  //       } catch (error) {
  //       }
  //     }
  //   })
  // })
};
/**
 * @description 文件删除
 */
const handleDeleteFile = () => {
  console.log(123);
};
/**
 * @description 切换高级选项
 */
const showHeigh = ref(false);
const choseOne = () => {
  showHeigh.value = !showHeigh.value;
  tableColumn.forEach((item) => {
    if (item.showHeight == 'showHeight1' || item.showHeight == 'showHeight2') {
      item.hide = !item.hide;
    }
  });
};
</script>

<template>
  <div>
    <YaPageContent
      ref="multipleTableRef"
      :total="total"
      :tableData="tableData"
      :tableColumns="tableColumn"
      :buttons="buttons"
      :rightButtons="rightButtons"
      @submit="btnSubmit"
      @init="getTableData"
      @tableBtnClick="tableBtnClick"
      @selectionChange="handleSelect"
      drawerSize="460px"
    >
      <!-- 进度 -->
      <template #schedule="{ item }">
        <div class="schedule">
          <div class="schedule-item"></div>
          <div class="schedule-text">10%</div>
        </div>
      </template>
      <!-- 新增探测范围 -->
      <template #detectionRange="{ item }">
        <div style="width: 100%" v-if="formData.detectionRange == 1">
          <el-input
            class="customInput"
            v-model="formData.customInput"
            :autosize="{ minRows: 6 }"
            type="textarea"
            placeholder="输入格式如下，多个IP、域名、URL用英文逗号隔开：
  IPv4：192.169.1.1,192.168.1.0-192.168.1.255,192.168.1.1/24
  IPv6：FF01:0:0:0:0:0:0:1101,FF01::1101
  域名：www.123k.com,www.345d.com
  URL：https://123.com,http://234.com"
          />
          <div class="yaInputUpload">
            <YaInputUpload
              @handleChangeUpload="handleChangeUpload"
              @handleDeleteFile="handleDeleteFile"
              :pass="[
                'xlsx',
                'jpg',
                'png',
                'pdf',
                'txt',
                'xls',
                'doc',
                'docx',
                'rar',
                'zip',
                'wps',
                'pptx',
              ]"
            >
            </YaInputUpload>
          </div>
        </div>
      </template>
      <!-- 执行状态 -->
      <template #status="item">
        <div
          class="status-flex"
          v-if="item.item.status != 'running' && item.item.status != 'pause'"
        >
          <div
            class="circle"
            :class="[
              item.item.status == 'none'
                ? 'circle-start'
                : item.item.status == 'running'
                ? 'circle-begin'
                : item.item.status == 'pause'
                ? 'circle-stop'
                : 'circle-end',
            ]"
          ></div>
          <div>
            {{ item.item.statusName }}
          </div>
        </div>
        <div class="percentage" v-else>
          <el-progress :percentage="item.item.percentage" />
        </div>
      </template>
      <!-- 引擎-网络域 -->
      <template #networkAreaEngine="{ item }">
        <div class="networkAreaEngine">
          <div
            class="networkAreaEngine-item"
            @click="handlerGetEngineInfo(item)"
          >
            引擎-B域
          </div>
          <el-popover
            popper-class="custom-content"
            placement="bottom"
            :width="200"
            :hide-after="0"
            trigger="click"
          >
            <template #reference>
              <div
                class="networkAreaEngine-item"
                @click.stop="visible123 = !visible123"
              >
                +3
              </div>
            </template>
            <div class="networkAreaEngine-content">
              <div class="networkAreaEngine-item">引擎-B域</div>
              <div class="networkAreaEngine-item">引擎-B域</div>
              <div class="networkAreaEngine-item">引擎-B域</div>
              <div class="networkAreaEngine-item">引擎-B域</div>
              <div class="networkAreaEngine-item">引擎-B域</div>
              <div class="networkAreaEngine-item">引擎-B域</div>
            </div>
          </el-popover>
        </div>
      </template>
      <!-- 最新结果 -->
      <template #result="item">
        <div class="result" @click="recordBtn('result', item)">
          <span class="survival">1000</span>
          <span class="error">9999</span>
        </div>
      </template>
      <!-- 采集对象 -->
      <template #colection="item">
        <div
          v-if="item.item.feature.targetName"
          class="targetName text-hover"
          @click="recordBtn('targetName', item.item)"
        >
          {{ item.item.feature.targetName }}
          <span v-if="item.item.feature.targetNum != '0'"
            >+{{ item.item.feature.targetNum }}</span
          >
        </div>
        <div v-else>-</div>
      </template>
      <template #targetType="{ item }">
        <AddPopUp
          ref="refAddPopUp"
          :disabled="disabled"
          :isShow="formData.targetType"
          type="targetType"
          :showType="2"
          @dateValue="getTargetTypeValue"
          :dataValue="formDataObj"
        />
      </template>
      <template #type="{ item }">
        <AddPopUp
          ref="refAddPopUp"
          :isShow="formData.type"
          :dataValue="formDataObj"
          @dateValue="getTypeValue"
        />
      </template>
      <!-- 高级配置 -->
      <template #levelHeight="{ item }">
        <div class="level-height level-height1">
          <div class="position-relative">
            <span @click="choseOne">
              <span class="heighi-btn">高级配置</span>
              <span class="heighi-btn-icon" v-if="!showHeigh"></span>
              <span
                class="heighi-btn-icon heighi-btn-icon-up"
                v-if="showHeigh"
              ></span>
            </span>
          </div>
        </div>
      </template>
    </YaPageContent>
    <RecordDialog
      ref="childDialog"
      :sizeWidth="sizeWidth"
      :type="RecordDialogType"
      :title="RecordDialogTitle"
      :tableTotal="tableTotal"
      :tablePage="tablePage"
      :tableSize="tableSize"
      :tableDataList="tableDataList"
      :tableColumn="tableColumnList"
      @sizeChangeOne="tableSizeChange"
      @currentChangeOne="tableCurrentChange"
      @onSearch="getSearch"
    />
  </div>
</template>

<style scoped lang="scss">
@import '../../../style/popUp.scss';
.status-flex {
  display: flex;
  align-items: center;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .circle-start {
    background: var(--el-color-info-light-7);
  }
  .circle-begin {
    background: var(--el-color-primary);
  }
  .circle-stop {
    background: rgba(0, 149, 255, 0.2);
  }
  .circle-end {
    background: var(--el-color-warning);
  }
}
.cursor:hover {
  cursor: pointer;
}
.record {
  font-weight: 400;
  color: var(--el-color-primary);
  font-size: 14px;
}
.img2 {
  width: 20px;
  height: 20px;
  position: relative;
  top: 5px;
  margin-right: 18px;
}
.targetName {
  font-weight: 400;
  color: var(--el-color-primary);
  font-size: 14px;
  cursor: pointer;
  span {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--el-color-primary);
    border-radius: 4px;
    padding: 0px 10px;
    height: 24px;
    line-height: 24px;
  }
}
.percentage {
  position: relative;
  top: 0px;
}
::v-deep .add-form {
  .el-input {
    margin-top: 12px;
  }
}
.schedule {
  width: 100%;
  height: 16px;
  background: rgba(229, 229, 229, 0.6);
  border-radius: 2px;
  position: relative;
  .schedule-item {
    position: absolute;
    background: var(--el-color-primary);
    left: 0;
    height: 16px;
    width: 100%;
    border-radius: 2px;
  }
  .schedule-text {
    height: 16px;
    line-height: 16px;
    position: relative;
    z-index: 2;
  }
}
.networkAreaEngine {
  display: flex;
  position: relative;
  z-index: 11;
}
.networkAreaEngine-item {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--el-color-primary);
  color: var(--el-color-primary);
  margin-right: 8px;
  cursor: pointer;
}
.networkAreaEngine-content {
  display: flex;
  flex-wrap: wrap;
  margin-left: 4px;
  margin-right: 4px;
  margin-top: 12px;
  .networkAreaEngine-item {
    margin-bottom: 12px;
  }
}
.result {
  display: flex;

  span {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 14px;
  }

  span:nth-child(2) {
    margin-left: 8px;
  }

  .survival {
    border: 1px solid var(--el-color-success);
    color: var(--el-color-success);
    cursor: pointer;
  }

  .error {
    border: 1px solid rgba(229, 229, 229, 1);
    cursor: pointer;
  }
}
.customInput {
  margin: 12px 0;
}
.level-height {
  position: relative;
  top: -10px;
  font-size: var(--el-form-label-font-size);
  color: var(--el-text-color-primary);
  width: 100%;

  .level-top {
    ::v-deep .el-checkbox {
      margin-bottom: 10px;
    }
  }

  .heighi-btn {
    font-weight: 500;
    color: var(--el-color-primary);
    text-decoration: underline;
    cursor: pointer;
  }

  .position-relative {
    position: relative;
  }

  .heighi-btn-icon {
    width: 0;
    height: 0;
    border-top: 5px solid var(--el-color-primary);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: 13px;
    left: 70px;
    cursor: pointer;
  }

  .heighi-btn-icon-up {
    border-top: none;
    border-bottom: 5px solid var(--el-color-primary);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
  }
}

.level-height1 {
  top: 0;
}
</style>
