<template>
  <div>
    <div style="background-color:gray">
      <el-form class="radio-group-box">
        <el-radio-group class="title" v-model="selectedTab" @change="handleTabChange" style="display:flex">
          <el-radio-button label="个人">个人</el-radio-button>
          <el-radio-button label="商户">商户</el-radio-button>
          <el-radio-button label="企业">企业</el-radio-button>
        </el-radio-group>
      </el-form>
      <el-form class="search-box">
        <el-input v-model="searchQuery" placeholder="输入活动/清单名称" clearable @clear="handleSearch" width="50%"></el-input>
        <el-button icon="el-icon-search" @click="handleSearch"></el-button>
      </el-form>
      <el-form class="marketList">
        <el-card class="card1">
          <el-form-item class="card-title">
            <h3 style="font-size:20px">我的营销清单</h3>
            <el-button type="text" @click="handleSelectList" class="checkall">查看全部清单</el-button>
          </el-form-item>
          <el-form-item>
            <el-link class="checklistname" v-for="(item, index) in groupTag" @click="handleCheckCustomerList(item.grouId)"
              :key="index">{{ item.groupName }}</el-link>
            <!-- <a href="#" @click.prevent="" class="checklistname">我行存款无贷</a> -->
          </el-form-item>
        </el-card>
        <el-card class="card2">
          <el-form-item class="card-title">
            <h3 style="font-size:20px">推荐营销清单</h3>
            <el-button type="text" @click="currentTable = 1" :class="{ active: currentTable === 1 }" class="checkall"
              :disabled="isCheckList">查看全部清单</el-button>
          </el-form-item>
          <el-form-item>
            <el-link class="checklistname" v-for="(item, index) in groupTag2" :key="index"
              @click="handleCheckCustomerList(item.grouId)">{{ item.groupName }}</el-link>
          </el-form-item>
        </el-card>
      </el-form>
    </div>
    <div style="display: flex; align-items: center; ">
      <el-button :disabled="true" type="info">批量提醒</el-button>
      <el-button @click="handleCliamedNotDistributedOrg">已认领未分配机构</el-button>
      <el-button @click="handleNotCliamedOrg">未认领机构</el-button>
    </div>


    <el-table :data="tableData" style="width:100%" v-if="currentTable === 1" row-key="generateRowKey">
      <el-table-column prop="groupId" type="selection" label="全选"></el-table-column>
      <el-table-column prop="createRole" label="清单来源" align="center">
        <template slot-scope="scope">
          {{ scope.row.createRole == '0' ? '总行' : '支行' }}
        </template>
      </el-table-column>
      <el-table-column prop="groupType" label="清单类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.groupType == '1' ? '我的营销清单' : '推荐营销清单' }}
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="清单名称"></el-table-column>
      <el-table-column prop="customerNum" label="客户数"></el-table-column>
      <el-table-column prop="campaignName" label="关联活动"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="actionStatus" label="活动进度"></el-table-column>
      <el-table-column prop="campaignDegree" label="紧急程度"></el-table-column>
      <el-table-column prop="claimEndTime" label="分配结束时间"></el-table-column>
      <el-table-column prop="claimType" label="认领类型">
        <template slot-scope="scope">
          {{ scope.row.claimType == '0' ? '强制认领' : '可选认领' }}
        </template>
      </el-table-column>
      <el-table-column prop="orgClaimStatus" label="认领状态">
        <template slot-scope="scope">
          {{ scope.row.orgClaimStatus == '0' ? '待认领' : '已认领' }}
        </template>
      </el-table-column>
      <el-table-column prop="orgDistributeStatus" label="分配状态">
        <template slot-scope="scope">
          {{ scope.row.orgDistributeStatus == '0' ? '待分配' : '已分配' }}
        </template>
      </el-table-column>
      <el-table-column prop="receiveSitustion" label="客户经理认领率"></el-table-column>
      <el-table-column prop="operate" label="操作" width="200">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center;">
            <el-button type="primary" size="small" v-if="detail"
              @click="handleCheckCustomerList(scope.row.groupId, scope.row.custPattern)">查看详情</el-button>
            <el-button :disabled="true" v-if="remind" size="small">提醒分配</el-button>
            <el-button v-if="togetit" size="small"
              @click="handleorgClaim(scope.row.groupId, scope.row.campaignId)">去认领</el-button>
            <el-button v-if="todistribute" size="small">去分配</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="tableData2" style="width:100%" v-if="currentTable === 2" row-key="generateRowKey">
      <el-table-column prop="groupId" type="selection" label="全选"></el-table-column>

      <el-table-column prop="createRole" label="清单来源" align="center">
        <template slot-scope="scope">
          {{ scope.row.createRole == '0' ? '总行' : '支行' }}
        </template>
      </el-table-column>
      <el-table-column prop="groupType" label="清单类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.groupType == '1' ? '创建营销清单' : '推荐营销清单' }}
        </template>
      </el-table-column>
      <el-table-column prop="groupName" label="清单名称"></el-table-column>
      <el-table-column prop="customerNum" label="客户数"></el-table-column>
      <el-table-column prop="campaignName" label="关联活动"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="actionStatus" label="活动进度"></el-table-column>
      <el-table-column prop="campaignDegree" label="紧急程度"></el-table-column>
      <el-table-column prop="claimEndTime" label="分配结束时间"></el-table-column>
      <el-table-column prop="claimType" label="认领类型">
        <template slot-scope="scope">
          {{ scope.row.claimType == '0' ? '强制认领' : '可选认领' }}
        </template>
      </el-table-column>
      <el-table-column prop="orgClaimStatus" label="认领状态">
        <template slot-scope="scope">
          {{ scope.row.orgClaimStatus == '0' ? '待认领' : '已认领' }}
        </template>
      </el-table-column>
      <el-table-column prop="orgDistributeStatus" label="分配状态">
        <template slot-scope="scope">
          {{ scope.row.orgDistributeStatus == '0' ? '待分配' : '已分配' }}
        </template>
      </el-table-column>
      <el-table-column prop="receiveSitustion" label="客户经理认领率"></el-table-column>
      <el-table-column prop="operate" label="操作" width="300">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center;">
            <el-button type="primary" size="mini" v-if="detail"
              @click="handleCheckCustomerList(scope.row.groupId, scope.row.custPattern)">查看详情</el-button>
            <el-button :disabled="true" v-if="remind" size="mini">提醒分配</el-button>
            <el-button v-if="togetit" :disabled="handleorgClaimStatus(scope.row.orgClaimStatus)" size="mini"
              @click="handleorgClaim(scope.row.groupId, scope.row.campaignId)">去认领</el-button>
            <el-button v-if="handleorgDistributeStatus(scope.row.orgDistributeStatus, scope.row.orgClaimStatus)"
              @click="handlePushGroupCustomer(scope.row.groupName, scope.row.groupId, scope.row.campaignId, scope.row.groupType, scope.row.orgDistributeStatus, scope.row.orgClaimStatus)"
              size="mini">去分配</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize" layout="total,sizes,prev,pager,next,jumper" :total="total"
      :current-page="pageNum"></el-pagination>

    <el-dialog :title="pushTitle" :visible.sync="pushOpen" width="600px" append-to-body>
      <el-form ref="pushform" :model="pushform" :rules="pushroles" label-width="80px" :disabled="ispushformread">
        <el-row>
          <el-col :span="24">
            <el-form-item label="分群名称" prop="groupName">
              <el-input v-model="pushform.groupName" :disabled="true" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动名称" prop="campaignName">
              <el-input v-model="pushform.campaignName" placeholder="请输入活动名称" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="活动类型" prop="campaignType" style="flex: 1;">
              <el-select v-model="pushform.campaignType" placeholder="请选择活动类型" width="100%">
                <el-option label="走访" value="走访"></el-option>
                <el-option label="电话" value="电话"></el-option>
                <el-option label="短信" value="短信"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="紧急程度" prop="campaignDegree" style="flex: 1;">
              <el-select v-model="pushform.campaignDegree" placeholder="请选择紧急程度">
                <el-option label="高" value="高"></el-option>
                <el-option label="中" value="中"></el-option>
                <el-option label="低" value="低"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="认领类型" prop="claimType" style="flex: 1;">
              <el-select v-model="pushform.claimType" placeholder="请选择认领类型" width="100%">
                <el-option label="强制认领" value="0"></el-option>
                <el-option label="可选认领" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!-- 活动时间 -->
          <el-col :span="24">
            <el-form-item label="活动时间" prop="dateRange" style="flex: 1;">
              <el-date-picker width="100%" v-model="pushform.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="认领时间" prop="claimdateRange" style="flex: 1;">
              <el-date-picker width="100%" v-model="pushform.claimdateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row>
                    <el-col :span="24">
                        <el-form-item label="执行人" prop="executer" style="flex: 1;">
                            <el-radio-group v-model="pushform.executer" width="100%">
                                <el-radio label="0">机构</el-radio>
                                <el-radio label="1">个人</el-radio>
                                <el-radio label="2">混合分配</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row> -->
        <el-row>
          <el-col :span="24">
            <el-form ref="pushform" :model="pushform" :rules="pushroles" label-width="80px">
              <el-form-item label="分配规则" prop="distributeType" style="flex: 1;">
                <el-radio-group v-model="pushform.distributeType" width="100%" @change="handleRadioGroup">
                  <el-radio label="0">手动指定</el-radio>
                  <el-radio label="1">按照客户归属机构</el-radio>
                  <el-radio label="2">按照地址归属</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>

          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAllocateCustomerList">确 定</el-button>
        <el-button @click="() => { this.pushOpen = false; }">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findchecknamelist, findchecklist, orgClaimList, allocateCustomerList } from "@/api/system/checklist.js";
