<template>
  <ui-page-layout title="文章详情">
    <div class="px-24rem bg-white w-full pb-98rem">

      <div class="w-full bg-white h-auto rem-30rem pt-30rem mb-14rem">
        <div class="text-size-40rem text-[#000]   mb-27rem">
          这里是文章标题这里是文章标题，文章标题
          这里是文章标题这里是文章标题，文章标题
        </div>
        <div class="text-[#B8B8B8] text-size-24rem mb-19rem">香港特派员赵圆松</div>
        <div class="flex text-[#B8B8B8] text-size-14rem items-center justify-between mb-33rem">
          <div class="flex items-center">

            <div class=" flex items-center">
              <img class="w-18rem h-auto mr-8rem" src="/imgs/time.png" />
              <span>2022-08-26</span>
            </div>
          </div>
          <div class="flex items-center text-size-20rem">
            <div class="mr-24rem">5评论</div>
            <div class="mr-24rem">10点赞</div>
            <div class="mr-24rem">56收藏</div>
            <div>36582浏览</div>
          </div>
        </div>
        <div class="bg-[#F7F7F7] p-24rem text-[#686868] text-size-16rem leading-32rem whitespace-pre-wrap mb-30rem">
          <p class="indent-32rem">
            这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容，这里是文章简介
            或摘容，这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容。这里是文章
            简介或摘要内容，这里是文章简介或摘要内容，这里是文章简介或摘要内容这里是文章简介或摘要内容。
          </p>
        </div>
        <div class="content" v-html="html"></div>
        <div class="p-24rem bg-[#f7f7f7] text-[#686868] leading-32rem text-size-16rem mb-30rem">
          <p>作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）</p>
          <p>本文由 @商业数据派 原创发布于杂志期刊，未经许可，禁止转载。</p>
          <p>题图来自 Unsplash，基于CC0协议</p>
        </div>
        <div class="flex justify-center mb-30rem">
          <div type="primary" round
            class="h-60rem w-500rem bg-primary flex justify-center items-center rounded-full text-white">成为会员，查看更多精彩内容！
          </div>
        </div>
        <ui-devider class="mb-30rem"></ui-devider>
        <div class="flex items-center justify-between">
          <div class="flex items-center">
            <el-switch v-model="subscriped" inactive-color="#E1E1E1" class="mr-10rem">
            </el-switch>

            <div class="text-size-30rem text-[#282828]">开启订阅，将为您推荐同类精彩内容！</div>
          </div>
          <!-- <div class="flex items-center">
            <el-button class="action-button done" round> 收藏 | 2 </el-button>
            <el-button class="action-button" round> 点赞 | 20 </el-button>
            <el-button @click="exportVisible = true" class="action-button" round>
              分享
            </el-button>
          </div> -->
        </div>
        <div class="h-46rem"></div>

        <div class="rem-30rem pt-37rem pb-44rem">
          <div class="text-size-30rem mb-16rem">全部评论</div>
          <ui-devider></ui-devider>
          <div v-for="item in 4" :key="item">
            <div class="flex items-start py-30rem">
              <img class="w-60rem h-60rem round" src="/imgs/avatar.png" />
              <div class="mt-8rem ml-14rem">
                <div class="flex mb-14rem items-center">
                  <div class=" text-size-30rem mr-30rem">用户名</div>
                  <div class="text-size-24rem text-[#B8B8B8]">2022-08-26 06:53</div>
                </div>
                <div class="text-[#686868] leading-34rem text-size-24rem">
                  评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
                </div>
              </div>
            </div>
            <ui-devider></ui-devider>
          </div>
          <div class="flex justify-center">
            <el-button @click="$router.push('/article-comment')" type="text" class="!text-[#686868]">{{ $t("查看更多评论") }}</el-button>
          </div>
        </div>
      </div>
      <van-action-sheet v-model="showShare"   >
        <div class="h-334rem bg-[#fff] flex justify-around items-center">
          <img @click="showShare = false" src="/imgs/h5-action-close.png"  class="w-32rem h-32rem absolute right-30rem top-30rem"/>
          <div @click="() => {
            showShare = false
            exportVisible = true
          }" class="flex flex-col items-center">
            <img  src="/imgs/h5-share-post.png" class="w-70rem"/>
            <div class="font-light text-size-30rem text-primary mt-23rem">
              分享海报
            </div>
          </div>
          <div class="flex flex-col items-center">
            <img src="/imgs/h5-share-link.png" class="w-70rem"/>
            <div class="font-light text-size-30rem text-primary mt-23rem">
              分享链接
            </div>
          </div>
        </div>
      </van-action-sheet>

      <van-overlay :show="exportVisible">
        <div class="w-screen h-full flex flex-col items-center justify-between ">
          <div ref="post"
            class="mt-24rem w-675rem h-1037rem  py-38rem flex flex-col items-center bg-white rounded-10rem px-45rem">
            <div class=" text-primary text-size-36rem mb-72rem">
              {{ $t("杂志期刊") }}
            </div>
            <img src="/imgs/export-cover.png" class="w-full h-328rem object-cover" />
            <div class="text-size-30rem leading-42rem text-[#000A04] mt-28rem ">
              这里是轮播图推荐内容标题这里是轮播图推荐内容标题...
            </div>
            <div class="text-size-30rem text-[#686868] leading-30rem mt-36rem font-light">
              这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文这里是文章简介内容这里是文章简介内容这里是文章简介内容这......
            </div>
            <div class="flex items-center w-full justify-end mt-74rem">
              <div class="mr-10rem text-[#B8B8B8] text-size-14rem h-84rem flex flex-col justify-between">
                <div class="mb-10rem">作者：香港特派员赵圆松</div>
                <div class="text-right">时间：2022-08-26</div>
              </div>
              <img src="/imgs/export-qrcode.png" class="w-120rem h-120rem" />
            </div>
          </div>
          <div class="w-full h-200rem bg-white flex justify-center items-center relative">
            <img @click="exportVisible = false" src="/imgs/h5-action-close.png"
              class="w-32rem absolute top-30rem right-30rem" />
            <div @click="exportPost"
              class="w-600rem h-88rem bg-primary flex justify-center items-center rounded-full text-white">
              {{ $t("保存海报") }}
            </div>
          </div>
        </div>

      </van-overlay>
      <div class="absolute left-0 bottom-0 h-88rem w-full bg-[#f7f7f7] flex items-center">
        <div class="flex-1 flex pl-24rem items-center justify-between">
          <img class="w-13rem " src="/imgs/comment-arrow-left.png" />
          <van-field
            class="flex items-center !p-0 !pl-24rem bg-transparentborder-1rem border-[#707070] border-solid !w-308rem h-60rem rounded-full bg-white">
          </van-field>
        </div>

        <div class="flex items-center flex-1 justify-around">
          <img src="/imgs/h5-message.png" class="w-37rem" />
          <img src="/imgs/comment-collection.png" class="w-37rem" />
          <img src="/imgs/comment-like.png" class="w-36rem" />
          <img @click="showShare = true" src="/imgs/comment-share.png" class="w-41rem" />
        </div>
      </div>
    </div>
  </ui-page-layout>
