<template>
  <common-header />
  <div class="ysgc_detail pb-80px">
    <div class="top">
      <div class="top_nav">
        <div class="title">详情</div>
        <div class="sub_title">
          艺术广场 - 教师优秀作品 - <span class="t_detail">详情</span>
        </div>
        <div class="right" @click="goBack()">返回</div>
      </div>
    </div>
    <div class="content">
      <div class="detail-title flex justify-between">
        <div>
          <h3 class="con_title">{{detailData.yz_name}}</h3>
          <el-popover placement="bottom" :width="410" trigger="hover">
            <template #reference>
              <div class="share">
                <img style="  display: inline-block !important; width: 16px;margin-right:7px" src="@/assets/kczy/shareIcon.png" alt="" />分享
              </div>
            </template>
            <div class="w-full">
              <div class="w-full text-center">呼唤小伙伴们前来围观吧</div>
              <div class="flex justify-around m-10" style="position:relative">
                <div class="weibo" @click="shareToSina(shareLink)">
                  <img src="@/assets/img/wb.png" />
                </div>
                <div class="qq" @click="shareToQq(shareLink)">
                  <img src="@/assets/img/QQ.png" />
                </div>
                <div class="qqkj" @click="shareToQqzone(shareLink)">
                  <img src="@/assets/img/QQ1.png" />
                </div>
                <qrcode-vue :value="shareLink" :size="size" level="H" />
                <div style="position:absolute;bottom:-20px;right:17px">微信扫码分享</div>
              </div>
              <el-divider></el-divider>
              <div class="text-hex-00a3ff mb-2">地址</div>
              <div class="flex">
                <div class="bg-hex-F7F7F7 p-2 flex-auto mr-4 truncate">
                  {{ shareLink }}
                </div>
                <div class="
                  text-sm
                  bg-hex-0A8AFF
                  text-white
                  flex_center
                  w-100px
                  h-40px
                   
                  rounded
                  cursor-pointer
                  copy
                " @click="copyLink" style="line-height:40px">
                  复制链接
                </div>
              </div>
            </div>
          </el-popover>
        </div>
        <div class=" flex justify-between">
          <div class="nicBaseInfo_action">
            <div class="coverC" @click="finger">
              <img class="posiA posi1" v-if="fingerSwitch == '0'" src="@/assets/kczy/zanIcon.png" />
              <img class="posiA posi1" v-else src="@/assets/kczy/zanIcon_full.png" />
              <span class="posiA posi2">{{ fingerNum}}</span>
            </div>
            <div class="coverC" @click="loveIcon">
              <img class="posiA posi3" v-if="loveSwitch == '0'" src="@/assets/kczy/collectIcon.png" />
              <img class="posiA posi3" v-else src="@/assets/kczy/collectIcon_full.png" />
              <span class="posiA posi4">{{ loveNum}}</span>
            </div>
          </div>
          <div class="nicBaseInfo_forceBtn">
            <div v-if="detailData.is_watch == 1" @click="delFollow(detailData.create_user_id)"> 已关注 </div>
            <div v-else @click="toFollow(detailData.create_user_id)">关注 </div>
          </div>
        </div>

      </div>

      <div class="art">
        <el-carousel :interval="3000" arrow="always" :autoplay="false" :loop="true" v-if="detailData.file_list&&detailData.file_list.length!='0'">
          <el-carousel-item v-for="(item,i) in detailData.file_list" :key="item">
            <img class="pointer" :src="item" @click="lookViewer(i, 1)" fit="cover" style="max-height:100%;margin:0 auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);" />
          </el-carousel-item>
        </el-carousel>
        <img class="pointer" v-else :src="detailData.yz_img" @click="lookViewer(0, 2)" fit="cover" style="max-height:100%;margin:0 auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);" />
        <div class="author">
          <!-- <img src="@/assets/img/zhjy/main_3.png" alt="" class="avt" />
          <span class="name">{{detailData.yz_author_name}}</span> -->
        </div>
        <div class="evaluate">
          <div class="pj-list">
            <ul class="eva" v-for="(e, i) in evaluateListData" :key="i" v-show="detailData.yz_id === e.yz_id">
              <li class="each_eva">
                <div class="eva_person">
                  <span class="eva_name"> {{ e.yze_user_realname }} </span>
                  <span class="eva_time"> {{ e.create_time }} </span>
                </div>
                <div class="rate-list-star">
                  <img class="rate-list-img" src="@/assets/img/zhjyzxxx/star.png" alt="" v-for="(item, index) in Number(e.yze_star)" :key="index" />
                </div>
              </li>
            </ul>
          </div>
          <div class="addComment">
            <el-rate v-model="pjInfo.yze_star"></el-rate>
            <!-- <input type="text" v-model="pjInfo.yze_star" /> -->
            <button :disabled="disabled" :class="disabled?'add-gray':'add'" @click="formSubmit(detailData.yz_id)">评价</button>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer v-if="showViewer" @close="closeViewer" :url-list="imageData" :initial-index="imageIndex" />
  </div>
  <common-footer />
