<!-- 课件管理页面 -->
<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">
                    {{ filterTxt(detail.name) }}
                  </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
                  :src="detail.picUrl"
                  alt="img"
                  style="width: 100px; height: 100px"
                />
              </div>
              <div class="mbl_items" style="align-items: flex-start">
                <div class="item_nam">
                  <div class="asterisk_icon">
                    <img
                      style="width: 10px; height: 10px"
                      src="@/assets/images/coursewareManage/asterisk.png"
                      alt=""
                    />
                  </div>
                  <span style="margin-right: 14px; margin-top: 3px"
                    >目标人群</span
                  >
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    <!-- <a-input v-model:value="qdms_inputV2" maxlength="50"
											style="width: 440px; height: 40px; border-radius: 8px" placeholder="请输入目标人群" />
										<div class="inp_num">
											<span style="color: #c7cbd2">
												{{ qdms_inputV2.length }}/50
											</span>
										</div> -->
                    <div>
                      <OrgClassCheck
                        v-model:value="orgSelect"
                        v-model:name="orgSelectName"
                        :disabled="true"
                      ></OrgClassCheck>
                    </div>
                    <div style="margin-top: 10px">
                      <a-select
                        v-model:value="selectJobId" v-if="selectJobId.length > 0"
                        mode="multiple"
                        style="width: 440px; min-height: 40px"
                        placeholder="请选择岗位"
                        :options="jobType"
                        @change="handleChangeJob"
                        :fieldNames="{
                          key: 'id',
                          label: 'name',
                          value: 'id',
                        }"
                        disabled
                      ></a-select>
                    </div>
                    <div style="margin-top: 10px">
                      <a-select
                        v-model:value="selectBandId"  v-if="selectBandId.length > 0"
                        mode="multiple"
                        style="width: 440px; min-height: 40px"
                        placeholder="请选择Band"
                        :options="bandList"
                        @change="handleChangeBand"
                        :fieldNames="{
                          key: 'id',
                          label: 'name',
                          value: 'id',
                        }"
                        disabled
                      ></a-select>
                    </div>
                  </div>
                </div>
              </div>
              <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="select i6_input" style="width: 440px">
                    <OrgClass
                      v-model:value="sourceBelongId"
                      v-model:name="sourceBelongName"
                      :disabled="true"
                    ></OrgClass>
                  </div>
                </div>
              </div>
              <div v-if="detail.meaning" class="mbl_items2">
                <div class="item_nam">
                  <span style="margin-right: 14px">课程价值：</span>
                </div>
                <div class="item_inp">
                  <div class="i1_input">
                    {{ filterTxt(detail.meaning) }}
                  </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">
                    {{ categoryName }}
                  </div>
                </div>
              </div>
              <div class="mbl_items" v-if="detail.sceneContent">
                <div class="item_nam">
                  <span style="margin-right: 14px">场景：</span>
                </div>
                <div class="item_inp">
                  <div class="select i7_input">
                    {{ detail.sceneContent }}
                  </div>
                </div>
              </div>
              <div class="mbl_items" v-if="detail.tips">
                <div class="item_nam">
                  <span style="margin-right: 14px">内容标签：</span>
                </div>
                <div class="item_inp">
                  {{ filterTxt(detail.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">
                    {{ filterTxt(detail.teacher) }}
                  </div>
                </div>
              </div> -->
              <div class="mbl_items2" v-if="detail.intro">
                <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="i10_textarea">
                    {{ filterTxt(detail.intro) }}
                  </div>
                </div>
              </div>
              <div class="mbl_items12">
                <div
                  class="i12_box1"
                  style="position: relative"
                  v-for="(item, index) in detail.attach"
                  :key="index"
                >
                  <div class="file_img">
                    <img
                      v-if="
                        item.indexOf('jpg') !== -1 ||
                        item.indexOf('jpeg') !== -1 ||
                        item.indexOf('png') !== -1
                      "
                      src="@/assets/images/coursewareManage/pngpic.png"
                    />
                    <div v-else>
                      <img
                        v-if="item.indexOf('doc') !== -1"
                        src="@/assets/images/coursewareManage/docpic.png"
                      />
                      <div v-else>
                        <img
                          v-if="item.indexOf('xls') !== -1"
                          src="@/assets/images/coursewareManage/xlspic.png"
                        />
                        <div v-else>
                          <img
                            v-if="item.indexOf('ppt') !== -1"
                            src="@/assets/images/coursewareManage/pptpic.png"
                          />
                          <div v-else>
                            <img
                              v-if="item.indexOf('pdf') !== -1"
                              src="@/assets/images/coursewareManage/pdfpic.png"
                            />
                            <div v-else>
                              <img
                                v-if="item.indexOf('zip') !== -1"
                                src="@/assets/images/coursewareManage/zippic.png"
                              />
                              <img
                                v-else
                                src="@/assets/images/coursewareManage/docpic.png"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="file_detail">
                    <div class="file_name">
                      <!-- http://43.143.139.204:12016/7.231.196.214:12016/7-1670486854017.jpg -->
                      <span
                        style="
                          color: #6f6f6f;
                          width: 200px;
                          display: block;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                          position: absolute;
                          top: 4px;
                          left: 72px;
                        "
                      >
                        {{
                          item.indexOf("-") !== -1
                            ? item.slice(
                                item.lastIndexOf("/") + 1,
                                item.lastIndexOf("-")
                              ) + item.slice(item.lastIndexOf("."))
                            : item
                        }}
                      </span>
                    </div>

                    <div class="file_updata">
                      <div class="updatabox">
                        <div class="updatacolor"></div>
                        <div class="updataxq" style="right: -62px">
                          上传完成
                        </div>
                      </div>
                      <div class="upjd">
                        <span style="margin: auto 5px">100%</span>
                      </div>
                    </div>
                  </div>
                  <a @click="openDown(item)" style="margin-left: 5px">下载</a>
                </div>
              </div>
            </div>
          </div>
          <div class="m_footer" v-if="detail.outline !== '<p><br></p>'">
            <div class="fotnam">
              <span>课程大纲</span>
            </div>
            <div class="fotarea">
              <div style="border: 1px solid #ccc">
                <div v-html="detail.outline" />
              </div>
            </div>
          </div>
          <div class="m_btn">
            <div class="btn btn6" @click="handleCancel">
              <div class="btnText">确定</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { reactive, toRefs, defineComponent, watch, computed } from "vue";
import { useStore } from "vuex";
import OrgClassCheck from "@/components/project/OrgClassCheck";
import OrgClass from "@/components/project/OrgClass";
import { detail } from "@/api/indexCourse";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    OrgClassCheck,
    OrgClass,
  },
  setup(props, { emit }) {
    console.log("props", props);
    const store = useStore();

    const state = reactive({
      imgList: [],
      categoryName: "",
      locationHref:
        location.href.indexOf("http://") !== -1
          ? "http://43.143.139.204:12016/"
          : location.href.slice(0, location.href.indexOf("/m")) +
            process.env.VUE_APP_FILE_PATH,

      //目标任务
      orgSelect: [],
      orgSelectName: [],
      orgSelectFullName: [],
      selectJobName: [],
      selectJobId: [],
      selectBandName: [],
      selectBandId: [],
      //资源归属
      sourceBelongId: [],
      sourceBelongName: [],
      sourceBelongFullName: [],
    });

    const sysTypeOptions = computed(() => store.state.content_type);
    //获取岗位
    const jobType = computed(() => store.state.job_type);
    //获取band
    const bandList = computed(() => store.state.band);
    watch(
      () => props.detail.sysTypeId,
      () => {
        state.categoryName = findClassFullName(sysTypeOptions.value);
      }
    );
    watch(
      () => props.detail.id,
      () => {
        detail({
          offcourseId: Number(props.detail.id),
        }).then((res) => {
          console.log("res", res);
          if (res.data.code === 200) {
            let item = res.data.data;
            if (item.jobTypeIds) {
              state.selectJobId = item.jobTypeIds.split(",");
              console.log("selectJobId" + JSON.stringify(state.selectJobId));
            }
            if (item.bandIds) {
              state.selectBandId = item.bandIds.split(",");
            }
            console.log("state.selectBandId", state.selectBandId);
            state.sourceBelongId = item.sourceBelongId;
            state.sourceBelongName = item.sourceBelongFullName;
            if (item.organizationIds && item.organizationNames) {
              let orgSelectIds = item.organizationIds;
              let orgSelectNames = item.organizationNames;
              orgSelectIds = orgSelectIds.split(",");
              orgSelectNames = orgSelectNames.split(",");
              console.log(
                "orgSelectIds&orgSelectNames",
                orgSelectIds,
                orgSelectNames
              );
              let arrObj = [];
              arrObj = orgSelectIds.map((item, index) => {
                return { value: item, label: orgSelectNames[index] };
              });
              console.log("arrObj-------------", arrObj);
              state.orgSelect = arrObj;
            }
          }
        });
      },
      {
        deep: true,
      }
    );

    function findClassFullName(list, name = "") {
      return (
        (list &&
          list.length &&
          list
            .map((e) =>
              props.detail.sysTypeId == e.code
                ? name
                  ? name + "-" + e.name
                  : e.name
                : findClassFullName(
                    e.children,
                    name ? name + "-" + e.name : e.name
                  )
            )
            .filter((name) => name)
            .join("")) ||
        ""
      );
    }

    const filterTxt = (txt) => {
      if (txt) {
        return txt;
      } else {
        return "-";
      }
    };
    const handleCancel = () => {
      console.log("关闭");
      emit("cancel");
    };

    function openDown(link) {
      window.open(process.env.VUE_APP_FILE_PATH + link);
      //:href="item.indexOf('http') !== -1 ? item : locationHref + item"
    }

    return {
      ...toRefs(state),
      filterTxt,
      openDown,
      handleCancel,
      jobType,
      bandList,
    };
  },
});
</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: #4ea6ff;
                          border-radius: 3px;
                        }

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

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

                        .updataxq3 {
                          position: absolute;
                          right: -62px;
                          top: -30px;
                          color: #4ea6ff;
                        }
                      }
                    }
                  }

                  .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 {
              width: calc(100% - 150px);
              position: relative;

              img {
                max-width: 100%;
              }

              .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;
            }
          }
        }
      }
    }
  }
  .ant-select-disabled.ant-select:not(.ant-select-customize-input)
    .ant-select-selector {
    color: #000000;
  }
  .ant-select-disabled.ant-select:not(.ant-select-customize-input)
    .ant-select-selector {
    background-color: rgba(255, 255, 255, 0);
  }
  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    border: 0px !important;
  }
  .select .ant-select-selector {
    border: 0px !important;
  }
  .ant-select-arrow {
    display: none;
  }
  .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
    color: #000000;
    border: 0px !important;
  }
  .ant-select-multiple .ant-select-selection-item {
    background: rgba(255, 255, 255, 0);
  }
}
</style>
