<template>
  <div class="business-ticket-list">
    <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>{{ statusOptions[valueData[item.prop]] }}</span>
            </span>
          </template>
        </Info>
      </div>
      <gap-title :hasLine="true" title="推送方式"></gap-title>
      <div class="info">
        <Info :labelData="notificationMethod" :valueData="info">
          <template #notification_method="{ valueData }">
            <span>{{ valueData.notification_method?.map((e) => ORDER_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 { onBeforeMount, 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 { ORDER_METHODS } from "@/components/manual-distribution/env.js";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import axios from "@/request/http.js";
import { dateStringToDate } from "@/components/env";
const route = useRoute();
const { id } = route.query;
const ticketLevelOptions = ["", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["", "待处置", "已完成", "已关闭"];
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 = ref({});
const notificationMethod = [
  [
    {
      label: "通知方式",
      prop: "notification_method",
    },
  ],
];
const headers = [
  {
    prop: "user_id",
    label: "账号",
  },
  {
    prop: "user_name",
    label: "姓名",
  },
  {
    prop: "phone",
    label: "联系方式",
  },
];
const rows = ref([]);
const detailInfo = ref([]);
const getInfo = () => {
  axios
    .get("/v1/api/work_order/work_order_issuance/details", {
      params: {
        id,
      },
    })
    .then((res) => {
      if (res.data.code == 200) {
        let { data } = res.data;
        info.value = {
          ticket_name: data.order_name,
          status: data.order_state,
          ticket_level: ticketLevelOptions[data.order_level],
          create_by: data.create_user,
          description: data.order_desc,
          create_time: dateStringToDate(data.create_time),
          finish_time: dateStringToDate(data.complete_time),
          notification_method: data.push_obj.push_method == "3" ? ["1", "2"] : [data.push_obj.push_method],
        };
        rows.value = data.push_obj.user_obj?.map((e) => {
          return {
            user_id: e.system_account,
            user_name: e.user_name,
            phone: e.phone,
          };
        });
        detailInfo.value = data.work_order_me?.map((e) => {
          return {
            status: e.order_state,
            target: e.system_account,
            feedback: e.result_feedback,
            time: dateStringToDate(e.complete_time),
          };
        });
      }
    });
};
onBeforeMount(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
.business-ticket-list {
  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 {
      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: (
          2: #48ad97,
          3: #9e9e9e,
          1: #3759be,
        );
        @each $status, $color in $statusObj {
          &-#{$status} {
            background-color: $color;
          }
        }
      }
      .status-body {
        display: flex;
        align-items: center;
      }
      .notification-lists {
        margin-top: 16px;
      }
    }
  }
}
</style>
