    <template>
  <div class="customer-wrap">
    <div>
      <el-radio-group class="header-radio" v-model="selectedTab">
        <el-radio-button label="企业" disabled>企业</el-radio-button>
        <el-radio-button label="商户" disabled>商户</el-radio-button>
        <el-radio-button label="个人">个人</el-radio-button>
      </el-radio-group>
      <el-row :gutter="24" style="flex-wrap: wrap">
        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
          <el-card class="box-card">
            <div class="my-span-checklist-header">
              <span class="my-span-checklist-title">我的营销清单</span>
              <span
                @click="
                  () => {
                    this.groupType = 1;
                    this.checklistTitle = `我的营销清单列表`;
                    this.handleSelectList(1);
                  }
                "
                style="
                  cursor: pointer;
                  height: 20px;
                  font-family: PingFangSC-Regular;
                  font-weight: 400;
                  font-size: 14px;
                  color: #959da6;
                  letter-spacing: 0;
                "
                >查看全部 >
              </span>
            </div>

            <div class="my-span-checklist-content">
              <div
                class="my-span-checklist-content-item"
                v-for="(item, index) in groupTag"
                @click="handleCheckCustomerList(item.groupId, item.custPattern)"
                :key="index"
              >
                {{ item.groupName }}
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
          <el-card class="box-card1">
            <div class="my-span-checklist-header">
              <span class="my-span-checklist-title"> 推送营销清单</span>
              <span
                @click="
                  () => {
                    this.currentTable = 1;
                    this.groupType = 0;
                    this.checklistTitle = ` 推送营销清单列表`;
                    this.handleSelectList(0);
                  }
                "
                :class="{ active: currentTable === 1 }"
                :disabled="isCheckList"
                style="
                  cursor: pointer;
                  height: 20px;
                  font-family: PingFangSC-Regular;
                  font-weight: 400;
                  font-size: 14px;
                  color: #959da6;
                  letter-spacing: 0;
                "
                >查看全部 >
              </span>
            </div>

            <div class="my-span-checklist-content">
              <div
                class="my-span-checklist-content-item"
                v-for="(item, index) in groupTag2"
                @click="handleCheckCustomerList(item.groupId, item.custPattern)"
                :key="index"
              >
                {{ item.groupName }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <section class="main-wrap">
          <section class="search-box" v-if="showSearch">
            <section class="search-cnt">
              <el-input
                v-model="searchQuery"
                placeholder="搜索活动/清单名字"
                clearable
                @keyup.enter.native="handleSearch"
                @clear="handleSearch"
              >
              </el-input>
              <section class="search-btn" @click="handleSearch">
                <i class="el-icon-search"></i>
              </section>
            </section>
          </section>
          <section>
            <!-- <el-radio-group  size="medium">
                <el-radio-button  type="text" style=" width: 108px;height: 32px;background: #4886f8;border-radius: 1px;">
                  <i class="el-icon-bell"></i> 批量提醒</el-radio-button>
                <el-radio-button type="text"  class="checklist-btn2">已认领未分配</el-radio-button>
                <el-radio-button type="text"  class="checklist-btn3">未分配机构</el-radio-button>
              </el-radio-group> -->
            <el-button
              type="primary"
              class="remind-more"
              :disabled="true"
              v-if="isremind"
            >
              <i class="el-icon-bell"></i> 批量提醒</el-button
            >
            <el-button
              type="text"
              class="checklist-btn2"
              @click="handleCliamedNotDistributedOrg"
              v-if="ishandleCliamedNotDistributedOrg"
              :loading="buttonLoading"
              >已认领未分配</el-button
            >
            <el-button
              type="text"
              class="checklist-btn3"
              @click="handleNotCliamedOrg"
              v-if="ishandleNotCliamedOrg"
              >未分配机构</el-button
            >
            <right-toolbar
              :showSearch.sync="showSearch"
              @queryTable="handleSelectList"
              :columns="columns"
            ></right-toolbar>
          </section>
          <section class="table-wrap">
            <el-table
              :data="filterTableData2"
              style="width: 100%"
              row-key="generateRowKey"
            >
              <el-table-column
                prop="groupId"
                type="selection"
                label="全选"
                v-if="isSelected"
              ></el-table-column>
              <el-table-column
                prop="createRole"
                label="清单来源"
                align="center"
                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"
                v-if="columns[1].visible"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.groupType == "1"
                      ? "我的营销清单"
                      : " 推送营销清单"
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="groupName"
                label="清单名称"
                v-if="columns[2].visible"
              ></el-table-column>
              <el-table-column
                prop="customerNum"
                label="客户数"
                v-if="columns[3].visible"
              ></el-table-column>
              <el-table-column
                prop="campaignName"
                label="关联活动"
                v-if="columns[4].visible"
              ></el-table-column>
              <el-table-column
                prop="startTime"
                label="开始时间"
                v-if="columns[5].visible"
              ></el-table-column>
              <el-table-column
                prop="endTime"
                label="结束时间"
                v-if="columns[6].visible"
              ></el-table-column>
              <el-table-column
                prop="actionStatus"
                label="活动进度"
                v-if="columns[7].visible"
              ></el-table-column>
              <el-table-column
                prop="campaignDegree"
                label="紧急程度"
                v-if="columns[8].visible"
              ></el-table-column>
              <el-table-column
                prop="claimEndTime"
                label="分配结束时间"
                v-if="isclaimEndTime && columns[9].visible"
              ></el-table-column>
              <el-table-column
                prop="claimType"
                label="认领类型"
                v-if="columns[10].visible"
              >
                <template slot-scope="scope">
                  {{ scope.row.claimType == "0" ? "强制认领" : "可选认领" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="orgClaimStatus"
                :label="orgClaimStatusName"
                v-if="isorgClaimStatus && columns[11].visible"
              >
                <template slot-scope="scope">
                  {{ scope.row.orgClaimStatus == "0" ? "待认领" : "已认领" }}
                </template>
              </el-table-column>
              <el-table-column
                prop="orgDistributeStatus"
                :label="orgDistributeStatusName"
                v-if="isorgDistributeStatus && columns[12].visible"
              >
                <template slot-scope="scope">
                  {{
                    scope.row.orgDistributeStatus == "0" ? "待分配" : "已分配"
                  }}
                </template>
              </el-table-column>
              <el-table-column
                prop="receiveSitustion"
                label="客户经理认领率"
                v-if="isreceiveSitustion && columns[13].visible"
              ></el-table-column>
              <el-table-column
                prop="operate"
                label="操作"
                width="250"
                fixed="right"
              >
                <template slot-scope="scope">
                  <div style="display: flex; align-items: center">
                    <el-button
                      type="text"
                      size="mini"
                      v-if="detail"
                      @click="
                        handleCheckCustomerList(
                          scope.row.groupId,
                          scope.row.custPattern,
                          scope.row.campaignId,
                          scope.row.groupType
                        )
                      "
                      >查看详情</el-button
                    >
                    <el-button
                      type="text"
                      :disabled="true"
                      v-if="remind"
                      size="mini"
                      >提醒分配</el-button
                    >
                    <el-button
                      type="text"
                      
                      v-if="handleShowCustInfo(scope.row)"
                      :disabled="handleorgClaimStatus(scope.row.orgClaimStatus)"
                      size="mini"
                      @click="
                        handleorgClaim(scope.row.groupId, scope.row.campaignId)
                      "
                      >认领</el-button
                    >

                    <el-button
                      type="text"
                      v-if="
                        handleShowCustInfo(scope.row) 
                        
                      "
                      @click="
                        handlePushGroupCustomer(
                          scope.row.secondPushStatus,
                          scope.row.groupName,
                          scope.row.groupId,
                          scope.row.campaignId,
                          scope.row.groupType,
                          scope.row.orgDistributeStatus,
                          scope.row.orgClaimStatus,
                          '2'
                        )
                      "
                      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,prev,pager,next,sizes"
              :total="total"
              :current-page="pageNum"
            ></el-pagination>
          </section>
        </section>
      </el-row>
    </div>
    <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 {
      executerDept: false,
      orgClaimStatusName: "",
      orgDistributeStatusName: "",
      buttonLoading: false,
      isShowSearch: 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: this.isHeader ? "机构认领类型" : "认领类型",
          visible: true,
        },
        { key: 11, label: "认领状态", visible: true },
        {
          key: 12,
          label: this.isHeader ? "机构分配状态" : "分配类型",
          visible: true,
        },
        { key: 13, label: "客户经理认领率", visible: true },
        { key: 14, label: "执行机构", visible: this.isHeader ? true : false },
      ],
      isorgClaimStatus: true,
      isorgDistributeStatus: true,
      isreceiveSitustion: true,
      isclaimEndTime: true,
      isSelected: false,
      checklistTitle: "",
      ischecklistTitle: false,
      isremind: false,
      ishandleCliamedNotDistributedOrgClick: false,
      ishandleCliamedNotDistributedOrg: false,
      ishandleNotCliamedOrgClick: false,
      ishandleNotCliamedOrg: false,
      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,
      isHeader: false,
      isBranch: false,
      selectedTab: "我创建的",
      searchQuery: "",
      showCreateDialog: false,
      selectedCreateType: "",
      isCreatePage: false,
      tableData: [],
      groupId: "",
      // createRole: '',
      campaignId: "",
      ispushformread: false,
      pushformDetail: {},
      isOther: true,
      istogetit: false,
      isCheckList: false,
      groupTag: [],
      groupTag2: [],
      groupId: "",
      groupType: "",
      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);
    // }
    filterTableData() {
      return this.tableData.filter((item) => {
        return item.groupName.includes(this.searchQuery);
      });
    },
    filterTableData2() {
      // this.total=this.tableData2.filter((item) => {
      //   return item.groupName.includes(this.searchQuery);
      // }).length
      return this.tableData2.filter((item) => {
        return item.groupName.includes(this.searchQuery);
      });
    },
  },
  created() {
    this.isUserType();
    // findchecknamelist().then(res=> {
    //     console.log(res);
    // })
  },
  methods: {
    handleRadioGroup(value) {
      localStorage.setItem("distributeType", value);
      // console.log(value);
    },
    handleAllocateCustomerList() {
      allocateCustomerList({
        campaignId: this.campaignId,
        distributeType: this.pushform.distributeType,
        groupId: this.groupId,
      }).then((res) => {
        if (res.code == 200) {
          Message.success("支行管理员二次分配成功!");

          this.handleSelectList(0);

          this.pushOpen = false;
          this.$router.push({
            path: "/groupBase/customerDetail",
            query: { groupId, groupName, campaignId, groupType, type },
          });
        }
      });
    },
    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(
      secondPushStatus,
      groupName,
      groupId,
      campaignId,
      groupType,
      orgDistributeStatus,
      orgClaimStatus,
      type
    ) {
      console.log("type========", type);
      if (orgClaimStatus == "1" && secondPushStatus == "1") {
        this.$router.push({
          path: "/groupBase/customerDetail",
          query: { groupId, groupName, campaignId, groupType, type },
        });
        return;
      }
      if (orgClaimStatus == "1" && secondPushStatus == "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, status3, status4) {
      console.log(status, "111");
      console.log(status2, "2222");
      if (status2 == "0" && status == "0" && !this.isHeader) {
        return false;
      }
      if (status2 == "1" && status == "1" && !this.isHeader) {
        return true;
      }
      if (status2 == "1" && status == "0" && !this.isHeader) {
        return true;
      }
    },
    handleShowCustInfo(row) {
      // if (status1 == "0" && status2 == "1") {
      //   return false;
      // } else {
      //   return true;
      // }
      if(row.createRole ==1){
          return false
      }else if(row.createRole ==0){
        if(row.executer !=1){
          return true
        }else if(row.executer ==1){
          return false
        }
      }
    },
    handleorgClaimStatus(status, status1, status2) {
      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(0);
        }
      });
    },
    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.ishandleCliamedNotDistributedOrg = true;
          this.ishandleNotCliamedOrg = true;
          this.ischecklistTitle = false;
          this.isSelected = true;
          this.togetit = false;
          this.isHeader = true;
          this.isOther = false;
          this.orgDistributeStatusName = "机构分配状态";
          this.orgClaimStatusName = "机构认领状态";
          this.executerDept = true;
          // localStorage.setItem("groupType", "0");
        } else if (Object.keys(res)[0].startsWith("b")) {
          this.createRole = "0";
          this.todistribute = true;
          this.togetit = true;
          this.detail = true;
          this.isOther = false;
          this.remind = false;
          this.ishandleCliamedNotDistributedOrg = false;
          this.ishandleNotCliamedOrg = false;
          this.ischecklistTitle = true;
          this.checklistTitle = "我的营销清单列表";
          this.isSelected = false;
          this.groupType = "";
          this.orgDistributeStatusName = "分配状态";
          this.orgClaimStatusName = "认领状态";
          this.executerDept = false;
          // localStorage.setItem('groupType','1')
          localStorage.setItem("groupType", "0");
        } else {
          this.isOther = true;
          this.executerDept = false;
          this.orgDistributeStatusName = "分配状态";
          this.orgClaimStatusName = "认领状态";
          this.createRole = "2";
          (this.togetit = true), (this.detail = true);
          this.remind = false;
          this.ishandleCliamedNotDistributedOrg = false;
          this.ishandleNotCliamedOrg = false;
          this.ischecklistTitle = true;
          this.checklistTitle = " 推送营销清单列表";
          this.isSelected = false;
          (this.isorgClaimStatus = false),
            (this.isorgDistributeStatus = false),
            (this.isreceiveSitustion = false),
            (this.isclaimEndTime = false),
            (this.isSelected = false);
          // localStorage.setItem('groupType','1')
          localStorage.setItem("groupType", "0");
        }
      });
    },
    handleCheckCustomerList(groupId, custPattern, campaignId, groupType) {
      // console.log(groupId, custPattern);
      this.$router.push({
        path: "/checklist/customerlist",
        query: { groupId, custPattern, campaignId, groupType },
      });
    },
    handleNotCliamedOrg() {
      this.ishandleNotCliamedOrgClick = !this.ishandleNotCliamedOrgClick;
      if (this.ishandleNotCliamedOrgClick == false) {
        this.handleSelectList();
        this.buttonLoading = false;
      } else {
        this.buttonLoading = true;
        findchecklist({
          custPattern: this.custPattern,
          orgClaimStatus: 0,
        }).then((response) => {
          // console.log(response);
          // console.log(res);
          this.buttonLoading = false;
          this.ishandleNotCliamedOrgClick = true;
          if (response.rows.length == 0) {
            this.tableData = [];
            this.tableData2 = [];
            this.total = [];
          }
          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() {
      this.ishandleCliamedNotDistributedOrgClick =
        !this.ishandleCliamedNotDistributedOrgClick;
      if (this.ishandleCliamedNotDistributedOrgClick === false) {
        this.handleSelectList();
        this.buttonLoading = false;
      } else {
        findchecklist({
          custPattern: this.custPattern,
          orgClaimStatus: 1,
          orgDistributeStatus: 0,
        }).then((response) => {
          // console.log(res);
          // console.log(res);
          this.buttonLoading = false;
          this.ishandleCliamedNotDistributedOrgClick = true;
          if (response.rows.length == 0) {
            this.tableData = [];
            this.tableData2 = [];
            this.total = 0;
          }
          if (response.rows[0].createRole == "0") {
            this.ishandleCliamedNotDistributedOrgClick = true;
            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.buttonLoading = false;
            this.ishandleCliamedNotDistributedOrgClick = true;
          }
          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.buttonLoading = false;
            this.ishandleCliamedNotDistributedOrgClick = true;
          }
        });
      }
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      // alert(this.groupType)
      this.handleSelectList(this.groupType);
    },
    handleCurrentChange(newPage) {
      // console.log(newPage);
      this.pageNum = newPage;
      //  alert(this.groupType)
      this.handleSelectList(this.groupType);
    },
    // 处理搜索
    handleSearch() {
      findchecklist({
        custPattern: this.custPattern,
        groupName: this.searchQuery,
        groupType: this.groupType,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((response) => {
        // console.log(response);
        if (response.rows.length == 0) {
          this.tableData = [];
          this.tableData2 = [];
          this.total = 0;
          return;
        }
        if (response.rows[0].createRole == "0") {
          this.currentTable = 1;
          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 = "";
        }
        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, 10).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();
          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(type) {
      findchecklist({
        custPattern: this.custPattern,
        groupType:type,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((response) => {
        // console.log(this.pageNum);
        // response.rows.map(item => {
        //   if(item.groupType == '1')
        // })
        if (response.rows.length == 0) {
          this.tableData = [];
          this.tableData2 = [];
          this.total = 0;
          return;
        }

        this.currentTable = 1;
        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()

        // if (response.rows[0].groupType == "0") {
        //   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()
        // }
      });
    },

    tagFn(type) {
      findchecklist({
        custPattern: this.custPattern,
        groupType: type,
      }).then((response) => {
        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;
            }
          });
        }
        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;
              }
            })
            .slice(0, 4);
        }
      });
    },
  },
  mounted() {
    //初始化表格数据
    this.handleTabChange();
    // findchecknamelist().then(res=> {
    //     // console.log(res);
    // })
    this.isUserType();
    this.handleSelectList();
    this.tagFn(1)
    this.tagFn(0)
  },
};
</script>

    <style lang="scss" scoped>
