<template>
  <a-drawer
    :visible="ACertificate"
    class="drawerStyle AddCertificate"
    width="80%"
    title="添加证书"
    placement="right"
    @after-visible-change="afterVisibleChange"
  >
    <div class="drawerMain">
      <div class="header">
        <div class="headerTitle">
          {{ ACertificateEditId ? "编辑" : "添加" }}证书
        </div>
        <img
          style="width: 29px; height: 29px; cursor: pointer"
          src="../../../assets/images/basicinfo/close.png"
          @click="closeDrawer"
        />
      </div>
      <div class="contentMain">
        <div class="main_left">
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">证书名称：</span>
            </div>
            <div class="btnbox">
              <a-input
                v-model:value="certificateName"
                style="width: 400px; height: 40px; border-radius: 8px"
                placeholder="请输入证书名称"
                maxlength="20"
              />
            </div>
          </div>
          <div class="main_item" style="align-items: flex-start">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">证书封面：</span>
            </div>
            <div
              class="btnbox"
              style="flex-direction: column; align-items: flex-start"
            >
              <a-upload
                v-model:file-list="fileList"
                name="file"
                style="width: 200px"
                list-type="picture-card"
                class="avatar-uploader"
                :headers="headers"
                :show-upload-list="false"
                :before-upload="beforeUpload"
              >
                <img
                  v-if="imageUrl"
                  :src="imageUrl"
                  alt="avatar"
                  style="width: 170px; height: 200px"
                />
                <div v-else>
                  <loading-outlined v-if="loading"></loading-outlined>
                  <plus-outlined v-else></plus-outlined>
                  <div class="ant-upload-text">+</div>
                </div>
              </a-upload>
              <div style="font-size: 14px; color: #666">
                建议尺寸：750*348 格式支持jpg、gif、png、jpeg、svg、bmp
              </div>
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">证书说明：</span>
            </div>
            <div class="textarea" style="width: 400px">
              <a-textarea
                v-model:value="certificateRemark"
                placeholder="请输入证书说明"
                allow-clear
                :rows="8"
                show-count
                :maxlength="200"
              />
            </div>
          </div>

          <div class="main_item" style="margin-bottom: 16px">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span
                style="
                  margin-right: 3px;
                  font-size: 16px;
                  color: #333;
                  font-size: 14px;
                "
                >设置获得条件</span
              >
            </div>
            <div class="btnbox"></div>
          </div>

          <div
            class="main_item"
            style="
              border: 1px solid rgba(0, 0, 0, 0.1);
              margin-left: 35px;
              padding-top: 30px;
              margin-top: 0px;
            "
          >
            <div class="signbox" style="width: 30px">
              <span
                style="margin-right: 3px; font-size: 16px; color: #333"
              ></span>
            </div>
            <div class="btnbox">
              <a-radio-group
                v-model:value="condition"
                @change="selectCondition"
              >
                <a-radio v-model:checked="checked" :value="1">
                  完成项目
                  <a-popover>
                    <template #content>
                      <div
                        style="font-size: 12px; color: rgba(153, 153, 153, 1)"
                      >
                        后续新增自动包括
                      </div>
                    </template>
                    <img
                      style="width: 16px; height: 16px"
                      src="../../../assets/images/project/tishi.png"
                    />
                  </a-popover>
                </a-radio>

                <br />
                <div
                  style="
                    height: 60px;
                    margin-left: 24px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <a-radio-group
                    v-model:value="large"
                    size="small"
                    @change="selectlarge"
                    :disabled="condition !== 1"
                  >
                    <a-radio-button value="1">全部任务</a-radio-button>
                    <a-radio-button value="2">完成必修任务</a-radio-button>
                  </a-radio-group>
                </div>
                <a-radio v-model:checked="checked" :value="2">
                  完成阶段
                </a-radio>
                <br />
                <div
                  style="
                    height: 60px;
                    margin-left: 24px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <a-select
                    ref="select"
                    size="small"
                    placeholder="请选择阶段"
                    v-model:value="selectStageName"
                    style="width: 120px"
                    @focus="focus"
                    @change="selectStage"
                    :options="stageList"
                    :fieldNames="{
                      key: 'id',
                      title: 'name',
                      value: 'name',
                    }"
                    :disabled="condition !== 2"
                  >
                  </a-select>
                </div>
                <a-radio v-model:checked="checked" :value="3">
                  完成任务
                </a-radio>
                <br />
                <div
                  style="
                    height: 60px;
                    margin-left: 24px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <a-select
                    ref="select"
                    size="small"
                    placeholder="请选择任务"
                    v-model:value="selectTaskName"
                    style="width: 120px"
                    @focus="focus"
                    @change="selectTask"
                    :options="taskList"
                    :fieldNames="{
                      key: 'id',
                      title: 'name',
                      value: 'name',
                    }"
                    :disabled="condition !== 3"
                  >
                  </a-select>
                </div>
                <a-radio v-model:checked="checked" :value="4">
                  考试合格
                </a-radio>
                <br />
                <div
                  style="
                    height: 60px;
                    margin-left: 24px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <a-select
                    ref="select"
                    size="small"
                    placeholder="请选择考试"
                    v-model:value="selectExamName"
                    style="width: 120px"
                    @focus="focus"
                    @change="selectExam"
                    :options="examList"
                    :fieldNames="{
                      key: 'id',
                      title: 'name',
                      value: 'name',
                    }"
                    :disabled="condition !== 4"
                  >
                  </a-select>
                </div>
                <a-radio v-model:checked="checked" :value="5">
                  获得积分
                </a-radio>
                <br />
                <div
                  style="
                    height: 60px;
                    margin-left: 24px;
                    display: flex;
                    align-items: center;
                  "
                >
                  <div
                    style="
                      font-size: 14px;
                      font-weight: 400;
                      color: #333333;
                      line-height: 20px;
                      margin-right: 5px;
                    "
                  >
                    高于
                  </div>
                  <a-input-number
                    id="inputNumber"
                    v-model:value="score"
                    :min="1"
                    :max="projectPoints"
                    style="width: 70px"
                    :disabled="condition !== 5"
                  />
                  <div
                    style="
                      font-size: 14px;
                      font-weight: 400;
                      color: #333333;
                      line-height: 20px;
                      margin-left: 5px;
                    "
                  >
                    分可获得，当前项目积分为 {{ projectPoints }} 分
                  </div>
                </div>
                <br />
                <div style="height: 40px"></div>
              </a-radio-group>
            </div>
          </div>
        </div>
      </div>
      <div class="main_btns">
        <button class="btn2" @click="closeDrawer">取消</button>
        <button class="btn2" @click="saveupdatecertificate">确定</button>
      </div>
    </div>
  </a-drawer>
  <!-- 创建证书抽屉 -->
  <CreateCertificate v-model:CCertificate="CCertificate" />
