<template>
  <div class="certificateCenter">
    <div
      style="
        width: 130px;
        height: 40px;
        background: #4ea6ff;
        border-radius: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      "
      @click="showModal"
    >
      新建面授课
    </div>
    <div>
      <a-modal
        v-model:visible="visible"
        title="Title"
        @ok="closeModal"
        :footer="null"
        :closable="false"
        wrapClassName="modalStyle faceModal"
        width="80%"
      >
        <div class="modalHeader">
          <div class="headerLeft">
            <img
              style="width: 17px; height: 18px; margin-right: 8px"
              src="../../assets/images/basicinfo/add.png"
            />
            <span class="headerLeftText">新建面授课</span>
          </div>
          <div style="margin-right: 57px; cursor: pointer">
            <img
              style="width: 22px; height: 22px"
              src="../../assets/images/basicinfo/close22.png"
            />
          </div>
        </div>
        <div class="modalMain">
          <div class="title">课程信息</div>
          <div style="display: flex; margin-top: 10px">
            <div class="modalMainLeft">
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
            </div>
            <div class="modalMainLeft">
              <!-- 投票名称 -->
              <div class="vote">
                <div class="votebox">
                  <img
                    class="voteimg"
                    src="../../assets/images/basicinfo/asterisk.png"
                  />
                  <div class="votename">投票名称：</div>
                </div>
                <div class="modalMainInp">
                  <a-input v-model:value="value" placeholder="请输入投票名称" />
                </div>
              </div>
              <!-- 投票名称 -->
            </div>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, onUnmounted } from "vue";

export default {
  name: "CertificateCenter",
  setup() {
    const state = reactive({
      visible: true,
      loading: false,
      screenHeight: document.body.clientHeight, // 屏幕高度
    });

    const afterVisibleChange = (bool) => {
      console.log("visible", bool);
    };

    const showModal = () => {
      state.visible = true;
    };
    const closeModal = () => {
      state.visible = false;
    };
    const getClientHeight = () => {
      state.screenHeight = document.body.clientHeight;
    };

    onMounted(() => {
      // console.log("11111", 1);
      window.addEventListener("resize", getClientHeight, false);
      // judgeUrl();
    });
    onUnmounted(() => {
      window.removeEventListener("resize", getClientHeight, false);
    });

    return {
      ...toRefs(state),
      afterVisibleChange,
      showModal,
      closeModal,
    };
  },
};
</script>
<style lang="scss">
.certificateCenter {
  width: 100%;
}
.faceModal {
  .ant-modal {
    .modalHeader {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .headerLeft {
        margin-left: 27px;
        display: flex;
        align-items: center;
        .headerLeftText {
          font-size: 16px;
          font-weight: 400;
          color: #000000;
          line-height: 36px;
        }
      }
    }
    .modalMain {
      .title {
        font-size: 14px;
        font-weight: 500;
        color: #4f5156;
        line-height: 36px;
      }
      .modalMainLeft {
        width: 50%;
        height: 300px;
        padding-left: 35px;
        padding-right: 44px;
        // background-color: red;

        .vote {
          display: flex;
          align-items: center;
          padding-bottom: 30px;
          .votebox {
            width: 100px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            // background-color: pink;
            .voteimg {
              width: 10px;
              height: 10px;
              margin-right: 5px;
            }
            .votename {
              font-size: 14px;
              font-weight: 400;
              color: #333333;
              line-height: 20px;
            }
          }
          .modalMainInp {
            flex: 1;
          }
        }
      }
      .modalMainRight {
        width: 50%;
        height: 300px;
        background-color: pink;
      }
    }
  }
}
</style>