.main-wrap {
  margin: 0 30px;
}
.remind-more {
  width: 108px;
  height: 36px;
  background: #4886f8;
  border-radius: 1px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  margin-bottom: 25px;
}
.checklist-btn2 {
  width: 108px;
  height: 36px;
  background: #4886f80f;
  border-radius: 1px;
  color: #4886f8;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  margin-left: 12px;
  margin-bottom: 25px;
}
.checklist-btn3 {
  width: 108px;
  height: 36px;
  background: #4886f80f;
  border-radius: 1px;
  color: #4886f8;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 14px;
  margin-left: 12px;
  margin-bottom: 25px;
}
.customer-wrap {
  background-color: #ffffff;
  overflow: hidden;
  box-shadow: 0 3px 8px 0 #00000017;
  border-radius: 16px 16px 0 0;
  .header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 3px 8px 0 #00000017;
    .el-radio-button {
      flex: 1;
      ::v-deep .el-radio-button__inner {
        width: 100%;
        border: none;
        font-weight: 400;
        letter-spacing: 0.5px;
        line-height: 25px;
        font-size: 18px;
        color: #666666;
        padding: 11px 0 12px 0;
      }
      ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        background-color: #4886f8;
        font-weight: 600;
        color: #ffffff;
      }
    }
  }
}
.my-span-checklist-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.my-span-checklist-content-item {
  cursor: pointer;
  width: 355px;
  height: 44px;
  padding: 20px;
  text-align: center;
  font-size: 16px;
  background-color: #ffffff;
  font-weight: 200;
  border-radius: 5px;
  margin: 10px;
  line-height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card {
  height: 181px;
  background: #eaf5ff;
  border-radius: 8px;
  margin-top: 25px;
}
.box-card1 {
  height: 181px;
  background: #eaf5ff;
  border-radius: 8px;
  margin-top: 25px;
}
.my-span-checklist-header {
  display: flex;
  justify-content: space-between;
}
.my-span-checklist-title {
  height: 25px;
  font-family: PingFangSC-SNaNpxibold;
  font-weight: 600;
  font-size: 18px;
  color: #222222;
  letter-spacing: 0.5px;
}
.my-checkall {
  height: 20px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 14px;
  color: #959da6;
  letter-spacing: 0;
}
.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 24px 0;
  .search-cnt {
    position: relative;
    width: 70%;
  }
  ::v-deep .el-input {
    width: 100%;
    position: relative;
    .el-input__inner {
      height: 44px;
      line-height: 44px;
      border-radius: 23px;
      border: 2px solid #ebebeb;
    }
    .el-input__suffix {
      right: 85px;
    }
  }
  .search-btn {
    width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 2px;
    border: 1px solid #4886f8;
    background-color: #4886f8;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1;
    .el-icon-search {
      color: #ffffff;
      font-size: 14px;
    }
  }
}
.operate-cnt {
  margin: 24px 0 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .plain-raido-btn {
    ::v-deep .el-radio-button__inner {
      color: #666666;
      font-size: 14px;
      font-weight: 400;
      border: 1px solid #ebebeb;
      border-radius: 0;
    }
    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      border: 1px solid #4886f8;
      color: #4886f8;
      background-color: #ffffff;
      box-shadow: none;
    }
  }
}
</style>