<template>
  <div class="box">
    <div class="big-title">
      关于“创建安全发展示范城市”LOGO、卡通形象、宣传标语征求意见的公告
    </div>
    <div class="content" v-html="details"></div>
    <div class="box-vantfiled-tax">
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        placeholder="请填写您的相关意见或建议"
        show-word-limit
      />
    </div>

    <div class="box-title">请上传您心目中的活动logo或活动卡通形象</div>
    <div class="box-img">
      <van-uploader
        :after-read="afterRead"
        v-model="fileList"
        :max-count="9"
        multiple
      />
    </div>
    <div class="box-btn">
      <van-button class="box-van-btn" type="info" @click="submit"
        >提交</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Field, Uploader, Button } from "vant";
import { uploadFile } from "@/api/coldfood";
import { insertOpinion } from "@/api/opinion";
Vue.use(Field)
  .use(Uploader)
  .use(Button);

export default {
  data() {
    return {
      details:
        '<p>为深入推进创建安全发展示范城市工作，厚植城市安全文化，增强市民安全意识，不断提升城市本质安全水平，现就“创建安全发展示范城市” LOGO、卡通形象、宣传标语征求意见，有关事项及意见收集通道如下</p ><p class="ql-align-justify"><br></p ><p class="ql-align-justify"><strong>一、创建LOGO</strong></p ><p class="ql-align-justify"><img src="https://www.smart-zj.cn:55901/image/logo.png" /></p ><p>整个LOGO以暗金色为主色调，象征着安全、稳固。LOGO设计融入了救生会“红船”、昭关石塔、镇江市花杜鹃等设计元素。</p ><p class="ql-align-justify">西津渡救生会是古代江上救护各种船只和渡江人的社会慈善机构，LOGO中救生会“红船”寓意着守护这座城市和市民生命财产安全；始建于元朝的昭关石塔蕴含着祈福平安之意；镇江市花杜鹃花造型，也象征着一双呵护城市安全的手；盾牌造型体现守护城市安全的含义。</p ><p class="ql-align-justify"><br></p ><p class="ql-align-justify"><strong>二、创建宣传标语</strong></p ><p class="ql-align-justify">1.加速奔跑，安全镇好。</p ><p class="ql-align-justify">2.镇安全，真福地。</p ><p class="ql-align-justify">3.坚持安全发展，助力“三高一争”。</p ><p class="ql-align-justify">4.筑牢安全基石，跑向美好前途。</p ><p class="ql-align-justify">5.宜业宜居“镇合意”，生产生活“镇安全”。</p ><p class="ql-align-justify">6.安全争示范，发展争荣光。</p ><p class="ql-align-justify">7.城市安全有温度，镇江奔跑有速度。</p ><p class="ql-align-justify">8.奔跑镇江，安全护航。</p ><p class="ql-align-justify">9.在发展上争先进位，在安全上较真碰硬。</p ><p class="ql-align-justify">10.安全是发展的前提，发展是安全的保障。</p ><p class="ql-align-justify">11.筑牢安全防线，严守发展底线。</p ><p class="ql-align-justify">12.生命至上，安全第一。</p ><p class="ql-align-justify">13.城市安全，美好生活。</p ><p class="ql-align-justify">14.安全不缺位，责任重于山。</p ><p class="ql-align-justify">15.红线意识记于心，安全发展践于行。</p ><p class="ql-align-justify">16.健全安全治理体系，增强安全发展能力。</p ><p class="ql-align-justify">17.弘扬安全文化，共建安全城市。</p ><p class="ql-align-justify">18.同谱安全发展曲，共建美丽镇江城。</p ><p class="ql-align-justify">19.安全发展人人参与，美好生活人人共享。</p ><p class="ql-align-justify">20.安全人人抓，幸福千万家。</p ><p class="ql-align-justify"><br></p ><p class="ql-align-justify"><strong>三、卡通形象</strong></p ><p class="ql-align-justify"><strong><span class="ql-cursor">﻿</span></strong><img src="https://www.smart-zj.cn:55901/image/katong1.png" /><img src="https://www.smart-zj.cn:55901/image/katong2.png" /><img src="https://www.smart-zj.cn:55901/image/katong3.png" /></p ><p class="ql-align-justify">卡通形象名为“安娃”，是镇江创建安全发展示范城市宣传卡通形象，是一个时时刻刻为人民服务、保护市民生命财产安全、守护城市安全的"小超人"。将在各种宣传平台与广大市民朋友见面，普及安全知识、发布创建进度。</p ><p class="ql-align-justify"><br></p ><p class="ql-align-justify"><strong>征求意见期限为2021年5月7日至2021年5月11日。</strong></p ><p class="ql-align-justify"><strong>感谢您的参与和支持！</strong></p ><p class="ql-align-justify"><br></p ><p class="ql-align-right">镇江市安全生产委员会办公室</p ><p class="ql-align-right">2021年5月6日</p ><p><br></p >',
      message: "",
      fileList: [],
      list: [],
      userId: "",
    };
  },
  methods: {
    submit() {
      if (this.message.length <= 1) {
        this.$toast("请填写意见信息");
        return;
      }
      this.fileList.forEach((item) => {
        // console.log("item.url---", item.url);
        this.list.push({ picture: item.url });
      });
      let params = {
        // userId: this.userId,
        opinion: this.message,
        list: this.list,
      };
      console.log("params---", params);
      insertOpinion(params).then((res) => {
        this.$toast.clear();
        this.$toast("提交成功");
        this.message = "";
        this.fileList = [];
        console.log("res---", res);
      });
    },
    afterRead(file) {
      file.status = "uploading";
      file.message = "上传中...";
      let param = new FormData();
      param.append("file", file.file);
      uploadFile(param)
        .then((res) => {
          // this.$toast.clear();
          file.status = "done";
          file.message = "上传成功";
          file.url = res;
          console.log("this.fileList---", this.fileList);
        })
        .catch((/*err*/) => {
          file.status = "failed";
          file.message = "上传失败";
        });
    },
    JSBgetUserInfo() {
      if (window.android !== undefined) {
        const res = window.android.getUserInfo(); // 这是一个json字符串
        sessionStorage.setItem("ZJCD-UserInfo", res);
        this.userInfo = JSON.parse(res);
      } else if (window.webkit) {
        window.webkit &&
          window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
      }
      // else {
      //   this.$toast("请先登录镇合意app");
      // }
    },
    getUserInfo(res) {
      this.verify(res);
    },
    verify(res) {
      let userInfo = JSON.parse(res);
      // if (!userInfo.userId) {
      //   this.$dialog
      //     .confirm({
      //       message: "请先登录！",
      //       showCancelButton: false,
      //     })
      //     .then(() => {
      //       this.back();
      //     });
      //   return;
      // }
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = userInfo;
    },
  },

  created() {
    let res = sessionStorage.getItem("ZJCD-UserInfo");
    this.userInfo = JSON.parse(res) || {};
    if (!this.userInfo.idCardNo) {
      this.JSBgetUserInfo();
    } else {
      this.verify(res);
    }
  },
};
</script>

<style lang="stylus">
.box {
    height: 100%;
    overflow: auto;
    background-color #fff
}
.content{
    background #ffffff;
    text-indent:40px !important
    padding 40px;
    font-size 28px !important;
    line-height 60px !important;
    a{
      pointer-events: none;
      color #333;
    }
    span{
      font-size 34px !important;
    }
    img{
      margin 20px auto
      display block
      width 60% !important;
    }
  }
  .box-title {
      font-size 28px
      margin-left 40px
      margin-top 10px
      color #666
  }
  .box-img {
      padding 0 40px
      margin-top 20px
  }
  .box-btn {
      float right
      margin-right 40px
      width 100%
      margin 0 auto

  }
  .box-vantfiled-tax .van-field__control {
      border 1px solid #ccc
      height 300px!important
      border-radius 10px
      padding 10px 20px
  }
  .box-vantfiled-tax .van-cell::after {
      width 0
  }
  .box-van-btn {
      width 100%!important
      margin-top 120px
  }
  .big-title {
      margin-top 20px
      padding 0 40px
      line-height 50px
      font-size 36px
      text-align center
  }
</style>
