<template>
  <!-- 项目基础信息 -->
  <div class="pb_content">
    <div class="race_content_body">
      <div class="raceBox">
        <div class="stepBg">
          <div class="steps">
            <div class="stepLeft" :class="steps == 0 ? 'isSteps' : ''">1</div>
            <div class="stepRightNav">
              <div>案例赛事信息</div>
              <div>说明</div>
            </div>
            <div class="line" :class="steps == 0 ? 'isLine' : ''"></div>
          </div>
          <div class="steps">
            <div class="stepLeft" :class="steps == 1 ? 'isSteps' : ''">2</div>
            <div class="stepRightNav">
              <div>封面</div>
              <div>说明</div>
            </div>
            <div class="line" :class="steps == 1 ? 'isLine' : ''"></div>
          </div>
          <div class="steps">
            <div class="stepLeft" :class="steps == 2 ? 'isSteps' : ''">3</div>
            <div class="stepRightNav">
              <div>成员信息</div>
              <div>协同人员</div>
            </div>
            <div class="line" :class="steps == 2 ? 'isLine' : ''"></div>
          </div>
          <div class="steps">
            <div class="stepLeft" :class="steps == 3 ? 'isSteps' : ''">4</div>
            <div class="stepRightNav">
              <div>项目说明</div>
              <div>项目简介</div>
            </div>
            <!-- <div class="line" :class="steps == 3 ? 'isLine' : ''"></div> -->
          </div>
        </div>
        <div class="right">
          <div class="whiteBg">
            <div class="right_title">项目基本信息</div>
            <div class="basic_box">
              <div class="big_box">
                <div class="left_first">
                  <div>
                    <div>
                      <div class="bInfo_title" style="margin-bottom: 15px">
                        案例名称
                      </div>
                      <div style="display: flex; margin-right: 20px">
                        <img
                          src="../../../../assets/icon/projectName.png"
                          alt
                          style="margin-right: 8px"
                        />
                        <input
                          type="text"
                          placeholder="请输入项目名称"
                          class="binfo_input"
                          v-model="raceDetail.title"
                          @input="updateTitle"
                        />
                      </div>
                    </div>
                    <div class="both">
                      <div class="choose">
                        <div
                          class="all_choose"
                          v-for="(item, index) in CourseType[0]"
                          :key="index"
                        >
                          <span>{{ item.name }}</span>
                          <el-checkbox-group v-model="raceDetail.type" @change="updateTitle">
                            <el-checkbox
                              v-for="item1 in CourseTypeJson[item.id]"
                              :key="item1.id"
                              :label="item1.id"
                              >{{ item1.name }}</el-checkbox
                            >
                          </el-checkbox-group>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="whiteBg" style="border-radius: 0">
            <div class="right_first">
              <div class="right_title">案例封面设置</div>
              <div class="fmBox">
                <div>
                  <div class="bInfo_title" style="margin-top: 0 !important">
                    案例封面
                  </div>
                  <div class="picBox">
                    <div>
                      <div
                        class="uploadFm"
                        v-if="raceDetail.cover.length === 0"
                        @click="addImg($event)"
                      >
                        <img
                          src="../../../../assets/icon/addPoster.png"
                          alt=""
                        />
                        <input
                          type="file"
                          accept="image/*"
                          style="display: none"
                          @change="beforeUpload1"
                        />
                      </div>
                      <el-upload
                        :class="{ disUoloadSty: noneBtnImg }"
                        class="upCss"
                        action="#"
                        list-type="picture"
                        v-loading="uploadLoading1"
                        :http-request="beforeUpload1"
                        ref="upload1"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handle_remove1"
                        :show-file-list="true"
                        :file-list="raceDetail.cover"
                        accept="image/*"
                        :limit="1"
                        :on-exceed="onExceed"
                        v-else
                      >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="whiteBg" style="border-radius: 0">
            <div class="right_first">
              <div class="right_title">项目成员</div>
              <div class="addPeople" @click="dialogVisibleMember = true">
                添加学生
              </div>
              <div style="width: 97%; margin: 0 auto">
                <el-table
                  ref="table"
                  :data="raceDetail.tableData"
                  :height="tableHeight"
                  :fit="true"
                  style="width: 100%"
                  :header-cell-style="{
                    background: '#f1f1f1',
                    fontSize: '17px',
                  }"
                  :row-class-name="tableRowClassName"
                >
                  <el-table-column label="姓名" min-width="10" align="center">
                    <template slot-scope="scope">
                      <div class="userImg">
                        <div class="tx">
                          <img :src="tx" alt />
                        </div>
                        <div
                          style="
                            width: 50px;
                            text-align: left;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                          "
                        >
                          {{ scope.row.sn }}
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学科" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.su ? scope.row.su : "" }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="学校" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.sc ? scope.row.sc : "" }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="邮箱" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>{{ scope.row.em ? scope.row.em : "" }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column label="电话" min-width="15" align="center">
                    <template slot-scope="scope">
                      <div>
                        {{ scope.row.ph ? scope.row.ph : "" }}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" min-width="20">
                    <template slot-scope="scope">
                      <div class="delete" @click="deleteStudent(scope.$index)">
                        <img src="../../../../assets/remove.png" alt />
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
          <div class="allBox">
            <div>项目简介</div>
            <div class="secondTop">
              <textarea
                rows="8"
                class="binfo_input tAreaCss"
                cols
                v-model="raceDetail.courseText"
                @input="updateTitle"
              ></textarea>
            </div>
          </div>
        </div>
        <!-- <div class="buttonCss">
          <div class="info_btn noBg">预览</div>
          <div class="info_btn noBg">保存</div>
          <div class="info_btn" style="margin-right: 25px">下一步</div>
        </div> -->
      </div>
    </div>
    <el-dialog
      title="添加项目成员"
      :visible.sync="dialogVisibleMember"
      :append-to-body="true"
      width="700px"
      height="80%"
      :before-close="handleClose"
      class="add_student"
    >
      <div slot="title" class="header-title">
        <div class="logoImg">
          <img src="../../../../assets/logo.png" alt />
        </div>
        <div class="title_add_student">添加学生</div>
      </div>
      <el-form>
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学生姓名"
              clearable
              v-model="sName"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="学生学科" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学生学科"
              clearable
              v-model="sSubject"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="学生学校" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学生学校"
              clearable
              v-model="sSchool"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="学生邮箱" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学生邮箱"
              clearable
              v-model="sEmail"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
        <el-form-item label="学生电话" :label-width="formLabelWidth">
          <span>
            <el-input
              placeholder="请输入学生电话"
              clearable
              v-model="sPhone"
              class="add_input"
            ></el-input>
          </span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMember = false">取 消</el-button>
        <el-button type="primary" @click="isAddPPTeacher">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["userid", "oid" , "raceInfo"],
  data() {
    return {
      tableHeight: "500px",
      formLabelWidth: "100px",
      steps: 0,
      CourseType: [],
      CourseTypeJson: [],
      noneBtnImg: false,
      uploadLoading1: false,
      dialogVisibleMember: false,
      sName: "",
      sSubject: "",
      sSchool: "",
      sEmail: "",
      sPhone: "",
      raceDetail: {
        title: "",
        type: [],
        cover: [],
        tableData: [],
        courseText: "",
      },
      tx: require("../../../../assets/avatar.png"),
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.tableHeight =
        window.innerHeight - this.$refs.table.$el.offsetTop - 200;
      if (this.tableHeight <= 530) {
        this.tableHeight = 530;
      }
      // 监听窗口大小变化
      let self = this;
      window.onresize = function () {
        self.tableHeight =
          window.innerHeight - self.$refs.table.$el.offsetTop - 200;
        if (self.tableHeight <= 530) {
          self.tableHeight = 530;
        }
      };
    });
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return "even_row";
      } else {
        return "";
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
    },
    onExceed() {
      this.$message.error("项目封面仅支持上传一张，请删除后再进行上传");
    },
    handleClose(done) {
      done();
    },
    handle_remove1(file, fileList, type) {
      var _tmp = this.raceDetail.cover;
      for (var i = 0, len = _tmp.length; i < len; i++) {
        if (_tmp[i].uid == file.uid) {
          _tmp.splice(i, 1);
          break;
        }
        this.raceDetail.cover = _tmp;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    addImg(e) {
      var el = e.currentTarget;
      el.getElementsByTagName("input")[0].click();
    },
    imgChange1(file, fileList, type, itemTaskIndex) {
      if (type == 1) {
        var _tmp = this.raceDetail.cover;
      }
      this.noneBtnImg = _tmp.length >= 1;
    },
    beforeUpload1(event, type) {
      const loading = this.openLoading();
      var file = event.target.files[0];
      var credentials = {
        accessKeyId: "AKIATLPEDU37QV5CHLMH",
        secretAccessKey: "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",
      }; //秘钥形式的登录上传
      window.AWS.config.update(credentials);
      window.AWS.config.region = "cn-northwest-1"; //设置区域

      var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
      var _this = this;

      if (file) {
        var params = {
          Key:
            file.name.split(".")[0] +
            new Date().getTime() +
            "." +
            file.name.split(".")[file.name.split(".").length - 1],
          ContentType: file.type,
          Body: file,
          "Access-Control-Allow-Credentials": "*",
          ACL: "public-read",
        }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
        var options = {
          partSize: 2048 * 1024 * 1024,
          queueSize: 2,
          leavePartsOnError: true,
        };
        bucket
          .upload(params, options)
          .on("httpUploadProgress", function (evt) {
            //这里可以写进度条
            // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
          })
          .send(function (err, data) {
            loading.close();
            if (err) {
              var a = _this.$refs.upload1.uploadFiles;
              a.splice(a.length - 1, a.length);
              _this.$message.error("上传失败");
            } else {
              _this.raceDetail.cover.push({
                name: file.name,
                url: data.Location,
                uid: file.uid,
              });
              _this.imgChange1(null, null, 1, null);
              console.log(data.Location);
            }
          });
      }
    },
    updateTitle() {
      this.$emit("updateTitle", this.raceDetail);
    },
    isAddPPTeacher() {
      if (this.sName === "") {
        this.$message.error("学生姓名不能为空");
        return;
      } else if (this.sSubject === "") {
        this.$message.error("学生学科不能为空");
        return;
      } else if (this.sSchool === "") {
        this.$message.error("学生学校不能为空");
      } else if (this.sPhone != "") {
        if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.sPhone)) {
          this.$message.error("手机号格式不正确");
          return;
        }
      } else if (this.sEmail != "") {
        if (
          !/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(
            this.sEmail
          )
        ) {
          this.$message.error("邮箱格式不正确");
          return;
        }
      }
      this.raceDetail.tableData.push({
        sn: this.sName,
        su: this.sSubject,
        sc: this.sSchool,
        em: this.sEmail,
        ph: this.sPhone,
      });
      this.sName = "";
      this.sSubject = "";
      this.sSchool = "";
      this.sEmail = "";
      this.sPhone = "";
      this.dialogVisibleMember = false;
      this.$emit("updateTitle", this.raceDetail);
    },
    deleteStudent(i) {
      this.raceDetail.tableData.splice(i, 1);
      this.$emit("updateTitle", this.raceDetail);
    },
    selectType() {
      this.ajax
        .get(this.$store.state.api + "selectType")
        .then((res) => {
          this.CourseType = res.data;
          for (var i = 0; i < res.data[0].length; i++) {
            if (!this.cid) {
              this.raceDetail.type[res.data[0][i].id] = "";
            }
            if (this.oid == "69893dca-1d47-11ed-8c78-005056b86db5") {
              if (res.data[0][i].name == "栏目") {
                this.CourseType[0][i].name = "主题";
              }
            }
            for (var j = 0; j < res.data[1].length; j++) {
              if (res.data[0][i].id == res.data[1][j].pid) {
                if (!this.CourseTypeJson[res.data[0][i].id]) {
                  this.CourseTypeJson[res.data[0][i].id] = [];
                }
                this.CourseTypeJson[res.data[0][i].id].push(res.data[1][j]);
              }
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {
    this.raceDetail.title = this.raceInfo.title;
    this.raceDetail.type = this.raceInfo.type;
    this.raceDetail.cover = this.raceInfo.cover;
    this.raceDetail.tableData = this.raceInfo.tableData;
    this.raceDetail.courseText = this.raceInfo.courseText;
    this.imgChange1(null, null, 1, null);
    this.$forceUpdate();
    this.selectType();
  },
};
</script>

<style scoped>
.pb_content {
  width: 100%;
  height: 100%;
}
.race_content_body {
  width: 100%;
  position: relative;
  margin: 0;
  height: 100%;
}

.raceBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.stepBg {
  margin: 0 25px 0 0;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  background: #fff;
  /* min-height: 800px; */
  height: 100%;
  border: 1px solid #c2c2c2;
  border-radius: 15px;
  overflow: auto;
  min-width: 260px;
}
.steps {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 35px 20px 20px 20px;
  position: relative;
}
.stepLeft,
.isSteps {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  border: 2px solid #eee;
  color: #c0c0c0;
}
.isSteps {
  background: #1990ff;
  color: #fff;
  border: none;
}
.stepRightNav {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 10px;
}
.line,
.isLine {
  position: absolute;
  width: 5px;
  height: 50px;
  border-left: 1px solid #dadada;
  top: 38px;
  left: 15px;
}
.isLine {
  border-left: 1px solid #1d92ff !important;
}
.right {
  width: calc(100% - 20%);
  background: rgb(255, 255, 255);
  border-radius: 10px;
  overflow: auto;
  height: 100%;
  border: 1px solid #c2c2c2;
  border-radius: 15px;
  /* max-height: 800px; */
  min-width: calc(100% - 260px);
}
.allBox {
  padding: 25px;
}
.allBox > div:nth-child(1) {
  color: #0f40f5;
  font-size: 18px;
  font-weight: bold;
}
.raceTop > div:nth-child(2) {
  width: 80%;
  margin-top: 10px;
}
.choose {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-evenly;
  align-items: flex-start;
}

.both {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  margin: 30px 0;
}
.all_choose {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: 100%;
}

.all_choose > span {
  width: 100px;
  display: block;
  letter-spacing: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.all_choose >>> .el-checkbox-group {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3px;
}

.all_choose > .el-checkbox-group >>> .el-checkbox {
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label {
  min-width: 80px;
  overflow: hidden;
  width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all_choose > .el-checkbox-group > .el-checkbox >>> .el-checkbox__label:hover {
  width: auto;
}
.disUoloadSty >>> .el-icon-plus {
  display: none !important;
  /* 上传按钮隐藏 */
}
.upCss {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.upCss >>> .el-icon-plus {
  position: none !important;
  width: 200px;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  min-width: 78px;
  min-height: 100px;
  z-index: 999;
}

.upCss >>> .el-upload-list__item-name {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uploadFm {
  border: 1px dashed #ccc;
  width: 202px;
  height: 102px;
  position: relative;
  cursor: pointer;
}

.uploadFm > img {
  position: absolute;
  top: 25px;
  left: 35%;
  width: 50px;
}
.picBox {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 10px;
}
.picNav {
  margin-left: 10px;
  color: #aaabaa;
}
.addPeople {
  color: #75a1f4;
  padding: 10px 20px 10px 0;
  float: right;
  cursor: pointer;
}
.binfo_input {
  font: inherit;
  color: currentColor;
  width: 100%;
  margin: 0;
  /* padding: 15px 14px; */
  padding: 8px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: content-box;
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
  box-sizing: border-box;
  background: #fff;
  font-size: 18px;
}

.binfo_input:focus-visible {
  border: 1px solid rgba(61, 103, 188);
}
.secondTop {
  margin-top: 10px;
}
.tAreaCss {
  resize: none;
}
.addNewPP >>> .el-dialog__body {
  padding: 5px 20px;
}
.customWidth >>> .el-dialog {
  min-width: 500px !important;
}

.whiteBg {
  background: #fff;
  border-radius: 10px;
}
.right_title {
  height: 30px;
  padding: 15px 0 15px 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 1.5em;
  font-weight: bold;
  color: #0f7eff;
  margin: 0 auto;
}
.basic_box {
  margin: 0 auto;
  position: relative;
  padding: 0 20px 0 20px;
}
.left_first {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.bInfo_title {
  text-align: left;
  margin: 10px 0;
}
.fmBox {
  padding: 10px 0 0 20px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0 auto;
}
.logoImg {
  width: 30px;
}
.logoImg > img {
  width: 100%;
  height: 100%;
}
.title_add_student {
  margin: 0 auto;
  color: #fff;
}
.add_input {
  width: 365px;
}
.userImg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.tx {
  width: 40px;
  margin-right: 10px;
}

.delete {
  width: 25px;
  cursor: pointer;
}

.tx > img,
.delete > img {
  width: 100%;
  height: 100%;
}
.add_student >>> .el-dialog__header {
  padding: 20px 20px 10px;
  text-align: center;
  background: #32455b;
}
.add_student >>> .el-dialog__title {
  font-size: 14px !important;
  color: #fff !important;
}
.add_student >>> .el-dialog__headerbtn {
  font-size: 20px !important;
}
.add_student >>> .el-form-item__label {
  margin-left: 65px;
}
.add_student >>> .el-form-item {
  display: flex;
}
.add_student >>> .el-form-item__content {
  margin: 0 !important;
}
.add_student >>> .el-dialog__footer {
  text-align: center !important;
}
.header-title {
  display: flex;
}
</style>