<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="18">
        <el-row>
          <el-col :span="6" style="margin-top: 20px; margin-left: 25px">
            <el-input
              v-model="searchQuery"
              @keyup.enter.native="handleSearch"
              placeholder="输入客户号/证件号/手机号/网格名称"
              clearable
              width="50%"
            ></el-input>
          </el-col>
          <el-col :span="2" style="margin-top: 20px">
            <el-button icon="el-icon-search" @click="handleSearch"></el-button>
          </el-col>
          <el-col :span="3" style="margin-top: 20px"><el-button @click="handleGoBank">返回上一级</el-button></el-col>
          <el-col :span="3" style="margin-top: 20px"><el-button type="primary" @click="custExport">批量导出</el-button></el-col>
           <el-col :span="1" style="margin-top: 20px"><el-button type="warning" @click="custClaminMore" v-if="isclaimmore">批量认领</el-button></el-col>
          <el-col :span="2" style="margin-top: 20px"><el-button :disabled="true" type="danger" v-if="isremind">批量提醒</el-button></el-col>
          <el-col :span="2" style="margin-top: 20px">
            <el-button type="info" @click="handleNotCliamedCust" v-if="ishandleNotCliamedOrg">未认领客户</el-button></el-col
          >
        </el-row>
        <el-row>
          <right-toolbar :handleSearch.sync="handleSearch" @queryTable="handleSelectList" :columns="columns"></right-toolbar>

          <el-table :data="tableData" style="width: 100%" ref="table1" v-if="currentTable === 1" @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="全选"></el-table-column>
            <el-table-column prop="createRole" label="清单来源" align="center" sortable v-if="columns[0].visible">
              <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="清单名称" sortable v-if="columns[1].visible"></el-table-column>
            <!-- <el-table-column prop="customerNum" label="客户数"></el-table-column> -->
            <el-table-column prop="campaignName" label="活动名称" sortable v-if="columns[2].visible"></el-table-column>
            <el-table-column prop="custId" label="客户号" sortable v-if="columns[3].visible"></el-table-column>
            <el-table-column prop="custIdc" label="证件号" sortable v-if="columns[4].visible"></el-table-column>
            <el-table-column prop="custPhone" label="手机号" sortable v-if="columns[5].visible">{{ 1883481 }}</el-table-column>
            <el-table-column prop="startTime" label="开始时间" sortable v-if="columns[6].visible">
              <template slot-scope="scope">
                  <span>{{scope.row.startTime.substring(0,10)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" sortable v-if="columns[7].visible">
                <template slot-scope="scope">
                  <span>{{scope.row.endTime.substring(0,10)}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="actionStatus" label="活动进度"></el-table-column> -->
            <el-table-column prop="campaignDegree" label="紧急程度" sortable v-if="columns[8].visible"></el-table-column>
            <!-- <el-table-column prop="bglongDept" label="执行机构"></el-table-column> -->
            <!-- <el-table-column prop="claimEndTime" label="分配执行机构结束时间"></el-table-column> -->
            <el-table-column prop="claimType" label="认领类型" sortable v-if="columns[9].visible">
              <template slot-scope="scope">
                {{ scope.row.claimType == '0' ? '强制认领' : '可选认领' }}
              </template>
            </el-table-column>
            <el-table-column prop="orgClaimStatus" label="机构认领状态" sortable v-if="columns[10].visible">
              <template slot-scope="scope">
                {{ scope.row.orgClaimStatus == '0' ? '待认领' : '已认领' }}
              </template>
            </el-table-column>
            <el-table-column prop="orgDistributeStatus" label="机构分配状态" sortable v-if="columns[11].visible">
              <template slot-scope="scope">
                {{ scope.row.orgDistributeStatus == '0' ? '待分配' : '已分配' }}
              </template>
            </el-table-column>
            <el-table-column prop="custClaimStatus" label="客户经理认领状态" sortable v-if="columns[12].visible">
              <template slot-scope="scope">
                {{ scope.row.custClaimStatus == '0' ? '待认领' : '已认领' }}
              </template>
            </el-table-column>
            <el-table-column prop="gridNameList" label="所属网格" sortable v-if="columns[13].visible"></el-table-column>
            <el-table-column prop="userNameList" label="客户经理" sortable v-if="columns[14].visible"></el-table-column>
            <el-table-column prop="operate" label="操作" width="200px" fixed="right">
              <template slot-scope="scope">
                <div>
                  <template v-if="isHead">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                  </template>
                  <template v-if="isBranch">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                  </template>
                  <template v-if="isOther && scope.row.claimType == '0'">
                    <el-button type="text" @click="handleBox(scope.row.custId)">去营销</el-button>
                  </template>
                  <template v-if="isOther && scope.row.claimType == '1' && scope.row.custClaimStatus == '0'">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                    <el-button  type="text" :disabled="false" @click="custClaminOne(scope.row.custId,scope.row.groupId,scope.row.campaignId,scope.row.custPattern)">认领</el-button>
                  </template>
                  <template v-if="isOther && scope.row.claimType == '1' && scope.row.custClaimStatus == '1'">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                    <el-button  type="text" :disabled="true" @click="custClaminOne(scope.row.custId,scope.row.groupId,scope.row.campaignId,scope.row.custPattern)">认领</el-button>
                  </template>
                </div>
              </template>
              <!-- <el-col style="margin-top: 20px;"> <el-button  :disabled="true" >去认领</el-button></el-col>
                    <el-col style="margin-top: 20px;"> <el-button  :disabled="true" v-if="handleStatus" @click="handleBox(scope.row.custId)">去营销</el-button></el-col> -->
            </el-table-column>
          </el-table>
          <el-table :data="tableData2" style="width: 100%" ref="table1" v-if="currentTable === 2" @selection-change="handleSelectionChange">
            <el-table-column type="selection" label="全选"></el-table-column>
            <el-table-column prop="createRole" label="清单来源" align="center" sortable v-if="columns[0].visible">
              <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="清单名称" sortable v-if="columns[1].visible"></el-table-column>
            <!-- <el-table-column prop="customerNum" label="客户数"></el-table-column> -->
            <el-table-column prop="campaignName" label="活动名称" sortable v-if="columns[2].visible"></el-table-column>
            <el-table-column prop="custId" label="客户号" sortable v-if="columns[3].visible"></el-table-column>
            <el-table-column prop="custIdc" label="证件号" sortable v-if="columns[4].visible"></el-table-column>
            <el-table-column prop="custPhone" label="手机号" sortable v-if="columns[5].visible">{{ 1883481 }}</el-table-column>
            <el-table-column prop="startTime" label="开始时间" sortable v-if="columns[6].visible">
                <template slot-scope="scope">
                  <span>{{scope.row.startTime.substring(0,10)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" sortable v-if="columns[7].visible">
                <template slot-scope="scope">
                  <span>{{scope.row.endTime.substring(0,10)}}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="actionStatus" label="活动进度"></el-table-column> -->
            <el-table-column prop="campaignDegree" label="紧急程度" sortable v-if="columns[8].visible"></el-table-column>
            <!-- <el-table-column prop="bglongDept" label="执行机构"></el-table-column> -->
            <!-- <el-table-column prop="claimEndTime" label="分配执行机构结束时间"></el-table-column> -->
            <el-table-column prop="claimType" label="认领类型" sortable v-if="columns[9].visible">
              <template slot-scope="scope">
                <span>
                  {{ scope.row.claimType == '0' ? '强制认领' : '可选认领' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="orgClaimStatus" label="机构认领状态" sortable v-if="columns[10].visible">
              <template slot-scope="scope">
                {{ scope.row.orgClaimStatus == '0' ? '待认领' : '已认领' }}
              </template>
            </el-table-column>
            <el-table-column prop="orgDistributeStatus" label="机构分配状态" sortable v-if="columns[11].visible">
              <template slot-scope="scope">
                {{ scope.row.orgDistributeStatus == '0' ? '待分配' : '已分配' }}
              </template>
            </el-table-column>
            <el-table-column prop="custClaimStatus" label="客户经理认领状态" sortable v-if="columns[12].visible">
              <template slot-scope="scope">
                {{ scope.row.custClaimStatus == '0' ? '待认领' : '已认领' }}
              </template>
            </el-table-column>
            <el-table-column prop="gridNameList" label="所属网格" sortable v-if="columns[13].visible"></el-table-column>
            <el-table-column prop="userNameList" label="客户经理" sortable v-if="columns[14].visible"></el-table-column>
            <el-table-column prop="operate" label="操作" width="200px" fixed="right">
              <!-- <el-row slot-scope="scope" style="display: flex; align-items: center">
          <el-col> <el-button type="primary" v-if="scope.row.claimType=='0'&&"   @click="handleBox(scope.row.custId)"
              >查看详情</el-button></el-col>
          <el-col style="margin-top: 20px;"> <el-button  :disabled="true">提醒分配</el-button></el-col> 
        </el-row> -->
              <template slot-scope="scope">
                <div>
                  <template v-if="isHead">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                  </template>
                  <template v-if="isBranch">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                  </template>
                  <template v-if="isOther && scope.row.claimType == '0'">
                    <el-button type="text" @click="handleBox(scope.row.custId)">去营销</el-button>
                  </template>
                  <template v-if="isOther && scope.row.claimType == '1' && scope.row.custClaimStatus == '0'">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                    <el-button  type="text"  :disabled="false"  @click="custClaminOne(scope.row.custId,scope.row.groupId,scope.row.campaignId,scope.row.custPattern)">认领</el-button>
                  </template>
                  <template v-if="isOther && scope.row.claimType == '1' && scope.row.custClaimStatus == '1'">
                    <el-button type="text" @click="handleBox(scope.row.custId)">查看详情</el-button>
                    <el-button type="text" :disabled="true" @click="custClaminOne(scope.row.custId,scope.row.groupId,scope.row.campaignId,scope.row.custPattern)">认领</el-button>
                  </template>
                </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-row>
      </el-col>
      <el-col :span="6">
        <el-row>
          <el-radio-group class="title" v-model="selectedTab" @change="handleTabChange" style="display: flex">
            <el-radio-button label="个人">个人</el-radio-button>
            <el-radio-button :disabled="true" label="商户">商户</el-radio-button>
            <el-radio-button :disabled="true" label="企业">企业</el-radio-button>
          </el-radio-group>
        </el-row>
        <el-row>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>我的营销清单</span>
              <el-button type="text" @click="handleGoBank" style="float: right; padding: 3px 0">查看全部我的营销清单</el-button>
            </div>
            <div>
              <el-link
                class="checklistname"
                v-for="(item, index) in groupTag"
                @click="handleSelectList(item.groupId, item.custPattern)"
                :key="index"
                >{{ item.groupName }}</el-link
              >
            </div>
          </el-card>
        </el-row>
        <el-row style="margin-top: 32px">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>推荐营销清单</span>
              <el-button
                type="text"
                @click="handleGoBank"
                :class="{ active: currentTable === 1 }"
                :disabled="isCheckList"
                style="float: right; padding: 3px 0"
                >查看全部推荐营销清单</el-button
              >
              <el-link
                class="checklistname"
                v-for="(item, index) in groupTag2"
                @click="handleSelectList(item.groupId, item.custPattern)"
                :key="index"
                >{{ item.groupName }}</el-link
              >
            </div>
          </el-card>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  findchecknamelist,
  findcheckcustomerlist,
  findchecklist,
  orgClaimList,
  allocateCustomerList,
  exportCustData,
  findCustDetail,
  custClaimCustomer
} 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'
import { download } from '@/utils/request.js'

export default {
  data() {
    return {
      isOther: false,
      isBranch: false,
      isHead: false,
      isFindDetail: true,
      ishandleNotCliamedOrg: true,
      isclaimmore: false,
      isremind: true,
      columns: [
        { key: 0, label: '清单来源', visible: true },
        { key: 1, label: '清单名称', visible: true },
        { key: 2, label: '活动名称', visible: true },
        { key: 3, label: '客户号', visible: true },
        { key: 4, label: '手机号', visible: true },
        { key: 5, label: '证件号', visible: true },
        { key: 6, label: '开始时间', visible: true },
        { key: 7, label: '结束时间', visible: true },
        { key: 8, label: '紧急程度', visible: true },
        { key: 9, label: '认领类型', visible: true },
        { key: 10, label: '机构认领状态', visible: true },
        { key: 11, label: '机构分配状态', visible: true },
        { key: 12, label: '客户经理认领状态', visible: true },
        { key: 13, label: '所属网格', visible: true },
        { key: 14, label: '客户经理', visible: true }
      ],
      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: '请选择分配规则' }]
      },
      groupType:'',
      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,
      isclaimone:false,
      pageNum: 1,
      showtable: false,
      currentTable: 1,
      selectedTab: '个人', // 当前选中的选项
      searchQuery: '',
      tableData: [], // 表格数据
      tableData2: [],
      custPattern: 0,
      personalData: [],
      merchantData: [],
      enterpriseData: [],
      myPersonalData: [],
      myMerchantData: [],
      myEnterpriseData: [],
      claimType: '',
      custClaimStatus: '',
      selectedIds: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        custPattern: 0
      },
      selectedRows: []
    }
  },

  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: {
    custClaminMore() {
      if (this.selectedIds.length == 0) {
        Message.warning('请先选择客户')
      }
      custClaimCustomer({
        custIds: this.selectedIds.join(','),
        groupId: this.groupId,
        campaignId: this.campaignId
      }).then((res) => {
        if (res.code == 200) {
          Message.success('认领成功')
          this.isclaimone=true;
          this.handleSelectList(this.groupId, this.custPattern)
          this.$refs.table1.clearSelection()
        }
      })
    },
    custClaminOne(id,groupId,campaignId,custPattern) {
      custClaimCustomer({
        custIds: id,
        groupId: groupId,
        campaignId: campaignId
      }).then((res) => {
        if (res.code == 200) {
          Message.success('认领成功')
          this.isclaimone=true;
           this.handleSelectList(groupId,custPattern)
          this.$refs.table1.clearSelection()
        }
      })
    },
    custExport() {
      if(this.selectedIds.length==0) {
        Message.warning('请先指定客户导出')
      }
      else {
 this.download(
        `/system/listselectlist/export?groupId=${this.groupId}&custIds=${this.selectedIds.join(',')}`,
        {},
        `checklist_customer_${new Date().getTime()}.xlsx`
      )
      Message.success('导出成功!')
      this.$refs.table1.clearSelection()
      }
     
    },
    // custInfoExport() {

    // },
    handleSelectionChange(selection) {
      this.selectedRows = selection
      const selectedCustIds = this.selectedRows.map((item) => item.custId)
      console.log(selectedCustIds)
      this.selectedIds = selectedCustIds
    },
    handleBox(custId) {
      //  this.$router.push({path:'/customer/charts/360charts'})
      // console.log(row);
      findCustDetail({ custId: custId }).then((res) => {
        this.$router.push({
          path: '/360charts/indexcharts/',
          query: { response: JSON.stringify(res) }
        })
      })
    },
    handleGoBank() {
      this.$router.push({ path: '/grid/visit/checklist' })
    },
    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
          this.findchecklist()
        }
      })
    },
    handleInfoSubmit() {
      this.isPushBtn = false
      this.$refs['pushform'].validate((valid) => {
        if (valid) {
          const startTime = this.formatDate(this.pushform.dateRange[0])
          const endTime = this.formatDate(this.pushform.dateRange[1])
          const claimStartTime = this.formatDate(this.pushform.claimdateRange[0])
          const claimEndTime = this.formatDate(this.pushform.claimdateRange[1])
          const 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)
        }
      })
    },
    handleSelectListnew() {
      findchecklist({
        custPattern: this.custPattern,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        groupType: this.groupType
      }).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).toString().substring(0,10)

                // console.log( this.formatDate(item.startTime));
                item.endTime = this.formatDate(item.endTime).toString().substring(0,10)
                item.claimEndTime = this.formatDate(item.claimEndTime).toString().substring(0,10)
                return item
              }
            })
            .slice(0, 4)

          // 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).toString().substring(0,10)
                  // console.log(item.startTime.toString().substring(0,10));
                item.endTime = this.formatDate(item.endTime).toString().substring(0,10)
                item.claimEndTime = this.formatDate(item.claimEndTime).toString().substring(0,10)
                return item
              }
            })
            .slice(0, 4)
          // 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()
        }
      })
    },
    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'
    },
    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(this.groupId, this.custPattern)
        }
      })
    },
    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
          this.isremind = true
          this.ishandleNotCliamedOrg = true
          this.isclaimmore = false
          this.isFindDetail = true
          this.isHead = true
        } else if (Object.keys(res)[0].startsWith('b')) {
          this.isBranch = true
          this.createRole = '0'
          ;(this.todistribute = true), (this.togetit = true), (this.detail = true)
          this.isremind = true
          this.ishandleNotCliamedOrg = true
          this.isclaimmore = false
          this.isFindDetail = true
        } else {
          this.isOther = true
          this.createRole = '2'
          ;(this.togetit = true), (this.detail = true)
          this.isremind = false
          this.ishandleNotCliamedOrg = false
          this.isclaimmore = true
          this.isFindDetail = false
        }
      })
    },
    handleCheckCustomerList(groupId, custPattern) {
      // this.$router.push({ path: '/checklist/customerlist', query: { groupId,custPattern } })
    },
    handleNotCliamedCust() {
      findcheckcustomerlist({
        custPattern: this.custPattern,
        custClaimStatus: '0',
        groupId: this.groupId
      }).then((response) => {
        console.log(response)
        // console.log(res);
        if (response.rows.length == 0) {
          this.tableData = []
          this.tableData2 = []
          this.total = 0
          return
        }
        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.length == 0) {
          this.tableData = []
        }
        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(this.groupId, this.custPattern)
      // this.handleSearch()
    },
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.pageNum = newPage
      this.handleSelectList(this.groupId, this.custPattern)
      // this.handleSearch()
    },
    // 处理搜索
    handleSearch() {
      findcheckcustomerlist({
        custPattern: this.custPattern,
        groupId: this.groupId,
        custName: this.searchQuery
      }).then((response) => {
        // console.log(response);
        // console.log(res);
           if(response.rows.length==0) {
           this.tableData=[];
           this.tableData2=[];
           this.total=0;
          return;
        }
        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
        }
      })
    },
    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
          this.handleSelectList(this.groupId, this.custPattern)
          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(groupId, custPattern) {
      findcheckcustomerlist({
        custPattern,
        groupId,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((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
        }
      })
    }
  },
  mounted() {
    // 初始化表格数据
    const groupId = this.$route.query.groupId
    const custPattern = this.$route.query.custPattern
    const campaignId = this.$route.query.campaignId
    this.groupType = this.$route.query.groupType
    this.campaignId = campaignId
    this.groupId = groupId
    localStorage.setItem('groupId', groupId)
    localStorage.setItem('custPattern', custPattern)
    this.custPattern = custPattern
    // console.log('iddddddddd',groupId);
    this.handleTabChange()
    // findchecknamelist().then(res=> {
    //     // console.log(res);
    // })
    this.isUserType()
    this.handleSelectList(groupId, custPattern)
    this.handleSelectListnew()
    // findcheckcustomerlist({custPattern:'0'}).then(res=> {
    //     console.log(res);
    // })
  }
}
</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>