<template>
  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 15px">
        <div class="label">合同结束日期：</div>
        <div>
          <el-date-picker
            @change="confirmtime"
            v-model="timelist"
            type="daterange"
            style="width: 250px"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div class="label">服务状态：</div>
        <div>
          <el-select
            v-model="serviceStatus"
            clearable
            filterable
            placeholder="请选择"
            class="div-inp"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="div-lab">
          <div class="label" style="line-height: 30px">地区：</div>
          <el-cascader
            :props="props1"
            @change="locationsChange1"
            :options="addressOptions"
            placeholder="省/市"
            size="small"
            separator="/"
            v-model="area"
            filterable
            clearable
          ></el-cascader>
        </div>
      </div>
      <div class="app-titel" style="margin-top: 15px">
        <div class="label">代理商名称：</div>
        <div>
          <el-input
            class="div-inp"
            maxlength="30"
            clearable
            v-model="agentName"
          ></el-input>
        </div>
        <div class="label">运营人员：</div>
        <div>
          <!-- <el-input maxlength="10" class="div-inp" clearable v-model="operationalName"></el-input> -->
          <el-select
            v-model="operationalId"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in operaList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <div class="app-titel" style="margin-top: 15px">
        <div class="label" style="color: #ffffff">筛选相关：</div>
        <div>
          <el-button v-if="cus_ag_add" @click="infoadd()" type="primary"
            >新增</el-button
          >
        </div>
        <div style="margin-left: 20px">
          <el-button @click="Screening()" type="primary">筛选</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button @click="Screeningofempty()">清空筛选条件</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column
          :show-overflow-tooltip="true"
          width="120px"
          prop="agentName"
          label="代理商"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          width="140px"
          prop="provinceName,cityName"
          label="地区"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.provinceName }}{{ scope.row.cityName }}
          </template>
        </el-table-column>
        <el-table-column
          width="140px"
          prop="linkman"
          label="联系人信息"
          align="center"
        >
          <template slot-scope="{ row }">
            {{ row.linkman || "-" }}-{{ row.linkmanPhone || "-" }}
          </template>
        </el-table-column>

        <el-table-column
          :show-overflow-tooltip="true"
          width="140px"
          prop="operationalName"
          label="系统运营"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="managerPhone" label="管理员账号" align="center">
        </el-table-column>
        <el-table-column prop="createTime" label="添加日期" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.createTime.substr(0, 10) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="contractStartDate"
          label="合同开始日期"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contractEndDate"
          label="合同结束日期"
          align="center"
        >
        </el-table-column>
        <!-- <el-table-column
            prop="residueTime"
            label="剩余天数"
             align="center">
          </el-table-column> -->
        <el-table-column label="服务状态" width="150" align="center">
          <template slot-scope="scope">
            <!-- <div v-if="scope.row.residueTime >0&&scope.row.lockFlag==0">在服务期内({{scope.row.residueTime*1>=0?scope.row.residueTime:scope.row.residueTime*-1}})</div>
                   <div v-if="scope.row.residueTime <=0&&scope.row.lockFlag==0">过期({{scope.row.residueTime*1>=0?scope.row.residueTime:scope.row.residueTime*-1}})</div>
                   <div v-if="scope.row.lockFlag==1">禁用</div> -->
            <div v-if="scope.row.residueTime > 0">
              服务中({{
                scope.row.residueTime * 1 >= 0
                  ? scope.row.residueTime
                  : scope.row.residueTime * -1
              }})
            </div>
            <div v-if="scope.row.residueTime <= 0">
              过期({{
                scope.row.residueTime * 1 >= 0
                  ? scope.row.residueTime
                  : scope.row.residueTime * -1
              }})
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="lockFlag" label="状态" align="center">
          <template slot-scope="{ row }">
            {{ row.lockFlag == 1 ? "禁用" : "启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="cus_ag_edit"
              size="small"
              @click="infoeditor(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              v-if="cus_ag_change"
              size="small"
              @click="inforeplace(scope.row)"
              >更换账号</el-button
            >
            <el-button
              type="text"
              v-if="cus_ag_del"
              size="small"
              @click="toinifodelete(scope)"
              >删除</el-button
            >
            <el-button
              type="text"
              v-if="cus_ag_manage"
              size="small"
              @click="editOpera(scope.row)"
              >系统运营</el-button
            >
            <el-button
              type="text"
              v-if="cus_ag_open"
              size="small"
              @click="toDisable(scope.row)"
              >{{ scope.row.lockFlag == 0 ? "禁用" : "启用" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="新增代理" :visible.sync="dialogVisible" @close="reset1">
      <el-form
        :model="addagentobj"
        label-position="labelPosition"
        :rules="rules"
        ref="addagentobj"
        label-width="140px"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="代理商名称：" prop="agentName">
          <el-input
            v-model="addagentobj.agentName"
            maxlength="30"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="合同起止日期：" prop="rulestimelist">
          <el-date-picker
            v-model="addagentobj.rulestimelist"
            @change="confirmtime2()"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            :clearable="false"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系人：" prop="linkman">
          <el-input
            v-model="addagentobj.linkman"
            maxlength="20"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系手机：" prop="linkmanPhone">
          <el-input
            v-model="addagentobj.linkmanPhone"
            type="tel"
            maxlength="11"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          ></el-input>
        </el-form-item>

        <!-- <el-form-item label="省：" prop="provinceId">
            <el-select v-model="addagentobj.provinceId" placeholder="请选择" @change='clickprovinceId()'>
              <el-option
                v-for="item in optionsparentId"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="市：" prop="cityId">
            <el-select v-model="addagentobj.cityId" placeholder="请选择">
              <el-option
                v-for="item in optionscityId"
                :key="item.value"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
          </el-select>
          </el-form-item> -->

        <el-form-item label="地区" prop="provinceId">
          <el-cascader
            :props="props"
            @change="locationsChange"
            :options="addressOptions"
            placeholder="省/市"
            size="small"
            separator="/"
            v-model="addagentobj.area"
            clearable
          ></el-cascader>
        </el-form-item>
        <el-form-item label="详细地址：" prop="address">
          <el-input
            v-model="addagentobj.address"
            type="textarea"
            maxlength="60"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="运营人员：" prop="operationalPeople">
              <el-select v-model="addagentobj.operationalPeople" placeholder="请选择">
                  <el-option
                    v-for="item in optionsoperationalPeople"
                    :key="item.value"
                    :label="item.name"
                    :value="item.accountId"
                  >
                  </el-option>
              </el-select>

          </el-form-item> -->
        <el-form-item label="管理员账号：" prop="managerPhone">
          <el-input
            auto-complete="new-password"
            v-model="addagentobj.managerPhone"
            maxlength="11"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="managerPassword">
          <el-input
            auto-complete="new-password"
            :disabled="passFlag"
            show-password
            v-model="addagentobj.managerPassword"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add()" :loading="loadingFlag"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="dialogVisible2" @close="reset2">
      <el-form
        :model="editoragentobj"
        label-position="labelPosition"
        :rules="editorrules"
        ref="editoragentobj"
        label-width="140px"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="代理商名称：" prop="agentName">
          <el-input
            v-model="editoragentobj.agentName"
            maxlength="30"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="合同起止日期：" prop="rulestimelist">
          <el-date-picker
            v-model="editoragentobj.rulestimelist"
            @change="confirmtime3()"
            type="daterange"
            range-separator="-"
            :default-time="['00:00:00', '23:59:59']"
            :clearable="false"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="联系人：" prop="linkman">
          <el-input
            v-model="editoragentobj.linkman"
            maxlength="20"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="联系手机：" prop="linkmanPhone">
          <el-input
            v-model="editoragentobj.linkmanPhone"
            type="tel"
            maxlength="11"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          ></el-input>
        </el-form-item>

        <el-form-item label="地区" prop="provinceId">
          <el-cascader
            :props="props"
            @change="locationsChange"
            :options="addressOptions"
            placeholder="省/市"
            size="small"
            separator="/"
            v-model="editoragentobj.area"
            clearable
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="省：" prop="provinceId">
            <el-select v-model="editoragentobj.provinceId" placeholder="请选择" @change='clickprovinceId3()'>
              <el-option
                v-for="item in optionsparentId"
                :key="item.value"
                :label="item.name"
                :value="item.id" >
              </el-option>
          </el-select>
          </el-form-item>
          <el-form-item label="市：" prop="cityId">
            <el-select v-model="editoragentobj.cityId" placeholder="请选择">
              <el-option
                v-for="item in optionscityId"
                :key="item.value"
                :label="item.name"
                :value="item.id" >
              </el-option>
          </el-select>
          </el-form-item> -->
        <el-form-item label="详细地址：" prop="address">
          <el-input
            v-model="editoragentobj.address"
            type="textarea"
            maxlength="60"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="运营人员：" prop="operationalPeople">
              <el-select v-model="editoragentobj.operationalPeople" placeholder="请选择">
                  <el-option
                    v-for="item in optionsoperationalPeople"
                    :key="item.value"
                    :label="item.name"
                    :value="item.accountId"
                  >
                  </el-option>
              </el-select>
          </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="editor()" :loading="loadingFlag"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="更换账号"
      :visible.sync="dialogVisible3"
      @close="replaceClose"
    >
      <el-form
        :model="replaceagentobj"
        label-position="labelPosition"
        :rules="ruleser"
        ref="replaceagentobj"
        label-width="140px"
        style="width: 60%; margin: 0 auto"
      >
        <el-form-item label="管理员账号：" prop="managerPhone">
          <el-input
            maxlength="11"
            v-model="replaceagentobj.managerPhone"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="managerPassword">
          <el-input
            show-password
            :disabled="passFlag"
            v-model="replaceagentobj.managerPassword"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible3 = false">取 消</el-button>
        <el-button type="primary" @click="replace()" :loading="loadingFlag"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <el-dialog title="编辑运营人员" :visible.sync="operaVisible">
      <el-form
        :model="operaForm"
        label-position="labelPosition"
        :rules="operaRules"
        ref="operaForm"
        label-width="140px"
      >
        <el-form-item label="运营人员：" prop="operationalPeople">
          <el-select
            v-model="operaForm.operationalPeople"
            style="width: 80%"
            filterable
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsoperationalPeople"
              :key="item.value"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="operaVisible = false">取 消</el-button>
        <el-button type="primary" :loading="loadingFlag" @click="saveOpera()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getAreaList } from "@/api/modules/api";
export default {
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (value === "") {
        // callback(new Error("请输入手机号"));
        callback();
      } else {
        if (value) {
          if (!/^1[3456789]\d{9}$/.test(value)) {
            // alert("手机号码不合法，请重新输入");
            callback(new Error("手机号格式错误，请重新输入"));
          }
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入管理员账号"));
      } else {
        if (value) {
          this.passFlag = false;
          if (!/^1[3456789]\d{9}$/.test(value)) {
            // alert("手机号码不合法，请重新输入");
            callback(new Error("手机号格式错误，请重新输入"));
          } else {
            // 验证电话号码
            this.$api.api.verPhone(value).then((res) => {
              // console.log(res);
              // 判断数据是否已经有了
              if (res.data) {
                // 由用户
                this.$api.api
                  .userVerify({
                    // orgType:localStorage.getItem('orgType'),
                    orgType: 1,
                    accountId: res.data.sysUser.accountId,
                    username: res.data.sysUser.username,
                    agentId: localStorage.getItem("agentId"),
                    orgCode: localStorage.getItem("orgCode"),
                  })
                  .then((res1) => {
                    this.resetFlag = true;
                    this.passFlag = true;
                    if (this.dialogVisible3) {
                      this.replaceagentobj.managerPassword =
                        res.data.sysUser.resultPwd;
                    } else {
                      this.addagentobj.managerPassword =
                        res.data.sysUser.resultPwd;
                    }
                    callback();
                  })
                  .catch((err) => {
                    console.log(err);
                    this.resetFlag = false;
                    callback(new Error(err));
                  });
              } else {
                // 没有用户
                // console.log("没有用户");
                // callback(new Error("没有管理员账号"));
                if (this.dialogVisible3) {
                  this.replaceagentobj.managerPassword = "";
                } else {
                  this.addagentobj.managerPassword = "";
                }
                this.resetFlag = true;
                this.passFlag = false;
                callback();
              }
            });
          }
        }
        callback();
      }
    };
    return {
      props: {
        lazy: true,
        async lazyLoad(node, resolve) {
          console.log(node, 123);
          const { level } = node;
          if (level == 0) {
            console.log(23);
            const { data } = await getAreaList({ parentId: 0 }); //获取省接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: false,
              };
            });
            resolve(nodes);
          } else if (level == 1) {
            const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: true,
              };
            });
            resolve(nodes);
          }
        },
      },
      props1: {
        lazy: true,
        checkStrictly: true,
        expandTrigger: "hover",
        async lazyLoad(node, resolve) {
          // console.log(node, 123);
          const { level } = node;
          if (level == 0) {
            console.log(23);
            const { data } = await getAreaList({ parentId: 0 }); //获取省接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: false,
              };
            });
            resolve(nodes);
          } else if (level == 1) {
            const { data } = await getAreaList({ parentId: node.data.value }); //获取市接口
            var nodes = data.map((item) => {
              return {
                value: item.id,
                label: item.name,
                leaf: true,
              };
            });
            resolve(nodes);
          } else {
            resolve();
          }
        },
      },
      area: [],
      options: [
        {
          value: "0",
          label: "服务中",
        },
        {
          value: "1",
          label: "已过期",
        },
      ],
      passFlag: false,
      dialogVisible: false,
      dialogVisible2: false,
      resetFlag: false,
      dialogVisible3: false,
      operaVisible: false,
      loadingFlag: false,
      provinceId: "",
      cityId: "",
      areaList: [],
      operaList: [],
      operationalId: "",
      timelist: "",
      tableData: [],
      addressOptions: [],
      currentPage4: 1,
      total: 0, //总条数
      pageNum: 1,
      pageSize: 10,
      contractStartDate: "", //开始时间
      contractEndDate: "", //结束时间
      serviceStatus: "", //状态
      agentName: "", //代理商名称
      operationalName: "", //运营人员姓名
      addagentobj: {
        agentName: "", // 代理商名称
        contractStartDate: "", // 合同开始时间
        contractEndDate: "", // 合同结束时间
        linkman: "", // 联系人
        provinceId: "", // 省id
        area: [],
        cityId: "", // 市id
        address: "", // 详细地址
        // operationalPeople:'',// 运营人员id
        managerPhone: "", // 管理员账号
        managerPassword: "", // 管理员账号密码
        linkmanPhone: "", // 联系人手机号
        rulestimelist: [],
      },
      editoragentobj: {
        id: "",
        agentName: "", // 代理商名称
        contractStartDate: "", // 合同开始时间
        contractEndDate: "", // 合同结束时间
        linkman: "", // 联系人
        provinceId: "", // 省id
        cityId: "", // 市id
        address: "", // 详细地址
        // operationalPeople:'',// 运营人员id
        linkmanPhone: "", // 联系人手机号
        rulestimelist: [],
      },
      rules: {
        agentName: [
          { required: true, message: "请输入代理商名称", trigger: "blur" },
        ],
        rulestimelist: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        linkman: [
          // { required: true, message: '请输入联系人名称', trigger: 'blur' },
        ],
        provinceId: [
          { required: false, message: "请输入选择省", trigger: "blur" },
        ],
        cityId: [{ required: false, message: "请输入选择市", trigger: "blur" }],
        address: [
          // { required: true, message: '请输入详细地址', trigger: 'blur' },
        ],
        // operationalPeople: [
        //   { required: true, message: '请选择运营人员', trigger: 'blur' },
        // ],
        managerPhone: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        managerPassword: [
          { required: true, message: "请填写密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "请输入6~18位，数字或字母组合的密码",
            trigger: "blur",
          },
        ],
        linkmanPhone: [
          // { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          // { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
          { validator: validatePass1, trigger: "blur" },
        ],
      },
      editorrules: {
        agentName: [
          { required: true, message: "请输入代理商名称", trigger: "blur" },
        ],
        rulestimelist: [
          { required: true, message: "请选择时间", trigger: "blur" },
        ],
        linkman: [
          // { required: true, message: '请输入联系人名称', trigger: 'blur' },
        ],
        provinceId: [
          { required: false, message: "请输入选择省", trigger: "blur" },
        ],
        cityId: [{ required: false, message: "请输入选择市", trigger: "blur" }],
        address: [
          { required: false, message: "请输入详细地址", trigger: "blur" },
        ],
        // operationalPeople: [
        //   { required: true, message: '请选择运营人员', trigger: 'blur' },
        // ],
        linkmanPhone: [
          // { required: true, message: '请输入联系人手机号', trigger: 'blur' },
          // { min: 11, max: 11, message: '请输入手机号', trigger: 'blur' }
          { validator: validatePass1, trigger: "blur" },
        ],
      },
      operaForm: {
        operationalPeople: "",
      },
      operaRules: {
        operationalPeople: [
          { required: false, message: "请选择运营人员", trigger: "blur" },
        ],
      },
      optionsparentId: [], //省份列表
      optionscityId: [], //市列表
      optionsoperationalPeople: [], //运营人员列表
      replaceagentobj: {
        id: "",
        managerPhone: "",
        managerPassword: "",
      },
      ruleser: {
        managerPhone: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
          { validator: validatePass, trigger: "blur" },
        ],
        managerPassword: [
          { required: true, message: "请填写密码", trigger: "change" },
          {
            min: 6,
            max: 18,
            message: "请输入6~18位，数字或字母组合的密码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.cus_ag_add = this.permissions["cus_ag_add"];
    this.cus_ag_edit = this.permissions["cus_ag_edit"];
    this.cus_ag_change = this.permissions["cus_ag_change"];
    this.cus_ag_del = this.permissions["cus_ag_del"];
    this.cus_ag_manage = this.permissions["cus_ag_manage"];
    this.cus_ag_open = this.permissions["cus_ag_open"];
  },
  mounted() {
    if (this.$route.query.serviceStatus) {
      this.timelist = this.$route.query.residueTime;
      this.contractStartDate = this.timelist[0];
      this.contractEndDate = this.timelist[1];
      this.serviceStatus = this.$route.query.serviceStatus;
    }
    // 获取运营人员
    this.getOperaList();
    // 获取地区列表
    // this.getCityList()
    this.getAgentList();
  },
  methods: {
    getOperaList() {
      if (this.orgType == 1) {
        this.$api.http
          .getAllOperationsStaffByAgent({
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            // console.log(1);
            this.operaList = res.data;
            // this.operaVisible = true;
          });
      } else {
        this.$api.http.getAllOperationsStaff().then((res) => {
          this.operaList = res.data;
          // this.operaVisible = true;
          // console.log(2);
        });
      }
    },
    getCityList() {
      this.$api.api.getAreaList({ parentId: 0 }).then((res) => {
        // console.log(res,'地区列表');
        this.areaList = res.data;
      });
    },
    saveOpera() {
      this.$refs.operaForm.validate((valid) => {
        if (valid) {
          // console.log(valid,this.operaForm);
          this.loadingFlag = true;
          this.$api.api
            .zkoperationrecord({
              orgType: 1,
              accountIds: this.operaForm.operationalPeople.join(","),
              orgId: this.operaForm.orgId,
              operationType: 1,
            })
            .then((res) => {
              console.log(res);
              setTimeout(() => {
                this.loadingFlag = false;
                console.log("防重");
              }, 1);
              this.$message.success("操作成功");
              this.getAgentList();
              this.operaVisible = false;
            })
            .catch((err) => {
              this.loadingFlag = false;
            });
        }
      });
    },
    editOpera(row) {
      console.log(row);
      // 获取运营人员列表
      this.operaForm.orgId = row.id;
      this.getAllOperationsStaff();

      this.zkoperationrecordFindByOrg(row.id);
    },
    zkoperationrecordFindByOrg(orgId) {
      this.$api.api
        .zkoperationrecordFindByOrg({
          orgType: "1",
          orgId,
          operationType: 1,
        })
        .then((res) => {
          // console.log(res);
          if (res.data.length == 0) {
            // 没有运营人员
            this.operaForm.operationalPeople = [];
          } else {
            let arr = [];
            // 有运营
            res.data.map((item) => {
              arr.push(item.accountId);
            });
            this.operaForm.operationalPeople = arr;
          }
          this.operaVisible = true;
        });
    },
    confirmtime3() {
      this.editoragentobj.contractStartDate =
        this.editoragentobj.rulestimelist[0];
      this.editoragentobj.contractEndDate =
        this.editoragentobj.rulestimelist[1];
    },
    //编辑
    infoeditor(row) {
      this.resetFlag = true;
      this.getparentIdList();
      this.clickprovinceId2(row.provinceId);
      this.getAllOperationsStaff();

      this.editoragentobj.agentName = row.agentName; // 代理商名称
      this.editoragentobj.contractStartDate = row.contractStartDate; // 合同开始时间
      this.editoragentobj.contractEndDate = row.contractEndDate; // 合同结束时间
      this.editoragentobj.linkman = row.linkman; // 联系人
      this.editoragentobj.provinceId = row.provinceId; // 省id
      this.editoragentobj.cityId = row.cityId; // 市id
      this.editoragentobj.address = row.address; // 详细地址
      // this.editoragentobj. operationalPeople=row.operationalPeople;// 运营人员id
      this.editoragentobj.linkmanPhone = row.linkmanPhone; // 联系人手机号
      this.editoragentobj.rulestimelist = [
        row.contractStartDate,
        row.contractEndDate,
      ];
      this.editoragentobj.id = row.id;
      this.editoragentobj.area = [
        this.editoragentobj.provinceId,
        this.editoragentobj.cityId,
      ];
      this.dialogVisible2 = true;
    },
    //获取市
    clickprovinceId2(item) {
      this.$api.http
        .getparentIdList({
          parentId: item,
        })
        .then((res) => {
          this.optionscityId = res.data;
        });
    },
    //选择省的时候请求市并清空市
    clickprovinceId3() {
      this.optionscityId = [];
      this.editoragentobj.cityId = "";
      this.$api.http
        .getparentIdList({
          parentId: this.editoragentobj.provinceId,
        })
        .then((res) => {
          this.optionscityId = res.data;
        });
    },
    reset1() {
      this.$refs.addagentobj.resetFields();
      this.editoragentobj.area = [];
    },
    reset2() {
      this.$refs.editoragentobj.resetFields();
      this.editoragentobj.area = [];
    },
    //确认编辑
    editor() {
      //   if(!this.resetFlag){
      //     this.$message.error('平台用户与项目用户不能重复添加！')
      //     return
      // }
      this.$refs.editoragentobj.validate((valid) => {
        if (valid) {
          if (!this.resetFlag) {
            return;
          }
          this.loadingFlag = true;
          this.$api.http
            .editorAgent(this.editoragentobj)
            .then((res) => {
              if (res.code == 0) {
                this.dialogVisible2 = false;
                setTimeout(() => {
                  this.loadingFlag = false;
                  console.log("防重");
                }, 1);
                this.editoragentobj.contractStartDate = "";
                this.editoragentobj.contractEndDate = "";
                this.editoragentobj.id = "";
                this.$refs.editoragentobj.resetFields();
                this.Screeningofempty();
                this.getAgentList();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.loadingFlag = false;
            });
        } else {
          return false;
        }
      });
    },

    //获取系统运营人员
    getAllOperationsStaff() {
      this.optionsoperationalPeople = [];
      this.$api.http.getAllOperationsStaff().then((res) => {
        this.optionsoperationalPeople = res.data;
      });
    },
    //选择省的时候请求市并清空市
    clickprovinceId() {
      this.optionscityId = [];
      this.addagentobj.cityId = "";
      this.$api.http
        .getparentIdList({
          parentId: this.addagentobj.provinceId,
        })
        .then((res) => {
          this.optionscityId = res.data;
        });
    },
    //获取省
    getparentIdList() {
      this.optionsparentId = [];
      this.$api.http
        .getparentIdList({
          parentId: 0,
        })
        .then((res) => {
          this.optionsparentId = res.data;
        });
    },

    //更换
    inforeplace(row) {
      this.replaceagentobj.id = row.id;
      this.dialogVisible3 = true;
      this.passFlag = false;
    },
    replaceClose() {
      this.replaceagentobj.managerPhone = "";
      this.replaceagentobj.managerPassword = "";
      this.$refs.replaceagentobj.resetFields();
    },
    //确认更换
    replace() {
      if (!this.resetFlag) {
        this.$message.error("平台用户与项目用户不能重复添加！");
        return;
      }
      this.$refs.replaceagentobj.validate((valid) => {
        if (valid) {
          this.loadingFlag = true;
          this.$api.http
            .updateManagerPhone(this.replaceagentobj)
            .then((res) => {
              if (res.code == 0) {
                this.dialogVisible3 = false;
                setTimeout(() => {
                  this.loadingFlag = false;
                  console.log("防重");
                }, 1);
                this.$refs.replaceagentobj.resetFields();
                this.Screeningofempty();
                this.getAgentList();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.loadingFlag = false;
            });
        } else {
          return false;
        }
      });
    },
    //新增
    infoadd() {
      this.dialogVisible = true;
      this.passFlag = false;
      this.getparentIdList();
      this.getAllOperationsStaff();
    },
    //新增时间选择
    confirmtime2() {
      this.addagentobj.contractStartDate = this.addagentobj.rulestimelist[0];
      this.addagentobj.contractEndDate = this.addagentobj.rulestimelist[1];
    },
    //确认新增
    add() {
      // if(!this.resetFlag){
      //     this.$message.error('平台用户与项目用户不能重复添加！')
      //     return
      // }
      this.$refs.addagentobj.validate((valid) => {
        if (valid) {
          if (!this.resetFlag) {
            return;
          }
          this.loadingFlag = true;
          this.$api.http
            .AddAgent(this.addagentobj)
            .then((res) => {
              if (res.code == 0) {
                this.dialogVisible = false;
                setTimeout(() => {
                  this.loadingFlag = false;
                  console.log("防重");
                }, 1);
                this.addagentobj.contractStartDate = "";
                this.addagentobj.contractEndDate = "";
                this.$refs.addagentobj.resetFields();
                this.Screeningofempty();
                this.getAgentList();
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.loadingFlag = false;
            });
        } else {
          return false;
        }
      });
    },
    //删除
    toinifodelete(item) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.http.delAgent({ id: item.row.id }).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.Screeningofempty();
              this.getAgentList();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch((err) => {
          console.log("关闭");
        });
    },
    toDisable(row) {
      this.$confirm(
        `确定${row.lockFlag == 0 ? "禁用" : "启用"}此代理商么？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          // return
          // console.log(123);
          this.$api.http
            .editorAgent({
              id: row.id,
              lockFlag: row.lockFlag == 0 ? "1" : "0",
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.Screeningofempty();
                this.getAgentList();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch((err) => {
          // console.log('关闭');
          // console.log(err);
        });
    },
    //时间选择
    confirmtime(e) {
      // console.log(this.timelist)
      console.log(e);
      if (e) {
        this.contractStartDate = e[0];
        this.contractEndDate = e[1];
      } else {
        this.contractStartDate = "";
        this.contractEndDate = "";
      }
    },
    //清空筛选
    Screeningofempty() {
      this.timelist = [];
      this.contractStartDate = "";
      this.contractEndDate = "";
      this.serviceStatus = "";
      this.agentName = "";
      this.operationalName = "";
      this.provinceId = "";
      this.cityId = "";
      this.operationalId = "";
      this.pageNum = 1;
      this.area = [];
      this.getAgentList();
    },
    //筛选
    Screening() {
      this.getAgentList();
    },
    // 获取代理商
    getAgentList() {
      this.tableData = [];
      this.$api.http
        .getAgentList({
          current: this.pageNum,
          size: this.pageSize,
          contractStartDate: this.contractStartDate,
          contractEndDate: this.contractEndDate,
          serviceStatus: this.serviceStatus,
          agentName: this.agentName,
          operationStaffId: this.operationalId,
          provinceId: this.provinceId,
          cityId: this.cityId,
          operationalName: this.operationalName,
        })
        .then((res) => {
          this.tableData = res.data.records;
          this.total = res.data.total;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAgentList();
    },
    locationsChange(e) {
      console.log(e);
      if (!e) return;
      if (this.dialogVisible) {
        this.addagentobj.provinceId = e[0];
        this.addagentobj.cityId = e[1];
      } else {
        this.editoragentobj.provinceId = e[0];
        this.editoragentobj.cityId = e[1];
      }
    },
    locationsChange1(e) {
      console.log(e);
      if (!e) return;
      this.provinceId = e[0];
      this.cityId = e[1];
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAgentList();
    },
  },
};
</script>

<style scoped="scoped" lang="scss" >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 14px;
      margin-left: 15px;
      min-width: 100px;
      text-align: right;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 250px;
}
</style>
