<template>
  <div>
    <navbar title="查信用"></navbar>
    <div class="wrapper">
      <div style="background: #ffffff;padding:10px;margin-bottom: 10px">
        <van-search show-action @search="onSearch" @cancel="onCancel" v-model="searchKey"
          placeholder="请输入企业名称/法人代表"></van-search>
      </div>
      <div v-if="pageLoading == true">
        <ul class="company-box" v-if="searchResultList.length > 0">
          <div class="search-btn-box">
            <div>共检索 <span class="color-2372eb"> {{ totalDatas > 999 ? '999+' : totalDatas }} </span>条数据</div>
          </div>
          <li class="company-item" v-for="(resultItem, resultIndex) in searchResultList" :key="resultItem.companyName">

            <div class='title-top'>
              <div class="company-middle-item mb-10">
                <div class="company-item-left bg-2372eb" v-if="resultItem.colorNum == 1">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-ee8c15" v-else-if="resultItem.colorNum == 2">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-11c95f" v-else-if="resultItem.colorNum == 3">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-e21183" v-else-if="resultItem.colorNum == 4">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-fde809" v-else-if="resultItem.colorNum == 5">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-17b9d7" v-else-if="resultItem.colorNum == 6">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-db2c2c" v-else-if="resultItem.colorNum == 7">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-9232db" v-else-if="resultItem.colorNum == 8">
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-left bg-8c8c8c" v-else>
                  <img name="wap-home" src="../../../images/part_one/icon_company.png" alt="">
                </div>
                <div class="company-item-right">
                  <div class="company-item-right-title mb-10" v-html="resultItem.companyName"></div>
                </div>
              </div>
              <div class="mb-10" v-if="resultItem.ent9vScoreAll">
                <van-tag color="#fce9e9" text-color="#db2f2f" v-if="resultItem.ent9vScoreAll < 20">九维分:{{
                  resultItem.ent9vScoreAll }}</van-tag>
                <van-tag color="rgb(231,249,239)" text-color="rgb(17,201,95)"
                  v-else-if="resultItem.ent9vScoreAll > 175">九维分:{{ resultItem.ent9vScoreAll }}</van-tag>
                <van-tag color="rgb(253,243,231)" text-color="rgb(238,140,21)" v-else>九维分:{{ resultItem.ent9vScoreAll
                }}</van-tag>
                <van-icon name="question-o ml-10" @click="openDialog()" />
              </div>
            </div>
            <div class="mb-10" style="font-size: 14px;color: #666666"><span
                style="font-weight: bold;color: #333333">社会信用代码：</span><span>{{ resultItem.creditCode }}</span></div>
            <div class="mb-10" style="font-size: 14px;color: #666666"><span
                style="font-weight: bold;color: #333333">客户内码：</span><span>{{ resultItem.custIsn }}</span></div>
            <div class="mb-10" style="font-size: 14px;color: #666666"><span
                style="font-weight: bold;color: #333333">报告查询时间：</span><span>{{ resultItem.entCreditLastsearchTime }}</span>
            </div>

            <div class="company-item-bottom-btn-box">
              <!-- <div @click="guanzhuShow(resultIndex)" class="company-item-bottom-btn"><van-icon class="color-2372eb"
                  name="star-o" /> 加关注</div> -->
              <div class="fs-15 fw-bold cl-blue concern" @click="guanzhuShow(resultItem,resultIndex)">
                <van-icon class="mg-rt-5" :name="resultItem.attentionFlag == true ? 'star' : 'star-o'" />{{
                  resultItem.attentionFlag == true ?
                  '已关注' :
                  '关注' }}
              </div>
              <div class="company-item-bottom-line"></div>
              <div @click="goUrlDetails(resultItem)" class="company-item-bottom-btn"><van-icon class="color-2372eb"
                  name="newspaper-o" /> 看详情</div>
            </div>

          </li>
        </ul>
        <div style="margin-top: 10px" v-else>
          <div class="search-btn-box" style="padding: 0 10px">
            <div>共检索 <span class="color-2372eb">0</span>条数据</div>
          </div>
          <van-empty />
        </div>
      </div>
      <van-loading style="text-align: center;margin-top: 50%" v-if="pageLoading == false" />
    </div>
    <van-action-sheet v-model="sheetShow" title="选择分组">
      <div class="add-fenzu-btn" @click="addGroup">+ 新建分组</div>
      <van-radio-group v-model="updateResult">
        <van-cell-group class="fenzu-box">
          <van-cell v-for="(item, index) in groupList" clickable :key="index" style="padding-bottom: 20px">
            <template #title>
              <div style="margin-top: 15px;font-size: 15px;font-weight: bold;">{{ item.groupName }}</div>
            </template>
            <template #right-icon>
              <van-radio :name="index" />
            </template>
          </van-cell>
        </van-cell-group>
        <van-button plain color="#2372eb" @click="updateSure"
          style="width: 90%;border-radius: 5px;margin-left: 5%;">确定</van-button>
      </van-radio-group>
    </van-action-sheet>
    <van-popup :closeOnClickOverlay=false v-model="addFenzuShow" :style="{ width: '260px' }">
      <div class="dialog-title-box">新建分组</div>
      <div class="dialog-content-box">
        <input maxlength="12" v-model="groupName" type="text" placeholder="请输入分组名称">
      </div>
      <div class="dialog-footer-box">
        <div class="cancel-btn" @click="addFenzuCancel">取消</div>
        <div class="ok-btn" @click="addFenzuOk">确定</div>
      </div>
    </van-popup>
    <van-popup v-model="nightDialogIsShow" :style="{ width: '300px', borderRadius: '8px' }">
      <div style="height: 40px;line-height: 40px;text-align: center;font-size: 16px;font-weight: bold">九维分</div>
      <div class='night_box'>九维分取金综九维评分：</div>
      <div class='night_box'>175分(含)以上为优,占比约20%。</div>
      <div class='night_box'>25(含)-175(不含)为良,占比22%。</div>
      <div class='night_box'>20(含)-25(不含)为中,占比55%。</div>
      <div class='night_box' style="border-bottom: solid 1px #dddddd">20分以下为差,占比约2.5%。</div>
      <div @click="nightDialogIsShow = false"
        style="height: 42px;line-height: 42px;text-align: center;font-size: 16px;color: #2372eb">关闭</div>
    </van-popup>
  </div>