</template>
<script>
import QrcodeVue from "qrcode.vue";
import {
  ysgc_detail, ysgc_evaluate, ysgc_addEvaluate, jszp_like_add,
  jszp_like_del,
  jszp_fav_add,
  jszp_fav_del,
  zxxx_attention_add,
  zxxx_attention_del,
  userInfoDetail
} from './api';
import { ElMessage } from "element-plus";
import { user } from "@/store/user.js";
import CommonHeader from "@/components/CommonHeader/index.vue";
import CommonFooter from "@/components/CommonFooter/index.vue";
import { getFullUrl, getAvatarUrl } from '@/utils/helper';
export default {
  components: {
    CommonHeader,
    CommonFooter,
    QrcodeVue,
  },

  data() {
    return {
      file_list: [],
      yz_id: "",
      evaluateInfo: {},
      detailData: {},
      evaluateListData: [],
      pjInfo: {
        yze_star: "",
        yze_user_realname: "",
        yz_id: "",
        yze_type: "1",
        yze_id: "",
      },
      https: window.GLOBAL_CONFIG.api,
      shareLink: window.location.href,
      fingerNum: 0, //点赞数
      fingerSwitch: 0, //0：关 1：开
      loveNum: 0, //收藏
      loveSwitch: 0, //0：关 1：开
      uw_user_id: "",
      disabled: false,
      showViewer: false,
      imageData: [],
      imageIndex: "",
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    lookViewer(index, type) {
      if (type == 1) {
        this.imageData = this.detailData.file_list;
      } else if (type == 2) {
        this.imageData = [this.detailData.yz_img]
      }
      // console.log(this.imageData, 123);
      this.imageIndex = index;
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
    initUserInfoDetail() {
      let transObj = {
        token: user?.token,
        user_id: user.user_id,
      };
      userInfoDetail(transObj)
        .then((res) => {
          if (res.code == "1") {
            this.userInfoData = res.data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //关注or已关注
    toFollow(e) {
      console.log(e, 123);
      let data = {
        site: "tyyx",
        issubmit: "1",
        user_watch: {
          uw_user_id: e,
        },
      };
      zxxx_attention_add(data).then((res) => {
        if (res.code == "1") {
          ElMessage({
            message: "关注成功!",
            type: "success",
          });
          this.detailData.is_watch = 1;
        }
      });
    },
    delFollow(e) {
      let data = {
        site: "tyyx",
        uw_user_id: e,
      };
      zxxx_attention_del(data).then((res) => {
        if (res.code == "1") {
          ElMessage({
            message: "已取消关注!",
            type: "success",
          });
          this.detailData.is_watch = 0;
        }
      });
    },
    /**增加赞或取消*/
    finger() {
      if (this.fingerSwitch == "1") {//去掉赞
        let transObj = {
          yz_id: this.yz_id,
        };
        jszp_like_del(transObj)
          .then(res => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
              this.getDetailData();
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }

          })
          .catch(error => { console.log(error) })

      } else {
        let transObj = {
          yz_id: this.yz_id,

        };
        jszp_like_add(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
              this.getDetailData();
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }

    },
    /**增加收藏或取消*/
    loveIcon() {
      if (this.loveSwitch == 1) {//去掉收藏
        let transObj = {
          yz_id: this.yz_id,
        };
        jszp_fav_del(transObj)
          .then(res => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
              this.getDetailData();
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch(error => {
            console.log(error)
          });
      } else {
        let transObj = {
          yz_id: this.yz_id,

        };
        jszp_fav_add(transObj)
          .then((res) => {
            if (res.code == "1") {
              ElMessage({
                message: res.msg,
                type: "success",
              });
              this.getDetailData();
            } else {
              ElMessage({
                message: res.msg,
                type: "waring",
              });
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }

    },
    //学生作品详情列表
    getDetailData() {
      let data = {
        yz_id: this.yz_id,
      };
      ysgc_detail(data).then((res) => {
        this.detailData = res.data.one_info;
        this.fingerNum = res.data.one_info.yz_like_num; //点赞数
        this.fingerSwitch = res.data.one_info.is_like; //0：关 1：开
        this.loveNum = res.data.one_info.yz_fav_num; //收藏
        this.loveSwitch = res.data.one_info.is_fav; //0：关 1：开
        console.log(this.detailData, 111);
      });
    },
    //评价列表
    getEvaluateListData() {
      let data = { yz_id: this.yz_id };
      ysgc_evaluate(data).then((res) => {
        this.evaluateListData = res.data.page_data;
        console.log(this.evaluateListData, 2222);
        if (res.template.check_myexist == 1) {
          this.disabled = true
        }
      });
    },
    //评价
    evaluateData() {
      this.pjInfo = {
        yze_star: "",
        yze_user_realname: "",
        yz_id: "",
        yze_type: "1",
        yze_id: "",
      };
    },
    formSubmit(id) {
      let data = {
        yze_user_realname: user.user_realname,
        yze_star: this.pjInfo.yze_star,
        yz_id: id,
        yze_id: this.pjInfo.yze_id,
      };
      ysgc_addEvaluate(data).then((res) => {
        this.evaluateInfo = res.data.one_info;
        if (res.code == 1) {
          this.getDetailData();
          this.getEvaluateListData();
          this.pjInfo.yze_star = ""
          this.$forceUpdate();//强制刷新
        }
      });
    },

    async copyLink() {
      await navigator.clipboard.writeText(window.location.href);
      ElMessage.success("已复制");
    },
    //分享
    shareToQq(url) {
      // 分享到腾讯QQ
      var shareqqstring =
        "https://connect.qq.com/widget/shareqq/index.html?url=" +
        encodeURIComponent(url);
      window.open(shareqqstring);
    },
    shareToQqzone(url) {
      // 分享到QQ空间
      var shareqqzonestring =
        "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
        encodeURIComponent(url);
      window.open(shareqqzonestring);
    },
    shareToSina(url) {
      // 分享到新浪微博
      var sharesinastring =
        "http://v.t.sina.com.cn/share/share.php?url=" +
        encodeURIComponent(url) +
        "&searchPic=true#_loginLayer_1639641926022";
      window.open(sharesinastring);
    },
  },

  mounted() {
    if (this.$route.params.id != "") {
      this.yz_id = this.$route.params.id;
      this.getDetailData();
      this.getEvaluateListData();
      this.initUserInfoDetail();
    }
  }
}
</script>

<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
::v-deep .el-carousel__item {
  // height: 838px;
  //overflow-y: scroll;
}
::v-deep .el-carousel__container {
  height: 838px;
  position: relative;
  //line-height: 838px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 838px;
  margin: 0;
}

.detail-title {
  display: flex;
  position: relative;
  height: 65px;

  .share {
    display: inline;
    cursor: pointer;
    color: #00a3ff;
    font-weight: 400;
    margin: 20px 35px;
    font-size: 20px;
  }
  .nicBaseInfo_action {
    width: 250px;
    height: 30px;
    margin-top: 25px;
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    color: #00a3ff;
    position: relative;
    .coverC {
      cursor: pointer;
    }
    .posiA {
      position: absolute;
      z-index: 12;
    }
    .posi1 {
      left: 0px;
      top: 50%;
      transform: translate(0, -50%);
    }

    .posi2 {
      margin: 0 2px;
      left: 10%;
      top: 50%;
      transform: translate(0, -50%);
    }

    .posi3 {
      left: 50%;
      top: 50%;
      transform: translate(0, -50%);
    }

    .posi4 {
      margin: 0 2px;
      left: 60%;
      top: 50%;
      transform: translate(0, -50%);
      // border: 1px solid red;
    }

    .zan {
      background: url("../assets/kczy/zanIcon.png") no-repeat left center;
      background-size: 21px 20px;
      box-sizing: border-box;
      padding: 3px 0 3px 25px;
      cursor: pointer;
    }

    .collect {
      background: url("../assets/kczy/collectIcon.png") no-repeat left center;
      background-size: 21px 20px;
      box-sizing: border-box;
      padding: 3px 0 3px 25px;
      margin-left: 30px;
      cursor: pointer;
    }
  }
  .nicBaseInfo_forceBtn {
    position: relative;
    top: 20px;
    div {
      width: 100px;
      height: 40px;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      background: rgba(0, 131, 197, 0.8);
      border-radius: 6px;
      padding: 7px 20px;
      cursor: pointer;
    }
  }
}

.ysgc_detail {
  width: 100%;
  margin: 0 auto;
  background-color: #fcfeff;
  background-image: url("../../../assets/ysgc/back.png");
  background-size: 100%;
  background-repeat: no-repeat;
  .top {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    box-shadow: 0px 1px 10px 0px rgba(17, 46, 74, 0.1);
    .top_nav {
      position: relative;
      width: 1650px;
      min-width: 1280px;
      margin: 0 auto;
      display: flex;
      padding: 0 10px;
      box-sizing: border-box;
      .title {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #050026;
        margin-right: 45px;
      }
      .sub_title {
        font-size: 14px;
        color: #949494;
        .t_detail {
          color: #000;
        }
      }
      .right {
        position: absolute;
        right: 0;
        width: 100px;
        height: 40px;
        border: 1px solid #00a3ff;
        border-radius: 6px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: center;
        color: #00a3ff;
        line-height: 40px;
        margin-top: 10px;
      }
    }
  }
  .content {
    width: 1650px;
    min-width: 1280px;
    margin: 0 auto;
    position: relative;
    .con_title {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      color: #050026;
      margin: 18px 0;
      display: inline-block;
    }
    .art {
      background-color: #f5f9f9;
      width: 100%;
      height: 838px;
      margin-bottom: 10px;
      position: relative;
      .author {
        position: absolute;
        top: 30px;
        right: 30px;
        display: flex;
        .avt {
          width: 59px;
          height: 59px;
          border-radius: 50%;
        }
        .name {
          height: 59px;
          line-height: 59px;
          font-size: 16px;
          color: #fff;
          font-weight: 500;
          margin-left: 10px;
        }
      }
      .evaluate {
        width: 400px;
        height: 400px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
        //   border: 1px solid red;
        .pj-list {
          height: 300px;
          margin-left: 10px;
          overflow-y: scroll;
        }
        ::-webkit-scrollbar {
          width: 0;
          height: 0;
          color: transparent;
        }
        .eva {
          width: 100%;
          .each_eva {
            width: 394px;
            height: 84px;
            opacity: 0.6;
            background: #050026;
            border-radius: 10px;
            color: #fff;
            padding: 20px;
            box-sizing: border-box;
            margin-bottom: 10px;
            .eva_person {
              .eva_name {
                font-size: 14px;
                font-weight: 600;
                margin-right: 8px;
              }
              .eva_time {
                font-size: 12px;
              }
            }
            .eva_nav {
              font-size: 14px;
              margin: 10px 5px;
            }
          }
        }
        .addComment {
          margin: 20px 0;
          width: 398px;
          height: 71px;
          line-height: 71px;
          opacity: 0.91;
          background: #ffffff;
          border-radius: 0px 10px 0px 10px;
          padding: 0 20px;
          .add {
            width: 111px;
            height: 32px;
            line-height: 32px;
            margin-left: 50px;
            background: linear-gradient(
              90deg,
              rgba(0, 163, 255, 0.7) 20%,
              #57c38f
            );
            border-radius: 38px;
          }
          .add-gray {
            width: 111px;
            height: 32px;
            line-height: 32px;
            margin-left: 50px;
            background: #ccc;
            border-radius: 38px;
          }
        }
      }
    }
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
    }
  }
}
.rate-list-star {
  width: 200px;
  height: 25px;
  .rate-list-img {
    display: inline-block;
    width: 21px;
    height: 20px;
    margin-left: 14px;
  }
}
.el-rate {
  --el-rate-icon-size: 26px;
  margin-top: 20px;
}
</style>
