<template>
    <div id="category">
      <!--头部-->
      <!-- <Header/> -->
      <div class="header-title">
        <span class="header-title-return-back" @click="returnClick"><van-icon name="arrow-left" /></span>
        <span class="header-title-name-bold">舆情正文</span>
      </div>
  
      <div class="manage-body">
        <van-cell-group>
          <van-cell>
            <div style="font-size: 18px;font-weight: bold;margin-bottom: 10px;">{{ OpinionReputationData.title }}</div>
            <div style="float: left;color: #646566;">来源：{{ OpinionReputationData.source }}</div>
            <div style="float: right;color: #646566;">{{ OpinionReputationData.publishTime }}</div>
          </van-cell>
          <van-cell>
            <div style="font-size: 14px;font-weight: bold;margin-bottom: 10px;">{{ OpinionReputationData.description }}</div>
          </van-cell>
<!--          <van-cell>-->
<!--            <div style="font-size: 14px;font-weight: bold;margin-bottom: 10px;color: #646566;">-->
<!--                声明：转载自xxx，版权归xxx所有内容仅代表作者本人观点，如涉及内容和其他方面问题，诚与本人联系，联系邮箱：xxxx@xxx.com-->
<!--            </div>-->
<!--          </van-cell>-->
          <van-cell>
            <div style="float: left;color: #646566;">相关企业</div>
<!--            <div style="float: right;color: #646566;">全部关注</div>-->
          </van-cell>
          <van-cell>
            <div style="float: left;color: #646566;">{{ OpinionReputationData.companyName }}</div>
            <div style="float: right;color: #646566;" @click="concern">+关注</div>
          </van-cell>
        </van-cell-group>
      </div>
      <van-action-sheet v-model="sheetShow" title="选择分组">
        <van-radio-group v-model="updateResult" >
          <van-cell-group style="padding-bottom: 10px">
            <van-cell
                clickable
                style="padding-bottom: 20px"
                @click="addGroup"
            >
              <template #title>
                <div style="margin-top: 15px;font-size: 15px;color:#2372EB">+ 新建分组</div>
              </template>
            </van-cell>
            <van-cell
                v-for="(item, index) in groupList"
                clickable
                :key="index"
                style="padding-bottom: 20px"
            >
              <template #title>
                <div style="margin-top: 15px;font-size: 15px;font-weight: bold;">{{ item.groupName }}</div>
              </template>
              <template #right-icon>
                <van-radio :name="index" />
              </template>
            </van-cell>
          </van-cell-group>
          <van-button plain color="#2372eb" @click="updateSure" style="width: 90%;border-radius: 5px;margin-left: 5%;">确定</van-button>
        </van-radio-group>
      </van-action-sheet>
      <van-dialog v-model="show" title="新建分组" show-cancel-button @confirm="addGroupOk()">
        <van-field style="height: 30px;width: 80%;height: 30px;margin-top: 20px;margin-bottom: 20px;margin-left: 10%;background-color: #F7F8FA;" v-model="groupName" label="" maxlength="12" placeholder="请输入分组名称" />
      </van-dialog>
    </div>

  </template>
  
  <script>
  // 2. 引入滚动组件
  import BScroll from 'better-scroll'
  import {Button, Col, Row, Icon, Field, Toast, ActionSheet, RadioGroup, Radio} from 'vant';
  import {postAddAttentionCompany, postAddGroupInfo, postQueryByName} from "@/service/api/category";

  
  export default {
    name: "OpinionReputation",

    data() {
      return {
        OpinionReputationData: {},
        sheetShow: false,
        groupName: '',
        show: false,
        groupList: [],
        updateResult: '',
      }
    },
    components: {
      VanButton: Button,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanField: Field,
      VanActionSheet: ActionSheet,
      VanRadioGroup: RadioGroup,
      VanRadio: Radio,
    },
    created() {
      this.OpinionReputationData = JSON.parse(sessionStorage.getItem('OpinionReputationData'));
      this.postGroupList();
    },
    methods: {
      concern() {
        this.sheetShow = true;
      },
      // 分组信息查询
      async postGroupList() {
        let result = await postQueryByName({pageSize: 999, pageNum: 1});
        if (result) {
          this.groupList = result.records;
        }
      },
      // 点击关注
      async updateSure() {
        let result = await postAddAttentionCompany({groupName: this.groupList[this.updateResult].groupName, groupId: this.groupList[this.updateResult].groupId,  companyId: this.OpinionReputationData.companyId, companyName: this.OpinionReputationData.companyName});
        console.log(result)
        if (result) {
          this.sheetShow = false;
          Toast.success('关注成功');
          this.concernStatus = true;
        }
      },
      // 点击新建分组
      addGroup() {
        this.groupName = '';
        this.show = true;
      },
      async addGroupOk() {
        if (this.groupName == '') {
          Toast.fail('请输入分组名称')
        } else {
          let result = await postAddGroupInfo({groupName: this.groupName});
          if (result) {
            Toast.success('新建成功')
            this.postGroupList();
          }
        }
      },
      returnClick() {
        sessionStorage.removeItem('OpinionReputationData')
        if (sessionStorage.getItem('jumpType') == 'category') {
          this.$router.push({path: 'Category'})
        } else {
          this.$router.push({path: '/MonitorStation'})
        }
      },

    },
  }
  </script>
  
  <style lang="less" scoped>
  
  .header-title {
    height: 46px;
    width: 100%;
    background-color: #fff;
    text-align: center;
  }
  .header-title-name {
    font-weight: bold;
    line-height: 46px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
  }
  .header-title-return {
    position: absolute;
    top: 13px;
    left: 20px;
    font-size: 15px;
  }
  .manage-body {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px 10px 0px 10px;
  }
  /deep/ .van-nav-bar__text {
    color: gray !important;
    font-weight: bold;
  }
  .icon-mg {
    margin-left: 3px;
  }
  /deep/ .van-card__thumb {
    width: 60px;
  }
  /deep/ .van-cell__value {
    bottom: 5px;
  }
  </style>../../service/api/index