<template>
  <!-- 编辑弹窗 -->
  <div>
    <a-modal
      :visible="editHs"
      :title="null"
      @ok="closeModal"
      :footer="null"
      :closable="false"
      wrapClassName="set_edit"
      width="679px"
      @cancel="edit_exit"
    >
      <div
        class="modalHeader"
        style="
          width: 100%;
          height: 68px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div class="headerLeft" style="margin-left: 32px">
          <span style="width: 15px; height: 15px"
            ><img src="../../assets/images/taskpage/edit.png"
          /></span>
          <span
            class="headerLeftText"
            style="font-size: 16px; margin-left: 10px"
            >编辑</span
          >
        </div>
        <div style="cursor: pointer; margin-right: 32px" @click="closeModal">
          <img
            style="width: 22px; height: 22px"
            src="../../assets/images/basicinfo/close.png"
          />
        </div>
      </div>
      <div class="modalMain">
        <div class="projectname">基本信息</div>
        <div class="setbody">
          <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="projectName"
                style="width: 424px; height: 32px"
                placeholder="请输入项目名称"
                maxlength="20"
              />
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">直播封面：</span>
            </div>
            <div class="lodalimg">
              <div class="lodalcenter">
                <span style="color: #448ef7; margin-right: 10px">+</span>
                <span style="color: #448ef7">添加图片</span>
              </div>
            </div>
          </div>
          <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-range-picker
                style="width: 424px"
                :placeholder="['      开始时间', '        结束时间']"
              />
            </div>
          </div>
          <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-select
                dropdownClassName="dropdown-style"
                style="width: 424px"
                placeholder="请选择项目经理"
                :options="options1"
                allowClear
                showSearch
              />
            </div>
          </div>
          <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="inputV1"
                style="width: 424px; height: 32px"
                placeholder="自动带出 可修改"
                maxlength="20"
              />
            </div>
          </div>
          <div class="main_item2">
            <div class="signbox">
              <span style="margin-right: 3px">项目说明：</span>
            </div>
            <div class="textarea">
              <a-textarea
                v-model:value="textV1"
                placeholder="请输入说明"
                allow-clear
                maxlength="150"
              />
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <span style="margin-right: 3px">同步学习记录：</span>
            </div>
            <div class="btnbox">
              <a-radio-group v-model:value="radioV1">
                <a-radio v-model:checked="checked" :value="1" @click="cloradio1"
                  >同步课程学习记录（如学员在课程库中拥有课程的学习记录，自由免修改课程）
                </a-radio>
              </a-radio-group>
            </div>
          </div>
          <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="inputV1"
                style="width: 424px; height: 32px"
                placeholder="集团级/组织级/现地级/部门级"
                maxlength="20"
              />
            </div>
          </div>
          <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="inputV1"
                style="width: 424px; height: 32px"
                placeholder="集团级/组织级/现地级/部门级"
                maxlength="20"
              />
            </div>
          </div>
          <div class="main_item">
            <div class="signbox">
              <div class="sign">
                <img
                  src="@/assets/images/coursewareManage/asterisk.png"
                  alt=""
                />
              </div>
              <span style="margin-right: 3px">是否BOEU实施：</span>
            </div>
            <div class="btnbox">
              <a-radio-group v-model:value="radioV2">
                <a-radio v-model:checked="checked" :value="1" @click="cloradio2"
                  >BOEU实施</a-radio
                >
              </a-radio-group>
            </div>
          </div>
        </div>

        <div class="pubtn">
          <a-button class="pubtn1" @click="closeModal">取消</a-button>
          <a-button class="pubtn2" @click="closeModal">发布</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
// import {getTask} from "../../api/indexTaskadd"
// import dayjs from "dayjs";
// import {message} from "ant-design-vue"
// import { toDate } from "@/api/method";

export default {
  name: "projSet",
  props: {
    editHs: {
      type: Boolean,
      default: false,
    },
    projectId: {
      type: String,
      default: null,
    },
  },
  setup(props, ctx) {
    //console.log("学习路径",props.isStudiscuss);
    const state = reactive({});
    const closeModal = () => {
      ctx.emit("update:editHs", false);
      console.log("projectId", props.projectId);
    };
    return {
      ...toRefs(state),
      closeModal,
    };
  },
};
</script>

<style lang="scss" >
.set_edit {
  .ant-modal {
    width: 866px !important;
    height: 870px !important;

    .ant-modal-body {
      .modalHeader {
        background: linear-gradient(
          rgba(78, 166, 255, 0.2) 0%,
          rgba(78, 166, 255, 0) 100%
        );
      }

      padding: 0;

      .modalHeader {
        background: linear-gradient(
          0deg,
          rgba(78, 166, 255, 0) 0%,
          rgba(78, 166, 255, 0.2) 100%
        );
      }

      .modalMain {
        .projectname {
          color: rgba(79, 81, 86, 1);
          font-size: 14px;
          line-height: 36px;
          margin-left: 62px;
          font-weight: 500;
          margin-bottom: 24px;
        }

        .setbody {
          margin-left: 67px;

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

            .signbox {
              width: 130px;
              display: flex;
              justify-content: end;
              align-items: center;
              white-space: nowrap;

              .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;

            .signbox {
              width: 130px;
              display: flex;
              justify-content: end;
              align-items: center;
              white-space: nowrap;

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

            .lodalimg {
              width: 120px;
              height: 120px;
              border: 1px dashed #387df7;
              display: flex;
              justify-content: center;
              align-items: center;
              cursor: pointer;

              .lodalimg {
                display: flex;
                white-space: nowrap;
              }
            }

            .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 {
                display: flex;
                flex-wrap: wrap;
                margin-top: 10px;
                margin-bottom: 24px;

                .timerbox {
                  margin-top: 6px;
                  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;
              }
            }
          }
        }

        .pubtn {
          display: flex;
          justify-content: center;
          margin-top: 25px;

          //margin-bottom: 29px;
          .pubtn1 {
            width: 100px;
            height: 40px;
            margin-right: 16px;
            margin-bottom: 29px;
            border: 1px solid #4ea6ff;
            border-radius: 4px;
            color: rgba(78, 166, 255, 1);
            font-size: 14px;
            //line-height: 36px;
            align-items: center;
            background: rgba(255, 255, 255, 1);
          }

          .pubtn2 {
            width: 100px;
            height: 40px;
            margin-bottom: 29px;
            border: 1px solid #4ea6ff;
            border-radius: 4px;
            color: #ffffff;
            font-size: 14px;
            align-items: center;
            //line-height: 36px;
            background: #4ea6ff;
          }
        }
      }
    }
  }
}
</style>