<template>
  <div class="cooperation-desk-account-enterprise">
    <div class="consulting-search-form">
      <el-form :model="form" ref="form" :rules="rules" label-width="84px" class="el-search-form-public">
        <div class="each-line">
          <el-form-item label="咨询机构名称">
            <el-input v-model="form.advisoryBodyName" placeholder="请输入咨询机构名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="最近合作时间">
            <el-date-picker v-model="form.cooperationTime" type="daterange" range-separator="至" start-placeholder="年/月/日" end-placeholder="年/月/日"
              format="yyyy/MM/dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="经营范围">
            <el-input v-model="form.businessScope" placeholder="请输入经营范围" clearable></el-input>
          </el-form-item>
        </div>
      </el-form>

      <!-- 查询重置 -->
      <div class="consulting-search-form-btn">
        <el-button type="primary" @click="searchForm(true)" class="search-btn">查询</el-button>
        <el-button @click="resetForm" class="reset-btn">重置</el-button>
      </div>

    </div>

    <!-- 列表容器 -->
    <div class="search-result-list-container">
      <div class="search-result-head-container">
        <div class="result-head-left">
          <div class="result-list-total">共 {{total}} 条</div>
        </div>
        <div class="result-head-right"></div>
      </div>

      <skeleton v-if="tableLoading"></skeleton>
      <!-- table 列表 -->
      <table-list-com ref="tableContainer" :tableData="tableDataList" :formColum="formColum" :tableDataTotal="total" :queryParams="queryParams"
        v-else-if="!tableLoading" :maxHeight="true" @handle-current-change="handleCurrentChange">
        <!-- 咨询机构名称 -->
        <template slot="advisoryBodyName" slot-scope="{data,row}">
          <div v-if="row.advisoryBodyName" class="no-line-feed" @click="viewEnterprise(row)">{{row.advisoryBodyName}}</div>
          <span v-else>-</span>
        </template>
        <!-- 合作项目数量 -->
        <template slot="cooperateProjectCount" slot-scope="{data,row}">
          <div v-if="row.cooperateProjectCount" class="no-line-feed" @click="toCooperateDetail(row)">{{row.cooperateProjectCount}}
          </div>
          <span v-else>-</span>
        </template>
        <!-- 经营范围 -->
        <template slot="businessScope" scope="{data,row}">
          <el-tooltip effect="dark" placement="top" v-if="row.businessScope" class="business-text-tooltip">
            <template slot="content">
              <div class="business-text-line">{{row.businessScope}}</div>
            </template>
            <div class="business-text-line">{{row.businessScope}}</div>
          </el-tooltip>
          <span v-else>-</span>
        </template>
      </table-list-com>

    </div>
  </div>

