<template>
    <div id="category">
      <!--头部-->
      <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>
        <span class="operate-btn" @click="operateClick">{{operate === true? '取消': '操作'}}</span>
      </div>
  
      <div class="manage-body">
        <van-nav-bar
          title=""
          :left-text="'新建日期：'+ groupCreateTime"
          :right-text="'共计企业'+enterpriseCount+'家 '"
          style="margin-top: 10px;"
        />
    <van-checkbox-group v-model="result" ref="checkboxGroup">
  <van-cell-group :style="followList.length > 7?'padding-bottom: 80px':'padding-bottom: 10px'">
    <van-cell
      v-for="(item, index) in followList"
      clickable
      :key="index"
      @click="toggle(item.id, index, item)"
      style="padding-bottom: 20px"
    >
    <template #icon>
        <div v-if="item.colorNum == 1" class="card-icon" style="background-color: #2372eb"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 2" class="card-icon" style="background-color: #ee8c15"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 3" class="card-icon" style="background-color: #11c95f"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 4" class="card-icon" style="background-color: #e21183"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 5" class="card-icon" style="background-color: #fde809"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 6" class="card-icon" style="background-color: #17b9d7"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 7" class="card-icon" style="background-color: #db2c2c"><van-icon name="newspaper-o" /></div>
      <div v-if="item.colorNum == 8" class="card-icon" style="background-color: #9232db"><van-icon name="newspaper-o" /></div>
      </template>
    <template #title>
        <div style="margin-top: 15px;font-size: 15px;font-weight: bold;">{{ item.companyName }}</div>
        </template>
<!--        <template #label>-->
<!--          <van-tag color="#E9F1FD" text-color="#2372EB" style="margin-top: 10px;">近一周动态：0</van-tag>-->
<!--        </template>-->
      <template #right-icon>
<!--        <van-tag plain type="primary" style="height: 20px;margin-top: 1rem;margin-right: 10px;">监控台</van-tag>-->
        <van-checkbox v-if="operate === true" :name="item.id" ref="checkboxes" />
      </template>
    </van-cell>
  </van-cell-group>
