<!--
 * @Description: 我的技能培训 => 技能培训详情 => 成绩和证书
 * @Author: 空白格
 * @Date: 2022-08-26 16:50:09
 * @LastEditors: 空白格
 * @LastEditTime: 2022-08-30 10:07:36
 * @FilePath: \veterans_client_web\src\views\PersonalCenter\SkillTraining\SkillsTrainingDetails\AchievementCertificate\AchievementCertificateIndex.vue
 * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
-->
<template>
  <div class="certificate">
    <BannerBreadcrumb title="成绩与证书" :breadcrumb="true" :isRouter="true" />
    <section class="wrap-r u-flex u-col-top certificate-wrap">
      <section class="certificate-list">
        <div class="title">成绩与证书</div>
        <div class="list u-flex u-flex-wrap u-row-between" v-if="total >= 1">
          <div
            class="list-item"
            :class="{ even: (index + 1) % 2 == 0 }"
            v-for="(item, index) in dataList"
            :key="item.id"
          >
            <div class="up">
              <div class="examName">{{ item.examName }}</div>
              <div class="score">{{ item.score }}</div>
              <div class="fullScore">(满分{{ item.fullScore }})</div>
              <div class="certificateName" v-if="item.certificateName">
                获得<br />
                {{ item.certificateName }}
                ({{ getCertificateGradeName(item.grade) }})
              </div>
              <el-image
                v-if="item.imgUrl.length > 0"
                class="images"
                :src="item.imgUrl.split(',')[0]"
                :preview-src-list="item.imgUrl.split(',')"
              >
              </el-image>
            </div>
            <div class="down u-flex">
              <div class="passDate u-flex-1">{{ item.passDate }}</div>
              <div class="btns u-flex-1">
                <span class="del" @click="delCertificate(item.id)">删除</span>
              </div>
            </div>
          </div>
        </div>
        <el-empty v-else description="暂无数据"></el-empty>
        <!-- <div class="pagination" v-if="total>queryParams.pageSize">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="queryParams.pageSize"
            :total="total"
            @current-change="currentChange"
          />
        </div> -->
      </section>
      <section class="certificate-form">
        <div class="title">+ 录入</div>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="考试名称：" prop="examName">
            <el-input v-model="form.examName"></el-input>
          </el-form-item>
          <el-form-item label="证书名称：" prop="certificateName">
            <el-input v-model="form.certificateName"></el-input>
          </el-form-item>
          <el-form-item label="成绩" prop="score">
            <el-input v-model="form.score"></el-input>
          </el-form-item>
          <el-form-item label="满分" prop="fullScore">
            <el-input v-model="form.fullScore"></el-input>
          </el-form-item>
          <el-form-item label="证书等级" prop="grade">
            <el-select v-model="form.grade" placeholder="请选择证书等级">
              <el-option
                v-for="item in gradeList"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通过日期：" prop="passDate">
            <div style="display: inline-block">
              <el-date-picker
                v-model="form.passDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择通过日期"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="上传照片" prop="imgUrl">
            <div class="inner-wrap">
              <el-upload
                class="uploader logo-uploader"
                :action="upAction"
                accept="image/*"
                multiple
                :show-file-list="true"
                :on-success="fileUploadSuccess"
                :on-remove="fileRemove"
                :limit="2"
                list-type="picture"
                :file-list="fileList"
              >
                <img
                  v-if="logoTempImg"
                  :src="logoTempImg"
                  class="uploader-img"
                />
                <i v-else class="el-icon-plus uploader-icon"></i>
                <div class="text">上传照片</div>
              </el-upload>
            </div>
          </el-form-item>
          <div class="btn" @click="submitForm">提交</div>
        </el-form>
      </section>
    </section>
  </div>
</template>

