<template>
  <div class="app-container" @click='handleALL'>
    <el-card class="box-card noborder">
      <div class="tables">
        <div class="empty" v-if="tableData.total==0&& !isSkeleton">
          <img src="@/assets/images/project/empty.png">
          <div class="p1">抱歉，没找到相关数据</div>
          <div class="p2">建议调整关键词或筛选条件，重新搜索</div>
        </div>
        <div class="table_search">
          <div>
            <!-- 未点击前的输入框样式 -->
            <div class="normal-search-container" :class="{'is-hover-search' : searchHoverStatus}" @mouseover="searchHover($event)"
              @mouseleave="searchUnHover($event)">
              <img src="@/assets/images/enterprise/enterprise-search-icon.svg" alt="">
              <span v-if="!searchHoverStatus && !searchParam.companyName">搜索</span>
              <el-input v-model="searchParam.companyName" placeholder="输入关键词查询" style="width:238px;" @focus="searchFocus($event)"
                @blur="searchBlur($event)" @input="value => searchInput(value)" v-else="searchHoverStatus || searchParam.companyName"
                @keydown.native.enter="handleSearch">
                <template slot="suffix">
                  <transition mode="out-in" appear name="fade">
                    <img src="@/assets/images/enterprise/search-input-clear-icon.svg" alt=""
                      @click.stop="searchParam.companyName = '';getCustomerList()" v-show="showClearIcon">
                  </transition>
                </template>
              </el-input>
            </div>
          </div>
          <div class="dc">
            <div class="total">共{{tableData.total}}条</div>
          </div>
        </div>
        <skeleton v-if="isSkeleton"></skeleton>
        <el-table v-if="!isSkeleton&&tableData.total > 0" class="fixed-table" v-horizontal-scroll="tableData.total > 10 ? 'hover' : 'false'"
          max-height="640" :data="tableData.rows" stripe border style="width: 100%">
          <el-table-column prop="index" label="序号" fixed="left" width="60">
            <template slot-scope='scope'>
              <span>{{ (searchParam.pageNum - 1) * searchParam.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="企业名称" fixed="left" width="316">
            <template slot-scope="scope">
              <div class="ps1">
                <div class="wordprimary ps2" @click="toDetail(scope.row,'business')" v-html="scope.row.companyName"></div>
                <div class="ps3">
                  <el-tooltip class="item" effect="dark" content="重新认领" placement="top">
                    <div @click="toRL(scope.row)"><img class="i" src="@/assets/images/project/khrl1.png"><img class="o"
                        src="@/assets/images/project/khrl2.png"></div>
                  </el-tooltip>
                </div>
              </div>
            </template>

          </el-table-column>
          <el-table-column prop="cooperationProject" label="合作项目" width="90">
            <template slot-scope="scope">
              {{scope.row.cooperationProject || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="followProject" label="跟进项目" width="90">
            <template slot-scope="scope">
              {{scope.row.followProject || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="reserveProject" label="储备项目" width="90">
            <template slot-scope="scope">
              {{scope.row.reserveProject || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="legalPerson" label="法定代表人" width="110">
            <template slot-scope="scope">
              {{scope.row.legalPerson || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="registerAddress" label="注册地区" width="160">
            <template slot-scope="scope">
              {{scope.row.registerAddress || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="registerCapitalStr" label="注册资本金（万元）" width="160">
            <template slot-scope="scope">
              <span v-if="scope.row.registerCapital && scope.row.registerCapital>0">{{scope.row.registerCapital}}</span><span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="creditLevel" label="企业主体评级" width="100">
            <template slot-scope="scope">
              {{scope.row.creditLevel || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="isOn" label="上市公司" width="76">
            <template slot-scope="scope">
              {{scope.row.isOn == 1?"是":"否"}}
            </template>
          </el-table-column>
          <el-table-column prop="isMajor" label="局级大客户" width="88">
            <template slot-scope="scope">
              <span v-if="scope.row.isMajor != null">
                {{scope.row.isMajor == 1?"是":"否"}}
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="customerLevel" label="客户等级" width="76">
            <template slot-scope="scope">
              {{scope.row.customerLevel || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="companyNature" label="客户性质" width="76">
            <template slot-scope="scope">
              {{scope.row.companyNature || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="companyLevel" label="客户级别" width="76">
            <template slot-scope="scope">
              {{scope.row.companyLevel || '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="企业母公司" width="268">
            <template slot-scope="scope">
              <div class="">{{scope.row.superCompany || '--'}}</div>
            </template>
          </el-table-column>
          <el-table-column :key="keys" prop="mainBusiness" label="主营业务" width="400">
            <template slot-scope="scope">
              <div v-if="scope.row.mainBusiness == null || scope.row.mainBusiness == ''">--</div>
              <div v-if="scope.row.mainBusiness1">
                <div class="box" v-if="scope.row.sq1==true">{{scope.row.mainBusiness1}}...<span @click="sq1(scope.row,false)">更多</span></div>
                <div class="box" v-else>{{scope.row.mainBusiness}}<span @click="sq1(scope.row,true)">收起</span></div>
              </div>
              <div v-else>{{scope.row.mainBusiness}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="companyAttribute" :key="keys+2" label="发包属性" width="400">
            <template slot-scope="scope">
              <div v-if="scope.row.companyAttribute == null || scope.row.companyAttribute == ''">--</div>
              <div v-if="scope.row.companyAttribute1">
                <div class="box" v-if="scope.row.sq2==true">{{scope.row.companyAttribute1}}...<span @click="sq2(scope.row,false)">更多</span></div>
                <div class="box" v-else>{{scope.row.companyAttribute}}<span @click="sq2(scope.row,true)">收起</span></div>
              </div>
              <div v-else>{{scope.row.companyAttribute}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="followUser" label="跟进人" width="110">
            <template slot-scope="scope">
              {{scope.row.followUser || '--'}}
            </template>
          </el-table-column>
        </el-table>
        <div class="bottems" v-if="tableData.total>searchParam.pageSize">
          <el-pagination background :page-size="searchParam.pageSize" :current-page="searchParam.pageNum" @current-change="handleCurrentChange"
            layout="prev, pager, next" :total="tableData.total">
          </el-pagination>
        </div>
        <div class="delform" v-if="RLcompanyName">
          <div class="words">再次认领将会恢复默认客户数据</div>
          <div>
            <div class="btnsmall btn_primary h28" @click="RL">确定</div>
            <div class="btnsmall btn_cancel h28" @click="RLcompanyName = ''">取消</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import "@/assets/styles/project.scss";
import { getCustomerList, importData, addCustomer } from '@/api/custom/custom';
import { getEnterprise, getDictType, } from '@/api/main';
import { encodeStr } from "@/assets/js/common";
import { historyClaim } from "@/api/common"; //认领
import skeleton from '../../project/projectList/component/skeleton';
export default {
  name: 'CustomList',
  components: { skeleton },
  data() {
    return {
      encodeStr,
      searchParam: {
        companyName: '',
        pageNum: 1,
        pageSize: 20,
        status: 1,
      },
      tableData: [],//列表

      customerLevel: [],//客户等级
      rules: {
        companyName: [{ required: true, message: '请输入非空格字符！', trigger: 'blur' },]
      },
      //批量导入
      action: process.env.VUE_APP_BASE_API + "/customer/importData",
      fileList: [],
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      // isNew:true,
      showlist: false,
      keys: 1,
      RLcompanyName: '',//重新认领企业名称
      isSkeleton: true,
      showClearIcon: false,
      searchHoverStatus: false,
      hover: false,
    };
  },
  created() {
    this.$watch(
      () => this.$route.params,
      () => {
        this.getCustomerList();
        this.getDictType();
        this.searchParam.companyName = '';
      }, { immediate: true });
  },
  methods: {
    sq1(item, sq) {
      this.$nextTick(() => {
        item.sq1 = sq;
        this.keys++;
      });
    },
    sq2(item, sq) {
      this.$nextTick(() => {
        item.sq2 = sq;
        this.keys++;
      });
    },
    handleALL(event) {
      var one = document.getElementById("box");
      if (one) {
        if (!one.contains(event.target)) {
          this.showlist = false;
        }
      }
    },
    toct() {
      this.dialogVisible = false;
      this.$router.push({ path: '/macro/urban' });
    },
    getDictType() {
      //获取客户等级
      getDictType('customer_level_type').then(result => {
        this.customerLevel = result.code == 200 ? result.data : [];
      });
    },
    //获取客户列表
    getCustomerList() {
      getCustomerList(this.searchParam).then(result => {
        this.isSkeleton = false;
        this.tableData = result;
        this.tableData.rows.forEach(item => {
          item.registerCapital = item.registerCapital == null ? null : item.registerCapital.replace(/^\D*(\d*(?:\.\d{0,6})?).*$/g, '$1');
          if (item.mainBusiness != "" && item.mainBusiness != null && item.mainBusiness.length > 84) {
            item.mainBusiness1 = item.mainBusiness.substring(0, 81);
            item.sq1 = true;
          } else {
            item.sq1 = false;
          }
          if (item.companyAttribute != "" && item.companyAttribute != null && item.companyAttribute.length > 84) {
            item.companyAttribute1 = item.companyAttribute.substring(0, 81);
            item.sq2 = true;
          } else {
            item.sq2 = false;
          }
        });
      });
    },
    //跳转到客户详情
    toDetail(row, type) {
      let customerId = row.customerId;
      let companyId = row.companyId;
      let path = type;
      // if(type == "" && companyId == null){
      //   path = 'business'
      // }
      this.$router.push({ path: '/enterprise/' + encodeStr(companyId), query: { customerId: customerId, path: path } });
    },
    //认领客户
    async toRL(row) {
      this.RLcompanyName = row.companyName.replace(/<[^>]+>/g, '');
    },
    async RL() {
      let res = await historyClaim(this.RLcompanyName);
      if (res.code == 200) {
        this.$message.success('认领成功！');
        this.handleCurrentChange(1);
        this.RLcompanyName = '';
      }
    },
    clearname(value) {
      if (value == "") {
        this.handleCurrentChange(1);
      }
    },
    handleSearch() {
      this.$nextTick(() => {
        this.searchParam.pageNum = 1;
        this.getCustomerList();
      });
    },
    //翻页
    handleCurrentChange(val) {
      this.isSkeleton = true;
      this.searchParam.pageNum = val;
      this.getCustomerList();
    },
    searchFocus(event) {
      const { target } = event;
      if (target?.value?.length) {
        this.showClearIcon = true;
      }
    },
    searchBlur(event) {
      const { target } = event;
      // 失去焦点没有文字
      if (!target?.value?.length) {
        this.searchHoverStatus = false;
      }
      this.showClearIcon = false;
      this.getCustomerList();
    },
    searchInput(value) {
      if (value?.length) {
        this.showClearIcon = true;
      } else {
        this.showClearIcon = false;
      }
    },
    searchHover(event) {
      this.searchHoverStatus = true;
    },
    searchUnHover(event) {
      if (!this.searchParam.companyName) {
        this.showClearIcon = false;
        this.searchHoverStatus = false;
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.delform {
  width: 228px;
  left: 50%;
  top: 50%;
  margin-left: -114px;
  margin-top: -57px;
  .words {
    font-size: 14px;
  }
}
.app-container {
  height: calc(100vh - 134px);
}
.box-card {
  padding-top: 16px;
  width: 100%;
  height: 100%;
  .table_search {
    ::v-deep .normal-search-container {
      display: flex;
      align-items: center;
      line-height: 32px;
      height: 32px;
      &.is-hover-search {
        width: 238px;
        background: #f4f6f9;
        border-radius: 4px 4px 4px 4px;

        & > img {
          cursor: unset;
        }
      }

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

      & > img {
        width: 16px;
        height: 16px;
        margin-left: 12px;
        cursor: pointer;
      }

      & > span {
        color: rgba(35, 35, 35, 0.8);
        font-weight: 400;
        margin-left: 8px;
        line-height: 22px;
        font-size: 14px;
        cursor: pointer;
      }

      .el-input {
        & > .el-input__inner {
          border: none;
          height: 32px;
          line-height: 32px;
          caret-color: #0081ff;
          color: rgba(35, 35, 35, 0.8);
          font-size: 14px;
          background: #f4f6f9;
          padding-right: 26px;
          padding-left: 8px;

          &::placeholder {
            color: rgba(35, 35, 35, 0.4) !important;
            font-size: 14px !important;
            line-height: 32px;
          }
        }
        .el-input__suffix {
          right: 12px;
          display: flex;
          align-items: center;

          .el-input__suffix-inner {
            height: 14px;
            width: 14px;
          }

          img {
            cursor: pointer;
            vertical-align: unset;
            margin-bottom: 14px;
          }
        }
      }
    }
  }
}
.box {
  position: relative;
  > span {
    position: absolute;
    right: 10px;
    bottom: 0;
    color: #0081ff;
    cursor: pointer;
    &:hover {
      color: #006ad1;
    }
  }
}
.dc {
  font-size: 12px;
  color: #3d3d3d;
  font-weight: 400;
  position: relative;
  line-height: 32px;
  &::after {
    content: " ";
    width: 2px;
    height: 2px;
    background: rgba(35, 35, 35, 0.4);
    border-radius: 50%;
    position: absolute;
    top: 16px;
    left: 14px;
  }
  > div {
    display: inline-block;
    margin-left: 20px;
  }
}
.img.img1 {
  margin-right: 2px;
  background: url("../../../../src/assets/images/project/add_2.png") no-repeat
    center center;
  background-size: 100%;
}
.w88 {
  width: 88px;
}
.tables {
  position: relative;
  min-height: calc(100vh - 134px);
  /*overflow: auto;*/
  .empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .btn {
      margin-right: 8px;
      margin-top: 16px;
    }
  }
}
.ps1 {
  display: flex;
  justify-content: space-between;
  .ps2 {
    width: 350px;
  }
  .ps3 {
    width: 60px;
    display: flex;
    justify-content: right;
    > div {
      margin-left: 12px;
      > img {
        float: right;
        margin: 3px 0 0 4px;
        width: 14px;
      }
      .i {
        display: inline-block;
      }
      .o {
        display: none;
      }
      &:hover {
        cursor: pointer;
        .i {
          display: none;
        }
        .o {
          display: inline-block;
        }
      }
    }
  }
}
.popbot {
  .wordprimary {
    display: inline;
    padding-right: 26px;
  }
}

.searchInput {
  .el-input {
    width: 260px;
  }
}
</style>