</template>

<script>
import FileSaver from "file-saver";
import domtoimage from "dom-to-image";
export default {
  methods: {
    async exportPost() {

      const url = await domtoimage.toPng(this.$refs.post, { filter: false });

      FileSaver.saveAs(url, "post.png");
    },
  },
  data() {
    return {
      showShare:true,
      exportVisible: false,
      subscriped: true,
      html: `<p><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem"><img alt="" src="/imgs/article-detail-pic-1.png" style="width:100%" /></span></p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">据央视新闻7月22日消息，俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">另据央视新闻报道称，当地时间21日，欧洲理事会公布了针对俄罗斯的新制裁措施，包括禁止进口来自俄罗斯金和珠宝；增加了俄罗斯可用于军用的物资和技术禁运清单，增加了对俄罗斯个人和实体的制裁。俄军打击乌军指挥所 乌军击退俄军进攻</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">俄罗斯国防部发言人科纳申科夫21日通报说，俄军在尼古拉耶夫和克拉玛托尔斯克打击了乌军多个指挥所，在顿涅茨克和尼古拉耶夫等地摧毁了多个乌军弹药库。另外，俄军还击落乌空军1架苏-25战机、1架米-8直升机和5架军用无人机。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">另据乌克兰国家通讯社21日援引乌各地军事部门的消息报道，俄军继续对苏梅、哈尔科夫、卢甘斯克、顿涅茨克等地区进行大规模炮击。在乌军阻击下，俄军未能在巴赫穆特方向取得突破，没有占领乌格列戈尔斯克发电厂。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">俄外长称在乌军事目标发生变化，与西方向乌军提供武器有关。</span></p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16rem">作者：香港特派员赵圆松；期刊：尖瑞科技期刊（ID：business-data）<br />
本文由 @商业数据派 原创发布于人人都是产品经理，未经许可，禁止转载。<br />
题图来自 Unsplash，基于CC0协议</span></p>
<p>&nbsp;</p>

<p>&nbsp;</p>
`,
    };
  },
};
</script>

<style>
.detail .content {}

.detail .action-button {
  @apply !font-light border-1rem !border-primary border-solid !text-primary ml-30rem;
}

.detail .action-button.done {
  @apply bg-primary !text-white;
}

.detail .el-textarea textarea {
  @apply h-full bg-[#F7F7F7];
}
</style>