</van-checkbox-group>
    </div>
    <div v-if="operate === true" style="position: fixed;width: 100%;bottom: 50px;">
      <van-row type="flex" style="text-align: center;font-size: 13px;margin: 10px 0 10px 0;">
        <van-col span="8" class="col-weight"><van-button plain color="#595959" @click="checkAll" style="width: 90%;border-radius: 5px;">{{ checkboxAll?'全选':'取消全选' }}</van-button></van-col>
        <van-col span="8" class="col-weight"><van-button plain color="#F5BB75" @click="unFollow" style="width: 90%;border-radius: 5px;">取消关注</van-button></van-col>
        <van-col span="8" class="col-weight"><van-button plain color="#595959" @click="updateGroup" style="width: 90%;border-radius: 5px;">移动</van-button></van-col>
    </van-row>
    </div>
      <van-action-sheet v-model="sheetShow" title="选择分组">
        <van-radio-group v-model="updateResult" >
          <van-cell-group style="padding-bottom: 10px">
            <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>
    </div>

  </template>

  <script>
  import {Button, Col, Row, Icon, Tag, Checkbox, CheckboxGroup, Toast, ActionSheet, RadioGroup, Radio} from 'vant';

  import {postAttentionInfo, postBatchDelateAttention, postQueryByName, postUpdateAttentionCompany, postBatchUpdateAttention } from "@/service/api/category";


  export default {
    name: "GroupDetail",

    data() {
      return {
        // 是否显示正在加载
        showLoading: true,
        // 左侧列表数组
        categories: [],
        // 右侧列表数组
        categoriesDetail: [],
        // 左侧item选中与否
        currentIndex: 0,
        onClick: 1,
        operate: false,
        num: 2,
        timeCliType: true,
        nameCliType: true,
        riskCliType: true,
        list: ['a', 'b'],
        result: [],
        updateResult: '',
        show: false,
        text: '',
        groupId: '',
        groupCreateTime: '',
        followList: [],
        enterpriseCount: '',
        checkboxAll: true,
        groupList: [],
        sheetShow: false,
        currentPage: 1,
        loading: false,
        isEndLoading: false,

      }
    },
    components: {
      VanButton: Button,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanTag: Tag,
      VanCheckbox: Checkbox,
      VanCheckboxGroup: CheckboxGroup,
      VanToast: Toast,
      VanActionSheet: ActionSheet,
      VanRadioGroup: RadioGroup,
      VanRadio: Radio,

    },
    computed: {
      // ...mapState(["shopCart", "userInfo"])
    },
    // setup() {},
    created() {
      console.log(111)
      this.groupId = sessionStorage.getItem('groupId');
      this.groupCreateTime = sessionStorage.getItem('groupCreateTime');
      this.postAttention();
      this.postGroupList();
    },
    // mounted() {
    //   window.addEventListener('scroll', this.scrollBottom);
    // },
    // destroyed() {
    //   window.removeEventListener('scroll', this.scrollBottom)
    // },
    methods: {
      // 获取关注信息
      async postAttention(){
        let params = {
          pageNum: 1,
          pageSize: 999,
          groupId: this.groupId
        }
        let result = await postAttentionInfo(params);
        if (result !== null) {
          this.followList = result.attentionCompanyInfoVoList;
          this.enterpriseCount = result.attentionCompanyInfoVoList.length;
        } else {
          this.followList = [];
          this.enterpriseCount = 0;
        }
      },
      // 分组信息查询
      async postGroupList() {
        let result = await postQueryByName({pageSize: 999, pageNum: 1});
        if (result !== null) {
          this.groupList = result.records;
        }
      },
      // 点击取关复选框
      toggle(id, index, data) {
        if (this.operate === false) {
          sessionStorage.setItem('companyId', data.companyId);
          sessionStorage.setItem('followId', data.id);
          this.$router.push({path: 'CustomerDashboard'});
        } else {
          if (this.result.includes(id)) {
            let index = this.result.findIndex(item => item == id)
            this.result.splice(index, 1)
          } else {
            this.result.push(id)
          }
        }
        this.checkboxAll = true;
      },
      // 点击全选
      checkAll() {
        this.result = [];
        if (this.checkboxAll == true) {
          this.$refs.checkboxGroup.toggleAll(true);
          this.checkboxAll = false;
        } else {
          this.$refs.checkboxGroup.toggleAll();
          this.checkboxAll = true;
        }
      },
      // 点击取关
      async unFollow() {
        if (this.result.length == 0) {
          Toast.fail('请选择一家企业');
        } else {
          let result = await postBatchDelateAttention({ids: this.result});
          Toast.success('取关成功');
          this.result = [];
          this.operate = false;
          this.postAttention();
        }
      },
      updateGroup() {
        if (this.result.length == 0) {
          Toast.fail('请选择一家企业');
        } else {
          this.sheetShow = true;
        }
      },
      async updateSure() {
        let result = await postBatchUpdateAttention({groupId: this.groupList[this.updateResult].groupId,  ids: this.result});
        console.log(result)
        this.sheetShow = false;
        this.operate = false;
        this.result = [];
        Toast.success('移动成功');
        this.postAttention();
      },
      returnClick() {
        this.$router.push({path: '/myGroup'})
      },
      operateClick() {
      this.operate = !this.operate;
    },

    },
  }
  </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;
  }
  .buttonClick {
    color: #595959 !important;
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
  }
  .van-item-style {
    font-size: 15px;
    font-weight: bold;
    color: #96989e;
    margin-bottom: 5px;
  }
  .operate-btn {
    position: absolute;
    top: 13px;
    right: 20px;
    color: #2372EB;
    font-weight: bold;
    font-size: 15px;
  }
  .header-title-return {
    position: absolute;
    top: 13px;
    left: 20px;
    font-size: 15px;
  }
  .seven-add {
    font-size: 11px;
    padding: 1px 5px;
    color: #fff;
    background-color: #EE8C15;
    margin-top: 20px;
  }
  .manage-body {
    margin-top: 10px;
    background-color: #fff;
    padding: 0px 10px 0px 10px;
  }
  /deep/ .van-nav-bar__text {
    color: gray !important;
    font-weight: bold;
  }
  .icon-mg {
    margin-left: 3px;
  }
  .col-weight {
    font-weight: bold;
  }
  .card-icon {
    float: left;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    color: #fff;
    margin-right: 10px;
    line-height: 2.5rem;
  }
  /deep/ .van-card__thumb {
    width: 60px;
  }
  /deep/ .van-cell__value {
    bottom: 5px;
  }
  </style>