<template>
  <div>
    <navbar title="舆情正文"></navbar>
    <div class="wrapper" v-if="detailsDatas">
      <div class="wrapper-header">
        <div class="wrapper-header-title-box">
          <div class="wrapper-header-title">{{ detailsDatas.title }}</div>
          <div class="wrapper-header-laiyuan">
            <div>来源：{{ detailsDatas.source }}</div>
            <div>{{ detailsDatas.publishTime }}</div>
          </div>
        </div>
        <div class="wrapper-content " v-html="detailsDatas.description"></div>
        <!--                <div class="wrapper-shengming">声明：{{ detailsDatas.title }}</div>-->
      </div>


      <div class="wrapper-footer">
        <div class="wrapper-footer-title-box wrapper-header-title-box">
          <div class="wrapper-footer-title">相关企业</div>
          <!--                    <div class="wrapper-footer-guanzhu">全部关注</div>-->
        </div>
        <ul>
          <li class="guanzhu-item" v-for="(guanzhuItem, guanzhuIndex) in detailsDatas.companyList" :key="guanzhuIndex">
            <div class="guanzhu-title">{{ guanzhuItem.companyName }}</div>
            <div>
              <span v-if="!guanzhuItem.flag" class="hot-item-cell-guanzhu" @click="guanzhuShow(guanzhuIndex)">+ 关注</span>
              <span v-else class="hot-item-cell-guanzhu" @click="cancelGuanzhu(guanzhuItem.companyId)">已关注</span>
            </div>
          </li>
        </ul>
      </div>
    </div>


    <van-action-sheet v-model="sheetShow" title="选择分组">
      <div class="add-fenzu-btn" @click="addGroup">+ 新建分组</div>
      <van-radio-group v-model="updateResult">
        <van-cell-group class="fenzu-box">
          <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-popup :closeOnClickOverlay=false v-model="addFenzuShow" :style="{ width: '260px' }">
      <div class="dialog-title-box">新建分组</div>
      <div class="dialog-content-box">
        <input maxlength="12" v-model="groupName" type="text" placeholder="请输入分组名称">
      </div>
      <div class="dialog-footer-box">
        <div class="cancel-btn" @click="addFenzuCancel">取消</div>
        <div class="ok-btn" @click="addFenzuOk">确定</div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import { Icon, Search, ActionSheet, Toast, RadioGroup, Radio, Button, Popup } from 'vant';//button组件
import navbar from '../../../components/navbar/navbar.vue';
import { getNewsinfoById, addAttentionCompany, addGroupInfo } from "@/service/api/home";
import {postAddGroupInfo, postCancelGuanzhu, postQueryByName} from "@/service/api/category";
export default {
  name: "Search",
  components: {
    navbar: navbar,
    VanIcon: Icon,
    VanSearch: Search,
    VanToast: Toast,
    VanActionSheet: ActionSheet,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
    VanButton: Button,
    VanPopup: Popup,
  },
  data() {
    return {
      detailsDatas: {},
      getDetailsId: '',
      sheetShow: false,
      updateResult: '',
      groupList: [],
      currentOperateIndex: -1,
      addFenzuShow: false,
      groupName: '',

    }
  },
  mounted() {
    if (sessionStorage.getItem('getDetailsId')) {
      this.getDetailsId = sessionStorage.getItem('getDetailsId');
      this.getNewsinfoById();
      this.postGroupList();
    }
  },
  methods: {
    // 获取舆情热搜榜
    async getNewsinfoById() {
      let params = { id: this.getDetailsId }
      let result = await getNewsinfoById(params);
      this.detailsDatas = result;
    },

    // 分组信息查询
    async postGroupList() {
      let result = await postQueryByName({ pageSize: 99, pageNum: 1 });
      this.groupList = result.records;
    },

    guanzhuShow(guanzhuIndex) {
      this.sheetShow = true;
      this.currentOperateIndex = guanzhuIndex;
    },

    async updateSure() {
      console.log(1122,this.detailsDatas.companyList)
      let params = {
        groupName: this.groupList[this.updateResult].groupName,
        groupId: this.groupList[this.updateResult].groupId,
        companyId: this.detailsDatas.companyList[this.currentOperateIndex].companyId,
        companyName: this.detailsDatas.companyList[this.currentOperateIndex].companyName,
      }
      let result = await addAttentionCompany(params);
      if (result) {
        this.sheetShow = false;
        this.getNewsinfoById();
        Toast.success('关注成功！');
      }
    },

    // 新建分组取消
    addFenzuCancel() {
      this.groupName = '';
      this.addFenzuShow = false;
    },

    addGroup() {
      this.addFenzuShow = true;
      this.groupName = '';
    },


    // 新建分组确定
    async addFenzuOk() {
      let params = {
        groupName: this.groupName,
      }
      if (this.groupName == '') {
        Toast.fail('请输入分组名称')
      } else {
        let result = await addGroupInfo(params);
        if (result) {
          this.postGroupList();
          this.addFenzuCancel();
          Toast.success('新建分组成功！');
        }
      }
    },

    // 取消关注
    async cancelGuanzhu(companyId){
      let params = { companyId:companyId };
      let result = await postCancelGuanzhu(params);
      Toast.success('取关成功');
      this.getNewsinfoById();
    },



  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  background: #f7f7f7;
}

.wrapper-header {
  padding: 1rem;
  background: #ffffff;
  margin-bottom: 10px;
}

.wrapper-header-title-box {
  border-bottom: solid 1px #f2f2f2;
  padding-bottom: 16px;
  margin-bottom: 16px;
}

.wrapper-header-title {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.wrapper-header-laiyuan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #666666;
}

.wrapper-content {
  font-size: 0.9rem;
}

.wrapper-shengming {
  font-size: 0.8rem;
}

.wrapper-footer {
  padding: 1rem;
  background: #ffffff;
}

.wrapper-footer-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper-footer-title {
  font-size: 1rem;
  font-weight: bold;
}

.wrapper-footer-guanzhu {
  font-size: 1rem;
  font-weight: bold;
  color: #2372eb;
}

.guanzhu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #666666;
  padding-bottom: 16px;
  border-bottom: solid 1px #f2f2f2;
}

.guanzhu-button {
  color: #2372eb;
}

.fenzu-box {
  padding-bottom: 10px;
  max-height: 50vh;
  overflow: scroll;
}

.add-fenzu-btn {
  padding: 1rem;
  font-size: 0.9rem;
  color: #2372eb;
  border-bottom: solid 1px #f2f2f2;
}

.dialog-title-box {
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  margin: 16px 0 20px;
}

.dialog-content-box {
  padding: 0 1rem;
  margin-bottom: 16px;
}

.dialog-content-box input {
  width: 100%;
  background: #f2f2f2;
  border: none;
  height: 36px;
  line-height: 36px;
  padding-left: 6px;
  font-size: 0.8rem;
}

.dialog-footer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  border-top: solid 1px #dddddd;
}

.dialog-footer-box .cancel-btn {
  font-size: 0.9rem;
  color: #999999;
  border-right: solid 1px #dddddd;
  text-align: center;
  width: 50%;
}


.dialog-footer-box .ok-btn {
  width: 50%;
  font-size: 0.9rem;
  color: #2372EB;
  text-align: center;
}

.hot-item-cell-guanzhu {
  font-size: 0.8rem;
  color: #2372eb;
}
</style>
