<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2024-01-09 13:27:11
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2024-01-10 10:18:53
 * @FilePath: /huaxin-web/src/views/pipetask/task/taskDetail/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <div class="top bb flex-b">
      <div v-for="item in itemArr" :key="item.title" class="top-item">
        <div class="t">{{ item.title }}</div>
        <div class="b">{{ item.val }}</div>
      </div>
    </div>

    <el-tabs v-model="currentTab" @tab-click="handleClick">
      <el-tab-pane label="管线统计" name="pipe">
        <PipeStatistics
          v-if="currentTab == 'pipe'"
          :taskId="parseInt($route.query.taskId)"
          :pushTime="$route.query.pushTime"
        />
      </el-tab-pane>
      <el-tab-pane label="巡线员统计" name="inspector">
        <InspectorStatistics
          v-if="currentTab == 'inspector'"
          :taskId="parseInt($route.query.taskId)"
          :pushTime="$route.query.pushTime"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  selectTaskInspectStatisticsByUser,
  getTask,
} from "@/api/pipetask/task";
import InspectorStatistics from "./components/InspectorStatistics";
import PipeStatistics from "./components/PipeStatistics";
export default {
  name: "task_detail_index",
  components: {
    InspectorStatistics,
    PipeStatistics,
  },
  data() {
    return {
      currentTab: "pipe",
      itemArr: [
        {
          title: "任务名称",
          val: "2024年1月1日管线例行巡检",
        },
        {
          title: "执行任务日期",
          val: "2024-1-10",
        },
        {
          title: "任务完成率",
          val: "20%",
        },
        {
          title: "任务创建时间",
          val: "2024-1-9",
        },
        {
          title: "任务创建人",
          val: "田小花",
        },
      ],
    };
  },
  mounted() {
    getTask(this.$route.query.taskId).then((res) => {
      console.log(res);
      const data = res.data;
      this.itemArr[0].val = data.title;
      this.itemArr[1].val = data.pushTime;
      this.itemArr[2].val = data.finishRate;
      this.itemArr[3].val = data.createTime;
      this.itemArr[4].val = data.nickName;
    });
  },
  methods: {
    handleClick(tab) {
      this.currentTab = tab.name;
    },
  },
};
</script>
<style lang="scss">
.border-bottom-none {
  .el-dialog__body {
    padding-top: 0 !important;
    padding-left: 0 !important;
  }
  .el-dialog__header {
    border: none;
    padding-bottom: 0 !important;
    &:before {
      display: none;
    }
    &:after {
      display: none;
    }
  }
}
</style>
<style lang="scss" scoped>
.top {
  height: 96px;
  background: #f9f9f9;
  align-items: center;
  padding: 0 54px 0 50px;
  .t {
    font-size: 14px;
    color: #3d3d3d;
  }
  .b {
    font-size: 20px;
    color: #226aed;
    font-weight: 600;
  }
}
</style>
