<template>
  <div class="ya-box">
    <YaPageContent :tableData="tableData" :tableColumns="column" :buttons="buttons" @submit="handleSubmit"
      @init="initData" :total="total" @tableBtnClick="tableBtnClick">
    </YaPageContent>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { yaMessage } from "../../utils/message";
import {
  getProtectNetSegment,
  addProtectNetSegment,
  editProtectNetSegment,
  deleteProtectNetSegment,
  exportProtectNetSegment,
  allExportProtectNetSegment
} from "../../api/serviceConfig/IntranetSegment";
import { usePermissions } from "../../composables/usePermissions";
import { provinceData } from '../../assets/map/province'
const { permissionsButtons } = usePermissions();
const buttons: any = ref([]);
let bottomData: any = new Map();
let getButton = () => {
  if (bottomData.has(200014)) {
    buttons.value.push({
      // custom: 'dropdown',
      // title: bottomData.get(200014).label,
      // customData: [
      //   {
      //     name: '批量' + bottomData.get(200014).label,
      //     eventName: 'export',
      //   },
      //   {
      //     name: '全部' + bottomData.get(200014).label,
      //     eventName: 'allExport',
      //   },
      // ],
      eventName: "export",
    });
  }
  if (bottomData.has(200015)) {
    buttons.value.push({
      eventName: "add",
    });
  }
};
const selectedProvinceCity = ref([])
const column = [
  {
    type: "selection",
    fixed: "left",
  },
  {
    prop: "netSegment",
    label: "内部网段",
    drawer: true,
    type: "input",
    rules: [
      {
        pattern:
          '^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|[12]?[0-9])$',
        message: "网段输入格式不合法",
        trigger: 'blur'
      },

    ],
    tooltip: "标准网段格式示例:10.1.1.0/24或10.1.1.0/16等",
  },
  {
    prop: "gmtCreate",
    label: "创建时间",
  },
  {
    prop: "position",
    label: "地理位置",
    type: 'cascader',
    drawer: true,
    options: provinceData,
    tableHide: true,
  },
  {
    prop: "address",
    label: "地理位置",
  },
  {
    prop: "remark",
    label: "备注",
    drawer: true,
    width: '200px',
    type: "textarea",
    maxLength: 200,
  },
  {
    label: "操作",
    width: "100px",
    fixed: "right",
    buttons: [
      {
        title: "编辑",
        eventName: "edit",
        disabled: () => {
          return !bottomData.has(200016);
        },
      },
      {
        title: "删除",
        eventName: "delete",
        disabled: () => {
          return !bottomData.has(200017);
        },
      },
    ],
  },
];
const tableData = ref([]);
let total = ref(0);
//按钮事件
const handleSubmit = (eventName, data, cb) => {
  let interfaceName;
  let params = JSON.parse(JSON.stringify(data));
  switch (eventName) {
    case "export":
      exportProtectNetSegment({ ids: data.toString() }).then((res) => {
        cb && cb(res, "内部网段.xlsx");
        yaMessage("导出成功", "success");
      });
      break;
    case "add":
      interfaceName = addProtectNetSegment;
      if (params.position) {
        params.country = params.position[0]
        params.province = params.position[1]
        params.city = params.position[2]
      }
      delete params.position
      break;
    case "edit":
      if (params.position?.length == 3) {
        params.country = params.position[0]
        params.province = params.position[1]
        params.city = params.position[2]
      }
      delete params.position
      interfaceName = editProtectNetSegment;
      break;
    case "delete":
      interfaceName = deleteProtectNetSegment;
      params = { id: data.id };
      break;
  }
  eventName != "export" &&
    interfaceName(params)
      .then((res) => {
        let { code, message } = res || {};
        if (code == 200) {
          yaMessage(message, "success");
          cb && cb(true);
        }
      })
      .finally(() => {
        cb && cb();
      });
};

/**
 * @description  列表按钮点击事件
 * @param btn  eventName allExport-全部导出
 * @param row  单条数据
 */
const tableBtnClick = (btn, row) => {
  let { eventName } = btn;
  switch (eventName) {
    case 'allExport':
      allExportProtectNetSegment().then(res => {
        const { code, message } = res || {}
        code == 200 && yaMessage(message, 'success')
      })
      break;
  }
};
//获取列表数据
const initData = (data) => {
  getProtectNetSegment(data.value).then((res) => {
    let { code, data = [] } = res || {};
    if (code == 200 && data) {
      data.records.forEach(item => {
        item.position = item.address?.split('.')
      })
      tableData.value = data.records || [];
      total.value = data.total;
    }
  });
};
onMounted(() => {
  permissionsButtons.map((item) => {
    bottomData.set(item.menuId, item);
  });
  getButton();
  getProvinceAndCity(provinceData)
});
//省市数据
const getProvinceAndCity = (data) => {
  if (!data || !data.length) return;
  data.forEach(item => {
    item.value = item.label
    if (item.children) {
      getProvinceAndCity(item.children)
    }
  })
}
</script>
<style lang="scss" scoped></style>