</template>
<script>
import { ref } from 'vue';
import navbar from '../../../components/navbar/navbar.vue';
import {
  Icon,
  Search,
  DropdownMenu,
  DropdownItem,
  Area,
  Picker,
  Button,
  Col,
  Row,
  Sidebar,
  SidebarItem,
  Field,
  Tag,
  Empty,
  Toast, Popup,
  ActionSheet, RadioGroup, Radio
} from 'vant';
import { getQueryCompanyPage, addGroupInfo } from "@/service/api/home";
import { postCancelGuanzhu, postQueryByName, postAddAttentionCompany } from "@/service/api/category";

export default {
  components: {
    navbar: navbar,
    VanIcon: Icon,
    VanSearch: Search,
    VanDropdownMenu: DropdownMenu,
    VanDropdownItem: DropdownItem,
    VanArea: Area,
    VanPicker: Picker,
    VanButton: Button,
    VanCol: Col,
    VanRow: Row,
    VanSidebar: Sidebar,
    VanSidebarItem: SidebarItem,
    VanField: Field,
    VanTag: Tag,
    VanEmpty: Empty,
    VanPopup: Popup,
    VanActionSheet: ActionSheet,
    VanRadioGroup: RadioGroup,
    VanRadio: Radio,
  },
  name: "SearchChecking",
  data() {
    return {
      isGetResult: false,
      searchKey: '',
      pageLoading: true,
      totalDatas: 0,
      searchResultList: [],
      sheetShow: false,
      updateResult: '',
      groupList: [],
      currentOperateIndex: -1,
      addFenzuShow: false,
      groupName: '',
      nightDialogIsShow: false,
      currentPage: 1,
      isEndLoading: false,
      loading: false,
    }
  },
  mounted() {
    this.postGroupList()
    window.addEventListener('scroll', this.scrollBottom);


    this.getQueryCompanyPageData();
    window.scrollTo(0, 0)


  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollBottom)
  },
  methods: {
    async getQueryCompanyPageData() {
      let params = {
        "keyword": this.searchKey,
        "pageNum": this.currentPage,
        "pageSize": 10,
        "orgFlg":1
      }
      let result = await getQueryCompanyPage(params);
      if (result) {
        this.pageLoading = true;
        if (this.loading) {
          this.searchResultList = this.searchResultList.concat(result.records);
        } else {
          this.searchResultList = result.records;
        }
        this.totalDatas = result.total;
        if (this.searchResultList.length < result.total) {
          this.isEndLoading = false;
        } else {
          this.isEndLoading = true;
        }
        this.loading = false;
      }
    },
    // 滚动到页面底部时，请求内容
    scrollBottom() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //页面滚动的高度
      let clientHeight = document.documentElement.clientHeight  //可视区域高度
      let scrollHeight = document.documentElement.scrollHeight  //可滚动内容的高度
      let bottomOfWindow = scrollTop + clientHeight + 1000 >= scrollHeight    //是否滚动到底部

      //loading 和 this.tableData.length和this.total是自己的判断条件
      console.log(this.isGetResult, 'bottomOfWindow')
      if (scrollTop !== 0 && bottomOfWindow && !this.loading && !this.isEndLoading) {
        this.loading = true;
        this.currentPage += 1;
        console.log(this.currentPage, 'this.currentPage')
        this.getQueryCompanyPageData();
      }
    },
    onSearch() {
      this.getQueryCompanyPageData();
    },
    onCancel() {
      this.getQueryCompanyPageData();
    },
    goUrlDetails(item) {
      sessionStorage.setItem('creditCode', item.creditCode);
      if(item.ent9vScoreAll){

        sessionStorage.setItem('ent9vScoreAll', item.ent9vScoreAll);
      }
      sessionStorage.setItem('colorNum', item.colorNum);
      this.$router.push('/SearchCheckingDetail');
    },
    async guanzhuShow(resultItem,guanzhuIndex) {
      console.log(resultItem)
      if (resultItem.attentionFlag == true) {
        let params = { companyId: resultItem.companyId, };
        let result = await postCancelGuanzhu(params);
        Toast.success('取关成功');
        this.getQueryCompanyPageData();
      } else {
        this.sheetShow = true;
        this.currentOperateIndex = guanzhuIndex
      }

    },
    async postGroupList() {
      let result = await postQueryByName({ pageSize: 999, pageNum: 1 });
      if (result) {
        this.groupList = result.records;
      }
    },
    async updateSure() {
      let params = {
        groupName: this.groupList[this.updateResult].groupName,
        groupId: this.groupList[this.updateResult].groupId,
        companyId: this.searchResultList[this.currentOperateIndex].companyId,
        companyName: this.searchResultList[this.currentOperateIndex].companyNameIk,
      }
      let result = await postAddAttentionCompany(params);
      if (result) {
        this.sheetShow = false;
        Toast.success('关注成功！');
        this.getQueryCompanyPageData();
      }
    },
    // 新建分组取消
    addFenzuCancel() {
      this.groupName = '';
      this.addFenzuShow = false;
    },

    addGroup() {
      this.addFenzuShow = true;
      this.groupName = '';
    },


    // 新建分组确定
    async addFenzuOk() {
      let params = {
        groupName: this.groupName,
      }
      if (this.groupName == '') {
        Toast.fail('请输入分组名称')
      } else {
        let result = await addGroupInfo(params);
        if (result) {
          this.postGroupList();
          this.addFenzuCancel();
          Toast.success('新建分组成功！');
        }
      }
    },

    // 取消关注
    async cancelGuanzhu(companyId) {
      let params = { companyId: companyId };
      let result = await postCancelGuanzhu(params);
      Toast.success('取关成功');
    },
    openDialog() {
      this.nightDialogIsShow = true
    },
    returnClick() {
      sessionStorage.setItem('tabBarActiveIndex', '0');
      if (this.isGetResult == true) {
        this.isGetResult = !this.isGetResult;
      } else {
        this.$router.push({ path: '/dashboard/home' });
      }
    },
  },

}
</script>
<style scoped>
.wrapper {
  padding-top: 46px;
  min-height: 100vh;
  background: #f7f7f7;
}

