<!---- 创建模板页面 --->
<template>
  <div class="projectAdd">
    <div class="header">
      <span class="title">创建/编辑单层模板</span>
      <div
          @click="backPage"
          style="cursor: pointer"
          to="/libraryAdd"
          class="goback"
      >
        <span class="return"></span><span class="returntext">返回</span>
      </div>
    </div>
    <div class="content">
      <div class="main">
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">模板名称</div>
          </div>
          <div class="in">
            <a-input
                v-model:value="projectInfo.name"
                placeholder="请输入模板名称"
                show-count
                :maxlength="30"
            />
          </div>
        </div>
        <div class="name" style="align-items: flex-start">
          <div class="namebox" style="margin-top: 10px">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">封面图</div>
          </div>
          <div class="in select" style="display: flex">
            <div
                :class="`box ${projectInfo.picUrl === src.value ? 'active' : ''}`"
                style="
                width: 100px;
                height: 100px;
                border-radius: 5px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
              "
                v-for="(src, index) in projectPic"
                :key="index"
                @click="() => (projectInfo.picUrl = src.value)"
            >
              <img
                  style="
                  width: 100px;
                  height: 100px;
                  margin-bottom: 4px;
                  margin-right: 4px;
                "
                  :src="src.value"
                  alt="avatar"
              />
            </div>
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">项目时间</div>
          </div>

          <div class="in">
            <a-range-picker
                show-time
                separator="至"
                :placeholder="['      开始时间', '        结束时间']"
                v-model:value="projectInfo.rangeTime"
                style="width: 100%; height: 40px; border-radius: 5px"
                valueFormat="YYYY-MM-DD HH:mm"
                @change="timeChange"
            />
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">项目经理</div>
          </div>
          <div class="in">
            <ProjectManager
                v-model:value="projectInfo.managerId"
                v-model:name="projectInfo.manager"
                @onChange="managerChange"
                mode="multiple"
            ></ProjectManager>
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">资源归属</div>
          </div>

          <div class="in select">
            <OrgClass
                v-model:value="projectInfo.sourceBelongId"
                v-model:name="projectInfo.sourceBelongName"
            ></OrgClass>
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">项目级别</div>
          </div>
          <div class="in select">
            <ProjectLevel v-model:value="projectInfo.level"></ProjectLevel>
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">培训体系</div>
          </div>
          <div class="in select">
            <TrainClass v-model:value="projectInfo.systemId"></TrainClass>
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
                class="nameimg"
                src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">是否BOEU实施</div>
          </div>
          <div class="in">
            <a-radio-group v-model:value="projectInfo.boeFlag">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </div>
        </div>
        <div class="name name2">
          <div class="namebox">
            <div class="inname">同步学习记录</div>
          </div>
          <div class="in">
            <a-checkbox
                v-model:checked="courseSyncFlag"
                :disabled="viewDetail ? true : false"
            ><span
                style="
                  width: 100%;
                  color: rgba(109, 117, 132, 1);
                  font-size: 14px;
                "
            >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
            ></a-checkbox
            >
          </div>
        </div>
        <div class="name name2">
          <div class="namebox">
            <div class="inname" style="margin-top: 13px">模板说明</div>
          </div>
          <div class="in">
            <a-textarea
                v-model:value="projectInfo.remark"
                style="height: 80px"
                placeholder="请输入说明"
                show-count
                :maxlength="200"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="btn">
        <a-button v-on:click="createProject" type="primary" class="btn1"
        >确定
        </a-button>
        <a-button @click="backPage" class="btn2">取消</a-button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {useStore} from "vuex";
import {ref, onMounted, watch} from "vue";
import {message} from "ant-design-vue";
import {useRouter, useRoute} from "vue-router";
import * as api from "../../api/indexTemplate";
import TrainClass from "@/components/project/TrainClass";
import OrgClass from "@/components/project/OrgClass";
import ProjectManager from "@/components/project/ProjectManagerNew";
import ProjectLevel from "@/components/project/ProjectLevel";
import dayjs from "dayjs";
const route = useRoute();
const router = useRouter();
const store = useStore();
const projectInfo = ref({});
const projectPic = ref([]);
const courseSyncFlag = ref(false)
onMounted(() => {
  getDetail();
  projectPic.value = store.state.projectPic.map((e) => ({
    value: e.dictValue,
    label: e.dictName,
  }));
});

watch(
    () => route.query.projectTemplateId,
    () => {
      getDetail();
    }
);

const getDetail = () =>
    route.query.projectTemplateId &&
    api.templateDetail(route.query.projectTemplateId).then((res) => {
      projectInfo.value = res.data.data.projectTemplateInfo;
      projectInfo.value.rangeTime = [dayjs(projectInfo.value.beginTime).format("YYYY-MM-DD HH:mm"),
        dayjs(projectInfo.value.endTime).format("YYYY-MM-DD HH:mm"),
      ];
      projectInfo.value.courseSyncFlag = !!projectInfo.value.courseSyncFlag
    });

const backPage = () => {
  router.back();
};

function timeChange(e) {
  if (e && e.length === 2) {
    projectInfo.value.beginTime = dayjs(e[0]).format("YYYY-MM-DD HH:mm"), 
    projectInfo.value.endTime =dayjs(e[1]).format("YYYY-MM-DD HH:mm")
  }
}

const errorMsgs = {
  name: "请输入模板名称",
  category: "请选择模板分类",
  picUrl: "请上传项目封面图",
  beginTime: "请选择项目开始时间",
  endTime: "请选择项目结束时间",
  manager: "请选择项目经理",
  managerId: "请选择项目经理",
  sourceBelongId: "请选择资源归属",
  level: "请填写项目级别",
  systemId: "请填写项目培训体系",
  boeFlag: "请选择是否BOE实施",
};