</template>
<script>
import TableListCom from "@/components/TableListCom";
import Skeleton from "@/components/Skeleton";
import { getConsultingOrgEenterpriseListWithSearchApi } from "@/api/consultingOrgManagement";
import { queryConditionFiltering, replaceDomTags } from "@/utils";
import { v4 } from 'uuid';
import { encodeStr } from "@/assets/js/common";
export default {
  name: "cooperationDeskAccountEnterprise",
  components: {
    TableListCom,
    Skeleton
  },
  data() {
    return {
      form: {
        // 咨询机构名称
        advisoryBodyName: "",
        // 最近合作时间
        cooperationTime: [],
        // 合作开始时间
        minLastCooperateDate: "",
        // 合作结束时间
        maxLastCooperateDate: "",
        // 经营范围
        businessScope: "",
      },
      tableLoading: false,
      fixedPropsKey: ["staticSerialNumber", "advisoryBodyName"],
      // 列表表头
      formColum: [
        { label: '序号', prop: "staticSerialNumber", type: "index", lock: true, fixed: false, uid: v4() },
        { label: '咨询机构名称', prop: 'advisoryBodyName', width: "198px", lock: true, fixed: false, slot: true, uid: v4(), showOverflowTooltip: true },
        { label: '最近一次合作时间', prop: 'lastCooperateTime', width: "201px", uid: v4() },
        { label: '经营状态', prop: 'businessStatus', minWidth: "74px", uid: v4(), showOverflowTooltip: true },
        { label: '法定代表人', prop: 'corporatePerson', width: "86px", uid: v4() },
        { label: '注册资本', prop: 'regCapital', width: "120px", uid: v4() },
        { label: '注册地区', prop: 'regArea', width: "149px", uid: v4() },
        { label: '成立日期', prop: 'registeredDate', width: "97px", uid: v4() },
        { label: '经营范围', prop: 'businessScope', width: "417px", uid: v4(), slot: true },
        { label: '合作项目数量', prop: 'cooperateProjectCount', width: "98px", uid: v4(), slot: true },
      ],
      queryParams: {
        pageSize: 50,
        pageNum: 1
      },
      tableDataList: [],
      total: 0,
      rules: {

      },
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    this.removeScrollXListen();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    async init() {
      try {
        await this.getList(this.queryParams);
      } catch (error) {

      }
    },
    toCooperateDetail(row) {
      if (!row.advisoryBodyCid) return this.$message.warning("缺少咨询机构id");
      this.$tab.openPage(`${row.advisoryBodyName}合作明细`, `/enterprise/${encodeStr(row.advisoryBodyCid)}?path=consultingAgencyCooperation&companyName=${replaceDomTags(row.advisoryBodyName)}`);
    },
    // 跳转到企业详情
    viewEnterprise(row) {
      if (!row.advisoryBodyCid) return this.$message.warning("缺少咨询机构id");
      this.$tab.openPage(row.advisoryBodyName ? row.advisoryBodyName : "咨询机构详情", `/enterprise/${encodeStr(row.advisoryBodyCid)}`);
    },
    // 创建最终查询条件
    mergeCondition() {
      const _queryParams = JSON.parse(JSON.stringify(this.queryParams));
      // 过滤条件
      const _form = queryConditionFiltering(this.form);
      // 处理时间
      if (_form?.cooperationTime?.length) {
        _form.minLastCooperateDate = _form?.cooperationTime[0];
        _form.maxLastCooperateDate = _form?.cooperationTime[1];
      }

      delete _form.cooperationTime;

      return { ..._queryParams, ..._form };
    },
    searchForm(defaultPage = false) {
      // 查询按钮从第一页查询
      if (defaultPage) {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 50;
      }
      this.getList(this.mergeCondition());
    },
    resetForm() {
      const defaultValue = this.$options.data.call(this);
      this.form = defaultValue.form;
      this.queryParams = defaultValue.queryParams;
      this.getList(this.queryParams);
    },
    async getList(params) {
      try {
        this.tableLoading = true;
        const result = await getConsultingOrgEenterpriseListWithSearchApi(params);
        if (result.code == 200) {
          this.tableDataList = result.rows ? result.rows : [];
          this.total = result.total ? result.total : 0;
        } else {
          this.$message.error(result.msg);
        }
        console.log(result);
      } catch (error) {

      } finally {
        this.tableLoading = false;
        await this.$nextTick();
        this.total ? this.$refs.tableContainer.$refs.tableRef.doLayout() : null;
        this.listenScrollX();
      }
    },
    // 表头设置变化
    async settingChange(use) {
      try {
        this.formColum = use;
      } catch (error) {

      }
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
      this.searchForm();
    },
    async listenScrollX() {
      try {
        await this.$nextTick();
        const scrollContainer = document.querySelector(".cooperation-desk-account-enterprise .el-table__body-wrapper");
        if (scrollContainer) {
          scrollContainer.removeEventListener("scroll", this.listenHandler, false);
          scrollContainer.addEventListener("scroll", this.listenHandler, false);
        }
      } catch (error) {

      }
    },
    removeScrollXListen() {
      const scrollContainer = document.querySelector(".cooperation-desk-account-enterprise .el-table__body-wrapper");
      if (scrollContainer) {
        scrollContainer.removeEventListener("scroll", this.listenHandler, false);
      }
    },
    listenHandler(e) {
      const { target } = e;
      if (target) {
        const flag = target.scrollLeft > 0 ? true : false;
        this.formColum.forEach(item => this.fixedPropsKey.includes(item.prop) ? item.fixed = flag : null);
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.cooperation-desk-account-enterprise {
  .consulting-search-form {
    background: #fff;
    padding: 16px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-sizing: border-box;
    @import "@/assets/styles/el-search-form-public.scss";

    .consulting-search-form-btn {
      padding-left: 96px;
      box-sizing: border-box;

      .el-button {
        height: 32px;
        line-height: 32px;
        text-align: center;
        padding: 0px 16px;
        box-sizing: border-box;
        border-radius: 4px;

        &.search-btn {
          background: #0081ff;
          border-color: #0081ff;
        }

        &.reset-btn {
          border: 1px solid #dcdfe6;
          color: rgba(35, 35, 35, 0.8);
          background: #fff;
          margin-left: 12px;
        }
      }
    }
  }

  .search-result-list-container {
    margin-top: 16px;
    background: #fff;
    border-radius: 4px;
    padding: 16px;
    box-sizing: border-box;
    height: calc(100% - 128px);

    @import "@/assets/styles/search-result-list-public.scss";

    ::v-deep .table-list-com-ins {
      height: calc(100% - 40px);
      margin-top: 16px;

      .pagination-box {
        padding: 0px;
        margin-top: 16px;
      }

      .business-text-line {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
