<template>
  <div class="business-manage-detail">
    <div class="breadcrumb">
      <bg-breadcrumb />
    </div>
    <div class="content bg-scroll">
      <gap-title :hasLine="true" title="基本信息"></gap-title>
      <div class="info">
        <Info :labelData="labelData" :valueData="info">
          <template #status="{ item, valueData }">
            <span class="status-body">
              <span class="status" :class="`status-${valueData.status}`"></span>
              <span>{{ STATUS_OBJ[valueData[item.prop]] }}</span>
            </span>
          </template>
        </Info>
      </div>
      <gap-title :hasLine="true" title="推送方式"></gap-title>
      <div class="info">
        <Info :labelData="notificationMethod" :valueData="info">
          <template #value="{ item, valueData }">
            <span>{{ valueData[item.prop].map((e) => METHODS[e]).join("，") }}</span>
          </template>
        </Info>
        <div class="notification-lists">
          <bg-table border ref="notification_table" :headers="headers" :rows="rows" height="100%" :isIndex="true">
          </bg-table>
        </div>
      </div>
      <gap-title :hasLine="true" title="定时规则"></gap-title>
      <div class="info">
        <Info :labelData="timeingRules" :valueData="info">
          <template #value="{ item, valueData }">
            <span>{{ TIMEING_RULES[valueData[item.prop]] }}</span>
          </template>
        </Info>
        <div class="notification-lists">
          <bg-table
            border
            ref="timeing_rules_table"
            :headers="timeingRulesHeaders"
            :rows="timeingRulesRows"
            height="100%">
            <template #daterange="{ row }">
              {{ row.daterange.join(" ~ ") }}
            </template>
          </bg-table>
        </div>
      </div>
      <gap-title :hasLine="true" title="实例工单"></gap-title>
      <div>
        <bg-table
          ref="ticket_table"
          :headers="ticketHeaders"
          :rows="ticketRows"
          :stripe="true"
          :isIndex="true"
          height="100%">
          <template #status="{ row }">
            <span class="status-body">
              <span class="status" :class="`status-${row.status}`"></span>
              <span>{{ ticketStatus[row.status] }}</span>
              <span v-if="row.status != 3"> （{{ row.finish }}/{{ row.all }}） </span>
            </span>
          </template>
          <template #operation="{ row }">
            <div class="table-operation">
              <span class="primary-edit" @click="Detail(row)"> 详情 </span>
            </div>
          </template>
        </bg-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import bgBreadcrumb from "@/components/bg-breadcrumb.vue";
import Info from "@/components/warn-detail/info.vue";
import gapTitle from "@/components/gap-title.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
import { TIMEING_RULES } from "@/components/env.js";
import { useRouter } from "vue-router";
const router = useRouter();
const STATUS_OBJ = {
  finish: "已完成",
  close: "已关闭",
  info: "待处置",
};
const labelData = [
  [
    {
      label: "工单名称",
      prop: "ticket_name",
    },
    {
      label: "状态",
      prop: "status",
    },
  ],
  [
    {
      label: "工单等级",
      prop: "ticket_level",
    },
    {
      label: "创建人",
      prop: "create_by",
    },
  ],
  [
    {
      label: "工单描述",
      prop: "description",
    },
  ],
  [
    {
      label: "创建时间",
      prop: "create_time",
    },
    {
      label: "完成时间",
      prop: "finish_time",
    },
  ],
];
const info = {
  ticket_name: "7月常态化运维巡检任务",
  status: "finish",
  ticket_level: "紧急任务",
  create_by: "管理员",
  description: "请进行所有系统常态化月度巡检任务（每月定期常态运维巡检），将巡检结果上报！",
  create_time: "2020-01-01 00:00:00",
  finish_time: "2020-01-01 00:00:00",
  notification_method: ["1", "2"],
  timeing_rules: "3",
};
const notificationMethod = [
  [
    {
      label: "通知方式",
      prop: "notification_method",
    },
  ],
];
const headers = [
  {
    prop: "user_id",
    label: "账号",
  },
  {
    prop: "user_name",
    label: "姓名",
  },
  {
    prop: "phone",
    label: "联系方式",
  },
];
const rows = ref([
  {
    user_id: "11",
    user_name: "1111",
    phone: "13211111111",
  },
  {
    user_id: "22",
    user_name: "2222",

    phone: "13222222222",
  },
  {
    user_id: "33",
    user_name: "3333",
    phone: "13233333333",
  },
]);
const timeingRules = [
  [
    {
      label: "定时规则",
      prop: "timeing_rules",
    },
  ],
];
const timeingRulesHeaders = [
  {
    prop: "daterange",
    label: "日期范围",
  },
  {
    prop: "time_point",
    label: "时间点",
  },
];
const timeingRulesRows = [
  {
    daterange: ["2023-11-22", "2023-11-25"],
    time_point: "16:00:00",
  },
  {
    daterange: ["2023-11-22", "2023-11-25"],
    time_point: "16:00:00",
  },
  {
    daterange: ["2023-11-22", "2023-11-25"],
    time_point: "16:00:00",
  },
];
const ticketStatus = {
  1: "已完成",
  2: "待处置",
  3: "已关闭",
};
const ticketHeaders = [
  {
    prop: "ticket_level",
    label: "工单等级",
  },
  {
    prop: "status",
    label: "工单状态",
  },
  {
    prop: "distribute_target",
    label: "下发对象",
  },
  {
    prop: "create_by",
    label: "创建人",
  },
  {
    prop: "create_time",
    label: "创建时间",
  },
  {
    prop: "finish_time",
    label: "完成时间",
  },
  {
    label: "操作",
    prop: "operation",
    align: "left",
    width: "80px",
  },
];
const ticketRows = ref([
  { ticket_name: 11, id: 111, status: 1, finish: 10, all: 10 },
  { ticket_name: 22, id: 222, status: 2, finish: 5, all: 10 },
  { ticket_name: 33, id: 333, status: 3, finish: 0, all: 10 },
]);
const Detail = ({ id }) => {
  router.push({
    path: "/ticket/business-ticket-list/detail",
    query: {
      id,
    },
  });
};
</script>

<style lang="scss" scoped>
.business-manage-detail {
  width: 100%;
  height: 100%;
  padding: 0 24px 16px;
  .breadcrumb {
    width: 100%;
    height: 46px;
  }
  .content {
    width: 100%;
    height: calc(100% - 46px);
    background-color: #ffffff;
    box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
    border-radius: 6px;
    padding: 24px;
    :deep(.gap-title) {
      margin-bottom: 16px;
    }
    .info {
      max-width: 1072px;
      width: 100%;
      padding: 0 8px 0;
      &:not(:last-child) {
        padding-bottom: 24px;
      }
      .status {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 8px;
        $statusObj: (
          finish: #48ad97,
          close: #9e9e9e,
          info: #3759be,
          1: #48ad97,
          2: #e56600,
        );
        @each $status, $color in $statusObj {
          &-#{$status} {
            background-color: $color;
          }
        }
      }
      .status-body {
        display: flex;
        align-items: center;
      }
      .notification-lists {
        margin-top: 16px;
      }
    }
  }
}
</style>