</template>
<script>
import { reactive, toRefs } from "vue";
import CreateCertificate from "../../../components/drawers/project/CreateCertificate";
import { message } from "ant-design-vue";
import * as api from "@/api/index1";
import { fileUp } from "../../../api/indexEval";
import {getCookieForName} from "@/api/method";
export default {
  name: "AddCertificate",
  components: {
    CreateCertificate,
  },
  props: {
    projectId: {
      type: Number,
      default: null,
    },
    ACertificateEdit: {
      //  是否为编辑
      type: Boolean,
      default: null,
    },
    ACertificate: {
      type: Boolean,
      default: false,
    },
    getCertificate: {
      type: Function,
      default: null,
    },
    ACertificateEditId: {
      type: Number,
      default: null,
    },
  },
  setup(props, ctx) {
    const state = reactive({
      certificateName: null, //证书名称
      imageUrl: null, //证书封面
      imageName: null,
      certificateRemark: null, //证书说明
      condition: null, //选择条件

      CCertificate: false,

      large: null, //选择项目里的全部任务或必修任务

      stageList: [], //阶段列表
      taskList: [], //任务列表
      examList: [], //考试列表
      selectStageName: null,
      selectStageId: null,
      selectTaskName: null,
      selectTaskId: null,
      selectExamName: null,
      selectExamId: null,
      score: null, //积分
      projectPoints: 0,

      fileType: ["jpg", "jpeg", "png", "gif", "svg", "bmp"],
    });
    const headers = { token: getCookieForName("token") };

    const reset = () => {
      state.certificateName = null;
      state.certificateRemark = null;
      state.imageUrl = null;
      state.imageName = null;
      state.condition = null;
      state.CCertificate = false;
      state.stageList = [];
      state.taskList = [];
      state.examList = [];
      state.selectStageName = null;
      state.selectStageId = null;
      state.selectTaskName = null;
      state.selectTaskId = null;
      state.selectExamName = null;
      state.selectExamId = null;
      state.score = null;
    };

    const closeDrawer = () => {
      ctx.emit("update:ACertificate", false);
      ctx.emit("update:ACertificateEdit", false);
      reset();
    };
    const afterVisibleChange = (bool) => {
      if (bool && props.ACertificateEdit) {
        console.log("是编辑");
        getcertificate();
      }
      if (bool) {
        getStageList();
        getTaskList();
        getTaskExam();
        allPoints();
      }
    };
    //获取项目积分
    const allPoints = () => {
      let obj = {
        projectId: props.projectId,
      };
      api
        .allPoints(obj)
        .then((res) => {
          if (res.data.code === 200) {
            console.log("获取项目总积分", res);
            state.projectPoints = res.data.data;
          }
        })
        .catch((err) => {
          console.log("获取总积分失败", err);
        });
    };
    //获取阶段
    const getStageList = () => {
      let obj = {
        projectId: props.projectId,
      };
      api
        .getStageList(obj)
        .then((res) => {
          console.log("获取阶段列表", res);
          if (res.data.code === 200) {
            state.stageList = res.data.data;
          }
        })
        .catch((err) => {
          console.log("获取阶段列表失败", err);
        });
    };
    //获取任务
    const getTaskList = (exam) => {
      let obj = {
        projectId: props.projectId,
        type: exam ? 5 : 0,
      };

      api
        .getTaskList(obj)
        .then((res) => {
          console.log("获取任务列表", res);
          if (res.data.code === 200) {
            if (exam) {
              state.examList = res.data.data;
            } else {
              state.taskList = res.data.data;
            }
          }
        })
        .catch((err) => {
          console.log("获取任务列表失败", err);
        });
    };
    //获取考试
    const getTaskExam = () => {
      getTaskList(true);
    };
    //选择阶段
    const selectStage = (e, k) => {
      console.log("选择阶段", e, k);
      state.selectStageName = e;
      state.selectStageId = k.id;
      state.selectTaskName = null;
      state.selectTaskId = null;
      state.selectExamName = null;
      state.selectExamId = null;
    };
    //选择任务
    const selectTask = (e, k) => {
      console.log("选择任务", e, k);
      state.selectStageName = null;
      state.selectStageId = null;
      state.selectTaskName = e;
      state.selectTaskId = k.id;
      state.selectExamName = null;
      state.selectExamId = null;
    };
    //选择考试
    const selectExam = (e, k) => {
      console.log("选择考试", e, k);
      state.selectStageName = null;
      state.selectStageId = null;
      state.selectTaskName = null;
      state.selectTaskId = null;
      state.selectExamName = e;
      state.selectExamId = k.id;
    };
    //选择的获得条件
    const selectCondition = (e) => {
      state.condition = e.target.value;
      state.large = null;
      state.selectStageName = null;
      state.selectStageId = null;
      state.selectTaskName = null;
      state.selectTaskId = null;
      state.selectExamName = null;
      state.selectExamId = null;
      state.score = null;
    };
    const selectlarge = (e) => {
      state.large = e.target.value;
    };
    // 创建证书
    function CreateCertificate() {
      state.CCertificate = true;
    }

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/svg" ||
        file.type === "image/bmp" ||
        file.type === "image/gif";
      if (!isJpgOrPng) {
        message.error("仅支持jpg、gif、png、jpeg、svg、bmp格式!");
        return false;
      }

      let isLt1M = file.size / 10240 / 10240 <= 1;
      if (!isLt1M) {
        this.$message.error("图片大小超过10MB!");
        return false;
      }

      const formDatas = new FormData();
      formDatas.append("file", file);
      fileUp(formDatas).then((res) => {
        if (res.data.code === 200) {
          console.log(file);
          state.imageUrl = process.env.VUE_APP_FILE_PATH + res.data.data;
          state.imageName = process.env.VUE_APP_FILE_PATH + res.data.data;
        }
      });
      return false;
    };

    //查看证书
    const getcertificate = () => {
      let obj = {
        id: Number(props.ACertificateEditId),
      };
      console.log("传参", obj);
      api
        .certificatedetail(obj)
        .then((res) => {
          console.log("获取证书详情", res);
          if (res.data.code === 200) {
            let info = res.data.data;
            state.certificateName = info.name; //证书名称
            state.imageUrl = info.url; //证书封面
            state.certificateRemark = info.remark; //证书说明
            state.condition = info.finishType; //选择条件
            state.large = info.finishType == 1 ? info.finishValue : null; //选择项目里的全部任务或必修任务
            state.selectStageId =
              info.finishType == 2 ? info.finishValue : null;
            state.selectTaskId = info.finishType == 3 ? info.finishValue : null;
            state.selectExamId = info.finishType == 4 ? info.finishValue : null;
            state.score = info.finishType == 5 ? info.finishValue : null; //积分
            let timer = setInterval(() => {
              if (
                state.stageList.length !== 0 ||
                state.taskList.length !== 0 ||
                state.examList.length !== 0
              ) {
                if (info.finishType == 2) {
                  let stageItem = state.stageList.filter((item) => {
                    return item.id == info.finishValue;
                  });
                  state.selectStageName = stageItem ? stageItem[0].name : null;
                }
                if (info.finishType == 3) {
                  let taskItem = state.taskList.filter((item) => {
                    return item.id == info.finishValue;
                  });
                  state.selectTaskName = taskItem ? taskItem[0].name : null;
                }
                if (info.finishType == 4) {
                  let taskItem = state.examList.filter((item) => {
                    return item.id == info.finishValue;
                  });
                  console.log("taskItem", taskItem);
                  state.selectExamName = taskItem ? taskItem[0].name : null;
                }
                clearInterval(timer);
              }
            }, 1000);
          }
        })
        .catch((err) => {
          console.log("获取证书详情失败", err);
        });
    };
    //添加证书
    const saveupdatecertificate = () => {
      if (!state.certificateName) return message.warning("请输入证书名称");
      if (!state.imageUrl) return message.warning("请上传证书封面");
      if (!state.condition) return message.warning("请设置获得条件");
      if (state.condition == 1 && !state.large)
        return message.warning("请选择完成项目类型");
      if (state.condition == 2 && !state.selectStageName)
        return message.warning("请选择完成阶段");
      if (state.condition == 3 && !state.selectTaskName)
        return message.warning("请选择完成任务");
      if (state.condition == 4 && !state.selectExamName)
        return message.warning("请选择考试");
      if (state.condition == 5 && !state.score)
        return message.warning("请输入积分");
      let obj = {
        pid: props.projectId,
        name: state.certificateName,
        url: state.imageName,
        remark: state.certificateRemark,
        finishType: state.condition,
        finishValue:
          state.condition == 1
            ? state.large
            : state.condition == 2
            ? state.selectStageId
            : state.condition == 3
            ? state.selectTaskId
            : state.condition == 4
            ? state.selectExamId
            : state.condition == 5
            ? state.score
            : "",
        type: 1,
      };
      if (props.ACertificateEdit) {
        console.log("更新证书");
        obj.id = props.ACertificateEditId;
      }

      reset();
      api
        .saveupdatecertificate(obj)
        .then((res) => {
          console.log("新增/编辑成功证书", res);
          if (res.data.code === 200) {
            message.success(
              props.ACertificateEdit ? "证书修改成功" : "证书添加成功"
            );
            props.getCertificate && props.getCertificate();
            closeDrawer();
          }
        })
        .catch((err) => {
          console.log("新增/编辑证书失败", err);
        });
    };
    return {
      ...toRefs(state),
      headers,
      afterVisibleChange,
      closeDrawer,
      selectCondition,
      selectlarge,
      beforeUpload,
      CreateCertificate,
      saveupdatecertificate,
      getStageList,
      getTaskList,
      selectStage,
      selectTask,
      selectExam,
    };
  },
};
</script>
<style lang="scss">
.AddCertificate  > .ant-drawer-content-wrapper  {
  min-width: 800px !important;
  width: 800px !important;
}
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa !important;
}

