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

              <div class="text-size-16px">开启订阅，将为您推荐同类精彩内容！</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-46px"></div>
        </ui-shadow-box>
        <ui-shadow-box class="px-30px pt-37px pb-44px">
          <div class="flex justify-between items-center mb-18px">
            <div class="flex items-center">
              <div class="text-size-24px mr-12px">{{ $t("评论") }}</div>
              <div class="text-size-14px text-[#686868]">
                {{ $t("文明上网，理性发言！") }}
              </div>
            </div>
            <div class="text-size-14px text-primary">123{{ $t("条评论") }}</div>
          </div>
          <el-input
            class="!bg-[#F7F7F7] h-100px mb-20px"
            type="textarea"
            :rows="2"
            :placeholder="$t('我来说两句')"
            v-model="textarea"
          >
          </el-input>
          <div class="flex justify-end mb-14px">
            <el-button type="primary" class="text-white h-30px !py-0" round
              >发布</el-button
            >
          </div>
          <div class="text-size-20px mb-16px">全部评论</div>
          <ui-devider></ui-devider>
          <div v-for="item in 4" :key="item">
            <div class="flex items-start py-30px">
              <img class="w-60px h-60px round" src="/imgs/avatar.png" />
              <div class="mt-8px ml-14px">
                <div class="flex mb-14px items-center">
                  <div class="font-extralight text-size-16px mr-30px">用户名</div>
                  <div class="text-size-14px text-[#B8B8B8]">2022-08-26 06:53</div>
                </div>
                <div class="text-[#686868] leading-20px text-size-14px">
                  评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容评论内容
                </div>
              </div>
            </div>
            <ui-devider></ui-devider>
          </div>
          <div class="flex justify-center">
            <el-button type="text" class="!text-[#686868]">查看更多评论</el-button>
          </div>
        </ui-shadow-box>
      </div>

      <div class="right w-320px">
        <div class="px-20px bg-white">
          <div class="h-17px"></div>
          <div class="relative inline-flex mb-6.5px">
            <img src="/imgs/hot.png" class="w-24px h-auto mr-4px" />
            <div class="font-thin text-[#000] text-size-20px">{{ $t("热榜文章") }}</div>

            <div
              class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
            ></div>
          </div>
          <ui-devider></ui-devider>
          <div class="h-21px"></div>
          <ui-swiper
            class="mb-20px"
            :items="[
              { url: '/imgs/article_cover1.png', title: '这是标题' },
              { url: '/imgs/article_cover1.png', title: '这是标题' },
            ]"
            titleClass="swiper-title"
          ></ui-swiper>
          <ui-devider></ui-devider>

          <div v-for="item in 9" :key="item">
            <ui-small-article></ui-small-article>
            <ui-devider></ui-devider>
          </div>
        </div>
        <div class="h-20px"></div>
        <div class="px-20px bg-white">
          <div class="h-17px"></div>
          <div class="relative flex mb-6.5px justify-between item-center">
            <div class="inline-flex">
              <img src="/imgs/vip.png" class="w-24px h-auto mr-4px" />
              <div class="font-thin text-[#000] text-size-20px">
                {{ $t("VIP期刊") }}
              </div>
            </div>
            <el-button
              type="text"
              class="!p-0 !text-size-14px !font-normal !text-[#686868]"
              >查看更多</el-button
            >

            <div
              class="w-full h-3px absolute left-0 bottom-[-7.5px] bg-primary rounded-full"
            ></div>
          </div>
          <ui-devider></ui-devider>
          <div class="h-21px"></div>

          <ui-swiper
            class="mb-20px"
            :items="[
              { url: 'imgs/article_cover1.png', title: '这是标题' },
              { url: 'imgs/article_cover1.png', title: '这是标题' },
            ]"
            titleClass="swiper-title"
          ></ui-swiper>
          <ui-swiper
            class="mb-20px"
            :items="[
              { url: 'imgs/article_cover1.png', title: '这是标题' },
              { url: 'imgs/article_cover1.png', title: '这是标题' },
            ]"
            titleClass="swiper-title"
          ></ui-swiper>
          <ui-devider></ui-devider>
          <div v-for="item in 10" :key="item">
            <ui-vip-article></ui-vip-article>
            <ui-devider></ui-devider>
          </div>
        </div>
      </div>
    </div>
    <el-dialog @close="exportVisible = false" :visible="exportVisible" width="1200px">
      <div class="w-full">
        <div class="flex items-center mb-60px">
          <div class="flex-1 text-right mr-70px">{{ $t("分享链接") }}：</div>
          <div class="flex-1">https://daohang.qq.com/?fr=hmpage</div>
          <div class="flex-1 ml-84px">
            <el-button
              class="!font-normal !text-white !bg-primary !w-120px !h-40px"
              round
              >{{ $t("复制链接") }}</el-button
            >
          </div>
        </div>
        <div class="flex items-start">
          <div class="flex-1 text-right mr-70px">{{ $t("分享海报") }}：</div>
          <div class="flex-1">
            <ui-shadow-box ref="post" class="px-24px py-38px flex flex-col items-center">
              <div class="font-extralight text-primary text-size-20px mb-28px">
                {{ $t("杂志期刊") }}
              </div>
              <img src="/imgs/export-cover.png" class="w-310px h-auto mb-24px" />
              <div class="text-size-16px text-[#000A04] mb-32px">
                这里是轮播图推荐内容标题这里是轮播图推荐内容标题...
              </div>
              <div class="text-size-14px text-[#686868] mb-24px">
                这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文章简介内容这里是文这里是文章简介内容这里是文章简介内容这里是文章简介内容这......
              </div>
              <div class="flex items-center w-full justify-end">
                <div class="mr-10px text-[#B8B8B8] text-size-14px">
                  <div class="mb-10px">作者：香港特派员赵圆松</div>
                  <div class="text-right">时间：2022-08-26</div>
                </div>
                <img src="/imgs/export-qrcode.png" class="w-64px h-64px" />
              </div>
            </ui-shadow-box>
          </div>
          <div class="flex-1 ml-84px">
            <el-button
              @click="exportPost"
              class="!font-normal !text-white !bg-primary !w-120px !h-40px"
              round
              >{{ $t("复制海报") }}</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import domtoimage from "dom-to-image";
export default {
  methods: {
    async exportPost() {
      console.log(
        "%c [ this.$refs.post ]-245",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.$refs.post.$el
      );
      const url = await domtoimage.toPng(this.$refs.post.$el, { filter: false });

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

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

<p>&nbsp;</p>

<p>&nbsp;</p>

<p><span style="font-size:16px">作者：香港特派员赵圆松；期刊：尖瑞科技期刊（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-1px !border-primary border-solid !text-primary ml-30px;
}
.detail .action-button.done {
  @apply bg-primary !text-white;
}
.detail .el-textarea textarea {
  @apply h-full bg-[#F7F7F7];
}
</style>
