<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>{{ timeStateOptions[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="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 #timing_rules="{ valueData }">
            <span>{{ TIMEING_RULES[valueData.timing_rules] }}</span>
          </template>
        </Info>
        <div class="notification-lists" v-if="timeingRulesRows">
          <bg-table
            border
            ref="timeing_rules_table"
            :headers="timeingRulesHeaders"
            :rows="timeingRulesRows"
            height="100%">
          </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 #order_level="{ row }">
            <span>{{ ticketLevelOptions[row.order_level] }}</span>
          </template>
          <template #order_state="{ row }">
            <span class="status-body">
              <span class="status" :class="`status-${row.order_state}`"></span>
              <span>{{ statusOptions[row.order_state] }}</span>
              <span v-if="row.order_state != 3"> （{{ row.state_cnt }}/{{ row.all_cnt }}） </span>
            </span>
          </template>
          <template #create_time="{ row }">
            {{ dateStringToDate(row.create_time) }}
          </template>
          <template #complete_time="{ row }">
            {{ dateStringToDate(row.complete_time) }}
          </template>
          <template #operation="{ row }">
            <div class="table-operation">
              <span class="primary-edit" @click="Detail(row)"> 详情 </span>
            </div>
          </template>
        </bg-table>
        <div class="pagination_box">
          <bg-pagination
            :page="page"
            :size="page_size"
            :total="total"
            @change-page="changePage"
            @change-size="changeSize">
          </bg-pagination>
        </div>
      </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 { ORDER_METHODS } from "@/components/manual-distribution/env.js";
import { TIMEING_RULES } from "@/components/env.js";
import { useRouter, useRoute } from "vue-router";
import axios from "@/request/http.js";
import { ElMessage } from "element-plus";
import { dateStringToDate } from "@/components/env";
const route = useRoute();
const { id } = route.query;
const router = useRouter();
const ticketLevelOptions = ["", "紧急任务", "重要任务", "一般任务"];
const statusOptions = ["", "待处置", "已完成", "已关闭"];
const timeStateOptions = ["禁用", "启用"];
const weekDayOptions = {
  1: "周一",
  2: "周二",
  3: "周三",
  4: "周四",
  5: "周五",
  6: "周六",
  7: "周日",
};
const labelData = [
  [
    {
      label: "工单名称",
      prop: "ticket_name",
    },
    {
      label: "定时是否启用",
      prop: "status",
    },
  ],
  [
    {
      label: "工单等级",
      prop: "ticket_level",
    },
    {
      label: "创建人",
      prop: "create_by",
    },
  ],
  [
    {
      label: "工单描述",
      prop: "description",
    },
    {
      label: "创建时间",
      prop: "create_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 timeingRules = [
  [
    {
      label: "定时规则",
      prop: "timing_rules",
    },
  ],
];
const timeingRulesHeaders = [
  {
    prop: "daterange",
    label: "日期范围",
  },
  {
    prop: "time_point",
    label: "时间点",
  },
];
const timeingRulesRows = ref([]);
const ticketHeaders = [
  {
    prop: "order_level",
    label: "工单等级",
  },
  {
    prop: "order_state",
    label: "工单状态",
  },
  {
    prop: "push_obj",
    label: "下发对象",
  },
  {
    prop: "create_user",
    label: "创建人",
  },
  {
    prop: "create_time",
    label: "创建时间",
    width: 160,
  },
  {
    prop: "complete_time",
    label: "完成时间",
    width: 160,
  },
  {
    label: "操作",
    prop: "operation",
    align: "left",
    width: "80px",
  },
];
const ticketRows = ref([]);
const Detail = ({ id }) => {
  router.push({
    path: "/ticket/business-ticket-list/detail",
    query: {
      id,
    },
  });
};
const getInfoData = () => {
  const params = {
    id,
  };
  axios.get("/v1/api/work_order/work_order_manage/details", { params }).then((res) => {
    if (res.data.code == 200) {
      let { data } = res.data;
      if (!data) return;
      info.value = {
        ticket_name: data.order_name,
        status: data.timing_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.create_time),
        notification_method: data.push_obj.push_method == 3 ? ["1", "2"] : [`${data.push_obj.push_method}`],
        timing_rules: +data.timing_type,
      };
      rows.value = data.push_obj.user_obj.map((e) => {
        return {
          user_id: e.system_account,
          user_name: e.user_name,
          phone: e.phone,
        };
      });
      let ruleObj = {
        2: () => {
          return [
            {
              daterange: data.timing_rule?.week?.map((e) => weekDayOptions[e]).join("，") || "-",
              time_point: data.timing_rule?.point_time || "-",
            },
          ];
        },
        3: () => {
          return data.timing_rule?.map((e) => {
            return {
              daterange: `${e.date_from} ~ ${e.date_to}`,
              time_point: e.point_time,
            };
          });
        },
      };
      timeingRulesRows.value = ruleObj[`${data.timing_type}`] && ruleObj[`${data.timing_type}`]();
    }
  });
};
const page = ref(1);
const page_size = ref(10);
const total = ref(0);
const changeSize = (size) => {
  page_size.value = size;
  changePage(1);
};

const changePage = (p) => {
  page.value = p;
  getOrderLists();
};
const getOrderLists = () => {
  const params = {
    id,
    page: page.value,
    page_size: page_size.value,
  };
  axios.get("/v1/api/work_order/work_order_issuance/list", { params }).then((res) => {
    if (res.data.code == 200) {
      ticketRows.value = res.data.data || [];
      total.value = res.data.total;
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};
onBeforeMount(() => {
  getInfoData();
  getOrderLists();
});
</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;
      }
      .notification-lists {
        margin-top: 16px;
      }
    }
    .pagination_box {
      display: flex;
      justify-content: flex-end;
      .bg-pagination {
        float: none;
      }
    }
    .status {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 8px;
      $statusObj: (-2: #48ad97, -3: #9e9e9e, -1: #3759be, _0: #d75138, _1: #48ad97);
      @each $status, $color in $statusObj {
        &#{$status} {
          background-color: $color;
        }
      }
    }
    .status-body {
      display: flex;
      align-items: center;
    }
  }
}
</style>
