<template>
  <div>
    <!-- <h1>userAuditCourseState-学员审课所处状态</h1> -->
    <div class="box1" v-for="(item, index) in list" :key="index">
      <!-- <h2 v-if="item.baseInfoConfirmState"></h2> -->
      <h2>订单 {{ index + 1 }}</h2>
      <div
        class="box2"
        v-for="(item2, index2) in item.auditCourseStateDtoList"
        :key="index2"
      >
        <div>
          <h3 v-if="item2.state">
            {{
              item2.state == 1
                ? "课程状态: 审课准备中"
                : item2.state == 2
                ? "课程状态: 审课进行中"
                : "课程状态: 转学分进行中"
            }}
          </h3>

          <div class="baseInfoConfirmState" v-if="item2.baseInfoConfirmState">
            {{
              item2.baseInfoConfirmState == 1
                ? "基本信息确认-状态: 已完成"
                : "基本信息确认-状态: 进行中"
            }}
          </div>
          <div v-if="item2.chooseCourseState">
            {{
              item2.chooseCourseState == 1
                ? "选课-状态: 进行中"
                : "选课-状态: 待确认"
            }}
          </div>
          <div v-if="item2.commitAuditCourseState">
            {{
              item2.commitAuditCourseState == 1
                ? "提交审核-状态: 进行中"
                : "提交审核-状态: 已完成"
            }}
          </div>
          <div v-if="item2.creditState">
            {{
              item2.creditState == 1
                ? "转学分-状态: 进行中"
                : "转学分-状态: 已完成"
            }}
          </div>

          <div
            class="box3"
            v-for="(item3, index3) in item2.userCourseList"
            :key="index3"
          >
            <h4 v-if="item3.outlineStatus">
              {{
                item3.outlineStatus == 1
                  ? "大纲确认状态: 未确认"
                  : "大纲确认状态: 已确认"
              }}
            </h4>
            <div class="inline">
              <div>
                选课 {{ index3 + 1 }}
                <span v-if="item3.ownCourseCode">所在学校课程代码</span
                >{{ item3.ownCourseCode }}
              </div>
              <!-- (item3.state == 3?#ffaf19,#333) -->
              <h4>
                课程状态:
                <h4
                  v-if="item3.state"
                  :style="{ color: item3.state == 3 ? '#ffaf19' : '#333' }"
                >
                  {{
                    item3.state == 1
                      ? " 选课待确认"
                      : item3.state == 2
                      ? " 审课进行中"
                      : item3.state == 3
                      ? " 审课通过"
                      : " 审课未通过"
                  }}
                </h4>
              </h4>
            </div>
          </div>
        </div>
        <!-- {{ item2.userCourseList }} -->
      </div>
    </div>
  </div>
</template>

<script>
import { userAuditCourseState } from "@/api/cso";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10
};
export default {
  name: "userAuditCourseState",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: [],
      total: null,
      listLoading: true
    };
  },
  methods: {
    getData() {
      this.listLoading = true;
      userAuditCourseState(this.listQuery).then(res => {
        this.listLoading = false;

        // this.list = res.data.list;
        this.total = res.data.total;

        this.list = res.data.list;
        console.log(this.list, "this.list");
        this.$forceUpdate();
      });
    }
  },
  mounted() {
    this.listQuery.userId = this.$route.query.id;
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.box1 {
  margin: 20px;
  padding: 10px;
  //   background-color: #1abc9c;
  transition: 0.5s;
  display: flex;
  &:hover {
    // transform: scale(1.005);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .box2 {
    // background-color: #2ecc71;
    padding: 20px;
    // display: flex;
    margin-right: 20px;

    .box3 {
      //   display: flex;
    }
  }
}
.inline {
  width: 600px;
  h4 {
    display: inline-block;
  }
  div {
    display: inline-block;
    width: 280px;
  }
}
</style>
