<template>
  <div class="app-container">
    <el-descriptions size="medium">
      <el-descriptions-item label="用户总数">{{ count.userNum }}</el-descriptions-item>
      <el-descriptions-item label="已注册用户">{{ count.userRegisterNum }}</el-descriptions-item>
      <el-descriptions-item label="已绑定仪器用户数">{{ count.userDeviceNum }}</el-descriptions-item>
    </el-descriptions>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="用户类型" prop="userType">
        <el-select v-model="queryParams.userType" @keyup.enter.native="handleQuery" style="width: 50%">
          <el-option label="全部" value=""></el-option>
          <el-option label="会员" :value="1"></el-option>
          <el-option label="游客" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="会员昵称" prop="nickname">
        <el-input
          v-model="queryParams.nickname"
          placeholder="请输入单个会员昵称进行搜索"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="搜索多个请用英文逗号隔开"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户编号" prop="id">
        <el-input
          v-model="queryParams.id"
          placeholder="搜索多个请用英文逗号隔开"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          clearable
          v-model="queryParams.birthday"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择生日">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="省" prop="provinceId">
        <el-select v-model="queryParams.provinceId" @change="getCityList(queryParams.provinceId)"
                   @keyup.enter.native="handleQuery" filterable clearable>
          <el-option
            v-for="item in provinceList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市" prop="cityId">
        <el-select v-model="queryParams.cityId" @change="getAreaByPid(queryParams.cityId)"
                   @keyup.enter.native="handleQuery" filterable clearable placeholder="请选择省">
          <el-option
            v-for="item in cityList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区" prop="areaId">
        <el-select v-model="queryParams.areaId" @keyup.enter.native="handleQuery" filterable clearable
                   placeholder="请选择市">
          <el-option
            v-for="item in areaList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户注册时间" prop="createTime">
        <el-date-picker
          v-model="dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="仪器数量" prop="credit">
        <el-input-number v-model="queryParams.deviceNumStart" @keyup.enter.native="handleQuery"></el-input-number>
        至
        <el-input-number v-model="queryParams.deviceNumEnd" @keyup.enter.native="handleQuery"></el-input-number>
      </el-form-item>
      <el-form-item label="积分范围" prop="credit">
        <el-input-number v-model="queryParams.creditStart" @keyup.enter.native="handleQuery"></el-input-number>
        至
        <el-input-number v-model="queryParams.creditEnd" @keyup.enter.native="handleQuery"></el-input-number>
      </el-form-item>
      <!--      <el-form-item label="仪器绑定" prop="devicesTags">-->
      <!--        <el-select v-model="queryParams.devicesTags" multiple placeholder="请选择">-->
      <!--          <el-option-->
      <!--            v-for="item in devicesTags"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="购买渠道" prop="purchaseChannels">-->
      <!--        <el-select v-model="queryParams.purchaseChannels" multiple placeholder="请选择">-->
      <!--          <el-option-->
      <!--            v-for="item in purchaseChannels"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="企微标签" prop="wecomTags">
        <el-select v-model="queryParams.wecomTags" multiple placeholder="请选择">
          <el-option
            v-for="item in wecomTags"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="小程序标签" prop="miniProgramTags">
        <el-select v-model="queryParams.miniProgramTags" multiple placeholder="请选择">
          <el-option
            v-for="item in miniProgramTags"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-select v-model="batchOperateValue" placeholder="批量操作" size="mini" clearable>
          <el-option label="批量添加小程序标签" :value="1"></el-option>
          <el-option label="批量删除小程序标签" :value="2"></el-option>
          <el-option label="全量添加小程序标签" :value="3"></el-option>
          <el-option label="全量删除小程序标签" :value="4"></el-option>
          <el-option label="批量加减积分" :value="5"></el-option>
          <el-option label="全量加减积分" :value="6"></el-option>
          <el-option label="批量发送话术" :value="7"></el-option>
          <el-option label="全量发送话术" :value="8"></el-option>
          <el-option label="批量备注" :value="9"></el-option>
          <el-option label="全量备注" :value="10"></el-option>
          <el-option label="注销账号" :value="11"></el-option>
          <el-option label="导出数据" :value="12"></el-option>
          <el-option label="导出全量数据" :value="13"></el-option>
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-warning"
          size="mini"
          @click="batchOperate()"
        >确认
        </el-button>
      </el-col>
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="warning"-->
      <!--          plain-->
      <!--          icon="el-icon-download"-->
      <!--          size="mini"-->
      <!--          @click="handleExport"-->
      <!--          v-hasPermi="['system:member:export']"-->
      <!--        >导出</el-button>-->
      <!--      </el-col>-->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="memberList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <el-avatar shape="circle" :size="50" :src="scope.row.headimg"/>
        </template>
      </el-table-column>
      <el-table-column label="会员昵称" align="center" prop="nickname"/>
      <el-table-column label="用户编号" align="center" prop="id"/>
      <el-table-column label="手机号码" align="center" prop="mobile" width="120px"/>
      <el-table-column label="生日" align="center" prop="birthday" width="120px"/>
      <el-table-column label="省" align="center" prop="province"/>
      <el-table-column label="市" align="center" prop="city"/>
      <el-table-column label="区" align="center" prop="area"/>
      <el-table-column label="信息完善" align="center" prop="isCompleteInformation">
        <template slot-scope="scope">
          <span v-show="scope.row.isCompleteInformation == 0">未完善</span>
          <span v-show="scope.row.isCompleteInformation == 1">完善</span>
        </template>
      </el-table-column>
      <el-table-column label="用户注册时间" align="center" prop="createTime" width="200px"/>
      <el-table-column label="仪器数量" align="center" prop="devicesNum"/>
      <el-table-column label="小程序标签" align="center" prop=""/>
      <el-table-column label="企微标签" align="center" prop=""/>
      <el-table-column label="是否对接" align="center" prop="is_abutment">
        <template slot-scope="scope">
          <span v-show="scope.row.isAbutment == 1">未对接</span>
          <span v-show="scope.row.isAbutment == 2">已对接</span>
          <span v-show="scope.row.isAbutment == 3">对接失败</span>
        </template>
      </el-table-column>
      <el-table-column label="积分" align="center" prop="credit"/>
      <el-table-column label="即将过期积分" align="center" prop=""/>
      <el-table-column label="用户类型" align="center" prop="userType">
        <template slot-scope="scope">
          <span v-show="scope.row.userType == 0">游客</span>
          <span v-show="scope.row.userType == 1">会员</span>
        </template>
      </el-table-column>
      <el-table-column label="unionid" align="center" prop="unionid"/>
      <el-table-column label="用户权限" align="center" prop="">
        <template slot-scope="scope">
          <span v-show="scope.row.clock == 1">开启打卡</span>
          <span v-show="scope.row.clock == 2">禁止打卡</span>
          <span v-show="scope.row.activity == 1">开启活动</span>
          <span v-show="scope.row.activity == 2">禁止活动</span>
        </template>
      </el-table-column>
      <el-table-column label="消息列表" align="center" prop="">
        <span>查看详情</span>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleUpdate(scope.row)" v-hasPermi="['system:member:edit']">查看
          </el-button>
          <el-button v-if="scope.row.clock == 1" size="mini" type="text" @click="openOrCloseClock(scope.row)">禁止打卡
          </el-button>
          <el-button v-if="scope.row.clock == 2" size="mini" type="text" @click="openOrCloseClock(scope.row)">开启打卡
          </el-button>
          <el-button v-if="scope.row.activity == 1" size="mini" type="text" @click="openOrCloseActivity(scope.row)">
            禁止活动
          </el-button>
          <el-button v-if="scope.row.activity == 2" size="mini" type="text" @click="openOrCloseActivity(scope.row)">
            开启活动
          </el-button>
          <el-button size="mini" type="text">个人信息同步</el-button>
          <el-button size="mini" type="text">积分同步</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 查看用户信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-dialog width="30%" title="修改用户备注" :visible.sync="editRemarkVisible" append-to-body>
        <el-form ref="form" :model="editRemarkForm" label-width="50px">
          <el-form-item label="备注 " prop="content">
            <el-input v-model="editRemarkForm.content" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="ocEditRemarkDialog()">关 闭</el-button>
          <el-button type="primary" @click="submitEditRemark()">确 定</el-button>
        </div>
      </el-dialog>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="头像" prop="headimg">
          <el-avatar shape="circle" :size="50" :src="form.headimg"/>
        </el-form-item>
        <el-form-item label="会员昵称" prop="nickname" style="width: 44%">
          <el-input v-model="form.nickname" placeholder="请输入昵称"/>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile" style="width: 44%">
          <el-input v-model="form.mobile" placeholder="请输入手机"/>
        </el-form-item>
        <el-form-item label="用户编号" prop="id">
          <span>{{ form.id }}</span>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker clearable
                          v-model="form.birthday"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择生日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="是否完善" prop="isCompleteInformation">
          <template slot-scope="scope">
            <span v-show="form.isCompleteInformation == 0">未完善</span>
            <span v-show="form.isCompleteInformation == 1">完善</span>
          </template>
        </el-form-item>
        <el-form-item label="省" prop="provinceId" style="width: 40%">
          <el-select v-model="form.provinceId" @change="getCityList(form.provinceId,true)" filterable clearable
                     placeholder="请选择省">
            <el-option
              v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="市" prop="cityId" style="width: 40%">
          <el-select v-model="form.cityId" @change="getAreaByPid(form.cityId, true)" filterable clearable
                     placeholder="请选择省">
            <el-option
              v-for="item in saveCityList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区" prop="areaId" style="width: 40%">
          <el-select v-model="form.areaId" filterable clearable placeholder="请选择市">
            <el-option
              v-for="item in saveAreaList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="小程序标签" prop="tagIdArray" style="width: 80%">
          <treeselect v-model="form.miniProgramTags" :options="miniProgramTagTree" :multiple="true" :show-count="true"
                      placeholder="请选择小程序标签" :disable-branch-nodes="true"/>
        </el-form-item>
        <el-form-item label="企微标签" prop="tagIdArray" style="width: 80%">
          <treeselect v-model="form.wecomTags" :options="wecomTagTree" :multiple="true" :show-count="true"
                      placeholder="请选择企微标签" :disable-branch-nodes="true"/>
        </el-form-item>
        <el-form-item label="注册时间" prop="createTime">
          <el-date-picker v-model="form.createTime" readonly disabled type="date" value-format="yyyy-MM-dd"/>
        </el-form-item>
        <el-form-item label="积分" prop="credit">
          <span>{{ form.credit }}</span>
        </el-form-item>
        <el-form-item label="打卡状态" prop="clock">
          <el-select v-model="form.clock" style="width: 20%">
            <el-option label="开启打卡" :value="1"></el-option>
            <el-option label="禁止打卡" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与活动状态" prop="activity">
          <el-select v-model="form.activity" style="width: 20%">
            <el-option label="开启参与" :value="1"></el-option>
            <el-option label="禁止参与" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注列表" prop="remark">
          <el-table :data="form.wxUserRemarkList" style="width: 100%">
            <el-table-column prop="id" label="序号" style="width: 10%"/>
            <el-table-column prop="content" label="备注内容" style="width: 60%"/>
            <el-table-column prop="createTime" label="创建时间" style="width: 30%"/>
            <el-table-column prop="createTime" label="操作" style="width: 10%">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="ocEditRemarkDialog(scope.row)">编辑
                </el-button>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="submitDelRemark(scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 发送话术   -->
    <el-dialog :title="title" :visible.sync="batchMiniProgramVisible" width="50%"
               :before-close="cancelMiniProgramDialog">
      <el-form ref="form" :model="form" label-width="150px">
        <el-row>
          <el-col :span="100">
            <el-form-item label="小程序标签" prop="tagIdArray" label-width="90px">
              <treeselect v-model="tagIdArray" :options="chatTagOptions" :multiple="true" :show-count="true"
                          placeholder="请选择小程序标签" :disable-branch-nodes="true"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelMiniProgramDialog(true)">重 置</el-button>
        <el-button type="primary" @click="submitBatchOperate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 积分批量操作   -->
    <el-dialog :title="title" :visible.sync="batchIntegralVisible" width="50%" :before-close="cancelIntegralDialog">
      <el-form ref="form" :model="integralForm" label-width="150px">
        <el-form-item label="类型" prop="source">
          <el-select v-model="integralForm.source" style="width: 50%">
            <el-option label="增加" :value="1"></el-option>
            <el-option label="减少" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变动积分" prop="headimg">
          <el-input-number v-model="integralForm.floatScore" controls-position="right" :min="1"
                           :max="1000"></el-input-number>
        </el-form-item>
        <el-form-item label="说明 " prop="username">
          <el-input v-model="integralForm.remarkContent"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelIntegralDialog(true)">重 置</el-button>
        <el-button type="primary" @click="submitBatchOperate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 备注批量操作   -->
    <el-dialog :title="title" :visible.sync="batchRemarkVisible" width="50%" :before-close="cancelRemarkDialog">
      <el-form ref="form" :model="remarkForm" label-width="150px">
        <el-form-item label="备注 " prop="content">
          <el-input v-model="remarkForm.content" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRemarkDialog(true)">重 置</el-button>
        <el-button type="primary" @click="submitBatchOperate">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 话术批量操作 -->
    <el-dialog :title="title" :visible.sync="batchScriptVisible" width="600px" append-to-body
               :before-close="cancelscriptDialog">
      <el-form ref="form" :model="scriptForm" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="类型" prop="isCustom">
              <el-select v-model="scriptForm.isCustom" @change="clearScript">
                <el-option label="话术模板发送" :value="0" :key="0"></el-option>
                <el-option label="自定义发送" :value="1" :key="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  话术模板发送      -->
        <el-row v-if="scriptForm.isCustom == 0">
          <el-col :span="40">
            <el-form-item label="话术二级标题选择" prop="scriptTemplateId" label-width="90px">
              <treeselect v-model="scriptForm.scriptTemplateId" :options="scriptOptions" :show-count="true"
                          @select="selectTree"
                          placeholder="请选择话术" :disable-branch-nodes="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="40">
            <el-form-item label="话术通知内容" prop="scriptContent">
              <el-input v-model="scriptForm.scriptContent"/>
            </el-form-item>
          </el-col>
        </el-row>
        <!--  自定义发送      -->
        <el-row v-if="scriptForm.isCustom == 1">
          <el-col :span="24">
            <el-form-item label="话术标题" prop="titile">
              <el-input v-model="scriptForm.titile" placeholder="请输入话术标题"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="话术内容" prop="content">
              <el-input v-model="scriptForm.content" type="textarea" placeholder="请输入话术内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="小程序标签" prop="tagIdArray" label-width="90px">
              <treeselect v-model="tagIdArray" :options="chatTagOptions" :multiple="true" :show-count="true"
                          placeholder="请选择小程序标签" :disable-branch-nodes="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="跳转类型" prop="type">
              <el-select v-model="scriptForm.type">
                <el-option label="无跳转" :value="0" :key="0"></el-option>
                <el-option label="跳转内部链接" :value="1" :key="1"></el-option>
                <el-option label="跳转小程序" :value="4" :key="4"></el-option>
                <el-option label="跳转外部链接" :value="3" :key="3"></el-option>
                <el-option label="导向视频号" :value="5" :key="5"></el-option>
                <el-option label="导向视频号直播间" :value="6" :key="6"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 1">
            <el-form-item label="内部链接" prop="link">
              <el-input v-model="scriptForm.link" placeholder="请输入内部链接"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 1">
            <el-form-item label="跳转参数" prop="linkParams">
              <el-input v-model="scriptForm.linkParams" placeholder="请输入跳转参数"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 3">
            <el-form-item label="外部链接" prop="link">
              <el-input v-model="scriptForm.link" placeholder="请输入外部链接"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 4">
            <el-form-item label="小程序APPID" prop="redirectAppid">
              <el-input v-model="scriptForm.redirectAppid" placeholder="请输入APPID"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 4" label-width="90px">
            <el-form-item label="小程序页面" prop="redirectUrl">
              <el-input v-model="scriptForm.redirectUrl" placeholder="请输入小程序页面"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 5 || scriptForm.type == 6">
            <el-form-item label="视频号ID" prop="videoNo">
              <el-input v-model="scriptForm.videoNo" placeholder="视频号id，以“sph”开头的id，可再视频号助手获取"/>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="scriptForm.type == 5" label-width="90px">
            <el-form-item label="feedId" prop="feedId">
              <el-input v-model="scriptForm.feedId" placeholder="请输入视频号feedId"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitBatchOperate">确 定</el-button>
        <el-button @click="cancelscriptDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listMember,
  getMember,
  delMember,
  addMember,
  updateMember,
  selectUserCount,
  getMiniProgramTags,
  getWecomTags,
  getPurchaseChannel,
  getRegionByPid,
  batchAddMiniProgramTag,
  allAddMiniProgramTag,
  batchDelMiniProgramTag,
  allDelMiniProgramTag,
  batchChangIntegral,
  allChangIntegral,
  batchSendScript,
  allSendScript,
  batchAddRemark,
  allAddRemark,
  getMiniProgramTagsTree,
  scriptTreeSelect,
  editRemark, delRemark,
  openOrCloseClock, openOrCloseActivity,
} from "@/api/system/member";
import Treeselect from "@riophae/vue-treeselect";
import {tagTreeSelect} from "@/api/system/wechatTab";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Member",
  components: {Treeselect},
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      memberList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 修改用户备注弹出层
      editRemarkVisible: false,
      editRemarkForm: {
        id: null,
        content: null
      },
      // 日期范围
      dateRange: [],
      // 表头统计
      count: {
        userNum: 0,
        userRegisterNum: 0,
        userDeviceNum: 0
      },
      // 查询条件，小程序二级标签
      miniProgramTags: [],
      // 小程序标签树
      miniProgramTagTree: [],
      // 企微标签树
      wecomTagTree: [],
      // 查询条件，企微二级标签
      wecomTags: [],
      // 查询条件：购买渠道
      purchaseChannels: null,
      // 查询条件：省市区
      provinceList: null,
      cityList: null,
      areaList: null,
      // 保存页面的，市区
      saveCityList: null,
      saveAreaList: null,
      // 批量操作下拉项选择
      batchOperateValue: null,
      // 批量操作：小程序标签
      batchMiniProgramVisible: false,
      chatTagOptions: [],
      scriptOptions: [],
      tagIdArray: [],
      // 批量操作：积分
      batchIntegralVisible: false,
      integralForm: {
        source: null,
        floatScore: null,
        remarkContent: "后台操作"
      },
      // 批量操作：备注
      batchScriptVisible: false,
      remarkForm: {
        content: null,
        userIdList: null,
      },
      // 批量操作：发送话术
      batchRemarkVisible: null,
      scriptForm: {
        userIdList: null,
        isCustom: null,
        scriptTemplateId: null,
        scriptName: null,
        titile: null,
        content: null,
        tagType: null,
        type: null,
        link: null,
        linkParams: null,
        redirectAppid: null,
        redirectUrl: null,
        videoNo: null,
        feedId: null,
        tagNames: [],
        tagIds: [],
        // 当类型为模板发送时，选择了二级话术标题后，显示内容用，不传后端保存
        scriptContent: null,
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nickname: null,
        headimg: null,
        username: null,
        deviceNumStart: undefined,
        deviceNumEnd: undefined,
        creditStart: undefined,
        creditEnd: undefined,
        openid: null,
        unionid: null,
        userType: null,
        level: null,
        mobile: null,
        password: null,
        userQr: null,
        provinceId: null,
        province: null,
        cityId: null,
        city: null,
        areaId: null,
        area: null,
        birthday: null,
        clock: null,
        activity: null,
        wechat: null,
        code: null,
        isAbutment: null,
        collagenDay: null,
        collagenMount: null,
        loginTime: null,
        status: null,
        // createTime: [],
        devicesTags: [],  //仪器绑定标签
        wecomTags: [], // 企微标签
        miniProgramTags: [], // 小程序标签
        purchaseChannels: [], // 购买渠道
        isCompleteInformation: null, // 用户信息是否完善
        wxUserRemarkList: null, // 备注列表
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {}
    };
  },
  created() {
    // 获取用户统计信息
    this.getUserCount();
    // 获取表单数据
    this.getList();
    // 获取标签
    this.getTags();
    // 获取省
    this.getProvinceList();
    // 获取标签树
    this.getDeptTree();
    this.getScriptTree();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      listMember(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.memberList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getUserCount() {
      selectUserCount().then(Response => {
        this.count.userNum = Response.data[0];
        this.count.userRegisterNum = Response.data[1];
        this.count.userDeviceNum = Response.data[2];
      })
    },
    getTags() {
      // 小程序标签
      getMiniProgramTags().then(Response => {
        this.miniProgramTags = Response.data
      })
      // 微信标签
      getWecomTags().then(Response => {
        this.wecomTags = Response.data
      })
      // 购买渠道
      getPurchaseChannel().then(Response => {
        this.purchaseChannels = Response.data
      })
      // 小程序标签树
      getMiniProgramTagsTree().then(Response => {
        this.miniProgramTagTree = Response.data
      })
      // 企微标签树
      tagTreeSelect({type: 2}).then(response => {
        this.wecomTagTree = response.data;
      });
    },
    // 获取省市区
    getProvinceList() {
      getRegionByPid(0).then(Response => {
        this.provinceList = Response.data
      })
    },
    getCityList(pid, isSave) {
      getRegionByPid(pid).then(Response => {
        if (isSave) {
          this.saveCityList = Response.data;
        } else {
          this.cityList = Response.data;
        }
      })
    },
    getAreaByPid(pid, isSave) {
      getRegionByPid(pid).then(Response => {
        if (isSave) {
          this.saveAreaList = Response.data;
        } else {
          this.areaList = Response.data;
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 关闭添加小程序标签窗口
    cancelMiniProgramDialog(isclose) {
      this.title = null;
      this.tagIdArray = [];
      if (isclose) {
        this.batchMiniProgramVisible = false;
      }
    },
    cancelIntegralDialog(isclose) {
      this.integralForm.source = null;
      this.integralForm.floatScore = null;
      this.integralForm.remarkContent = "后台操作";
      if (isclose) {
        this.batchIntegralVisible = false;
      }
    },
    cancelRemarkDialog(isclose) {
      this.remarkForm.content = null;
      if (isclose) {
        this.batchRemarkVisible = false;
      }
    },
    cancelscriptDialog(isclose) {
      this.scriptForm.isCustom = null,
        this.scriptForm.scriptName = null;
      this.scriptForm.titile = null;
      this.scriptForm.content = null;
      this.scriptForm.tagType = null;
      this.scriptForm.type = null;
      this.scriptForm.link = null;
      this.scriptForm.linkParams = null;
      this.scriptForm.redirectAppid = null;
      this.scriptForm.redirectUrl = null;
      this.scriptForm.videoNo = null;
      this.scriptForm.feedId = null;
      this.scriptForm.tagNames = null;
      this.scriptForm.tagIds = null;
      this.scriptForm.scriptContent = null;
      this.tagIdArray = [];
      this.scriptForm.scriptTemplateId = null;
      this.scriptForm.scriptContent = null;
      if (isclose) {
        this.batchScriptVisible = false;
      }
    },
    /** 查询部门下拉树结构 */
    getDeptTree() {
      tagTreeSelect({type: 1}).then(response => {
        this.chatTagOptions = response.data;
      });
    },
    /** 查询话术下拉树结构 */
    getScriptTree() {
      scriptTreeSelect().then(response => {
        this.scriptOptions = response.data;
      });
    },
    clearScript() {
      // 话术模板
      if (this.scriptForm.isCustom == 0) {
        this.scriptForm.scriptName = null;
        this.scriptForm.titile = null;
        this.scriptForm.content = null;
        this.scriptForm.tagType = null;
        this.scriptForm.type = null;
        this.scriptForm.link = null;
        this.scriptForm.linkParams = null;
        this.scriptForm.redirectAppid = null;
        this.scriptForm.redirectUrl = null;
        this.scriptForm.videoNo = null;
        this.scriptForm.feedId = null;
        this.scriptForm.tagNames = null;
        this.scriptForm.tagIds = null;
        this.scriptForm.scriptContent = null;
        this.tagIdArray = [];
      }
      // 自定义发送
      if (this.scriptForm.isCustom == 1) {
        this.scriptForm.scriptTemplateId = null;
        this.scriptForm.scriptContent = null;
      }
    },
    selectTree(raw, instanceId) {
      this.scriptForm.scriptContent = raw.content;
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        nickname: null,
        headimg: null,
        username: null,
        credit: null,
        openid: null,
        unionid: null,
        userType: null,
        level: null,
        mobile: null,
        password: null,
        userQr: null,
        province: null,
        city: null,
        area: null,
        birthday: null,
        clock: null,
        activity: null,
        wechat: null,
        code: null,
        isAbutment: null,
        collagenDay: null,
        collagenMount: null,
        loginTime: null,
        status: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 批量操作按钮，显示批量操作弹窗 */
    batchOperate() {
      if (this.batchOperateValue == null) {
        this.$message({
          message: '请选择要批量操作类型',
          type: 'warning'
        })
        return
      } else {
        /* 批量操作 小程序标签 */
        if (this.batchOperateValue == 1 || this.batchOperateValue == 2) {
          if (this.ids.length == 0) {
            this.$message({
              message: '请选择要操作的数据',
              type: 'warning'
            })
            return
          }
          if (this.batchOperateValue == 1) {
            console.log("批量添加小程序标签");
            this.title = "添加小程序标签";
          }
          if (this.batchOperateValue == 2) {
            console.log("批量删除小程序标签");
            this.title = "删除小程序标签";
          }
          this.batchMiniProgramVisible = true;
        }
        if (this.batchOperateValue == 3 || this.batchOperateValue == 4) {
          if (this.batchOperateValue == 3) {
            console.log("全量添加小程序标签");
            this.title = "添加小程序标签";
          }
          if (this.batchOperateValue == 4) {
            console.log("全量删除小程序标签");
            this.title = "添加小程序标签";
          }
          this.batchMiniProgramVisible = true;
        }

        /* 批量操作：加减分 */
        if (this.batchOperateValue == 5) {
          console.log("批量加减积分");
          if (this.ids.length == 0) {
            this.$message({
              message: '请选择要操作的数据',
              type: 'warning'
            })
            return
          }
          this.batchIntegralVisible = true;
        }
        if (this.batchOperateValue == 6) {
          console.log("全量加减积分");
          this.batchIntegralVisible = true;
        }

        /* 批量操作：发送话术 */
        if (this.batchOperateValue == 7) {
          console.log("批量发送话术");
          if (this.ids.length == 0) {
            this.$message({
              message: '请选择要操作的数据',
              type: 'warning'
            })
            return
          }
          this.batchScriptVisible = true;
        }
        if (this.batchOperateValue == 8) {
          console.log("全量发送话术");
          this.batchScriptVisible = true;
        }

        /* 批量操作： 备注 */
        if (this.batchOperateValue == 9) {
          console.log("批量备注");
          if (this.ids.length == 0) {
            this.$message({
              message: '请选择要操作的数据',
              type: 'warning'
            })
            return
          }
          this.batchRemarkVisible = true;
        }
        if (this.batchOperateValue == 10) {
          console.log("全量备注");
          this.batchRemarkVisible = true;
        }

        /* 批量操作：注销账号 */
        if (this.batchOperateValue == 11) {
          console.log("注销账号");
          if (this.ids.length == 0) {
            this.$message({
              message: '请选择要操作的数据',
              type: 'warning'
            })
            return
          }
          this.$confirm("<span style='font-size: 18px'><strong>确定将选择的数据注销?</strong></span><br/><span style='padding-left:2em'>请谨慎操作，一旦成功将无法撤销。</span>", '注销账号', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true
          }).then(() => {
            delMember(this.ids).then(Response => {
              this.$modal.msgSuccess("批量删除会员成功");
              this.cancelIntegralDialog(true);
            })
          }).catch(() => {
          });
        }

        /* 批量操作：导出数据 */
        if (this.batchOperateValue == 12) {
          console.log("导出数据");
          if (this.ids.length == 0) {
            this.$message({
              message: '请选择要操作的数据',
              type: 'warning'
            })
            return
          }
        }
        if (this.batchOperateValue == 13) {
          console.log("导出全量数据");
        }
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加用户";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getMember(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改用户";

        // 回显省市区
        if (this.form.provinceId != null) {
          this.getCityList(this.form.provinceId, true);
        }
        if (this.form.areaId != null) {
          this.getAreaByPid(this.form.cityId, true);
        }
      });
    },
    // 开关打卡
    openOrCloseClock(row) {
      let spanContent;
      let title;
      if (row.clock == 1) {
        spanContent = "确定将选择的数据禁止打卡？";
        title = "禁止打卡";
      } else {
        spanContent = "确定将选择的数据开启打卡？";
        title = "开启打卡";
      }
      this.$confirm("<span style='font-size: 18px'><strong>" + spanContent + "</strong></span><br/><span style='padding-left:2em'>请谨慎操作，一旦成功将无法撤销。</span>", title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        openOrCloseClock(row.id).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        });
      }).catch(() => {
      });
    },
    // 开关活动
    openOrCloseActivity(row) {
      let spanContent;
      let title;
      if (row.activity == 1) {
        spanContent = "确定将选择的数据禁止活动？";
        title = "禁止活动";
      } else {
        spanContent = "确定将选择的数据开启活动？";
        title = "开启活动";
      }
      this.$confirm("<span style='font-size: 18px'><strong>" + spanContent + "</strong></span><br/><span style='padding-left:2em'>请谨慎操作，一旦成功将无法撤销。</span>", title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        openOrCloseActivity(row.id).then(response => {
          this.$modal.msgSuccess("操作成功");
          this.getList();
        });
      }).catch(() => {
      });

    },
    /** 提交按钮 */
    submitForm() {
      if (this.form.id != null) {
        updateMember(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      } else {
        this.$modal.msgError("修改失败");
      }
    },
    /* 批量操作提交按钮 */
    submitBatchOperate() {
      // 批量添加小程序标签
      if (this.batchOperateValue == 1) {
        batchAddMiniProgramTag(this.tagIdArray, this.ids).then(Response => {
          this.$modal.msgSuccess("批量添加小程序标签成功");
          this.cancelMiniProgramDialog(true);
        })
      }
      // 批量删除小程序标签
      if (this.batchOperateValue == 2) {
        batchDelMiniProgramTag(this.tagIdArray, this.ids).then(Response => {
          this.$modal.msgSuccess("批量添加小程序标签成功");
          this.cancelMiniProgramDialog(true);
        })
      }
      // 全量添加小程序标签
      if (this.batchOperateValue == 3) {
        allAddMiniProgramTag(this.tagIdArray, this.queryParams).then(Response => {
          this.$modal.msgSuccess("全量添加小程序标签成功");
          this.cancelMiniProgramDialog(true);
        })
      }
      // 全量删除小程序标签
      if (this.batchOperateValue == 4) {
        allDelMiniProgramTag(this.tagIdArray, this.queryParams).then(Response => {
          this.$modal.msgSuccess("全量删除小程序标签成功");
          this.cancelMiniProgramDialog(true);
        })
      }

      // 批量操作积分
      if (this.batchOperateValue == 5) {
        batchChangIntegral(this.ids, this.integralForm).then(Response => {
          this.$modal.msgSuccess("批量操作积分成功");
          this.cancelIntegralDialog(true);
        })
      }
      // 全量操作积分
      if (this.batchOperateValue == 6) {
        allChangIntegral(this.integralForm, this.queryParams).then(Response => {
          this.$modal.msgSuccess("批量操作积分成功");
          this.cancelIntegralDialog(true);
        })
      }

      /* 批量操作：发送话术 */
      if (this.batchOperateValue == 7) {
        this.scriptForm.userIdList = this.ids;
        this.scriptForm.tagIds = this.tagIdArray;
        batchSendScript(this.scriptForm).then(Response => {
          this.$modal.msgSuccess("批量发送话术成功");
          this.cancelscriptDialog(true);
        })
      }
      if (this.batchOperateValue == 8) {
        this.scriptForm.tagIds = this.tagIdArray;
        allSendScript(this.scriptForm, this.queryParams).then(Response => {
          this.$modal.msgSuccess("全量发送话术成功");
          this.cancelscriptDialog(true);
        })
      }

      // 批量操作备注
      if (this.batchOperateValue == 9) {
        console.log("批量备注");
        this.remarkForm.userIdList = this.ids;
        batchAddRemark(this.remarkForm).then(Response => {
          this.$modal.msgSuccess("批量备注成功");
          this.cancelRemarkDialog(true);
        })
      }
      // 全量操作备注
      if (this.batchOperateValue == 10) {
        console.log("全量备注");
        allAddRemark(this.remarkForm.content, this.queryParams).then(Response => {
          this.$modal.msgSuccess("批量备注成功");
          this.cancelRemarkDialog(true);
        })
      }
    },
    // 打开用户备注修改
    ocEditRemarkDialog(row) {
      this.editRemarkVisible = !this.editRemarkVisible;
      if (this.editRemarkVisible) {
        this.editRemarkForm.id = row.id;
        this.editRemarkForm.content = row.content;
      } else {
        this.editRemarkForm.content = null;
        this.editRemarkForm.id = null;
      }
    },
    // 保存用户备注
    submitEditRemark() {
      editRemark(this.editRemarkForm).then(Response => {
        this.$modal.msgSuccess("修改备注成功");
        if (this.form.wxUserRemarkList != null && this.form.wxUserRemarkList.length > 0) {
          let that = this;
          this.form.wxUserRemarkList.forEach(function (item) {
            if (item.id = that.editRemarkForm.id) {
              item.content = that.editRemarkForm.content;
            }
          })
        }
        this.ocEditRemarkDialog();
      })
    },
    // 删除用户备注
    submitDelRemark(row) {
      this.$confirm("<span style='font-size: 18px'><strong>确定将选择的备注删除吗?</strong></span><br/>", '删除备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        delRemark(row.id).then(Response => {
          this.$modal.msgSuccess("删除用户备注成功");
          let list = this.form.wxUserRemarkList;
          for (let i = 0; i < list.length; i++) {
            if (list[i].id == row.id) {
              this.form.wxUserRemarkList.splice(i, 1);
            }
          }
        })
      }).catch(() => {
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除用户编号为"' + ids + '"的数据项？').then(function () {
        return delMember(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/member/export', {
        ...this.queryParams
      }, `member_${new Date().getTime()}.xlsx`)
    }
  }
}
;
</script>
