<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="addClick">新建</span>
      </div>
  
      <div class="manage-body" v-for="(item, index) in groupList" :key="index">
        <van-swipe-cell>
          <van-cell :border="false" :title="item.groupName" :value="'共计企业'+item.companyCount+'家  >'" @click="groupDetail(item.companyCount, item.groupId, item.createTime)" style="margin-top: 10px;" />
          <template #right>
            <van-button square type="danger" text="删除" @click="deleteGroup(item.id)" />
            <van-button square type="primary" text="重命名" @click="updateGroup(item)" />
          </template>
        </van-swipe-cell>
<!--        <van-grid :column-num="4">-->
<!--          <van-grid-item>-->
<!--            <div class="van-item-style">经营动态</div>-->
<!--            <div style="font-size: 15px;font-weight: bold;">1</div>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item>-->
<!--            <div class="van-item-style">风险信息</div>-->
<!--            <div style="font-size: 15px;font-weight: bold;color: red;">1</div>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item>-->
<!--            <div class="van-item-style">工商变更</div>-->
<!--            <div style="font-size: 15px;font-weight: bold;color: #ee8c15;">1</div>-->
<!--          </van-grid-item>-->
<!--          <van-grid-item>-->
<!--            <div class="van-item-style">舆情声誉</div>-->
<!--            <div style="font-size: 15px;font-weight: bold;">1</div>-->
<!--          </van-grid-item>-->
<!--        </van-grid>-->
      </div>
      <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>
      <van-dialog v-model="updateShow" title="重命名分组" show-cancel-button @confirm="updateGroupOk()">
        <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, SwipeCell, Cell } from 'vant';
  import { postAttentionInfo, postQueryByName, postAddGroupInfo, postDeleteGroupInfo, postUpdateGroupInfo } from "@/service/api/category";
  
  // 3. 引入接口
  import {getCategories, getCategoriesDetail} from "./../../service/api/index"

  
  export default {
    name: "MyGroup",
    data() {
      return {
        // 是否显示正在加载
        showLoading: true,
        // 左侧列表数组
        categories: [],
        // 右侧列表数组
        categoriesDetail: [],
        // 左侧item选中与否
        currentIndex: 0,
        onClick: 1,
        operate: false,
        num: 1,
        timeCliType: true,
        nameCliType: true,
        riskCliType: true,
        list: ['a', 'b'],
        result: [],
        show: false,
        updateShow: false,
        groupName: '',
        groupList: [],
        groupId: '',
      }
    },
    components: {
      VanButton: Button,
      VanCell: Cell,
      VanRow: Row,
      VanCol: Col,
      VanIcon: Icon,
      VanField: Field,
      VanToast: Toast,
      VanSwipeCell: SwipeCell,
    },
    computed: {
      // ...mapState(["shopCart", "userInfo"])
    },
    setup() {},
    created() {
      this.postGroupList();
    },
    methods: {
      // 分组信息查询
      async postGroupList() {
        let result = await postQueryByName({ pageSize: 999, pageNum: 1});
        if (result) {
          this.groupList = result.records;
        }
      },
      titleClick(i) {
        this.onClick = i;
      },
      addClick() {
        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();
          }
        }
      },
      async deleteGroup(id) {
        let result = await postDeleteGroupInfo({ids: [id]});
        Toast.success('删除成功');
        this.postGroupList();
      },
      groupDetail(count, id, time) {
        if (count !== 0) {
          sessionStorage.setItem('groupId', id)
          sessionStorage.setItem('groupCreateTime', time.substr(0, 10))
          this.$router.push({path: '/dashboard/GroupDetail'})
        }
      },
      updateGroup(data) {
        this.updateShow = true;
        this.groupName = data.groupName;
        this.groupId = data.id;
      },
      async updateGroupOk() {
        let params = {
          groupName: this.groupName,
          id: this.groupId
        }
        let result = await postUpdateGroupInfo(params);
        if (result) {
          Toast.success('重命名成功');
          this.postGroupList();
        }
      },
      returnClick() {
        this.$router.push({path: 'Category'})
      },

    },
  }
  </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;
    margin-right: 2rem;
    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;
  }
  .manage-body {
    margin-top: 5px;
    background-color: #fff;
    padding: 10px 0px 0px 0px;
  }
  /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: 3rem;
    height: 3rem;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 15px;
    background-color: #EE8C15;
    color: #fff;
    margin-right: 10px;
    line-height: 3rem;
  }
  /deep/ .van-card__thumb {
    width: 60px;
  }
  /deep/ .van-cell__value {
    bottom: 5px;
  }
  /deep/ .van-cell {
    background-color: initial;
  }
  /deep/ .van-dialog__confirm, .van-dialog__confirm:active {
    color: #2372eb;
  }
  </style>../../service/api/index