import { isHead, campaignDetail } from '@/api/system/findCustByGroupId.js'
import { campaignAdd } from '@/api/system/campaign.js'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      pushOpen: false,
      pushroles: {
        groupName: [
          { required: true, message: "分群名称不能为空", trigger: "blur" },
          { min: 2, max: 20, message: '分群名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        campaignName: [
          { required: true, message: '活动名称不能为空', trigger: "blur" },
          { min: 2, max: 20, message: '活动名称长度必须介于 2 和 20 之间', trigger: 'blur' }
        ],
        campaignType: [
          { required: true, message: '请选择活动类型' },
        ],
        campaignDegree: [
          { required: true, message: '请选择紧急程度' }
        ],
        claimType: [
          { required: true, message: '请选择认领类型' }
        ],
        dateRange: [
          { required: true, message: '请选择活动时间' }
        ],
        claimdateRange: [
          { required: true, message: '请选择认领时间' }
        ],
        executer: [
          { required: true, message: '请选择执行人' }
        ],
        distributeType: [
          { required: true, message: '请选择分配规则' }
        ]

      },
      pushform: {
        groupName: '',
        claimType: '',
        campaignDegree: '',
        campaignType: '',
        campaignName: '',
        executer: {},
        distributeType: {},
        claimdateRange: [],
        dateRange: [],
      },
      pushOpen: false,
      pushTitle: '创建活动',
      radiosButonIsDisableFromMe: false,
      radiosButonIsDisableToMe: false,
      userType: '0',
      showmap: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      isCreatePag: false,
      groupFlag: '1',
      groupTable: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      selectedTab: '我创建的',
      searchQuery: '',
      showCreateDialog: false,
      selectedCreateType: '',
      isCreatePage: false,
      tableData: [],
      groupId: '',
      // createRole: '',
      campaignId: '',
      ispushformread: false,
      pushformDetail: {},

      istogetit: false,
      isCheckList: false,
      groupTag: [],
      groupTag2: [],
      groupId: '',
      campaignId: '',
      detail: false,
      remind: false,
      togetit: false,
      todistribute: false,
      createRole: '',
      total: 0,
      pageSize: 10,
      pageNum: 1,
      showtable: false,
      currentTable: 1,
      selectedTab: '个人',//当前选中的选项
      searchQuery: '',
      tableData: [],//表格数据
      tableData2: [],
      custPattern: 0,
      personalData: [],
      merchantData: [],
      enterpriseData: [],
      myPersonalData: [],
      myMerchantData: [],
      myEnterpriseData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        custPattern: 0
      }
    }
  },

  computed: {
    // paginatedData() {
    //     const start = (this.pageNum - 1) * this.pageSize;
    //     const end = start + this.pageSize;
    //     return this.tableData.slice(start, end);
    // },
    // paginatedData2() {
    //     const start = (this.pageNum - 1) * this.pageSize;
    //     const end = start + this.pageSize;
    //     return this.tableData2.slice(start, end);
    // }
  },
  created() {
    this.isUserType()
    // findchecknamelist().then(res=> {
    //     console.log(res);
    // })
  },
  methods: {
    handleRadioGroup(value) {
      localStorage.setItem('distributeType', value)
      // console.log(value);
    },
    handleAllocateCustomerList() {
      allocateCustomerList({ campaignId: localStorage.getItem('campaignId'), distributeType: localStorage.getItem('distributeType'), groupId: localStorage.getItem('groupId') }).then(res => {
        if (res.code == 200) {
          Message.success('支行管理员二次分配成功!')
          this.pushOpen = false
        }
      })
    },
    handleInfoSubmit() {
      this.isPushBtn = false;
      this.$refs['pushform'].validate((valid) => {
        if (valid) {
          let startTime = this.formatDate(this.pushform.dateRange[0])
          let endTime = this.formatDate(this.pushform.dateRange[1])
          let claimStartTime = this.formatDate(this.pushform.claimdateRange[0])
          let claimEndTime = this.formatDate(this.pushform.claimdateRange[1])
          let queryParams = {}
          queryParams.startTime = startTime
          queryParams.endTime = endTime
          queryParams.claimStartTime = claimStartTime
          queryParams.claimEndTime = claimEndTime
          queryParams.groupId = this.groupId
          queryParams.campaignName = this.pushform.campaignName;
          queryParams.campaignType = this.pushform.campaignType;
          queryParams.campaignDegree = this.pushform.campaignDegree;
          queryParams.executer = this.pushform.executer;
          queryParams.distributeType = this.pushform.distributeType;
          queryParams.claimType = this.pushform.claimType;
          queryParams.createRole = this.createRole;

          campaignAdd(queryParams).then(res => {
            if (res.code == '200') {
              Message.success(`分群${this.pushform.groupName}活动创建成功!`)
              this.pushOpen = false
              //将执行人类型传给详情
              // this.$router.push({ path: '/groupBase/customerDetail', query: { executer:this.pushform.executer} })
            }
          })

        }
        else {
          console.error('新增失败', error);
        }

      });
    },
    handlePushGroupCustomer(groupName, groupId, campaignId, groupType, orgDistribustStatus, orgClaimStatus) {
      if (orgClaimStatus == '1' && orgDistribustStatus == '1') {
        this.$router.push({ path: '/groupBase/customerDetail', query: { groupId, groupName, campaignId, groupType } })
      }
      if (orgClaimStatus == '1' && orgDistribustStatus == '0') {
        this.pushOpen = true
        this.pushform.groupName = groupName
        this.groupId = groupId
        this.campaignId = campaignId
        localStorage.setItem('campaignId', campaignId)
        localStorage.setItem('groupId', groupId)
        // localStorage.setItem('distributeType',this.pushform.distributeType)
        campaignDetail({ campaignId: this.campaignId }).then(res => {
          this.pushformDetail = res;
          if (this.campaignId) {
            this.ispushformread = true
            if (this.ispushformread) {
              this.pushform.campaignName = this.pushformDetail.campaignName;
              this.pushform.campaignDegree = this.pushformDetail.campaignDegree;
              this.pushform.campaignType = this.pushformDetail.campaignType;
              // this.pushform.executer = this.pushformDetail.executer;
              // this.pushform.distributeType = this.pushformDetail.distributeType;
              this.pushform.claimType = this.pushformDetail.claimType
              this.pushform.dateRange = [this.parseFormattedDate(this.pushformDetail.startTime), this.parseFormattedDate(this.pushformDetail.endTime)]
              this.pushform.claimdateRange = [this.parseFormattedDate(this.pushformDetail.claimStartTime), this.parseFormattedDate(this.pushformDetail.claimEndTime)]

            }
          }
          else {
            this.ispushformread = false
          }
        })
      }


    },
    parseFormattedDate(formattedDateString) {
      const isoDateString = formattedDateString.replace(' ', 'T');
      const date = new Date(isoDateString);
      if (isNaN(date.getTime())) {
        return null;
      }
      return date;
    },
    handleorgDistributeStatus(status, status2) {
      if (status2 == '0' && status == '0') {
        return false
      }
      if (status2 == '1' && status == '1') {
        return true
      }
      if (status2 == '1' && status == '0') {
        return true;
      }
    },
    handleorgClaimStatus(status) {
      return status == '0' ? false : true
    },
    generateRowKey(row) {
      return `${row.groupId}_${Math.random().toString(36).substring(7)}`
    },
    handleorgClaim(groupId, campaignId) {
      orgClaimList({ groupId, campaignId }).then(res => {
        if (res.code == 200) {

          Message.success('机构客户认领成功!')
          this.handleSelectList();

        }
      })
    },
    isUserType() {

      isHead().then(res => {
        // console.log(Object.keys(res)[0].startsWith('h'));

        if (Object.keys(res)[0].startsWith('h')) {
          this.createRole = '1'
          this.detail = true
          this.remind = true;
          this.isCheckList = true
        }
        else if (Object.keys(res)[0].startsWith('b')) {
          this.createRole = '0'
          this.todistribute = true,
            this.togetit = true,
            this.detail = true
        }

        else {
          this.createRole = '-1'
          this.togetit = true,
            this.detail = true
        }

      })
    },
    handleCheckCustomerList(groupId, custPattern) {
      this.$router.push({ path: '/checklist/customerlist', query: { groupId, custPattern } })
    },
    handleNotCliamedOrg() {
      findchecklist({ custPattern: this.custPattern, orgClaimStatus: 0 }).then(response => {
        console.log(response);
        // console.log(res);
        if (response.rows[0].createRole == '0') {
          this.currentTable = 1;
          this.tableData = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
        }
        if (response.rows[0].createRole == '1') {
          this.currentTable = 2;
          this.tableData2 = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
        }


      })
    },
    handleCliamedNotDistributedOrg() {
      findchecklist({ custPattern: this.custPattern, orgClaimStatus: 1, orgDistribustStatus: 0 }).then(response => {
        // console.log(res);
        // console.log(res);
        if (response.rows[0].createRole == '0') {
          this.currentTable = 1;
          this.tableData = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
        }
        if (response.rows[0].createRole == '1') {
          this.currentTable = 2;
          this.tableData2 = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
        }


      })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.handleSelectList()
    },
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.pageNum = newPage;
      this.handleSelectList()
    },
    // 处理搜索
    handleSearch() {
      findchecklist({ custPattern: this.custPattern, groupName: this.searchQuery }).then(response => {
        // console.log(response);
        if (response.rows[0].createRole == '0') {
          this.currentTable = 1;
          this.tableData = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
          this.searchQuery = ''
        }
        if (response.rows[0].createRole == '1') {
          this.currentTable = 2;
          this.tableData2 = response.rows.map(item => {

            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
          this.searchQuery = ''
        }


      })
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toISOString().slice(0, 19).replace('T', ' ');
    },
    filterTable(tableNumber) {
      if (tableNumber === 1) {
        console.log('筛选表格1')
      } else if (tableNumber === 2) {
        console.log('筛选表格2')
      }
    },
    handleTabChange() {
      //根据选中的选项更新表格数据
      switch (this.selectedTab) {
        case '个人':
          this.custPattern = '0'
          this.tableData = this.personalData;
          this.tableData2 = this.myPersonalData;
          break;
        case '商户':
          this.custPattern = '1'
          this.tableData = this.merchantData;
          this.tableData2 = this.myMerchantData;
          break;
        case '企业':
          this.custPattern = '2'
          this.tableData = this.enterpriseData;
          this.tableData2 = this.myEnterpriseData;
          break;
        default:
          this.tableData = this.personalData;
          this.tableData2 = this.myPersonalData;
      }
      this.searchQuery = '';
    },
    handleSelectList() {
      findchecklist({ custPattern: this.custPattern, pageNum: this.pageNum, pageSize: this.pageSize }).then(response => {
        console.log(this.pageNum);
        if (response.rows[0].groupType == '1') {

          this.groupTag = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });

          this.tableData = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
          // this.handleGroupTag()
        }
        if (response.rows[0].groupType == '0') {
          this.groupTag2 = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.currentTable = 2;
          this.tableData2 = response.rows.map(item => {
            if (item) {
              item.startTime = this.formatDate(item.startTime)
              item.endTime = this.formatDate(item.endTime)
              item.claimEndTime = this.formatDate(item.claimEndTime)
              return item
            }

          });
          this.total = response.total
          //  this.handleGroupTag()

        }

      })
    },


  },
  mounted() {
    //初始化表格数据
    this.handleTabChange();
    // findchecknamelist().then(res=> {
    //     // console.log(res);
    // })
    this.isUserType();
    this.handleSelectList();


  }
}
</script>
<style scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.radio-group-box {
  width: 35%;
  display: flex;
  justify-content: center;
  margin-left: 30%;
}

.search-box {
  width: 45%;
  display: flex;
  justify-content: center;
  margin-left: 25%;
}

.card-title {
  display: flex;
}

.marketList {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 20px;
  width: 100%;
}

.card1 {
  margin-left: 10%;

  width: 500px;
  background-color: rgb(209, 209, 209);
}

.card2 {

  margin-right: 10%;
  width: 500px;
  background-color: rgb(209, 209, 209);
}

.checkall {
  font-size: '28px';
  margin-left: 300px;
  /* margin-top: -100px; */
  color: white;
}

.checkall.active {
  margin-left: 250px;
  color: #919191;
}

.checklistname {
  text-decoration: none;
  margin: 20px;
  color: rgb(29, 161, 255);
  font-size: 18px;
}

.el-button:active {
  background-color: #126c9e !important;
  font-weight: bold;
}</style>