<template>
  <div class="personalPhoto">
    <div class="spaceBetween top">
      <div>名师作品展</div>
      <el-button type="primary" @click="handleOpen">{{activeSwitch==0 ? '发布' : '新建'}}</el-button>
    </div>
    <div class="switch">
      <div class="switchDiv">
        <div class="list" :class="activeSwitch == index ? 'active' : ''" v-for="(item, index) in switchData" :key="item" @click="initSwitch(index)">{{ item }}</div>
      </div>
    </div>
    <div v-loading="loading">
      <Work v-if="activeSwitch==0" :resultData="resultData" @edit="handleEdit" @delete="handleDelete" />
      <Album v-if="activeSwitch==1" :resultData="resultData" @edit="handleEdit" @delete="handleDelete" />
    </div>

    <el-dialog width="50%" :title="activeSwitch==0 ? '发布' : '新建'" v-model="dialogVisible" center @close="handleClose" :close-on-click-modal="false" :show-close="false">
      <div class="content">
        <div v-if="activeSwitch==0">
          <el-input placeholder="这一刻你的想法......" v-model="formline.umz_name" type="textarea" rows="5" />
        </div>
        <div v-if="activeSwitch==1">
          <el-input placeholder="相册名字......" v-model="formline.umz_name" />
          <div class="uploadDiv">
            <div style="display: flex;">
              <el-upload class="mainUpload" action="" accept=".png, .jpg, .jpeg" :auto-upload="false" list-type="picture-card" :on-change="handleMainChange" :file-list="mainFileList">
                <el-icon size="38" color="#9d9ab9" v-if="mainFileList.length==0">
                  <Picture />
                </el-icon>
                <img v-else :src="mainFileList[0].url" alt="" style="width: 100%;height: 100%;" />
              </el-upload>
              <div style="font-size: 12px;margin-left: 20px;position: relative;">
                <div style="color: #949494;">上传相册封面</div>
              </div>
            </div>
          </div>
        </div>
        <el-upload class="attachUpload" action="" accept=".png, .jpg, .jpeg" list-type="picture-card" :auto-upload="false" :limit="activeSwitch==0?9:50" :on-exceed="handleExceed" :on-change="handleFileChange" :file-list="fileList">
          <el-icon>
            <Plus />
          </el-icon>
        </el-upload>
        <div style="color: #BFBFBF;font-size: 12px;">最多上传{{activeSwitch==0?9:50}}张</div>
        <div>
          <div style="color: #949494;font-size: 14px;margin-top: 15px;">是否分享到艺术广场</div>
          <el-radio-group v-model="formline.umz_share_ysgc">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="commitData">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getFullUrl } from '@/utils/helper';
