<template>
  <div class="main">
    <div class="box">
      <div class="title">基本信息</div>
      <div class="picBox">
        <div class="picList">
          <div v-for="(item, index) in list.idCardUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="infoList"
            >
            </el-image>
          </div>
        </div>
        <div class="picList">
          <div v-for="(item, index) in list.gpaUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="infoList"
            >
            </el-image>
          </div>
        </div>
        <div class="picList">
          <div v-for="(item, index) in list.passportUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="infoList"
            >
            </el-image>
          </div>
        </div>
        <div class="picList">
          <div v-for="(item, index) in list.papersUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="infoList"
            >
            </el-image>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="title">缴费</div>
      <div class="picBox">
        <div class="picList">
          <div v-for="(item, index) in list.payCostUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="payList"
            >
            </el-image>
          </div>
        </div>
      </div>
    </div>
    <div class="box">
      <div class="title">LOP</div>
      <div class="picBox">
        <div class="picList">
          <div v-for="(item, index) in list.lopUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="lopList"
            >
            </el-image>
          </div>
        </div>
      </div>

      <el-upload
        :action="`${$UPLOAD_BASE_URL}/storage/upload`"
        :headers="headers"
        list-type="picture-card"
        name="file"
        :file-list="LOPfileList"
        :on-remove="handleLOPRemove"
        :on-success="handleLOPSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div class="box">
      <div class="title">
        转学分
      </div>
      <div class="picBox">
        <div class="picList">
          <div v-for="(item, index) in list.creditUrlList" :key="index">
            <!-- <img :src="item.url" alt="" /> -->
            <el-image
              style="width: 180px; height: 180px; margin: 20px;"
              fit="contain"
              :src="item.url"
              :preview-src-list="creUrlList"
            >
            </el-image>
          </div>
        </div>
      </div>

      <el-upload
        :action="`${$UPLOAD_BASE_URL}/storage/upload`"
        :headers="headers"
        list-type="picture-card"
        name="file"
        :file-list="creditfileList"
        :on-remove="handlecreditRemove"
        :on-success="handlecreditSuccess"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <el-button @click="submitForm" type="primary">提交</el-button>
  </div>
</template>

<script>
import { proofPic, picUrl } from "@/api/cso";
import { getToken } from "@/utils/auth";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 10
};
export default {
  name: "proof",
  data() {
    return {
      userId: "",
      listQuery: Object.assign({}, defaultListQuery),
      list: {},
      total: null,
      listLoading: true,
      picUrl: {
        lopUrlList: [],
        creditUrlList: [],

        userId: ""
      },
      LOPfileList: [],
      creditfileList: [],
      infoList: [],
      payList: [],
      lopList: [],
      creUrlList: [],
      token: ""
    };
  },
  methods: {
    getData() {
      this.listLoading = true;
      proofPic(this.userId).then(res => {
        this.listLoading = false;
        this.list = JSON.parse(JSON.stringify(res.data));
        console.log(this.list, "proof");

        if (this.list.idCardUrlList) {
          this.list.idCardUrlList.forEach(item => {
            this.infoList.push(item.url);
          });
        }

        if (this.list.gpaUrlList) {
          this.list.gpaUrlList.forEach(item => {
            this.infoList.push(item.url);
          });
        }

        if (this.list.papersUrlList) {
          this.list.papersUrlList.forEach(item => {
            this.infoList.push(item.url);
          });
        }

        if (this.list.passportUrlList) {
          this.list.passportUrlList.forEach(item => {
            this.infoList.push(item.url);
          });
        }

        if (this.list.payCostUrlList) {
          this.list.payCostUrlList.forEach(item => {
            this.payList.push(item.url);
          });
        }

        if (this.list.lopUrlList) {
          this.list.lopUrlList.forEach(item => {
            this.lopList.push(item.url);
          });
        }

        if (this.list.creditUrlList) {
          this.list.creditUrlList.forEach(item => {
            this.creUrlList.push(item.url);
          });
        }
        // console.log(this.infoList, "this.infoList");
        // this.total = res.data.total;

        // this.list = JSON.parse(JSON.stringify(res.data.list));
        // console.log(this.list, "proof");
        this.$forceUpdate();
      });
    },
    handleLOPRemove(file, fileList) {
      let arr = this.LOPfileList.filter(item => {
        return item.url !== file.url;
      });
      this.LOPfileList = arr;
      // console.log(this.LOPfileList, "this.LOPfileList");
    },

    handleLOPSuccess(res, file, fileList) {
      let arr = {};
      arr.url = res.data.url;
      this.LOPfileList.push(arr);
      // console.log(this.LOPfileList, "this.LOPfileList");
    },
    handlecreditRemove(file, fileList) {
      let arr = this.creditfileList.filter(item => {
        return item.url !== file.url;
      });
      this.creditfileList = arr;
      // console.log(this.creditfileList, "this.creditfileList");
    },

    handlecreditSuccess(res, file, fileList) {
      let arr = {};
      arr.url = res.data.url;
      this.creditfileList.push(arr);
      // console.log(this.creditfileList, "this.creditfileList");
    },
    submitForm() {
      // let arr = {};
      // for (const key in this.picUrl) {
      //   arr[key] = this.picUrl[key];

      //   console.log(key, "key");
      // }
      // arr.userId = this.picUrl.userId;
      // console.log(arr, "arr");
      this.picUrl.lopUrlList = this.LOPfileList;
      this.picUrl.creditUrlList = this.creditfileList;

      this.$confirm("是否要保存", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        picUrl(this.picUrl).then(response => {
          this.$message({
            type: "success",
            message: "保存成功",
            duration: 1000
          });
          // location.reload();
          this.$forceUpdate();
        });
        // console.log(this.UserInfoDetail, "submitForm");
      });

      // createUser(this.form)
    }
  },
  computed: {
    headers() {
      return {
        Authorization: this.token
      };
    }
  },
  mounted() {
    console.log('mounted');
    this.userId = this.$route.query.id;
    this.picUrl.userId = this.$route.query.id;
    this.getData();
    this.token = getToken();
  },

};
</script>

<style lang="scss" scoped>
.main {
  // display: flex;
  .box {
    // width: 250px;
    // background-color: #f1c40f;
    // margin-right: 20px;
    // display: flex;
    // justify-content: center;
    .picBox {
      display: flex;
      .picList {
        display: flex;
      }
    }
    .title {
      font-size: 20px;
    }
  }
  img {
    width: 200px;
    height: 200px;
    object-fit: contain;
    margin: 20px;
    transition: 0.5s;
    // &:hover {
    //   // transform: scale(1.5);
    //   position: fixed;
    //   top: 50%;
    //   left: 50%;
    //   transform: translate(-50%, -50%);
    //   z-index: 10;
    //   width: 50vw;
    //   height: 50vh;
    //   object-fit: cover;
    // }
  }
}
</style>