.van-dropdown-menu /deep/ .van-dropdown-menu__bar {
  box-shadow: none;
}

.search-result-box {
  /*padding-top: 46px;*/
  position: relative;
  background: #ffffff;
}

.more-screen-bottom-botton {
  border-top: solid 1px #f2f2f2;
  /*height: 60px;*/
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  width: 100%;
  padding: 10px 1rem 26px;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
}

.van-sidebar-item--select::before {
  background: #2372eb !important;
}

.more-screen-content-right {
  padding: 0.8rem 1rem 4rem 0.6rem;
}

.more-screen-content-cell {
  margin-bottom: 20px;
}

.more-title-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.more-title-h2 {
  font-size: 0.9rem;
}

.select-slider-show {
  font-size: 1rem;
  color: #2372eb;
  font-weight: bold;
}

.color-2372eb {
  color: #2372eb;
  font-size: 16px;
}

.title-top {
  display: flex;
  justify-content: space-between
}

.van-search {
  padding: 0;
}

.chengli-input {
  width: 100%;
  background: #f2f2f2;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
}

.chengli-input-line {
  text-align: center;
}

.chengli-input-box {
  margin-bottom: 10px;
}

.select-item-box {
  display: flex;
  justify-content: start;
  align-items: self-start;
  flex-wrap: wrap;
  width: 100%;
}

