<template>
  <div class="task-page">
    <div class="task-header">
      <div class="task-header-left">
        <i class="el-icon-back"></i>
        <span class="task-header-title">任务信息</span>
      </div>
      <el-button type="primary" class="task-header-button">关联应用</el-button>
    </div>
    <div class="task-content">
      <div class="task-left-panel">
        <div class="task-panel-title">用例执行分布</div>
        <pieChart />
      </div>
      <div class="task-right-panel">
        <div class="task-panel-title">定时任务执行信息</div>
        <div class="task-panel-content">
          <div class="task-stats">
            <div class="task-stats-total-cases">
              <span class="task-stats-label">用例总数</span>
              <span class="task-stats-value">2</span>
            </div>
            <div class="task-stats-step-count">
              <span class="task-stats-label">用例步骤数</span>
              <span class="task-stats-value">9</span>
            </div>
            <div class="task-stats-success-rate">
              <span class="task-stats-label">成功率</span>
              <span class="task-stats-value">100%</span>
            </div>
          </div>
          <div class="task-details">
            <div class="task-details-execution-time">
              <div class="task-details-label">
                <i class="el-icon-time"></i>
                <span>执行耗时</span>
              </div>
              <div class="task-details-value">111s</div>
            </div>
            <div class="task-details-start-time">
              <div class="task-details-label">
                <i class="el-icon-time"></i>
                <span>开始执行时间</span>
              </div>
              <div class="task-details-value">2025-02-19 10:00:00</div>
            </div>
            <div class="task-details-environment">
              <div class="task-details-label">
                <i class="el-icon-setting"></i>
                <span>环境</span>
              </div>
              <div class="task-details-value">
                中移商业保理平台-云龙测试-测试环境
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="任务详情(2)" name="first">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              一致性 Consistency<i class="header-icon el-icon-info"></i>
            </template>
            <div>
              与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
            </div>
            <div>
              在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
            </div>
          </el-collapse-item>
          <el-collapse-item title="反馈 Feedback">
            <div>
              控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
            </div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="效率 Efficiency">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>
              清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
            </div>
            <div>
              帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
            </div>
          </el-collapse-item>
          <el-collapse-item title="可控 Controllability">
            <div>
              用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
            </div>
            <div>
              结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="执行记录(2)" name="second"> </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pieChart from "./components/pieChart.vue";

export default {
  components: {
    pieChart,
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(event, tab) {
      console.log(event, tab);
    },
  },
};
</script>

<style scoped lang="scss">
// .task-page {
//   /* 可根据需要添加全局样式 */
// }

.task-header {
  border-bottom: 1px solid #e3e8f2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.task-header-left {
  display: flex;
  align-items: center;
}

.task-header-title {
  color: #4f597f;
  font-size: 16px;
  margin-left: 8px;
}

.el-icon-back {
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-radius: 50%;
  color: #346fff;
  font-size: 12px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.task-header-button {
  height: 24px;
  line-height: 22px;
  padding: 0 12px;
  font-size: 12px;
}

.task-content {
  display: flex;
  gap: 24px;
  padding: 16px 16px;
}

.task-left-panel {
  border: 1px solid #f4f5fc;
  border-radius: 2px;
  height: 250px;
  padding: 16px 24px;
  width: 500px;
}

.task-right-panel {
  width: 100%;
  border: 1px solid #f4f5fc;
  border-radius: 2px;
  height: 250px;
  padding: 16px 24px;
}

.task-panel-title {
  color: #4f597f;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  line-height: 20px;
}

.task-panel-content {
  display: flex;
  flex-direction: column;
  height: 198px;
}

.task-stats {
  display: flex;
  justify-content: space-between;
  padding-top: 54px;
}

.task-stats-total-cases,
.task-stats-step-count,
.task-stats-success-rate {
  font-size: 12px;
  color: #4f597f;
}

.task-stats-value {
  font-size: 24px;
  color: #4f597f;
  padding-left: 16px;
}

.task-stats-total-cases {
  width: 150px;
}

.task-stats-step-count {
  width: 280px;
}

.task-stats-success-rate {
  width: 330px;
}

.task-details {
  display: flex;
  justify-content: space-between;
  padding-top: 54px;
}

.task-details-execution-time,
.task-details-start-time,
.task-details-environment {
  display: flex;
  align-items: center;
}

.task-details-label {
  display: flex;
  align-items: center;
  color: #9c9c9c;
  font-size: 12px;
  padding-right: 16px;
}

.task-details-label i {
  margin-right: 8px;
}

.task-details-value {
  color: #4f597f;
}

.task-details-execution-time {
  width: 150px;
}

.task-details-start-time {
  width: 280px;
}

.task-details-environment {
  width: 330px;
}
/* 修改 tab 标签的字体大小 */
::v-deep .el-tabs__nav-wrap::after {
  width: 100%;
  height: 1px;
  background-color: #e0e5f0;
  border: none; /* 去掉默认的边框 */
  padding: 0;
}

.el-tabs {
  padding: 0 24px;
}

::v-deep .el-tabs__item {
  font-size: 12px; /* 字体大小为 12px */
  font-weight: 500;
}
</style>