import { upload_file } from "../../MyCourse/api.js";
import Work from "./Work.vue"
import Album from "./Album.vue"
export default {
  data() {
    return {
      loading: false,
      editId: "",
      switchData: ["作品", "相册"],
      activeSwitch: 0,
      resultData: [],
      dialogVisible: false,
      formline: {
        umz_name: "",
        umz_share_ysgc: "",
        umz_img: ""
      },
      fileList: [],
      fileData: ["jpg", "jpeg", "png"],
      imageData: [],
      mainFileList: []
    }
  },
  components: { Work, Album },
  methods: {
    initSwitch(index) {
      this.activeSwitch = index;
      this.initData();
    },
    initData() {
      this.loading = true;
      request({
        url: '/user/mszpz/index',
        data: {
          umz_type: this.activeSwitch == 0 ? 1 : 2,
          my_mszpz: 1,
        }
      }).then(res => {
        if (res.code == 1) {
          this.resultData = [];
          let resultData = res.data.page_data;
          resultData.map((item) => {
            item.imageData = item.umz_files_all.split(",");
            item.imageData = item.imageData.filter(value => value != "");
            item.srcList = [];
            item.imageData.map(value => {
              item.srcList.push(getFullUrl(value));
            })
            let date = new Date(item.create_time);
            item.year = date.getFullYear();
            item.month = date.getMonth() + 1;
            item.day = date.getDate();

            let index = this.resultData.findIndex(val => val.year == item.year);
            if (index == -1) {
              this.resultData = [{
                year: item.year,
                children: [item]
              }]
            } else {
              this.resultData[index].children.push(item);
            }
          })

          this.loading = false;
        }
      })
    },
    handleOpen() {
      this.dialogVisible = true;
    },
    handleMainChange(file, fileList) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isJPG = this.fileData.includes(fileType);

      if (isJPG) {
        this.mainFileList = [file];
      } else {
        this.$message.error("请上传图片！");
        this.mainFileList = [];
      }

      if (this.mainFileList.length == 0) {
        return false;
      }

      upload_file(file.raw).then(res => {
        if (res.code == 1) {
          this.formline.umz_img = res.data.url;
        }
      })
    },
    handleFileChange(file, fileList) {
      let fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
      const isJPG = this.fileData.includes(fileType);
      if (!isJPG) {
        this.$message.error("请上传图片！");
        return false;
      }

      this.fileList = [...fileList];

      if (this.fileList.length == 0) {
        return false;
      }

      upload_file(file.raw).then(res => {
        if (res.code == 1) {
          this.imageData.push(res.data.url);
        }
      })
    },
    handleExceed() {
      if (this.activeSwitch == 0) {
        this.$message.error("最多上传9张图片!");
      } else if (this.activeSwitch == 1) {
        this.$message.error("最多上传50张图片!");
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.mainFileList = [];
      this.fileList = [];
      this.imageData = [];
      this.formline = {
        umz_name: "",
        umz_share_ysgc: "",
        umz_img: ""
      }
      this.editId = "";
    },
    commitData() {
      let user_mszpz = {
        umz_files_all: this.imageData.join(","),
        umz_name: this.formline.umz_name,
        umz_share_ysgc: this.formline.umz_share_ysgc,
      }
      if (this.activeSwitch == 0) {
        user_mszpz.umz_type = 1;
      } else if (this.activeSwitch == 1) {
        user_mszpz.umz_type = 2;
        user_mszpz.umz_img = this.formline.umz_img;
      }
      if (this.editId == "") {
        request({
          url: '/user/mszpz/add',
          data: {
            user_mszpz: user_mszpz
          }
        }).then(res => {
          if (res.code == 1) {
            this.$message.success("保存成功！");
            this.initData();
            this.handleClose();
          }
        })
      } else {
        request({
          url: '/user/mszpz/edit',
          data: {
            umz_id: this.editId,
            user_mszpz: user_mszpz
          }
        }).then(res => {
          if (res.code == 1) {
            this.$message.success("保存成功！");
            this.initData();
            this.handleClose();
          }
        })
      }
    },
    handleEdit(umz_id) {
      this.editId = umz_id;
      request({
        url: '/user/mszpz/detail',
        data: {
          umz_id: umz_id
        }
      }).then(res => {
        if (res.code == 1) {
          let data = res.data.one_info;
          this.imageData = data.umz_files_all.split(",");
          this.imageData = this.imageData.filter(value => value != "");
          this.fileList = [];
          this.imageData.map((item) => {
            this.fileList.push({
              url: getFullUrl(item)
            })
          })
          this.formline.umz_name = data.umz_name;
          this.formline.umz_share_ysgc = data.umz_share_ysgc_option_k;
          if (this.activeSwitch == 1) {
            this.formline.umz_img = data.umz_img;
            this.mainFileList = [{
              url: getFullUrl(data.umz_img)
            }]
          }
          this.dialogVisible = true;
        }
      })
    },
    handleDelete(umz_id) {
      ElMessageBox.confirm('是否确定删除当前作品？', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        request({
          url: '/user/mszpz/delete',
          data: { umz_id }
        }).then(res => {
          if (res.code == 1) {
            this.$message.success("删除成功！");
            this.initData();
          }
        })
      }).catch(() => {

      })
    }
  },
  created() {
    this.initData();
  }
}
</script>

<style lang="scss" scoped>
.personalPhoto {
  .spaceBetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .top {
    border-bottom: 1px solid #e4e6e8;
    font-size: 18px;
    color: #171721;
    padding-bottom: 15px;
    .el-button {
      width: 100px;
      height: 40px;
      background: #00a3ff;
    }
  }
  .switch {
    display: inline-block;
    border: 1px solid #dbe7ec;
    padding: 3px;
    border-radius: 12px;
    margin-top: 15px;
    .switchDiv {
      display: flex;
      .list {
        width: 84px;
        text-align: center;
        cursor: pointer;
        color: #666;
        line-height: 30px;
        padding: 0 10px;
        &.active {
          background: #e8f3fa;
          color: #000;
          border-radius: 12px;
        }
      }
    }
  }
  ::v-deep .el-dialog {
    .el-dialog__header {
      text-align: left;
      border-bottom: 1px solid #f3f3f3;
      font-size: 16px;
      padding: 0 25px;
      margin: 0;
      line-height: 50px;
    }
    .el-dialog__body {
      padding: 10px 40px;
      .el-textarea__inner,
      .el-input__wrapper {
        box-shadow: none;
        padding: 0;
        margin-bottom: 10px;
      }
      .el-upload--picture-card,
      .el-upload-list__item {
        width: 115px;
        height: 115px;
        .el-upload-list__item-preview {
          display: none;
        }
        .el-upload-list__item-delete {
          margin: 0;
        }
      }
      .uploadDiv {
        margin: 0 0 40px;
      }
      .mainUpload {
        .el-upload.el-upload--picture-card {
          width: 180px;
          height: 96px;
        }
        .el-upload-list--picture-card .el-upload-list__item {
          display: none;
        }
      }
    }
  }
}
</style>