<template>
  <div class="my-business-detail">
    <div class="breadcrumb">
      <bg-breadcrumb />
    </div>
    <div class="content bg-scroll">
      <div class="go-back">
        <goBack />
      </div>
      <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="listtable" :headers="headers" :rows="rows" height="100%" :isIndex="true"> </bg-table>
        </div>
      </div>
      <gap-title :hasLine="true" title="工单反馈"></gap-title>
      <div class="info">
        <feedback-detail :detail-info="detailInfo"></feedback-detail>
      </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 feedbackDetail from "@/page/main/ticket/modules/feedback-detail/index.vue";
import goBack from "@/components/go-back/index.vue";
import { METHODS } from "@/components/manual-distribution/env.js";
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"],
};
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 detailInfo = ref([
  {
    status: "close",
    target: "张三",
    feedback: "任务临时取消",
    time: "2022-10-22 09:58:30",
  },
  {
    status: "finish",
    target: "李四",
    feedback: "任务临时取消",
    time: "2022-10-22 09:58:30",
  },
]);
</script>

<style lang="scss" scoped>
.my-business-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;
    .go-back {
      margin-bottom: 24px;
    }
    :deep(.gap-title) {
      margin-bottom: 16px;
    }
    .info,
    .feedback-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,
        );
        @each $status, $color in $statusObj {
          &-#{$status} {
            background-color: $color;
          }
        }
      }
      .status-body {
        display: flex;
        align-items: center;
      }
      .notification-lists {
        margin-top: 16px;
      }
    }
  }
}
</style>
