<!-- 课件管理页面 -->
<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">
                <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">
                    {{ filterTxt(detail.targetUser) }}
                  </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://111.231.196.214: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 :href="item.indexOf('http') !== -1 ? item : locationHref + 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, ref, watch, computed} from "vue";
import * as api1 from "../../../api/index1";
import {useStore} from "vuex";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    detail: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, {emit}) {
    console.log("props", props);
    const store = useStore();

    const state = reactive({
      imgList: [],
      options2222: [
        {
          title: '领导力',
          value: '100',
          children: [
            {
              title: '管理业务',
              value: '1001',
            },
            {
              title: '管理团队',
              value: '1002',
            },
            {
              title: '管理自我',
              value: '1003',
            },
          ],
        },
        {
          title: '专业力',
          value: '200',
          children: [
            {
              title: '研发',
              value: '2001',
            },
            {
              title: '系统和解决方案',
              value: '2002',
            },
            {
              title: '生产技术与制造',
              value: '2003',
            },
            {
              title: '供应链',
              value: '2004',
            },
            {
              title: '营销',
              value: '2005',
            },
            {
              title: '品质',
              value: '2006',
            },
            {
              title: '专业职能',
              value: '2007',
              children: [
                {
                  title: '战略与企划',
                  value: '200701',
                },
                {
                  title: '流程管理',
                  value: '200702',
                },
                {
                  title: '业绩管理',
                  value: '200703',
                },
                {
                  title: '项目管理',
                  value: '200704',
                },
                {
                  title: '信息技术',
                  value: '200705',
                },
                {
                  title: '环境与安全',
                  value: '200706',
                },
                {
                  title: '人力资源',
                  value: '200707',
                },
                {
                  title: '企业文化',
                  value: '200708',
                },
                {
                  title: '品牌',
                  value: '200709',
                },
                {
                  title: '财务',
                  value: '200710',
                },
                {
                  title: '法务',
                  value: '200711',
                },
                {
                  title: '风险控制',
                  value: '200712',
                },
                {
                  title: '行政',
                  value: '200713'
                },
              ]
            },
            {
              title: '医工',
              value: '2008',
            }
          ],
        },
        {
          title: '通用力',
          value: '300',
          children: [
            {
              title: '职业操守与道德',
              value: '3001',
            },
            {
              title: '职业素养与技能',
              value: '3002',
            },
            {
              title: '规章制度',
              value: '3003',
            },
          ],
        }
      ],
      categoryName: '',
      ceshi: "https://u-pre.boe.com/upload/测试下载ppt2-1671002026755.pptx",
      ceshi2: "http://111.231.196.214:12016/测试下载ppt3-1671001683026.pptx",
      locationHref: location.href.indexOf('http://') !== -1 ? 'http://111.231.196.214:12016/' : location.href.slice(0, location.href.indexOf('/m')) + '/upload/'
    });

    const sysTypeOptions = computed(() => store.state.sysType);

    watch(() => props.detail.sysTypeId, () => {
      state.categoryName =  findClassFullName(sysTypeOptions.value)
    })

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

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

    const filterSenceTxt = (txt) => {
      let str = "-";
      if (txt) {
        options3.value.forEach((item) => {
          if (item.value === String(txt)) {
            str = item.label;
          }
        });
      }
      return str;
    };
    const handleCancel = () => {
      emit("cancel");
    };

    //获取分类、场景-----------字典配置-------------------------------
    const options2 = ref([]);
    const options3 = ref([]);
    const getDictList = (param) => {
      let obj = {
        pageNo: 1,
        pageSize: 20,
        setCode: param,
      };
      api1
          .getDict(obj)
          .then((res) => {
            console.log("获取字典成功", res);
            if (res.data.code === 200) {
              if (param === "faceclassClass") {
                let arr = res.data.data.rows;
                let newArr = [];
                arr.forEach((item) => {
                  newArr.push({
                    value: item.dictCode,
                    label: item.dictName,
                  });
                });
                options2.value = state.options2222;
              }
              if (param === "faceclassScene") {
                let arr = res.data.data.rows;
                let newArr = [];
                arr.forEach((item) => {
                  newArr.push({
                    value: item.dictCode,
                    label: item.dictName,
                  });
                });
                options3.value = newArr;
              }
            }
          })
          .catch((err) => {
            console.log("获取字典失败", err);
          });
    };
    getDictList("faceclassClass");
    getDictList("faceclassScene");
    //获取分类、场景----------------字典配置---------------------------

    return {
      ...toRefs(state),
      filterTxt,
      filterSenceTxt,
      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: #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;
            }
          }
        }
      }
    }
  }
}
</style>