const createProject = () => {
  for (let i in errorMsgs) {
    if (projectInfo.value[i] === "" || projectInfo.value[i] === undefined) {
      message.destroy();
      message.warning(errorMsgs[i]);
      return;
    }
  }
  projectInfo.value.courseSyncFlag = courseSyncFlag.value ? 1 : 0;
  projectInfo.value.beginTime = dayjs(projectInfo.value.beginTime).format("YYYY-MM-DD HH:mm"), 
  projectInfo.value.endTime =dayjs(projectInfo.value.endTime).format("YYYY-MM-DD HH:mm")
  api
      .templateEdit({
        ...projectInfo.value,
        courseSyncFlag: projectInfo.value.courseSyncFlag ? 1 : 0,
      })
      .then(() => {
        message.destroy();
        message.success("编辑成功");
        router.back();
      });
};

function managerChange(e, l, d, t) {
  projectInfo.value.valuesourceBelongId = d;
  projectInfo.value.sourceBelongName = t;
}
</script>
<style lang="scss">
.active {
  border: 2px solid rgba(78, 166, 255, 1);
}

.projectAdd {
  width: 100%;
  // height: inherit;
  // flex: 1;
  // flex-shrink: 0;
  // overflow-y: auto;

  .header {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .title {
      color: #000000;
      font-size: 18px;
      //line-height: 36px;
      padding-top: 30px;
      padding-left: 37px;
      //font-weight: 500;
    }

    .goback {
      padding-right: 70px;
      //padding-top: 37px;
      position: relative;

      .return {
        display: inline-block;
        width: 42px;
        height: 42px;
        margin-top: 17px;
        margin-right: 10px;
        background-image: url("../../assets/images/projectadd/return.png");
      }

      .returntext {
        display: inline-block;
        position: absolute;
        top: 27px;
        color: #4ea6ff;
        font-size: 14px;
      }
    }
  }

  // 修改 antd upload 样式
  .ant-upload {
    border-width: 0px;
  }

  .content {
    display: flex;

    .main {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      float: left;
      border-right: 1px solid rgba(153, 155, 163, 0.3);

      .name {
        width: 78%;
        // background-color: lightcoral;
        display: flex;
        margin-top: 20px;
        align-items: center;

        //height: 40px;
        // border: 1px solid black;
        .namebox {
          width: 120px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          flex-shrink: 0;

          .nameimg {
            width: 10px;
            height: 10px;
          }
        }

        .d {
          margin-top: 8px;
          font-size: 25px;
          color: #ff4e4e;
        }

        .box {
          position: relative;
          margin-left: 14px;

          .box1 {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50px;
            margin-left: -25px;
            margin-top: -5px;
            border-top: 2px solid rgba(78, 166, 255, 1);
          }

          .box2 {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 50px;
            //margin-left: -5px;
            margin-top: -25px;
            border-left: 2px solid rgba(78, 166, 255, 1);
          }
        }

        .inname {
          color: #6f6f6f;
          font-size: 14px;
          margin-left: 7px;
        }

        .in {
          margin-left: 14px;
          flex: 1;

          // .ant-radio-wrapper {
          // }
          .ant-input-textarea-show-count {
            position: relative;
            height: 88px;
          }

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

          .ant-input {
            border-radius: 8px;
            // height: 120%;
            width: 100%;
            height: 40px;
          }

          .ant-input-affix-wrapper {
            padding: 0 11px;
            border-radius: 8px;
          }

          .ant-select-selector {
            border-radius: 5px;
            // height: 120%;
            width: 100%;
            // height: 40px;
          }
        }

        .filebox {
          margin-left: 14px;
          flex: 1;

          .fileimg {
            width: 15px;
            height: 15px;
            margin-right: 6px;
          }

          .filetext {
            font-size: 14px;
            font-weight: 400;
            color: #4ea6ff;
            line-height: 36px;
          }

          .support {
            font-size: 14px;
            font-weight: 400;
            color: #999ba3;
            line-height: 36px;
            margin-top: 8px;
            word-break: break-all;
          }
        }
      }

      .name2 {
        display: flex;
        align-items: flex-start;

        .ant-input-textarea {
          .ant-input {
            height: 88px;
          }
        }
      }
    }

    .template {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      //justify-content: center;
      float: right;

      .name {
        width: 78%;
        // background-color: lightcoral;
        display: flex;
        margin-top: 20px;
        align-items: center;
        height: 40px;

        // border: 1px solid black;
        .d {
          margin-top: 8px;
          font-size: 25px;
          color: #ff4e4e;
        }

        .inname {
          color: #6f6f6f;
          font-size: 14px;
          margin-left: 7px;
          width: 65px;
        }

        .in {
          margin-left: 14px;
          width: 81%;

          .ant-input {
            border-radius: 5px;
            // height: 120%;
            width: 100%;
            height: 40px;
          }

          .ant-select-selector {
            border-radius: 5px;
            // height: 120%;
            width: 100%;
            height: 40px;
          }
        }
      }
    }
  }

  .footer {
    width: 100%;
    margin-top: 31px;
    margin-bottom: 14px;
    padding-bottom: 20px;

    .btn {
      display: flex;
      justify-content: center;

      .btn1 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 40px;
        border-radius: 8px;
        background: #4ea6ff;
        color: #ffffff;
        margin-right: 14px;
      }

      .btn2 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #4ea6ff;
        background: #ffffff;
        color: #4ea6ff;
      }
    }

    .text {
      color: rgba(153, 155, 163, 1);
      font-size: 14px;
      margin-left: 223px;
    }
  }
}
</style>
  