<script>
import BannerBreadcrumb from "@/components/BannerBreadcrumb";
import {
  getCertificateList,
  deleteCertificate,
  addCertificate,
  getCertificate,
} from "@/api/Certificate";
import { getDictData } from "@/api/Dict";
export default {
  name: "",
  components: { BannerBreadcrumb },
  data() {
    return {
      upAction: process.env.VUE_APP_BASE_API + "/file/upload/single/minio",
      skillTrainId: "",
      fileList: [],
      logoTempImg: "",
      gradeList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      imgUrlArr: [],
      form: {
        skillTrainId: "",
        examName: "",
        score: "",
        fullScore: "",
        passDate: "",
        certificateName: "",
        imgUrl: "",
      },
      rules: {
        examName: [
          { required: true, message: "请输入考试名称", trigger: "blur" },
        ],
        certificateName: [
          { required: true, message: "请输入证书名称", trigger: "blur" },
        ],
        score: [{ required: true, message: "请输入成绩", trigger: "blur" }],
        fullScore: [{ required: true, message: "请输入满分", trigger: "blur" }],
        passDate: [
          { required: true, message: "请选择通过日期", trigger: "blur" },
        ],
        grade: [{ required: true, message: "请选择证书等级", trigger: "blur" }],
        imgUrl: [
          { required: true, message: "请上传证书图片", trigger: "blur" },
        ],
      },
      total: 0,
      loading: false,
      dataList: [],
    };
  },
  created() {
    this.form.skillTrainId = this.$route.query.id;
    this.getDataList();
    this.getCertificateGrade();
  },
  methods: {
    /**
     * 获取证书等级
     */
    getCertificateGrade() {
      getDictData({ key: "certificate_grade" }).then((res) => {
        if (res.code == 200) {
          this.gradeList = res.data.map((item) => {
            return {
              ...item,
              value: item.text,
            };
          });
        }
      });
    },
    /**
     * 获取证书等级名称
     * @param {Object} value
     */
    getCertificateGradeName(value) {
      let name;
      this.gradeList.forEach((item) => {
        if (item.value == value) {
          name = item.label;
        }
      });
      return name;
    },
    // fileUploadSuccess(res, file) {
    //   // console.log("file", file);
    //   this.form.imgUrl = '';
    //   this.imgUrlArr = [];
    //   this.imgUrlArr.push(res.data.url,);
    //   this.form.imgUrl  =  this.imgUrlArr.toString();
    // },
    fileUploadSuccess(response, file, fileList) {
      let that = this;
      this.form.imgUrl = "";
      this.imgUrlArr = [];
      for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index].response.data;
        that.imgUrlArr.push(element.url);
      }
      this.form.imgUrl = this.imgUrlArr.toString();
    },
    fileRemove(file, fileList) {
      let that = this;
      this.form.imgUrl = "";
      this.imgUrlArr = [];
      for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index].response.data;
        that.imgUrlArr.push(element.url);
      }
      this.form.imgUrl = this.imgUrlArr.toString();
    },
    getDataList() {
      this.loading = true;
      getCertificateList(
        Object.assign(this.queryParams, {
          skillTrainId: this.form.skillTrainId,
        })
      ).then((res) => {
        this.dataList = res.data;
        this.total = res.data.length;
        this.loading = false;
      });
    },
    /**
     * 分页切换
     * @date 2022-08-12
     * @param {any} page
     * @returns {any}
     */
    // currentChange(page) {
    //   this.queryParams.pageNum = page;
    //   this.getDataList();
    // },
    resetFields() {
      this.$refs["form"].resetFields();
      this.fileList = [];
      this.form.imgUrl = "";
      this.imgUrlArr = [];
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addCertificate(this.form)
            .then((res) => {
              this.$message.success(res.msg);
              this.resetFields();
              this.getDataList();
            })
            .catch((err) => {
              console.log("addCertificate err", err);
              this.$message.error(err.msg);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    delCertificate(id) {
      this.$confirm("您确认删除该证书吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteCertificate({ skillTrainId: id })
          .then((res) => {
            console.log("res", res);
            this.$message.success(res.msg);
            this.getDataList();
          })
          .catch((err) => {
            console.log("deleteCertificate err", err);
            this.$message.error(err.msg);
          });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.certificate {
  overflow: hidden;
}
.wrap-r {
  box-sizing: border-box;
  background: #fff;
  padding: 20px;
  width: 70%;
  margin: 23px auto;
}
.title {
  font-size: 20px;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 24px;
}
.certificate-wrap {
  padding: 0;
  width: 1200px;
  background-color: #f4f4f4;
  .certificate-list {
    background-color: #fff;
    flex: 1;
    padding: 20px;
    margin-right: 20px;
    box-sizing: border-box;
    .list {
      &-item {
        width: 240px;
        margin-bottom: 24px;
        box-sizing: border-box;
        text-align: center;
        color: #fff;
        background: #fe5862;
        &.even {
          background: #fe9c37;
        }
        .up {
          position: relative;
          padding: 30px 20px 0;
          box-sizing: border-box;
          height: 314px;
          background: url(@/assets/images/certificate-bg.png) no-repeat;
          background-size: 200px 246px;
          background-position: 52px 100px;

          .images {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            opacity: 0;
          }
          .examName {
            font-size: 20px;
            height: 80px;
            overflow: hidden;
          }
          .score {
            font-size: 60px;
            line-height: 1;
            margin-bottom: 5px;
          }
          .fullScore {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.4);
            margin-bottom: 45px;
          }
          .certificateName {
            font-size: 14px;
          }
        }
        .down {
          height: 44px;
          background: rgba(255, 255, 255, 0.4);
          .btns {
            .del {
              display: inline-block;
              padding: 0 15px;
              border-radius: 24px;
              height: 24px;
              line-height: 24px;
              text-align: center;
              background: rgba(255, 255, 255, 0.7);
              color: #fe5862;
              font-size: 14px;
              cursor: pointer;
            }
          }
        }
      }
    }
  }
  .certificate-form {
    background-color: #fff;
    width: 380px;
    padding: 20px;
    box-sizing: border-box;
  }
}

.el-form {
  // .el-form-item{
  //   margin-bottom: 10px;
  // }
  .btn {
    background: #709078;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    margin-bottom: 20px;
    cursor: pointer;
    letter-spacing: 1.2px;
  }
}

.logo-uploader :deep(.el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  //   float: left;
  & + .uploader {
    margin-left: 20px;
  }
  .text {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .el-upload:hover {
    border-color: #409eff;
  }
  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .uploader-img {
    width: 100px;
    height: 100px;
    display: block;
  }
}
// .pagination {
//   text-align: center;
//   margin-top: 20px;
//   :deep(.el-pager .active) {
//     background-color: #ff3939;
//   }
//   :deep(.el-pagination.is-background
//       .el-pager
//       li:not(.disabled).active) {
//     background-color: #ff3939;
//   }
// }
</style>
