<!-- 课件管理页面 -->
<template>
  <!-- 预览弹窗 -->
  <a-modal
    :visible="visible"
    title="查看"
    :footer="null"
    :closable="false"
    wrapClassName="modalStyle lookCourseModal"
    width="80%"
    @cancel="handleCancel"
    @ok="handleCancel"
  >
    <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
          @click="handleCancel"
          style="width: 22px; height: 22px"
          src="@/assets/images/basicinfo/close22.png"
        />
      </div>
    </div>
    <div class="modalMain">
      <div class="faceteach">
        <div class="ft_main">
          <div class="m_body">
            <div class="mb_left">
              <div class="mbl_items">
                <div class="item_nam">
                  <div class="asterisk_icon">
                    <img
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt="img"
                    />
                  </div>
                  <span style="margin-right: 14px">课程名称：</span>
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    <!-- {{ faceDetailObj !== null ? faceDetailObj.name : "" }} -->
                  </div>
                </div>
              </div>
              <!-- <div class="i2_cz">
                <div class="i2_top">
                  <div
                    class="i2_right"
                    @click="hideShow"
                    style="cursor: pointer"
                  >
                    <div class="b_icon"></div>
                  </div>
                </div>
              </div> -->
              <div class="mbl_items2">
                <div class="item_nam">
                  <div class="asterisk_icon">
                    <img
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt="img"
                    />
                  </div>
                  <span style="margin-right: 14px">封面图：</span>
                </div>
                <img
                  ref="heroImg"
                  alt="img"
                  style="width: 100px; height: 100px"
                />
                <!-- <div class="item_inp"></div> -->
              </div>
              <div class="mbl_items">
                <div class="item_nam">
                  <div class="asterisk_icon">
                    <img
                      style="width: 10px; height: 10px"
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt="img"
                    />
                  </div>
                  <span style="margin-right: 14px">目标人群：</span>
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    <!-- {{
                        faceDetailObj !== null ? faceDetailObj.targetUser : ""
                      }} -->
                  </div>
                </div>
              </div>
              <div class="mbl_items">
                <div class="item_nam">
                  <span style="margin-right: 14px">课程价值：</span>
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    <!-- {{ faceDetailObj !== null ? faceDetailObj.meaning : "" }} -->
                  </div>
                </div>
              </div>
              <!-- <div class="mbl_items">
                  <div class="item_nam">
                    <div class="asterisk_icon">
                      <img src="@/assets/images/coursewareManage/asterisk.png" alt="" />
                    </div>
                    <span style="margin-right: 14px">资源归属：</span>
                  </div>
                  <div class="item_inp">
                    <div class="select i6_input">{{ faceDetailObj !== null ? faceDetailObj.projectId : "" }}</div>
                  </div>
                </div> -->
              <div class="mbl_items">
                <div class="item_nam">
                  <div class="asterisk_icon">
                    <img
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt="img"
                    />
                  </div>
                  <span style="margin-right: 14px">内容分类：</span>
                </div>
                <div class="item_inp">
                  <!-- <div class="select i6_input">{{ faceDetailObj !== null ? faceDetailObj.categoryId : "" }}</div> -->
                  <div class="select i6_input">
                    <!-- {{
                        faceDetailObj !== null
                          ? contentList11.find(
                              (e) => e.dictCode == faceDetailObj.categoryId
                            )?.dictValue
                          : ""
                      }} -->
                  </div>
                </div>
              </div>
              <div class="mbl_items">
                <div class="item_nam">
                  <span style="margin-right: 14px">场景：</span>
                </div>
                <div class="item_inp">
                  <!-- <div class="select i7_input">{{ faceDetailObj !== null ? faceDetailObj.sceneId : "" }}</div> -->
                  <div class="select i7_input">
                    <!-- {{
                        faceDetailObj !== null
                          ? sceneist11.find(
                              (e) => e.dictCode == faceDetailObj.sceneId
                            )?.dictValue
                          : ""
                      }} -->
                  </div>
                </div>
              </div>
              <div class="mbl_items">
                <div class="item_nam">
                  <span style="margin-right: 14px">内容标签：</span>
                </div>
                <div class="item_inp">
                  <!-- {{ faceDetailObj !== null ? faceDetailObj.tips : "" }} -->
                </div>
              </div>
            </div>
            <div class="mb_right">
              <div class="mbl_items">
                <div class="item_nam">
                  <div class="asterisk_icon">
                    <img
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt="asterisk"
                    />
                  </div>
                  <span style="margin-right: 14px">授课教师：</span>
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    <!-- {{ faceDetailObj !== null ? faceDetailObj.teacher : "" }} -->
                  </div>
                </div>
              </div>
              <div class="mbl_items2">
                <div class="item_nam">
                  <span style="margin-right: 14px">课程简介：</span>
                </div>
                <div class="item_inp">
                  <div class="i10_textarea">
                    <!-- {{ faceDetailObj !== null ? faceDetailObj.intro : "" }} -->
                  </div>
                </div>
              </div>
              <div class="mbl_items">
                <!-- <div v-if="attachMap.length > 0" class="item_nam">
                  <span style="margin-right: 10px">附件</span>
                </div> -->
                <!-- <div
                  class="item_inp"
                  v-for="(value, index) in attachMap"
                  :key="index"
                >
                  <a>
                    {{
                      [
                        "附件一",
                        "附件二",
                        "附件三",
                        "附件四",
                        "附件五",
                        "附件六",
                      ][index]
                    }}
                  </a>
                  <a style="margin-left: 120px" :src="value" :href="value">
                    查看
                  </a> 
                       </div>-->
                <!-- <a-upload multiple :show-upload-list="false" :before-upload="beforeUpload2">
                      <div class="accessory" style="cursor: pointer">
                        <div class="accessory_icon">
                          <img src="@/assets/images/coursewareManage/enclosure.png" alt="enclosure" />
                        </div>
                        <span style="color: #4ea6ff">添加附件</span>
                      </div>
                    </a-upload>
                    <span>
                      支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip
                    </span> -->
              </div>
              <div class="mbl_items12">
                <div
                  class="i12_box1"
                  v-for="(item, index) in imgList"
                  :key="index"
                >
                  <div class="file_img">
                    <img :src="item.img" />
                  </div>
                  <div class="file_detail">
                    <div class="file_name">
                      <span style="color: #6f6f6f">{{ item.name }}</span>
                    </div>

                    <div class="file_updata">
                      <div class="updatabox">
                        <div class="updatacolor"></div>
                        <div class="updataxq">上传完成</div>
                      </div>
                      <div class="upjd">
                        <span style="margin: auto 5px">100%</span>
                      </div>
                    </div>
                  </div>
                  <!-- <div class="file_operation">
                    <div class="fobox">
                      <span style="color: #4ea6ff" @click="handleDel(index)">
                        删除
                      </span>
                    </div>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
          <div class="m_footer">
            <div class="fotnam">
              <span>课程大纲</span>
            </div>
            <div class="fotarea">
              <div style="border: 1px solid #ccc">
                <!-- <Toolbar style="border-bottom: 1px solid #ccc;width:900px;height: 300px;"  :defaultConfig="toolbarConfig"
                    :mode="mode" /> -->
                <!-- <Editor
                    @focus="onEditorFocus"
                    style="
                      border-bottom: 1px solid #ccc;
                      width: 900px;
                      height: 300px;
                    "
                    v-model="valueHtml"
                    :defaultConfig="editorConfig"
                    :mode="mode"
                    @onCreated="handleCreated"
                  /> -->
              </div>
            </div>
          </div>
          <div class="m_btn">
            <!-- <div class="btn btn5" @click="handleCancel">
                <div class="btnText">取消</div>
              </div> -->
            <div class="btn btn6" @click="handleCancel">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { reactive, toRefs, defineComponent, toRef, watch } from "vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    console.log(props);
    const detailWatch = toRef(props, "detail");
    const state = reactive({
      imgList: [],
    });
    watch(
      () => detailWatch,
      (newValue) => {
        console.log(78787878);
        console.log(newValue);
      },
      { deep: true }
    );

    const filterTxt = (txt) => {
      if (txt) {
        return txt;
      } else {
        return "-";
      }
    };
    const handleCancel = () => {
      emit("cancel");
    };

    return {
      ...toRefs(state),
      filterTxt,
      handleCancel,
    };
  },
});
</script>
<style lang="scss">
.lookCourseModal {
  .ant-modal {
    .ant-modal-content {
      // width:1358px !important;
      .ant-modal-body {
        .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 {
          .m_title {
            margin-bottom: 20px;
          }

          .m_body {
            display: flex;
            flex-wrap: wrap;

            .mb_left {
              width: 50%;

              .mbl_items {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                margin-bottom: 10px;

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

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;
                  position: relative;

                  .inp_num {
                    position: absolute;
                    left: 398px;
                    top: 10px;
                  }
                }
              }

              .mbl_items2 {
                display: flex;
                align-items: start;
                margin-top: 10px;
                margin-bottom: 10px;

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

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;

                  .i_upload_img {
                    width: 100px;
                    height: 100px;
                    border-radius: 8px;
                  }

                  .i_upload {
                    width: 100px;
                    height: 100px;
                    border: 1px solid #4ea6ff;
                    border-radius: 8px;
                    text-align: center;
                    align-items: center;
                    cursor: pointer;

                    .addimg {
                      position: relative;

                      .heng {
                        position: absolute;
                        top: 50px;
                        left: 25px;
                        width: 50px;
                        border: 1px solid #4ea6ff;
                      }

                      .shu {
                        position: absolute;
                        top: 25px;
                        left: 50px;
                        height: 50px;
                        border: 1px solid #4ea6ff;
                      }
                    }
                  }
                }
              }

              .i2_cz {
                width: 440px;
                margin-left: 100px;

                .i2_top {
                  display: flex;
                  justify-content: space-between;
                }
              }

              .i8_bottom {
                display: flex;
                width: 440px;
                margin-left: 100px;
              }
            }

            .mb_right {
              width: 50%;

              .mbl_items {
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                margin-bottom: 10px;

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

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-top: -15px;
                    margin-right: 5px;
                  }
                }

                .item_inp {
                  flex: 1;
                }

                .accessory {
                  display: flex;
                  align-items: center;

                  .accessory_icon {
                    width: 16px;
                    height: 16px;
                    margin-top: -8px;
                    margin-right: 5px;
                  }
                }
              }

              .mbl_items2 {
                display: flex;
                align-items: start;
                margin-bottom: 10px;

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

                  .asterisk_icon {
                    width: 10px;
                    height: 10px;
                    margin-right: 5px;
                    margin-top: -15px;
                  }
                }

                .item_inp {
                  flex: 1;
                  position: relative;

                  .inp_num {
                    position: absolute;
                    left: 395px;
                    bottom: 10px;
                  }
                }
              }

              .mbl_items12 {
                width: 440px;
                margin-left: 100px;

                .i12_box1 {
                  display: flex;
                  align-items: center;
                  padding: 17px 0px 17px 21px;
                  border: 1px solid #eff4fc;
                  border-radius: 8px;
                  margin-bottom: 10px;

                  .file_img {
                    width: 27px;
                    height: 32px;
                    // background-image: url(@/assets/images/coursewareManage/imgs.png);
                    margin-right: 22px;

                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .file_detail {
                    width: 250px;
                    margin-right: 21px;

                    .file_updata {
                      display: flex;
                      align-items: center;

                      .updatabox {
                        position: relative;
                        width: 230px;
                        height: 5px;
                        background-color: rgba(192, 192, 192, 0.25);
                        border-radius: 3px;

                        .updatacolor {
                          position: absolute;
                          left: 0;
                          width: 100%;
                          height: 5px;
                          background-color: #57c887;
                          border-radius: 3px;
                        }

                        .updatacolor2 {
                          position: absolute;
                          left: 0;
                          width: 80%;
                          height: 5px;
                          background-color: #ff7474;
                          border-radius: 3px;
                        }

                        .updatacolor3 {
                          position: absolute;
                          left: 0;
                          width: 60%;
                          height: 5px;
                          background-color: #388be1;
                          border-radius: 3px;
                        }

                        .updataxq {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #57c887;
                        }

                        .updataxq2 {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #ff7474;
                        }

                        .updataxq3 {
                          position: absolute;
                          right: 2px;
                          top: -30px;
                          color: #388be1;
                        }
                      }
                    }
                  }

                  .file_operation {
                    display: flex;

                    .fobox {
                      margin-right: 5px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }

          .m_footer {
            display: flex;
            margin: 20px 0;

            .fotnam {
              width: 100px;
              display: flex;
              justify-content: end;
              padding-right: 15px;
            }

            .fotarea {
              position: relative;

              .fuwenben {
                width: 90%;
                height: 20px;
                background-color: rgb(95, 95, 95);
                position: absolute;
                left: 50%;
                transform: translate(-50%, 0);
                top: 3px;
                z-index: 9999;
              }
            }
          }

          .m_btn {
            width: 100%;
            margin-top: 25px;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
            align-content: center;

            .btn {
              width: 100px;
              height: 40px;
              background: rgba(64, 158, 255, 0);
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 14px;
              flex-shrink: 0;
              cursor: pointer;

              .btnText {
                font-size: 14px;
                font-weight: 400;
                line-height: 40px;
              }
            }

            .btn5 {
              border: 1px solid rgba(64, 158, 255, 1);
              color: #4ea6ff;
            }

            .btn6 {
              background-color: #4ea6ff;
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>
