<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
  <a-drawer
    :visible="seevisible"
    class="drawerStyle seestu"
    placement="right"
    width="70%"
    :zIndex="1005"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">查看</div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <a-spin v-if="loading" :spinning="loading" />
      <div v-if="!loading" class="main">
        <div class="stuinfor">
          <div style="display: flex; align-items: center">
            <div class="portrait">
              <img
                style="width: 80px; height: 80px; border-radius: 50%"
                v-if="info?.avatar"
                :src="
                  info?.avatar.includes('upload')
                    ? info?.avatar
                    : '/upload' + info?.avatar
                "
                alt=""
              />
              <img v-else src="../../assets/images/studentimg/character.png" />
            </div>
            <div class="stumation">
              <div class="stuname">{{ info.userNickName }}</div>
              <div class="stugangw">
                {{ info.stdPositionName }}
              </div>
              <div class="stugangw">归属组织： {{ info.orgName }}</div>
            </div>
          </div>
          <div style="display: flex; align-items: center; margin-right: 207px">
            <div class="sortbox" style="margin-left: 34px">
              <div class="sortname">完成必修</div>
              <div class="sortnub">
                <span class="nub1">{{
                  info.requiredCompletionNumber || 0
                }}</span>
                <span class="total">/{{ info.requiredNumber || 0 }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="mainbox">
          <div class="main_title">任务列表</div>
          <a-collapse
            style="border: 1px solid #ddeeff; border-radius: 6px"
            v-model:activeKey="stageListActive"
          >
            <template #expandIcon="{ isActive }">
              <img
                style="margin-right: 20px"
                :src="
                  isActive
                    ? require('../../assets/images/studentimg/open.png')
                    : require('../../assets/images/studentimg/close.png')
                "
              />
              <div></div>
            </template>
          </a-collapse>
          <a-table
            :columns="columns"
            :data-source="info.studentTasksList"
            :pagination="false"
          >
            <template #courseType="{ record }">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <img
                  :src="
                    record.courseType == 1
                      ? require('../../assets/images/leveladd/zai.png')
                      : record.courseType == 2
                      ? require('../../assets/images/leveladd/mian.png')
                      : record.courseType == 3
                      ? require('../../assets/images/leveladd/an.png')
                      : record.courseType == 4
                      ? require('../../assets/images/leveladd/zuo.png')
                      : record.courseType == 5
                      ? require('../../assets/images/leveladd/kao.png')
                      : record.courseType == 6
                      ? require('../../assets/images/leveladd/zhi.png')
                      : record.courseType == 7
                      ? require('../../assets/images/leveladd/wai.png')
                      : record.courseType == 8
                      ? require('../../assets/images/leveladd/tao.png')
                      : record.courseType == 9
                      ? require('../../assets/images/leveladd/huo.png')
                      : record.courseType == 10
                      ? require('../../assets/images/leveladd/ce.png')
                      : record.courseType == 11
                      ? require('../../assets/images/leveladd/diao.png')
                      : record.courseType == 12
                      ? require('../../assets/images/leveladd/tou.png')
                      : record.courseType == 13
                      ? require('../../assets/images/leveladd/xiangmu.png')
                      : null
                  "
                />
                <div style="padding-left: 12px">
                  {{ TASK_TYPE[record.courseType].name }}
                </div>
              </div>
            </template>
            <template #action="{ record }">
              <template
                v-if="
                  (record.completionStatus == 2 ||
                    record.completionStatus == 0) &&
                  checkMenu('growthStudentMarkComplete')
                "
              >
                <a-button type="link" @click="setPermissions(record)"
                  >标记已完成</a-button
                >
              </template>
              <template v-else>
                <div>--</div>
              </template>
            </template>
          </a-table>
        </div>
      </div>
      <div class="btnn">
        <button class="btn2" @click="closeDrawer">关闭</button>
      </div>
    </div>
  </a-drawer>
</template>

<script lang="jsx">
import { reactive, toRefs, watch, ref } from "vue";
import { getGrowStudentDetail, markComplete } from "@/api/growthpath";
import { message } from "ant-design-vue";
import { TASK_TYPE } from "@/utils/constGrown";
import { checkGrowthPer } from "@/utils/utils";
import { checkMenu } from "@/utils/utils";
import dialog from "@/utils/dialog";
export default {
  name: "SeeStu",
  components: {},
  props: {
    permissions: String,
  },
  setup(props, ctx) {
    const state = reactive({
      checked: false,
      seevisible: false,
      loading: false,
      info: {},
      stageListActive: 0,
      TASK_TYPE: TASK_TYPE,
    });
    const columns = ref([
      {
        title: "类型",
        dataIndex: "courseType",
        key: "courseType",
        align: "center",
        width: 120,
        ellipsis: true,
        slots: { customRender: "courseType" },
      },
      {
        title: "任务名称",
        dataIndex: "taskName",
        key: "taskName",
        align: "center",
        width: 200,
        ellipsis: true,
      },
      {
        title: "必修/选修",
        dataIndex: "taskType",
        key: "taskType",
        width: 100,
        align: "center",
        ellipsis: true,
        customRender: ({ record: { taskType } }) =>
          ({
            1: "必修",
            2: "选修",
          }[taskType]),
      },
      {
        title: "学习进度",
        dataIndex: "progress",
        key: "progress",
        width: 90,
        align: "center",
        ellipsis: true,
      },
      {
        title: "开始时间",
        dataIndex: "taskStartTime",
        key: "taskStartTime",
        align: "center",
        customRender: ({ record }) => {
          return record.taskStartTime || "--";
        },
      },
      {
        title: "完成时间",
        dataIndex: "finishTime",
        key: "finishTime",
        align: "center",
        customRender: ({ record }) => {
          return record.taskEndTime || "--";
        },
      },
      {
        title: "任务状态",
        dataIndex: "completionStatus",
        key: "completionStatus",
        width: 100,
        align: "center",
        customRender: ({ record: { completionStatus } }) =>
          ({
            2: "进行中",
            1: "已完成",
            0: "未开始",
          }[completionStatus]),
      },
      {
        title: "操作",
        dataIndex: "operation",
        key: "operation",
        align: "center",
        slots: { customRender: "action" },
      },
    ]);
    const formData = ref();
    const openDrawer = (row) => {
      state.seevisible = true;
      formData.value = row;
      getData();
    };
    const getData = () => {
      state.loading = true;
      getGrowStudentDetail({ id: formData.value.id })
        .then((res) => {
          state.loading = false;
          state.info = res.data.data;
        })
        .catch((err) => {
          state.loading = false;
          message.error(err.data.msg);
        });
    };
    const closeDrawer = () => {
      state.seevisible = false;
    };

    const setPermissions = (row) => {
      dialog({
        content: "确定标记完成该任务？",
        ok: async () => {
          markComplete({ id: row.id }).then((res) => {
            getData();
            message.success("操作成功");
          });
        },
      });
    };
    return {
      ...toRefs(state),
      closeDrawer,
      openDrawer,
      setPermissions,
      columns,
      getData,
      formData,
      checkMenu,
      checkGrowthPer,
    };
  },
};
</script>

<style lang="scss" scoped>
.ant-switch-checked {
  background-color: #5dc988;
}
.seestu {
  .ant-drawer-content-wrapper {
    // max-width: 1000px;
    .ant-drawer-header {
      display: none !important;
    }

    .ant-drawer-body {
      padding: 0;
    }
  }
  .ant-table-row .ant-table-cell {
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    color: #4f5156;
    line-height: 29px;
    padding: 0px;
  }

  .ant-table-thead tr th {
    font-size: 14px;
  }

  .drawerMain {
    min-width: 600px;
    margin: 0px 32px 0px 32px;
    overflow-x: auto;
    display: flex;
    flex-direction: column;

    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // background-color: red;
      margin-bottom: 20px;
      flex-shrink: 0;

      .headerTitle {
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        // margin-left: 24px;
      }
    }

    .main {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding-bottom: 80px;

      .stuinfor {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 133px;
        margin-top: 20px;
        margin-right: 37px;
        background-image: url("../../assets/images/studentimg/bgimg.png");
        background-repeat: no-repeat;
        background-position: right;

        .stumation {
          margin-left: 24px;

          .stuname {
            color: #333333;
            font-size: 18px;
          }

          .stugangw {
            color: #999999;
            font-size: 16px;
            margin-top: 7px;
          }
        }

        .sortbox {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 114px;

          .sortname {
            color: #666660;
            font-size: 14px;
          }

          .sortnub {
            display: flex;
            justify-content: center;
            margin-top: 7px;

            .nub1 {
              color: #0060ff;
              font-size: 22px;
            }

            .total {
              color: #999999;
              font-size: 22px;
            }
          }
        }
      }

      .secondrow {
        margin-top: 32px;
        display: flex;

        .rowleft {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
        }
      }

      .mainbox {
        // height: 463px;
        margin-right: 37px;
        margin-top: 32px;

        //border: 1px solid rgba(221, 238, 255, 1);
        //border-radius: 6px;
        .main_title {
          font-weight: 500;
          font-size: 16px;
          color: #333333;
          margin-bottom: 17px;
        }
        .rowbox {
          width: 64px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 24px;
          border: 1px solid rgba(64, 158, 255, 1);
          background: rgba(64, 158, 255, 0.1);
          margin-right: 480px;
          cursor: pointer;

          .shuom {
            color: rgba(64, 158, 255, 1);
            font-size: 14px;
            line-height: 20px;
            margin-right: 5px;
          }
        }

        .ant-collapse {
          background-color: #ffffff;
          border: 0;
        }

        .ant-collapse-content > .ant-collapse-content-box {
          padding: 0;
          border: 0;
        }

        .ant-collapse > .ant-collapse-item {
          border: 1px solid rgba(221, 238, 255, 1);
          border-radius: 6px;
          margin-bottom: 15px;
          border-bottom: 0px;
        }

        .ant-collapse-content {
          border-top: 0;
        }

        .ant-collapse-header {
          display: flex;
          align-items: center;
          height: 56px;
          background-color: rgba(240, 246, 252, 1);
          font-size: 16px;
          color: rgba(51, 51, 51, 1);
          font-weight: 500;
        }

        .rowclass {
          height: 81px;
          border-bottom: 1px solid rgba(221, 238, 255, 1);
          display: flex;
          justify-content: space-between;
          align-items: center;
          .begin_time {
            min-width: 126px;
            .text1 {
              height: 22px;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 22px;
            }
          }
          .leftclass {
            display: flex;
            margin-left: 25px;
            align-items: center;

            .text1 {
              color: #000000;
              font-size: 14px;
              font-weight: 500;
              margin-left: 25px;
              word-break: keep-all;
              white-space: nowrap;
            }

            .text2 {
              width: 170px;
              max-width: 170px;
              color: rgba(51, 51, 51, 0.8);
              font-size: 14px;
              margin-left: 65px;
              word-break: keep-all;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .biit {
            width: 70px;
            margin-right: 27px;
            .altext {
              height: 22px;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              line-height: 22px;
            }
          }
          .alreadyclass {
            display: flex;
            margin-right: 30px;

            .alimg {
              height: 16px;
              width: 16px;
            }

            .altext {
              color: rgba(56, 125, 247, 1);
              font-size: 14px;
              margin-left: 16px;
              word-break: keep-all;
              white-space: nowrap;
            }
          }
        }
      }
    }

    .btnn {
      height: 72px;
      width: 100%;
      position: absolute;
      bottom: 0;
      background-color: #fff;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);

      .btn2 {
        cursor: pointer;
        width: 100px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        border: 0;
        margin-left: 15px;
        color: #fff;
      }
    }
  }
}
</style>
