<!---- 创建项目页面 --->
<template>
  <div class="projectAdd">
    <div class="header">
      <span class="title">创建/编辑单层项目</span>
      <div
        @click="backPage"
        style="cursor: pointer"
        to="/projectmanage"
        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="projectName"
              placeholder="请输入项目名称"
              show-count
              :maxlength="30"
              :disabled="viewDetail ? true : false"
            />
          </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">
            <a-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect"
              placeholder="请选择分类"
              style="width: 100%"
              :options="classifyList"
              @change="classificationChange"
              allowClear
              showSearch
              :disabled="viewDetail ? true : false"
              :fieldNames="{
                label: 'dictName',
                value: 'dictCode',
              }"
            >
            </a-select>
          </div>
        </div>
        <div class="name">
          <div class="namebox">
            <img
              class="nameimg"
              src="../../assets/images/basicinfo/asterisk.png"
            />
            <div class="inname">封面图</div>
          </div>
          <div
            class="box"
            style="
              width: 100px;
              height: 100px;
              border: 1px solid rgba(78, 166, 255, 1);
              border-radius: 5px;
              cursor: pointer;
              position: relative;
              overflow: hidden;
            "
          >
            <img
              style="
                width: 100px;
                height: 100px;
                margin-bottom: 4px;
                margin-right: 4px;
              "
              v-if="imageUrl"
              :src="imageUrl"
              alt="avatar"
            />
            <!-- <a-upload
              v-model:file-list="fileList"
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              action="/api/file/upload"
              :before-upload="beforeUpload"
              @change="handleChange"
              :disabled="viewDetail ? true : false"
            >
              <img
                style="
                  width: 100px;
                  height: 100px;
                  margin-bottom: 4px;
                  margin-right: 4px;
                "
                v-if="imageUrl"
                :src="imageUrl"
                alt="avatar"
              />
              <div v-else>
                <div class="box1"></div>
                <div class="box2"></div>
              </div>
            </a-upload> -->
          </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
              separator="至"
              :placeholder="['      开始时间', '        结束时间']"
              v-model:value="rangevalue"
              style="width: 100%; height: 40px; border-radius: 5px"
              @change="onRangeChange"
              :disabled="viewDetail ? true : false"
            />
          </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-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect1"
              placeholder="请选择项目经理"
              style="width: 100%"
              :options="classifyList1"
              @change="classificationChange1"
              allowClear
              showSearch
              mode="multiple"
              :disabled="viewDetail ? true : false"
              @popupScroll="memberScroll"
              @search="getMember"
            >
            </a-select>
          </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">
            <a-tree-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect2"
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="自动带出 可修改"
              allow-clear
              :tree-data="classifyList2"
              :fieldNames="{
                children: 'treeChildList',
                label: 'name',
                value: 'id',
              }"
              :disabled="viewDetail ? true : false"
              @change="classificationChange2"
              dropdownClassName="treeDropdown"
            >
              <!-- <template #title="{ value: val, title }">
      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
      <template v-else>{{ title }}</template>
    </template> -->
            </a-tree-select>
            <!-- <a-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect2"
              placeholder="自动带出 可修改"
              :options="classifyList2"
              @change="classificationChange2"
              :field-names="{ label: 'name', value: 'id', options: 'children' }"
              :disabled="viewDetail ? true : false"
            /> -->
          </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="remark"
              style="height: 80px"
              placeholder="请输入说明"
              show-count
              :maxlength="200"
              :disabled="viewDetail ? true : false"
            />
          </div>
        </div>
        <div class="name name2">
          <div class="namebox">
            <div class="inname">同步学习记录</div>
          </div>
          <div class="in">
            <a-radio
              @click="changeChecked"
              v-model:checked="checked"
              :disabled="viewDetail ? true : false"
              ><span
                style="
                  width: 100%;
                  color: rgba(109, 117, 132, 1);
                  font-size: 14px;
                "
                >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自动免修该课程）</span
              ></a-radio
            >
          </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">
            <a-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect3"
              :options="classifyList3"
              style="width: 100%"
              @change="classificationChange3"
              placeholder="请选择项目级别"
              :disabled="viewDetail ? true : false"
              :fieldNames="{
                label: 'dictName',
                value: 'dictCode',
              }"
            />
          </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">
            <a-select
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect4"
              :options="classifyList4"
              style="width: 100%"
              @change="classificationChange4"
              placeholder="请选择培训分类"
              :disabled="viewDetail ? true : false"
              :fieldNames="{
                label: 'dictName',
                value: 'dictCode',
              }"
            />
          </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
              @click="changeChecked1"
              v-model:checked="checked1"
              :disabled="viewDetail ? true : false"
              ><span
                style="
                  width: 100%;
                  color: rgba(109, 117, 132, 1);
                  font-size: 14px;
                "
                >BOEU实施</span
              ></a-radio
            >
          </div>
        </div>
        <!-- <div class="name name2">
					<div class="namebox" style="margin-top: 8px">
						<img class="nameimg" src="../../assets/images/basicinfo/asterisk.png" />
						<div class="inname">附件</div>
					</div>
					<div class="filebox">
						<div>
							<img v-if="fileList1.length < 6" class="fileimg" src="../../assets/images/projectadd/enclosure.png" />
							<a-upload :disabled="fileList1.length > 5" :before-upload="beforeUpload1" v-model:file-list="fileList1"
								@remove="removeFile" name="file" action="/api/file/upload" :headers="headers" @change="handleChange1">
								<span v-if="fileList1.length > 5" class="filetext">上传数量已经达到最大值</span>
								<span v-else class="filetext">上传附件</span>
							</a-upload>
						</div>
						<div class="support">
							支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
						</div>
					</div>
				</div> -->
      </div>
      <!-- 2022-11-30注释 后面放开 -->
      <!-- <div class="template">
        <div class="name">
          <div class="inname" style="width: 50px">模版</div>
          <div class="in select" style="margin-left: 2px">
            <a-select
              v-if="isEdit"
              disabled="true"
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect5"
              placeholder="请选择模版"
              :size="size"
              style="width: 100%"
              :options="classifyList5"
              @change="classificationChange5"
            >
            </a-select>
            <a-select
              v-else
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body;
                }
              "
              v-model:value="classifySelect5"
              placeholder="请选择模版"
              :size="size"
              style="width: 100%"
              :options="classifyList5"
              @change="classificationChange5"
              @popupScroll="templateScroll"
            >
            </a-select>
          </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>
