<template>
  <div class="search-the-owner">

    <div class="title_wrap">
      <div class="enterprise_title">
        查业主
      </div>
    </div>

    <div class="content-outer-container">
      <div class="content">
        <div class="content_item">
          <div class="content_right item_ckquery_list">
            <el-input class="ename_input" placeholder="请输入关键字查询" clearable v-model="keys" @clear="keysClear">
              <div slot="append" class="btn-search" @click="search()">搜索</div>
            </el-input>

          </div>
        </div>

        <div class="content_item">
          <div class="label">企业地区</div>
          <div class="content_right item_ckquery_list">
            <div class="select-popper">
              <span :class="{color_text:jskBidQueryDto.provinceIds.length ||jskBidQueryDto.cityIds.length ||jskBidQueryDto.areaIds.length,}">
                注册地区{{jskBidQueryDto.provinceIds.length ||jskBidQueryDto.cityIds.length ||jskBidQueryDto.areaIds.length? jskBidQueryDto.provinceIds.length + jskBidQueryDto.cityIds.length +jskBidQueryDto.areaIds.length +"项": ""}}
                <i class="el-icon-caret-bottom"></i>
              </span>
              <el-cascader ref="address" class="cascader-region" v-model="addressType" :options="addressList" :props="props" @change="domicileChange"
                collapse-tags clearable></el-cascader>
            </div>
          </div>
        </div>

        <div class="content_item">
          <div class="label">业主标签</div>
          <div class="content_right">
            <div class="checkbox">
              <div class="checkbox-content">
                <div class="checkbox-content-qx">
                  <el-checkbox v-model="checkOwnerLabel" @change="allOwnerLabelBtn">不限</el-checkbox>
                </div>
                <el-checkbox-group v-model="currentOwnerLabels" @change="OwnerLabelChange">
                  <el-checkbox v-for="item of ownerLabels" :label="item.dictValue" :key="item.dictCode">{{item.dictLabel}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <!-- 两个或两个以上业主标签关系 -->
            <div class="multiple-owner-label" v-if="currentOwnerLabels.length >= 2">
              <div class="multiple-tip-box">
                <span>多个标签关系</span>

                <el-tooltip class="item" effect="dark" placement="top" popper-class="multiple-tip-el-tooltip">
                  <template slot="content">
                    <div class="multiple-tip-content">
                      <span>同时具备：筛选结果必须满足多个标签。</span>
                      <span>任意均可：筛选结果满足任意一个标签。</span>
                    </div>
                  </template>
                  <div class="multiple-tip-icon">
                    <i class="el-icon-warning-outline"></i>
                  </div>
                </el-tooltip>
              </div>
              <!-- 关系单选 -->
              <el-radio-group v-model="tagCodeQueryType" @change="tagRadioChange">
                <el-radio :label="'or'">任意均可</el-radio>
                <el-radio :label="'and'">同时具备</el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="bottomlist">
      <div class="bottomlist-title">
        <div class="bottomlist-title-left">
          <p class="title-left">
            <span style="margin-right:4;color:rgba(35, 35, 35, 0.40);font-size: 18px;position: relative;top:2px;">·</span>共{{total}}条
          </p>
          <el-popover v-model="fieldshow" placement="bottom-start" trigger="click" popper-class="viewlist-el-popover">
            <ul class="pup_list">
              <li v-for="(itme,i) in fieldOptions" :class="itme.status?'active':''" @click="handsequencingList(i)" :key="i">
                {{itme.value}}
              </li>
            </ul>
            <span slot="reference" class="toolbar-right-download sort-mode">
              {{fieldText}}<i class="el-icon-arrow-down" :style="{transform:fieldshow?'rotate(180deg)':''}"></i>
            </span>
          </el-popover>
        </div>

        <div class="title-right">
          <p>
            <img src="@/assets/images/EXCEL.png" alt="">
            <span class="excel" @click="$message({message: '功能正在开发中',type: 'warning'})">导出EXCEL</span>
          </p>
        </div>

      </div>
      <div class="table-item-jf table-item-jf1 empty-table" v-if="!tableData.length&& !isSkeleton">
        <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
        <div class="item-jf-titel">暂无相关数据</div>
        <div class="item-jf-text">抱歉，暂无数据，试试更换搜索条件吧</div>
        <div class="depth-search-box" v-if="onlySearchEname">
          <div class="depth-search" @click="$router.push({path : `/enterpriseData/SearchEnterprise?keyword=${keys}`})">深度搜索企业</div>
        </div>
      </div>

      <skeleton style="margin-left:16px;" v-if="isSkeleton"></skeleton>

      <div class="table-item-jf table-item" v-if="!isSkeleton&&tableData.length>0">
        <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
          v-sticky-header.always="{offsetTop : '56px',offsetBottom : '10px'}" class="table-item1 fixed-table" border highlight-current-row
          :header-row-class-name="setHeaderRow" :cell-class-name="setCellClass" :row-class-name="setRowClass" :header-cell-class-name="setCellClass"
          @sort-change="sortChange" ref="theOwnerListTable">

          <el-table-column type="index" label="序号" :fixed="tableColumnFixed" width="60" :resizable="false">
            <template slot-scope="scope">
              <span>{{(pageNum - 1) *pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>

          <el-table-column label="公司名称" :fixed="tableColumnFixed" width="380" :resizable="false">
            <template slot-scope="scope">
              <div class="renling">
                <div style="display:flex;align-items:center">
                  <router-link :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}` : `/enterprise/${encodeStr(scope.row.id)}`" tag="a"
                    class="list-titel-a" v-html="scope.row.name"></router-link>
                  <!-- 优质甲方tag标签 -->
                  <div class="high-quality-enterprise" v-if="scope.row.other">{{scope.row.other}}</div>
                </div>
                <div class="renling-btn" @click="claimbtn(scope.row)">
                  <p v-if="scope.row.claimStatus==0" class="renling-img-true"></p>
                  <p v-else class="renling-img-false"></p>
                  <span v-if="scope.row.claimStatus==0" @click.stop="cancelClaim(scope.row.name,scope.$index)" class="renling-hui">
                    已认领
                  </span>
                  <span v-else class="renling-hei">
                    认领
                  </span>
                </div>
              </div>

            </template>

          </el-table-column>

          <el-table-column label="法定代表人" min-width="85" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.legalPerson||"--"}}
            </template>

          </el-table-column>

          <el-table-column label="注册资本" min-width="118" :resizable="false" :sortable="'custom'" prop="registeredCapitalStr">
            <template slot-scope="scope">
              <div style="text-align:right;white-space: nowrap;">
                {{parseFloat(scope.row.registeredCapitalStr) ? `${scope.row.registeredCapitalStr}万元`:"--"}}
              </div>
            </template>

          </el-table-column>

          <el-table-column label="企业注册地区" min-width="215" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.domicile||"--"}}
            </template>
          </el-table-column>

          <el-table-column label="历史发包数量" min-width="120" :resizable="false" :sortable="'custom'" prop="inviteTenderCount">
            <template slot-scope="scope">
              <router-link v-if="scope.row.inviteTenderCount"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=hiscontract` : `/enterprise/${encodeStr(scope.row.id)}?path=hiscontract`"
                tag="a" class="list-titel-a">{{scope.row.inviteTenderCount ? `${scope.row.inviteTenderCount}个`:"--"}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="历史发包总金额" min-width="130" :resizable="false" :sortable="'custom'" prop="inviteTenderSumAmount">
            <template slot-scope="scope">
              <div style="text-align:right;white-space: nowrap;">
                {{parseFloat(scope.row.inviteTenderSumAmount) ? `${scope.row.inviteTenderSumAmount}万元`:"--"}}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="最近一次招标" min-width="120" :resizable="false" :sortable="'custom'" prop="inviteTenderLastTime">
            <template slot-scope="scope">
              <router-link v-if="scope.row.inviteTenderLastTime"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=announcement` : `/enterprise/${encodeStr(scope.row.id)}?path=announcement`"
                tag="a" class="list-titel-a">{{scope.row.inviteTenderLastTime||"--"}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="重点项目" min-width="120" :resizable="false" :sortable="'custom'" prop="importantProjectCount">
            <template slot-scope="scope">
              <router-link v-if="scope.row.importantProjectCount"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=majorProject` : `/enterprise/${encodeStr(scope.row.id)}?path=majorProject`"
                tag="a" class="list-titel-a">{{`${scope.row.importantProjectCount}个`}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <!-- <el-table-column label="土地交易" width="107" :resizable="false" :sortable="'custom'" prop="landMarketCount">
            <template slot-scope="scope">
              <router-link v-if="scope.row.landMarketCount"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=landtransaction` : `/enterprise/${encodeStr(scope.row.id)}?path=landtransaction`"
                tag="a" class="list-titel-a">{{`${scope.row.landMarketCount}个`}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column> -->

          <el-table-column label="拟建项目" min-width="120" :resizable="false" :sortable="'custom'" prop="approvalProjectCount">
            <template slot-scope="scope">
              <router-link v-if="scope.row.approvalProjectCount"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=proposed` : `/enterprise/${encodeStr(scope.row.id)}?path=proposed`"
                tag="a" class="list-titel-a">{{`${scope.row.approvalProjectCount}个`}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="招标计划" min-width="120" :resizable="false" :sortable="'custom'" prop="bidPlanCount">
            <template slot-scope="scope">
              <router-link v-if="scope.row.bidPlanCount"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=biddingplan` : `/enterprise/${encodeStr(scope.row.id)}?path=biddingplan`"
                tag="a" class="list-titel-a">{{`${scope.row.bidPlanCount}个`}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column label="招标公告" min-width="120" :resizable="false" :sortable="'custom'" prop="jskBidCount">
            <template slot-scope="scope">
              <router-link v-if="scope.row.jskBidCount"
                :to="scope.row.other ? `/enterprise/${encodeStr(scope.row.id)}?path=announcement` : `/enterprise/${encodeStr(scope.row.id)}?path=announcement`"
                tag="a" class="list-titel-a">{{`${scope.row.jskBidCount}个`}}</router-link>
              <span v-else>--</span>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination clearfix" v-show="total>0">
        <el-pagination background :page-size="pageSize" :current-page.sync="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
          :total="total">
        </el-pagination>
      </div>

    </div>
    <el-dialog title="" :visible.sync="dialogVisible" :modal="false" custom-class='dialog-renlin' :show-close="false" width="244px">
      <span>认领成功，是否完善客户信息？</span>
      <div slot="footer" class="dialog-footer">
        <span class="dialog-footer-btn1" type="primary" @click="claimopen(companyId,customerId)">
          立即完善
        </span>
        <span class="dialog-footer-btn2" @click="search(pageNum, pageSize)">稍后</span>
      </div>
    </el-dialog>
    <el-dialog title="取消认领" :visible.sync="dialogVisible1" :modal="false" custom-class='dialog-renlin' :show-close="false" width="344px">
      <span>是否取消认领客户？客户信息将放入“历史客户”。</span>
      <div slot="footer" class="dialog-footer">
        <span class="dialog-footer-btn1" type="primary" @click="confirm()">
          确认
        </span>
        <span class="dialog-footer-btn2" @click="dialogVisible1 = false">关闭</span>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2" custom-class='dialog-renlin' title="重新认领" width="260px" :show-close="false">
      <div>再次认领将会恢复客户数据</div>
      <div slot="footer" class="dialog-footer">
        <span class="dialog-footer-btn1" type="primary" @click="handleHistoryClaim()">确认</span>
        <span class="dialog-footer-btn2" @click="dialogVisible2 = false">关闭</span>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import { encodeStr } from "@/assets/js/common.js";
import jsk_data from '../../../../../public/jsk.json';
import skeleton from '@/views/project/projectList/component/skeleton';
import api from '@/api/enterpriseData/enterpriseData.js';
import "@/assets/styles/public.scss";
import { toLine } from "@/utils/";
export default {
  name: 'searchTheOwner',
  components: { skeleton },
  data() {
    return {
      encodeStr,
      isSkeleton: true,
      keys: '',
      addressList: [],
      addressType: [],
      props: {
        multiple: true,
        expandTrigger: "hover",
        value: "id",
      },
      dialogVisible2: false,
      jskBidQueryDto: {
        provinceIds: [],
        cityIds: [],
        areaIds: []
      },
      domicile: [],
      // 业主标签
      ownerLabels: [],
      // 当前选中的业主标签
      currentOwnerLabels: [],
      // 业主全选状态
      checkOwnerLabel: true,
      // 选中两个及两个以上业主标签 添加选中条件 or任意均可 and同时具备
      tagCodeQueryType: "or",
      pageFlag: true,
      conditionsArr: [],
      fieldshow: false,
      fieldText: '默认排序',
      sort: '', //查询结果排序方式
      // 展示认领状态
      showClaim: false,
      // table列是否悬浮
      tableColumnFixed: false,
      // 默认排序方式
      order: "desc",
      fieldOptions: [{
        key: "",
        value: "默认排序",
        status: true,
      },
      // {
      //   key: "land_market_count",
      //   value: "按土地交易签订日期从近到远",
      //   status: false,
      // },
      // {
      //   key: "approval_project_count",
      //   value: "按拟建项目审批时间从近到远",
      //   status: false,
      // },
      {
        key: "important_project_count",
        value: "按重点项目清单从多到少",
        status: false,
      },
      {
        key: "invite_tender_last_time",
        value: "按招标时间从近到远",
        status: false,
      }
      ],
      companyId: '',
      companyName: '',
      cancelIndex: '',
      customerId: '',
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      total: 0,
      oldPageNum: 1,
      pageNum: 1,
      pageSize: 20,
      tableScrollLeftMemory: 0,
    };
  },
  watch: {
    "pageNum": {
      handler(newValue, oldValue) {
        this.oldPageNum = oldValue;
      }
    }
  },
  computed: {
    // 仅搜索企业名
    onlySearchEname() {
      let that = this;
      const keys = {
        ename: that.keys,
        tagCode: that.currentOwnerLabels,
        ...that.jskBidQueryDto
      };
      const temp = [];
      for (const key in keys) {
        const type = Object.prototype.toString.call(keys[key]);
        if (keys[key]) {
          switch (type) {
            case "[object String]":
              temp.push(key);
              break;
            case "[object Array]":
              keys[key].length > 0 ? temp.push(key) : null;
              break;
            default:
              break;
          }
        }
      }
      return temp.length == 1 && temp.includes("ename") ? true : false;
    }
  },
  created() {
    this.init();
  },
  beforeDestroy() {
    const table = this.$refs["theOwnerListTable"]?.bodyWrapper;
    if (table) {
      table.removeEventListener("scroll", this.tableScroll, { capture: false, passive: true });
    }
  },
  methods: {
    // 生成查询条件
    createSearchConditions() {
      // 默认传递参数
      let params = {
        aptitudeQueryDto: {},
        page: {
          page: this.pageNum,
          limit: this.pageSize,
          order: this.order,
          field: this.sort
        }
      };

      let data = JSON.parse(JSON.stringify(this.jskBidQueryDto));

      // 搜索关键词处理
      if (this.keys) {
        params.aptitudeQueryDto['ename'] = this.keys;
      }

      // 处理地区选择
      if (data.provinceIds.length > 0) {
        params.aptitudeQueryDto['province'] = data.provinceIds.join(",");
      }
      if (data.cityIds.length > 0) {
        params.aptitudeQueryDto['city'] = data.cityIds.join(",");
      }
      if (data.areaIds.length > 0) {
        params.aptitudeQueryDto['county'] = data.areaIds.join(",");
      }

      // 业主标签选中处理
      if (this.currentOwnerLabels.length > 0) {
        params.aptitudeQueryDto["tagCode"] = this.currentOwnerLabels.join(",");
      }

      // 选中大于等于两个业主标签 添加 任意均可 或 同时具备条件
      if (this.currentOwnerLabels.length >= 2) {
        params.aptitudeQueryDto["tagCodeQueryType"] = this.tagCodeQueryType;
      }

      return params;
    },
    // 排序
    sortChange({ column, prop, order }) {
      // 有order排序 无order默认排序
      this.sort = order ? toLine(prop) : "";
      // 升序
      if (order == "ascending") {
        this.order = "asc";
      }
      // 降序
      if (order == "descending" || !order) {
        this.order = "desc";
      }
      this.sortSearch(this.pageNum);
    },
    // 排序搜索
    async sortSearch(num, size) {
      this.dialogVisible = false;
      if (!num) {
        this.pageNum = 1;
      }
      if (!size) {
        this.pageSize = 20;
      }
      if (!num && !size) {
        this.reloadPage();
      }

      const params = this.createSearchConditions();

      try {
        const result = await api.searchOwnerUnitListApi(params);
        if (result.code == 200) {
          this.tableData = result.data?.list ? result.data.list : [];
          this.total = result.data?.total ? result.data?.total : 0;
          this.addScrollXListener();
        }
      } catch (error) {
        console.log(error);
      }
    },
    async addHeaderListener() {
      try {
        await this.$nextTick();
        // 监听table头部鼠标hover
        const dom = document.querySelector(".owner-table-list-header");
        if (dom) {
          dom.removeEventListener("mouseover", this.headerMouseover, false);
          dom.addEventListener("mouseover", this.headerMouseover, false);
        }
      } catch (error) {

      }
    },
    async addScrollXListener() {
      try {
        await this.$nextTick();
        const table = this.$refs["theOwnerListTable"]?.bodyWrapper;
        if (table) {
          table.removeEventListener("scroll", this.tableScroll, { capture: false, passive: true });
          table.addEventListener("scroll", this.tableScroll, { capture: false, passive: true });
        }
      } catch (error) {
        console.log(error);
      }
    },
    tableScroll(event) {
      const { target } = event;
      if (target) {
        // 滚动条记忆功能
        this.tableScrollLeftMemory = target.scrollLeft;
        target.scrollLeft > 0 ? this.tableColumnFixed = true : this.tableColumnFixed = false;
      }
    },
    async setScrollX() {
      try {
        await this.$nextTick();
        const table = this.$refs["theOwnerListTable"]?.bodyWrapper;
        const left = this.tableScrollLeftMemory;
        if (table) {
          table.scrollTo({
            left,
            behavior: "smooth"
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    headerMouseover(e) {
      const { target } = e;
      if (target.classList.contains("enterprise-name-column")) return this.showClaim = true;
      this.showClaim = false;
    },
    setHeaderRow() {
      return "owner-table-list-header";
    },
    setCellClass({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 1) {
        return "enterprise-name-column";
      }
    },
    setRowClass({ row, rowIndex }) {
      return "enterprise-name-row";
    },
    addColumnClass(row, column, cell, event) {
      const { target } = event;
      if (column.label == "公司名称") return this.showClaim = true;
      this.showClaim = false;
    },
    // 清空输入框输入
    keysClear() {
      this.search();
    },
    // 地区选择改变
    domicileChange() {
      let arr = this.$refs.address.getCheckedNodes();
      let provinceIds = [],
        cityIds = [],
        areaIds = [];
      this.domicile = [];
      for (var i in arr) {
        if (arr[i].parent) {
          if (!arr[i].parent.checked) {
            arr[i].hasChildren && cityIds.push(arr[i].value);
            arr[i].hasChildren && this.domicile.push(arr[i].label);
            !arr[i].hasChildren && areaIds.push(arr[i].value);
            !arr[i].hasChildren && this.domicile.push(arr[i].label);
          }
        } else {
          provinceIds.push(arr[i].value);
          this.domicile.push(arr[i].label);
        }
      }
      var obj = JSON.parse(JSON.stringify(this.jskBidQueryDto));
      obj.provinceIds = provinceIds;
      obj.cityIds = cityIds;
      obj.areaIds = areaIds;
      this.jskBidQueryDto = obj;
      this.search();
    },
    addressListfn() {
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < jsk_data.length; i++) {
          if (jsk_data[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              id: jsk_data[i].id,
              label: jsk_data[i].regionName,
              short: jsk_data[i].short,
              value: jsk_data[i].parentId,
              children: jsk_data[i].id == 900000 ? undefined : [],
            });
          } else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 2 && str) {
            for (let j = 0; j < str.length; j++) {
              if (str[j].id == jsk_data[i].parentId) {
                str[j].children.push({
                  id: jsk_data[i].id,
                  label: jsk_data[i].regionName,
                  short: jsk_data[i].short,
                  value: jsk_data[i].parentId,
                  children: [],
                });
              }
            }
          } else if (jsk_data[i].regionLevel == x + 1 && x + 1 == 3) {
            for (let j = 0; j < str.length; j++) {
              if (str[j].children) {
                for (let k = 0; k < str[j].children.length; k++) {
                  if (str[j].children[k].id == jsk_data[i].parentId) {
                    str[j].children[k].children.push({
                      id: jsk_data[i].id,
                      label: jsk_data[i].regionName,
                      short: jsk_data[i].short,
                      value: jsk_data[i].parentId,
                    });
                  }
                }
              }
            }
          }
        }
      }
      this.addressList = str;
    },
    reset() {
      Object.assign(this.$data, this.$options.data.call(this)); //重置data
      this.init();
    },
    init() {
      this.getDicts("owner_labels").then(res => {
        if (res.code == 200) {
          const result = res.data;
          this.ownerLabels = result;
        }
      }).finally(() => {
        this.search();
        this.addressListfn();
      });
    },
    // 业主标签全选中
    allOwnerLabelBtn(val) {
      this.currentOwnerLabels = [];
      this.checkOwnerLabel = true;
      this.search();
    },
    // 业主标签选中变化
    OwnerLabelChange(val) {
      if (val.length > 0) {
        this.checkOwnerLabel = false;
      } else if (val.length == 0) {
        this.checkOwnerLabel = true;
        this.currentOwnerLabels = [];
      }
      if (val.length < 2) {
        this.tagCodeQueryType = "or";
      }
      this.search();
    },
    // 关系单选变化
    tagRadioChange(value) {
      this.search();
    },
    handsequencingList(index) {
      this.fieldshow = false;
      this.sort = this.fieldOptions[index].key;
      for (let i = 0; i < this.fieldOptions.length; i++) {
        this.fieldOptions[i].status = false;
      }
      this.fieldText = this.fieldOptions[index].value;
      this.fieldOptions[index].status = true;
      this.search();
    },
    handleCurrentChange(pageNum) {
      if (pageNum > 500) {
        this.pageNum = this.oldPageNum;
        this.$message.warning("对不起最多只能访问500页");
        return;
      }
      this.pageNum = pageNum;
      this.search(this.pageNum, this.pageSize);
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.search(this.pageNum, pageSize);
    },
    reloadPage() {
      this.pageFlag = false;
      this.$nextTick(() => {
        this.pageFlag = true;
      });
    },
    async handleHistoryClaim() {
      let res = await api.historyClaim(this.companyName);
      if (res.code == 200) {
        this.dialogVisible2 = false;
        this.search();
      } else {
        this.$message.error(res.msg);
      }
    },
    claimbtn(item) {
      if (item.claimStatus == 1) {
        return this.dialogVisible2 = true;
      }
      this.companyId = item.id;
      let info = {};
      api.infoHeader({ companyId: this.companyId }).then(res => {
        info = res.data;
        let params = {
          companyId: item.id,
          companyName: item.name.replace(/<font color='red'>/gim, '').replace(/<font color='#FF204E'>/gim, '').replace(/<\/font>/gim, ''),
          creditLevel: info.bratingSubjectLevel,
          legalPerson: info.corporatePerson,
          registerCapital: info.registeredCapital,
          provinceId: info.provinceId,
          cityId: info.cityId,
          districtId: info.districtCode,
          registerAddress: info.provinceName + '-' + info.cityName + '-' + info.districtName,
          creditCode: info.creditCode,
        };
        info.uipId ? params["uipId"] = info.uipId : null;
        api.claim(params).then(res1 => {
          if (res1.code == 200) {
            this.dialogVisible = true;
            this.customerId = res1.data.customerId;
          }
        }).catch(error => {

        });
      }).catch(error => {

      });

    },
    cancelClaim(companyName, index) {
      this.dialogVisible1 = true;
      this.companyName = companyName.replace(/<font color='red'>/gim, '').replace(/<font color='#FF204E'>/gim, '').replace(/<\/font>/gim, '');
      this.cancelIndex = index;
    },
    confirm() {
      api.cancelClaim(this.companyName).then(res => {
        if (res.code == 200) {
          this.dialogVisible1 = false;
          this.tableData[this.cancelIndex].claimStatus = 1;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    claimopen(companyId, customerId) {
      this.$router.push({
        path: '/enterprise/' + encodeStr(companyId),
        query: {
          'customerId': customerId,
          'path': 'business'
        },
      });
      this.dialogVisible = false;
      this.search();

    },
    search(pageNum, pageSize, exportFlag) {
      this.dialogVisible = false;
      if (!pageNum) {
        this.pageNum = 1;
      }
      if (!pageSize) {
        this.pageSize = 20;
      }
      if (!pageNum && !pageSize) {
        this.reloadPage();
      }

      const params = this.createSearchConditions();

      this.isSkeleton = true;
      api.searchOwnerUnitListApi(params).then(async res => {
        if (res.code == 200) {
          this.isSkeleton = false;
          this.tableData = res.data?.list ? res.data.list : [];
          this.total = res.data?.total ? res.data?.total : 0;
          this.addScrollXListener();
          // 滚动条记忆
          this.setScrollX();
        }
      }).catch(error => {
      });

    },
    renlin() {
      this.dialogVisible = false;
      // this.$router.push({path:'/home',query: {id:'1'}})
      // 跳转地址
    },


  },
};
</script>
<style lang="scss" scoped>
.search-the-owner {
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  box-sizing: border-box;

  .content-outer-container {
    overflow: hidden;
    background: #ffffff;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    .content {
      background: unset;
      margin-bottom: 26px;
      .content_item {
        margin-top: 16px;
        padding: 0px;

        .label {
          width: auto;
          min-width: 56px;
          margin-right: 32px;
        }
        ::v-deep .content_right {
          width: calc(100% - 148px);
          .el-checkbox-group {
            .el-checkbox {
              .el-checkbox__label {
                color: #606266;
              }
              &.is-checked {
                .el-checkbox__label {
                  color: #0081ff;
                }
              }
            }
          }
        }

        ::v-deep .multiple-owner-label {
          line-height: 22px;
          margin-top: 16px;
          display: flex;
          align-items: center;

          .multiple-tip-box {
            display: flex;
            align-items: center;
            & > span {
              color: rgba(35, 35, 35, 0.8);
              font-size: 14px;
              margin-right: 9px;
            }

            .multiple-tip-icon {
              display: flex;
              align-items: center;
              & > i {
                color: #a7a7a7;
                font-size: 14px;
                cursor: pointer;
              }
            }
          }

          .el-radio-group {
            display: flex;
            align-items: center;
            margin-left: 17px;

            .el-radio {
              margin-right: 24px;
              line-height: 22px;
              .el-radio__input {
                .el-radio__inner::after {
                  width: 6px;
                  height: 6px;
                }
              }
              .el-radio__label {
                font-size: 14px;
                color: #333333;
              }

              &.is-checked {
                .el-radio__label {
                  color: #0081ff;
                }
              }
            }
          }
        }
      }
    }
  }

  ::v-deep .ename_input {
    .el-input-group__append {
      box-sizing: border-box;
      .btn-search {
        width: 60px;
      }
    }
  }

  .checkbox {
    .checkbox-content {
      .el-checkbox {
        margin-bottom: 15px;
      }
    }
  }
}
::v-deep .dialog-renlin {
  margin-top: 40vh !important;
  .el-dialog__body {
    padding: 0;
    text-align: center;
    padding-bottom: 24px;
  }
  .el-dialog__footer {
    padding: 0px;
    padding-bottom: 24px;
    .dialog-footer {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      .dialog-footer-btn1 {
        cursor: pointer;
        width: 72px;
        height: 28px;
        background: #0081ff;
        border-radius: 2px 2px 2px 2px;
        font-size: 12px;
        font-weight: 400;
        color: #ffffff;
        line-height: 28px;
        text-align: center;
        margin-right: 8px;
        &:hover {
          background: #006ad1;
        }
      }
      .dialog-footer-btn2 {
        cursor: pointer;
        width: 72px;
        height: 28px;
        border-radius: 2px 2px 2px 2px;
        border: 1px solid #cccccc;
        line-height: 28px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        color: rgba(35, 35, 35, 0.8);
        &:hover {
          background: #f3f4f5;
        }
      }
    }
  }
}
.content {
  padding: 0px 16px;
  border-radius: 4px 4px 4px 4px;
  background: #ffffff;
  .content_item {
    padding-top: 20px;
    display: -webkit-box;
    align-items: flex-start;
    .label {
      width: 84px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(35, 35, 35, 0.8);
      margin-right: 28px;
    }
    .content_right {
      width: calc(100% - 112px);
      .ename_input {
        width: 400px;
      }
    }
    .item_ckquery_list {
      display: flex;
      align-items: center;
      .qualifications-tab {
        margin-right: 4px;
        border: 1px solid #e0e0e0;
        padding: 2px 3px;
        border-radius: 2px;
        height: 34px;
        margin-top: 1px;
        span {
          background: #fff;
          display: inline-block;
          cursor: pointer;
          float: left;
          border-radius: 2px;
          padding: 3px 8px;
          margin-top: 0.5px;
        }
        .action {
          color: #ffffff;
          background: #0081ff;
        }
      }
      .ckquery_list_right {
        width: 670px;
      }
    }

    .item_ckquery_list .el-input__icon {
      position: relative;
      top: 1px;
    }
    .ckquery_list_right {
      width: 640px;
    }
    .register_count_ipt {
      margin-left: 0px;
    }
    .register_count_ipt .el-input__inner {
      width: 174px;
    }
    ::v-deep .el-input-group__prepend {
      padding: 0 8px;
    }
    .content-projecttype {
      display: flex;
      align-items: center;
      justify-content: center;
      .projecttype {
        font-weight: 400;
        color: #232323;
        padding: 1px 5px;
        margin-right: 4px;
        cursor: pointer;
        border-radius: 3px 3px 3px 3px;
        font-size: 14px;
      }
      .projecttype:first-child {
        padding-left: 0px;
      }
      .projecttype:hover {
        background: #f3f4f5;
        padding: 1px 5px;
      }
      .activetype {
        background: #f3f4f5;
        padding: 1px 5px !important;
      }
    }
  }
  .content_item1 {
    .checkbox-content {
      display: block;
      .el-checkbox {
        margin-bottom: 20px;
      }
    }
  }

  .content_item_padding0 {
    padding: 0;
  }
}
.bottomlist {
  width: 100%;
  background-color: #ffffff;

  border-radius: 4px 4px 4px 4px;
  .bottomlist-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding: 16px;

    .title-right {
      display: flex;
      align-items: center;
      p:last-child {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 400;
        color: rgba(35, 35, 35, 0.8);
      }
      img {
        width: 18px;
        height: 18px;
      }
      .excel {
        cursor: pointer;
      }
    }
  }
  .bottomlist-title-left {
    display: inline-flex;
    align-items: center;
    .title-left {
      height: 16px;
      line-height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: #3d3d3d;
    }
    .sort-mode {
      color: rgba(35, 35, 35, 0.8);

      &:hover {
        color: #232323;
      }
    }
  }
  .bottomlist-content {
    padding-bottom: 0px;
  }

  ::v-deep .table-item-jf {
    &.empty-table {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      padding: 48px 0px;
      .item-jf-text {
        padding: 0px;
      }
      .item-jf-img {
        margin: 0;
        width: 108px;
        height: 109px;
        margin-bottom: 24px;
      }

      .depth-search-box {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
      }
      .depth-search {
        width: 116px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        cursor: pointer;
        color: #fff;
        background: #0081ff;
        border-radius: 4px;
        font-size: 14px;
      }
    }
    padding: 0px 16px;
    .list-titel-a {
      color: #0081ff;
    }
    ::v-deep .el-table--border .el-table__cell:first-child .cell {
      padding: 0px 8px;
      padding-left: 12px;
      font-size: 12px;
      font-weight: 400;
    }
    ::v-deep .el-table th.el-table__cell > .cell {
      padding: 0px 8px;
      padding-left: 12px;
      font-size: 12px;
      font-weight: 400;
    }
    ::v-deep .el-table th.el-table__cell.is-leaf,
    ::v-deep .el-table td.el-table__cell {
      border-bottom: 1px solid #e6eaf1;
    }
    ::v-deep .el-table--border .el-table__cell {
      border-right: 1px solid #e6eaf1;
    }
    ::v-deep.el-table__fixed::before {
      height: 0;
    }
    .renling {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-titel-a {
        max-width: 264px;
        margin-right: 12px;
      }
      .renling-btn {
        display: flex;
        align-items: center;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
        white-space: nowrap;
        .renling-img-true {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          background-image: url("../../../../assets/images/owner/renling1.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .renling-img-false {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          background-image: url("../../../../assets/images/owner/renling2.png");
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }

        .renling-hui {
          font-size: 13px;
          font-weight: 400;
          color: rgba(35, 35, 35, 0.4);
        }
        .renling-hei {
          font-size: 13px;
          font-weight: 400;
          color: #3d3d3d;

          &:hover {
            color: #0081ff;
          }
        }
      }

      .high-quality-enterprise {
        padding: 0px 8px;
        line-height: 22px;
        height: 22px;
        box-sizing: border-box;
        background: #ebf1ff;
        border-radius: 2px;
        color: #2a6aff;
        font-size: 12px;
        margin-right: 25px;
        white-space: nowrap;
      }
    }

    .el-table {
      th,
      td {
        .cell {
          font-size: 12px;
        }
      }

      .enterprise-name-row {
        &:hover,
        &.hover-row {
          .cell {
            .renling-btn {
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }
  }
  .table-item1 {
    ::v-deep .el-table__body-wrapper {
      color: #232323;
    }
  }
  .fixed-table {
    overflow: initial;

    ::v-deep .el-table__header-wrapper {
      position: sticky;
      top: 56px;
      z-index: 9;
    }
    ::v-deep .el-table__fixed-header-wrapper {
      position: sticky;
      z-index: 9;
      top: 56px;
    }
    ::v-deep .el-table__fixed {
      overflow-x: clip;
      overflow-y: clip;
    }
  }
  .table-item-jf1 {
    border-top: 1px solid #efefef;
  }
  .pagination {
    padding: 14px;
    .el-pagination {
      float: right;
    }
  }
}
</style>
<style lang="scss">
.multiple-tip-el-tooltip {
  .multiple-tip-content {
    display: flex;
    flex-direction: column;
    line-height: 22px;
    & > span {
      font-size: 14px;
      &:first-of-type {
        margin-bottom: 8px;
      }
    }
  }
  &.el-tooltip__popper.is-dark {
    padding: 8px 12px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);

    .popper__arrow {
      border-top-color: rgba(0, 0, 0, 0.3);

      &::after {
        border-top-color: rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>