.xkbtn11 {
  cursor: pointer;
  width: 130px;
  height: 40px;
  background: #4ea6ff;
  border-radius: 8px;
  border: 0;
  margin-right: 8px;
  color: #fff;
  margin-top: 0px;
}

.AddCertificate {
  .drawerMain {
    .header {
      height: 73px;
      border-bottom: 1px solid #e8e8e8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;

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

    .contentMain {
      display: flex;
      justify-content: space-between;

      .ant-input {
        height: 88px;
        width: 384px;
        border-radius: 8px;
      }

      .ant-picker {
        border-radius: 8px;
      }

      .main_left {
        // margin-top: 32px;
        padding-right: 30px;
        flex: 1;
        border-right: 1px solid #e8e8e8;

        .main_item {
          display: flex;
          align-items: center;
          margin-top: 32px;
          margin-bottom: 32px;

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;

            .sign {
              margin-right: 5px;
            }
          }

          .btnbox {
            display: flex;
            flex: 1;
            align-items: center;

            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #4ea6ff;
              border-radius: 8px;
              border: 0;
              margin-right: 8px;
              color: #fff;
            }
          }
        }

        .main_item2 {
          display: flex;
          align-items: flex-start;
          margin-bottom: 32px;

          .textarea {
            width: 400px;

            .ant-input {
              width: 100%;
            }

            .ant-input-textarea-show-count {
              position: relative;
            }

            .ant-input-textarea-show-count::after {
              position: absolute;
              right: 10px;
              bottom: 0px;
            }

            .ant-input {
              border-radius: 8px;
            }
          }

          .signbox {
            width: 120px;
            display: flex;
            justify-content: end;
            align-items: center;

            .sign {
              margin-right: 5px;
            }
          }

          .kqszbox {
            .qdqtbox {
              margin-left: 5px;
              cursor: pointer;
            }

            .qdbtn,
            .qtbtn {
              width: 75px;
              height: 24px;
              background: rgba(56, 139, 225, 0.16);
              border-radius: 2px;
              border: 1px solid #387df7;
              display: flex;
              align-items: center;
              justify-content: center;

              .btntext {
                color: #387df7;
              }
            }

            .setbox {
              flex-wrap: wrap;
              margin-top: 10px;
              margin-bottom: 24px;

              .timerbox {
                margin-top: 22px;
                margin-right: 32px;
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
              }
            }
          }

          .btnbox2 {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .xkbtn {
              cursor: pointer;
              width: 130px;
              height: 40px;
              background: #4ea6ff;
              border-radius: 8px;
              border: 0;
              margin-right: 16px 8px 32px 0;
              color: #fff;
              margin-top: 16px;
              margin-bottom: 60px;
            }
          }
        }
      }
    }

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

      .btn1 {
        width: 100px;
        height: 40px;
        border: 1px solid #4ea6ff;
        border-radius: 8px;
        color: #4ea6ff;
        background-color: #fff;
        cursor: pointer;
      }

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