.select-item {
  padding: 2px 10px;
  background: #f2f2f2;
  font-size: 0.8rem;
  color: #333333;
  margin: 0 10px 10px 0;
  border-radius: 4px;
}

.select-item-active {
  color: #ffffff;
  background: #2372eb;
}

.company-box {
  background: #ffffff;
  width: 100%;
  min-height: 100vh;
  padding: 10px 1rem 1rem;

}

.company-item {
  border: solid 1px #f2f2f2;
  border-radius: 10px;
  padding: 0.6rem;
  margin-bottom: 16px;
}

.company-middle-item {
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex: 1
}

.company-item-left {
  width: 26px;
  height: 26px;
  background: #2372eb;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}

.company-item-left img {
  width: 16px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mr-6 {
  margin-right: 6px;
}

.company-item-right {
  width: calc(100% - 36px);
  font-size: 0.8rem;
}

.company-item-right-title {
  font-size: 1.2rem;
  font-weight: bold;
}

.company-item-right-small-title {
  font-size: 0.8rem;
  margin-left: 6px;
  color: #666666;
}

.company-item-tag-box {
  margin-bottom: 12px;
}

.popup-box {
  height: 27rem;
  padding: 1rem 1rem 3rem 1rem;
}

.divider-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.divider-line {
  width: 90px;
  height: 2px;
  background: #2372eb;
}

.divider-title {
  font-size: 1rem;
  color: #2372eb;
  margin: 0 6px;
}

.search-btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #666666;
  margin-bottom: 16px;
}

.search-right-btn-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  color: #666666;
}

.mt-60 {
  margin-top: 60px;
}

.van-button--small {
  font-size: 16px;
  height: 40px !important;
  line-height: 40px !important;
}


.bg-2372eb {
  background: #2372EB;
}

.bg-ee8c15 {
  background: #ee8c15;
}

.bg-11c95f {
  background: #11c95f;
}

.bg-e21183 {
  background: #e21183;
}

.bg-fde809 {
  background: #fde809;
}

.bg-17b9d7 {
  background: #17b9d7;
}

.bg-db2c2c {
  background: #db2c2c;
}

.bg-9232db {
  background: #9232db;
}

.bg-8c8c8c {
  background: #8c8c8c;
}

.header-title {
  height: 46px;
  width: 100%;
  background-color: #fff;
  text-align: center;
}

.header-title-return-back {
  height: 100%;
  width: 2rem;
  line-height: 46px;
  float: left;
  font-size: 15px;
}

.header-title-name-search {
  line-height: 46px;
  margin-right: 2rem;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

.mb-50 {
  margin-bottom: 50px;
}

.ml-10 {
  margin-left: 10px;
}

.company-item-bottom-btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: solid 1px #e9e9e9;
  padding-top: 10px;
  font-size: 14px;
  color: #333333;
}

.company-item-bottom-btn {
  width: 46%;
  text-align: center;
}

.company-item-bottom-line {
  width: 1px;
  height: 20px;
  background: #e9e9e9;
}


.guanzhu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #666666;
  padding-bottom: 16px;
  border-bottom: solid 1px #f2f2f2;
}

.guanzhu-button {
  color: #2372eb;
}

.fenzu-box {
  padding-bottom: 10px;
  max-height: 50vh;
  overflow: scroll;
}

.add-fenzu-btn {
  padding: 1rem;
  font-size: 0.9rem;
  color: #2372eb;
  border-bottom: solid 1px #f2f2f2;
}

.dialog-title-box {
  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;
  margin: 16px 0 20px;
}

.dialog-content-box {
  padding: 0 1rem;
  margin-bottom: 16px;
}

.dialog-content-box input {
  width: 100%;
  background: #f2f2f2;
  border: none;
  height: 36px;
  line-height: 36px;
  padding-left: 6px;
  font-size: 0.8rem;
}

.dialog-footer-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  border-top: solid 1px #dddddd;
}

.dialog-footer-box .cancel-btn {
  font-size: 0.9rem;
  color: #999999;
  border-right: solid 1px #dddddd;
  text-align: center;
  width: 50%;
}


.dialog-footer-box .ok-btn {
  width: 50%;
  font-size: 0.9rem;
  color: #2372EB;
  text-align: center;
}

.hot-item-cell-guanzhu {
  font-size: 0.8rem;
  color: #2372eb;
}

.night_box {
  padding: 10px 20px 10px;
  font-size: 14px;
  color: #666666;
}
</style>