import { reactive, toRefs, ref, onUnmounted, computed } from "vue";
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import * as api from "../../api/index";
import * as api1 from "../../api/index1";
import { storage } from "../../api/storage";
import { toDate, scrollLoad } from "../../api/method";
import { useStore } from "vuex";
export default {
  name: "projectAdd",
  setup() {
    const store = useStore();
    // 编辑页面跳转过来时候，自动填充表格
    const routers = useRoute();
    const router = useRouter();
    const state = reactive({
      classifySelect: null, //分类选择信息
      projectType: null, //分类选择的id
      checked: false, //同步学习记录
      checked1: false, //BOEU实施
      classifySelect1: [], //选中项目经理名称数组
      classifySelect2: null, //选中的资源归属信息
      classifySelect3: null, //选中的项目级别信息
      classifySelect4: null, //选中的培训分类信息
      rangevalue: [], //项目时间

      currentPage: 1, //当前页
      tableDataTotal: -1, //模版列表总数
      pageSize: 10, //每页10条数据
      totalPages: 0, //总页数
      viewDetail: routers.query.viewDetail ? routers.query.viewDetail : null,

      currentPage1: 1, //项目经理
      pageSize1: 10, //项目经理
    });
    //分类列表
    const classifyList = ref([]);

    //项目封面
    const imageUrl = ref("");
    // 项目级别
    const classifyList3 = ref([
      // { value: 1, label: "集团级" },
    ]);

    // 培训分类
    const classifyList4 = ref([
      // { value: 1, label: "集团级" },
    ]);
    //获取分类、封面图、项目级别、培训分类-----------字典配置-------------------------------
    const getDictList = (param) => {
      let obj = {
        pageNo: 1,
        pageSize: 20,
        setCode: param,
      };
      api1
        .getDict(obj)
        .then((res) => {
          console.log("获取字典成功", res);
          if (res.status === 200) {
            if (param === "projectClass") {
              classifyList.value = res.data.data.rows;
            }
            if (param === "projectPic") {
              if (res.data.data.rows.length > 0) {
                imageUrl.value = res.data.data.rows[0].dictValue;
                picUrl = res.data.data.rows[0].dictValue;
              }
            }
            if (param === "projectLevel") {
              classifyList3.value = res.data.data.rows;
            }
            if (param === "projectSys") {
              classifyList4.value = res.data.data.rows;
            }
            if (
              classifyList.value &&
              imageUrl.value &&
              classifyList3.value &&
              classifyList4.value
            ) {
              getDictInfo();
            }
          }
        })
        .catch((err) => {
          console.log("获取字典失败", err);
        });
    };
    getDictList("projectClass");
    getDictList("projectPic");
    getDictList("projectLevel");
    getDictList("projectSys");
    //获取分类、封面图、项目级别、培训分类---------------字典配置---------------------------
    //分类、封面图、项目级别、培训分类回显
    const getDictInfo = () => {
      if (routers.query.projectId) {
        // console.log("classifyList", classifyList.value, state.projectType);
        //         //分类
        //         let arr=classifyList.value
        //         for(let i=0;i<arr.length;i++){
        // if(arr[i].){
        // }
        //         }
        //    state.classifySelect: null, //分类选择信息
        // state.projectType: null, //分类选择的id
        //imageUrl.value //封面图
        //levels.value //项目级别
        //state.classifySelect3 //项目级别
        //state.classifySelect4 //培训分类
        //systemid.value //培训分类id
      }
    };
    //分类、封面图、项目级别、培训分类回显

    const isEdit = ref(false);
    let peojectID = ""; //项目id
    console.log("store.state.orgtreeList", store.state.orgtreeList);
    const editProject = () => {
      if (routers.query.projectId) {
        storage.set("projectAddId", routers.query.projectId);
        isEdit.value = true;
        peojectID = routers.query.projectId;
        // 需要编辑
        api
          .getProjectDetail({ projectId: routers.query.projectId })
          .then((res) => {
            if (res.status == 200 && res.data.code == 200) {
              let info = res.data.data.projectInfo;
              console.log(
                "classifyList.value.find(item=>item.dictCode===info.category)",
                classifyList.value.find((item) => {
                  if (item.dictCode == 11) {
                    return item.dictName;
                  }
                  // return item.dictName;
                }),
                classifyList.value,
                info.category
              );

              console.log(info);
              // projectName classifySelect imageUrl * classifySelect1 * remark checked classifySelect3 classifySelect4 changeChecked1 *
              projectName.value = info.name; //项目名称
              // state.classifySelect =classifyList.value.find(item=>item.dictCode===info.category) ; // info.category 项目分类
              state.projectType = 1; //分类选择的id

              imageUrl.value = info.picUrl; //封面图

              let start = toDate(info.beginTime / 1000, "YYYY/MM/DD"); //开始时间
              let end = toDate(info.endTime / 1000, "YYYY/MM/DD"); //结束时间
              state.rangevalue = [
                dayjs(start, "YYYY/MM/DD"),
                dayjs(end, "YYYY/MM/DD"),
              ];

              let manageName = info.manager.split(","); //项目经理
              let manageValue = info.managerId.split(","); //项目经理id数组
              let optionsManage = [];
              for (let i = 0; i < manageName.length; i++) {
                let obj = {
                  label: manageName[i],
                  value: manageValue[i],
                };
                optionsManage.push(obj);
              }
              console.log(optionsManage);
              state.classifySelect1 = optionsManage;
              state.classifySelect2 =
                classifyList2.value[info.sourceBelongId - 1];
              remark.value = info.remark;
              state.checked = info.boeFlag ? info.boeFlag : false;
              state.classifySelect3 = classifyList3.value[info.level];
              state.classifySelect4 = classifyList4.value[info.systemId - 1];
              state.checked1 = info.boeFlag ? info.boeFlag : false;
              // fileList1.value = info.attach.split(",");

              picUrl = info.picUrl;
              beginTime = Number(info.beginTime / 1000);
              endTime = Number(info.endTime / 1000);
              manager = info.manager;
              managerId = info.managerId;
              sourceBelongIdC = Number(info.sourceBelongId);
              courseSyncFlag = info.courseSyncFlag;
              levels = info.level;
              systemid = info.systemId;
              boeFlag = info.boeFlag;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        if (storage.get("projectAddId")) {
          isEdit.value = true;
          peojectID = storage.get("projectAddId");
          // 需要编辑
          api
            .getProjectDetail({ projectId: storage.get("projectAddId") })
            .then((res) => {
              if (res.status == 200 && res.data.code == 200) {
                let info = res.data.data.projectInfo;
                console.log("我是从本地存储获取的id", info);
                projectName.value = info.name;
                state.classifySelect = classifyList.value[1]; // info.category 分类选择的信息
                state.projectType = 1; //分类选择的id
                imageUrl.value = info.picUrl;

                let start = toDate(info.beginTime / 1000, "YYYY/MM/DD");
                let end = toDate(info.endTime / 1000, "YYYY/MM/DD");
                state.rangevalue = [
                  dayjs(start, "YYYY/MM/DD"),
                  dayjs(end, "YYYY/MM/DD"),
                ];

                let manageName = info.manager.split(",");
                let manageValue = info.managerId.split(",");
                let optionsManage = [];
                for (let i = 0; i < manageName.length; i++) {
                  let obj = {
                    label: manageName[i],
                    value: manageValue[i],
                  };
                  optionsManage.push(obj);
                }
                console.log(optionsManage);
                state.classifySelect1 = optionsManage;
                state.classifySelect2 =
                  classifyList2.value[info.sourceBelongId - 1];
                remark.value = info.remark;
                state.checked = info.boeFlag ? info.boeFlag : false;
                state.classifySelect3 = classifyList3.value[info.level];
                state.classifySelect4 = classifyList4.value[info.systemId - 1];
                state.checked1 = info.boeFlag ? info.boeFlag : false;

                picUrl = info.picUrl;
                beginTime = Number(info.beginTime / 1000);
                endTime = Number(info.endTime / 1000);
                manager = info.manager;
                managerId = info.managerId;
                sourceBelongIdC = Number(info.sourceBelongId);
                courseSyncFlag = info.courseSyncFlag;
                levels = info.level;
                systemid = info.systemId;
                boeFlag = info.boeFlag;
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      }
    };
    editProject();

    const backPage = () => {
      storage.remove("projectAddId");
      setTimeout(() => {
        router.push({
          path: "/projectmanage",
        });
      }, 400);
    };

    const projectName = ref(""); //项目名称

    //选择分类
    const classificationChange = (value) => {
      console.log(`selected ${value}`);
      state.projectType = value; //分类选择的id
    };

    function getBase64(img, callback) {
      const reader = new FileReader();
      reader.addEventListener("load", () => callback(reader.result));
      reader.readAsDataURL(img);
    }

    const fileList = ref([]);
    const fileList1 = ref([]);
    const loading = ref(false);

    let picUrl = ""; //项目封面

    const handleChange = (info) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        console.log("上传图片返回的信息 %o", info);
        picUrl = info.file.response.data;
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url) => {
          imageUrl.value = base64Url;
          loading.value = false;
        });
      }
      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    };

    let uplodaFileCount = false;

    let attach = "";
    let attachData = "";
    const handleChange1 = (info) => {
      if (info.file.status === "uploading") {
        loading.value = true;
        return;
      }
      if (info.file.status === "done") {
        console.log(
          "上传附件返回的信息 %o",
          info,
          info.fileList.length,
          uplodaFileCount
        );

        let attachStr = "";
        attachData = info.fileList;
        for (let i = 0; i < attachData.length; i++) {
          if (attachData.length - 1 == i) {
            attachStr += attachData[i].response.data;
          } else {
            attachStr += attachData[i].response.data + ",";
          }
        }
        console.log(attachStr);
        attach = attachStr;

        if (info.fileList.length > 5) {
          uplodaFileCount = true;
        } else {
          uplodaFileCount = false;
        }
      }
      if (info.file.status === "error") {
        loading.value = false;
        message.error("upload error");
      }
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 1;
      if (!isLt2M) {
        message.error("Image must smaller than 1MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    const beforeUpload1 = () => {
      return new Promise((resovle, reject) => {
        if (uplodaFileCount) {
          message.info("上传文件数量已达最大数量");
          return reject(false);
        }
        return resovle(true);
      });
    };

    let beginTime = "";
    let endTime = "";
    const dateFormatList = ["YYYY/MM/DD"];

    const onRangeChange = (value, dateString) => {
      console.log("Selected Time: ", value);
      // 项目时间选择函数
      console.log("Formatted Selected Time: ", dateString);
      console.log(
        "Formatted Selected TimeStamp",
        new Date(dateString[0]).getTime()
      );
      beginTime = new Date(dateString[0]).getTime() / 1000;
      endTime = new Date(dateString[1]).getTime() / 1000;
    };
    // 项目经理 后续接口调用
    const classifyList1 = ref([]);
    //获取学员
    const getMember = (e) => {
      console.log("state.classifySelect1", e, state.classifySelect1);
      api1
        .getMemberInfo({
          pageNo: state.currentPage1,
          pageSize: state.pageSize1,
          keyWord: e ? e : "",
        })
        .then((res) => {
          if (res.data.code === 200) {
            let arr = res.data.data.rows;
            let array = classifyList1.value;
            arr.map((value) => {
              let obj = {
                value: value.id,
                label: value.realName,
              };
              array.push(obj);
            });
            classifyList1.value = array;
            console.log("获取学员", res.data, classifyList1.value);
            // classifyList1.value = res.data.data.rows;
            // state.tableDataTotal = res.data.data.total;
            // return res.data.data.rows;
          }
        });
    };
    getMember();

    //学员滚动加载信息
    const memberScroll = (e) => {
      // console.log("滚动", e, b);
      let num = scrollLoad(e);
      if (num === 1) {
        state.currentPage1 = 1;
      } else if (num === 2) {
        // 如果滑到底部，则加载下一页
        state.currentPage1++;
        getMember();
      }
    };

    //选择处理项目经理
    let manager = "";
    let managerId = "";
    const classificationChange1 = (key, options) => {
      console.log(`selected ${key}`, options);
      let mstr = "";
      let midstr = "";
      for (let i = 0; i < key.length; i++) {
        if (key.length - 1 !== i) {
          midstr += key[i] + ",";
          mstr += classifyList1.value[i].label + ",";
        } else {
          midstr += key[i];
          mstr += classifyList1.value[i].label;
        }
      }
      console.log(mstr, midstr);
      state.classifySelect1 = options;
      let newoptions = [];
      for (let i = 0; i < state.classifySelect1.length; i++) {
        if (state.classifySelect1[i].value) {
          newoptions.push(state.classifySelect1[i]);
        }
      }
      state.classifySelect1 = newoptions;
      manager = mstr;
      managerId = midstr;
    };

    // 资源归属 sourceBelongId 后续给接口
    const classifyList2 = computed(() => {
      return store.state.orgtreeList ? store.state.orgtreeList : ref([]);
    });

    let sourceBelongIdC = "";
    const classificationChange2 = (key) => {
      console.log(`selected ${key}`, classifyList2);
      sourceBelongIdC = key;
    };

    //选择项目级别
    let levels = "";
    const classificationChange3 = (key) => {
      console.log(`selected ${key}`, classifyList3);
      levels = key;
    };

    //选择培训分类
    let systemid = "";
    const classificationChange4 = (key) => {
      console.log(`selected ${key}`, classifyList4);
      systemid = key;
    };

    // 模版
    const classifyList5 = ref([
      // { value: 1, label: "模版一" },
      // { value: 2, label: "模版二" },
      // { value: 3, label: "模版三" },
      // { value: 4, label: "模版四" },
    ]);
    const classificationChange5 = (key) => {
      console.log(`selected ${key}`, classifyList5.value);
      //获取模版信息
      let obj = {
        projectTemplateId: Number(key),
      };
      api
        .getTemplateDetail(obj)
        .then((res) => {
          console.log("获取模版详情", res);
          if (res.status === 200) {
            let info = res.data.data.projectTemplateInfo;
            console.log(info);
            // projectName classifySelect imageUrl * classifySelect1 * remark checked classifySelect3 classifySelect4 changeChecked1 *
            projectName.value = info.name;
            state.classifySelect = classifyList.value[1]; // info.category  分类选择的信息
            state.projectType = 1; //分类选择的id

            imageUrl.value = info.picUrl;

            let start = toDate(info.beginTime / 1000, "YYYY/MM/DD");
            let end = toDate(info.endTime / 1000, "YYYY/MM/DD");
            state.rangevalue = [
              dayjs(start, "YYYY/MM/DD"),
              dayjs(end, "YYYY/MM/DD"),
            ];

            let manageName = info.manager.split(",");
            let manageValue = info.managerId.split(",");
            let optionsManage = [];
            for (let i = 0; i < manageName.length; i++) {
              let obj = {
                label: manageName[i],
                value: manageValue[i],
              };
              optionsManage.push(obj);
            }
            console.log(optionsManage);
            state.classifySelect1 = optionsManage;
            state.classifySelect2 =
              classifyList2.value[info.sourceBelongId - 1];
            remark.value = info.remark;
            state.checked = info.boeFlag ? info.boeFlag : false;
            state.classifySelect3 = classifyList3.value[info.level];
            state.classifySelect4 = classifyList4.value[info.systemId - 1];
            state.checked1 = info.boeFlag ? info.boeFlag : false;
            // fileList1.value = info.attach.split(",");

            picUrl = info.picUrl;
            beginTime = Number(info.beginTime / 1000);
            endTime = Number(info.endTime / 1000);
            manager = info.manager;
            managerId = info.managerId;
            sourceBelongIdC = Number(info.sourceBelongId);
            courseSyncFlag = info.courseSyncFlag;
            levels = info.level;
            systemid = info.systemId;
            boeFlag = info.boeFlag;
          }
        })
        .catch((err) => {
          console.log("获取详情失败", err);
        });
    };
    //获取模版列表
    const getTemplate = () => {
      let obj = {
        pageNo: state.currentPage,
        pageSize: state.pageSize,
        // projectId:id?id:''
      };
      api
        .getTemplate(obj)
        .then((res) => {
          console.log("获取模版列表", res);
          state.totalPages = Number(res.data.data.pages);
          if (res.status === 200) {
            let arr = res.data.data.rows;
            let array = classifyList5.value;
            arr.map((value) => {
              let obj = {
                value: value.projectTemplateId,
                label: value.name,
              };
              array.push(obj);
            });
            classifyList5.value = array;
          }
        })
        .catch((err) => {
          console.log("获取模版列表失败", err);
        });
    };
    getTemplate();
    //模版滚动加载模板信息
    const templateScroll = (e) => {
      // console.log("滚动", e, b);
      let num = scrollLoad(e);
      if (num === 1) {
        state.currentPage = 1;
      } else if (num === 2) {
        // 如果滑到底部，则加载下一页
        state.currentPage++;
        getTemplate();
      }
    };

    // 项目说明
    const remark = ref("");

    //同步学习记录------------------------------------
    let courseSyncFlag = 0;
    const changeChecked = () => {
      console.log(state.checked);
      state.checked ? (state.checked = false) : (state.checked = true);
      courseSyncFlag = state.checked ? 1 : 0;
    };
    //同步学习记录------------------------------------
    //BOEU实施--------------------------------------
    let boeFlag = 0;
    const changeChecked1 = () => {
      console.log(state.checked1);
      state.checked1 ? (state.checked1 = false) : (state.checked1 = true);
      boeFlag = state.checked1 ? 1 : 0;
    };
    //BOEU实施--------------------------------------

    const removeFile = (file) => {
      const index = fileList1.value.indexOf(file);
      const newFileList = fileList1.value.slice();
      newFileList.splice(index, 1);
      fileList1.value = newFileList;

      let attachStr = "";
      if (newFileList.length == 0) {
        attachStr = "";
      }
      for (let i = 0; i < fileList1["value"].length; i++) {
        console.log(fileList1["value"][i].response.data);
        if (fileList1["value"].length - 1 == i) {
          attachStr += fileList1["value"][i].response.data;
        } else {
          attachStr += fileList1["value"][i].response.data + ",";
        }
      }
      attach = attachStr;
    };

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

    const createProject = () => {
      console.log("我是否要编辑项目", isEdit.value);
      if (isEdit.value) {
        console.log("我要编辑项目", peojectID);
        let obj = {
          projectId: Number(peojectID),
          name: projectName["value"],
          category: state.projectType, //分类选择的id
          picUrl: picUrl,
          beginTime: beginTime,
          endTime: endTime,
          manager: manager,
          managerId: managerId,
          sourceBelongId: sourceBelongIdC,
          remark: remark["value"],
          courseSyncFlag: courseSyncFlag,
          level: levels,
          systemId: systemid,
          boeFlag: boeFlag,
          attach: attach,
          type: 3,
          templateId: 0,
          parentId: 0,
          notice: "",
          noticeFlag: 0,
          status: 0,
        };

        console.log(obj);

        for (let i in errorMsgs) {
          console.log(obj[i]);
          if (obj[i] === "" || obj[i] === undefined) {
            message.destroy();
            message.warning(errorMsgs[i]);
            return;
          }
        }

        api
          .createProject(obj)
          .then((res) => {
            console.log(res);
            if (res.status == 200 && res.data.code == 200) {
              message.destroy();
              message.success("编辑成功");
              setTimeout(() => {
                router.push({
                  path: "/projectmanage",
                });
              }, 1000);
            } else {
              message.destroy();
              message.error("编辑失败，请检查当前网络状态。");
            }
          })
          .catch((err) => {
            console.log(err);
            message.destroy();
            message.error("编辑失败，请检查当前网络状态。");
          });
      } else {
        let obj = {
          name: projectName["value"],
          category: state.projectType, //分类选择的id
          picUrl: picUrl,
          beginTime: beginTime,
          endTime: endTime,
          manager: manager,
          managerId: managerId,
          sourceBelongId: sourceBelongIdC,
          remark: remark["value"],
          courseSyncFlag: courseSyncFlag,
          level: levels,
          systemId: systemid,
          boeFlag: boeFlag,
          attach: attach,
          type: 3,
          templateId: 10,
          parentId: 0,
          notice: "",
          noticeFlag: 0,
          status: 0,
        };
        console.log("提交的数据格式 %o", obj);
        for (let i in errorMsgs) {
          console.log(obj[i]);
          if (obj[i] === "" || obj[i] === undefined) {
            message.destroy();
            message.warning(errorMsgs[i]);
            return;
          }
        }

        api
          .createProject(obj)
          .then((res) => {
            console.log(res);
            if (res.status == 200 && res.data.code == 200) {
              message.destroy();
              message.success("创建成功");
              setTimeout(() => {
                router.push({
                  path: "/taskpage",
                  query: { id: res.data.data.projectId },
                });
              }, 1000);
            } else {
              message.destroy();
              message.error("创建失败，请检查当前网络状态。");
            }
          })
          .catch((err) => {
            console.log(err);
            message.destroy();
            message.error("创建失败，请检查当前网络状态。");
          });
      }
    };

    onUnmounted(() => {
      storage.remove("projectAddId");
    });
    return {
      ...toRefs(state),
      projectName,
      classifyList,
      classificationChange,
      classificationChange1,
      classificationChange2,
      classificationChange3,
      classificationChange4,
      classificationChange5,
      fileList,
      fileList1,
      loading,
      imageUrl,
      handleChange,
      handleChange1,
      beforeUpload,
      beforeUpload1,
      onRangeChange,
      classifyList1,
      classifyList2,
      classifyList3,
      classifyList4,
      classifyList5,
      remark,
      changeChecked,
      changeChecked1,
      uplodaFileCount,
      createProject,
      removeFile,

      isEdit,
      backPage,
      dateFormatList,

      templateScroll,
      memberScroll,
      getMember,
    };
  },
};
</script>
<style lang="scss">
.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: #409eff;
        color: #ffffff;
        margin-right: 14px;
      }

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

    .text {
      color: rgba(153, 155, 163, 1);
      font-size: 14px;
      margin-left: 223px;
    }
  }
}
.treeDropdown {
  // width: 240px !important;
  // border-radius: 5px;
  // min-height: 600px !important;
  .ant-select-tree-list-scrollbar {
    width: 5px !important;
    .ant-select-tree-list-scrollbar-thumb {
      background-color: #4ea6ff !important;
    }
  }
  .ant-select-tree-indent-unit {
    width: 7px !important;
  }
}
</style>
