<template>
  <div class="details-of-cooperation default-layout-container">
    <div class="default-layout-container-inner">
      <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-cascader ref="areaTree" v-model="form.provinceName" @change="handleChange" :options="areaDataList" placeholder="请选择" clearable
                :props="cascaderOptions"></el-cascader>
            </el-form-item>
            <el-form-item label="项目承接类型">
              <el-select v-model="form.isinvestproject" placeholder="请选择" clearable>
                <el-option v-for="item in projectTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工程类型大类">
              <el-select v-model="form.projectType1" placeholder="请选择" clearable>
                <el-option v-for="item in projectTypeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="each-line special-line">
            <el-form-item label="工程类别明细">
              <el-select v-model="form.projectType" placeholder="请选择" clearable>
                <el-option v-for="item in engineeringCategoryDetailOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="关键字搜索">
              <el-input v-model="form.projectName" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <!-- 查询重置 -->
            <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>
        </el-form>
      </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" :height="'100%'" @handle-current-change="handleCurrentChange">
          <!-- 项目列表 -->
          <template slot="projectName" slot-scope="{data,row}">
            <div v-if="row.projectName" class="no-line-feed ">{{row.projectName}}</div>
            <span v-else>-</span>
          </template>
        </table-list-com>

      </div>
    </div>
  </div>
</template>
<script>
import TableListCom from "@/components/TableListCom";
import Skeleton from "@/components/Skeleton";
import { getConsultingOrgEenterpriseDetailWithSearchApi } from "@/api/consultingOrgManagement";
import { queryConditionFiltering, getTreeSelectAreaList } from "@/utils";
import { v4 } from 'uuid';
export default {
  name: "detailsOfCooperation",
  components: {
    TableListCom,
    Skeleton
  },
  data() {
    return {
      form: {
        // 项目地区
        provinceName: "",
        // 承接项目类型
        isinvestproject: "",
        // 工程类型大类
        projectType1: "",
        // 工程类别明细
        projectType: "",
        // 项目关键字搜索
        projectName: ""
      },
      tableLoading: false,
      fixedPropsKey: ["staticSerialNumber", "advisoryBodyName"],
      // 列表表头
      formColum: [
        { label: '序号', prop: "staticSerialNumber", type: "index", lock: true, fixed: false, uid: v4() },
        { label: '项目列表', prop: 'projectName', width: "222px", lock: true, fixed: false, slot: true, uid: v4(), showOverflowTooltip: true },
        { label: '合同编码', prop: 'projectCode', width: "123px", uid: v4() },
        { label: '省市', prop: 'provinceName', width: "102px", uid: v4() },
        { label: '项目承接类型', prop: 'isinvestproject', width: "102px", uid: v4() },
        { label: '工程基础大类', prop: 'projectType1', width: "98px", uid: v4() },
        { label: '工程类别明细', prop: 'projectType', width: "98px", uid: v4() },
        { label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4() },
        { label: '项目负责人专业', prop: 'projectLeaderMajor', width: "110px", uid: v4() },
        { label: '项目负责人联系电话', prop: 'projectLeaderPhone', width: "134px", uid: v4() },
      ],
      queryParams: {
        pageSize: 20,
        pageNum: 1,
        // 咨询机构ID
        advisoryBodyCid: "",
      },
      tableDataList: [],
      total: 0,
      rules: {

      },
      projectTypeOptions: [],
      engineeringCategoryOptions: [
        {
          value: "1",
          label: "测试1"
        },
        {
          value: "2",
          label: "测试2"
        }
      ],
      engineeringCategoryDetailOptions: [
        {
          value: "1",
          label: "测试1"
        },
        {
          value: "2",
          label: "测试2"
        }
      ],
      // 三级联动配置项
      cascaderOptions: {
        label: "value",
        value: "value",
        multiple: true,
        checkStrictly: true
      }
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    this.removeScrollXListen();
  },
  //计算集
  computed: {
    areaDataList() {
      return JSON.parse(JSON.stringify(this.$store.state.user.areaArrayList));
    }
  },
  //方法集
  methods: {
    async init() {
      try {
        if (!this.$routes?.params?.advisoryBodyCid) return this.$message.error("缺少咨询机构Id");
        this.queryParams.advisoryBodyCid = !this.$routes?.params?.advisoryBodyCid;
        await this.getList(this.queryParams);
      } catch (error) {

      }
    },
    // 创建最终查询条件
    mergeCondition() {
      const _queryParams = JSON.parse(JSON.stringify(this.queryParams));
      // 过滤条件
      const _form = queryConditionFiltering(this.form);
      // 处理时间
      if (_form?.cooperationTime?.length) {
        _form.projectStartTime = _form?.projectCreateTime[0];
        _form.projectEndTime = _form?.projectCreateTime[1];
      }

      delete _form.cooperationTime;

      return { ..._queryParams, ..._form };
    },
    searchForm(defaultPage = false) {
      // 查询按钮从第一页查询
      if (defaultPage) {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 20;
      }
      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 getConsultingOrgEenterpriseDetailWithSearchApi(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);
      }
    },
    handleChange(params) {
      const selectNode = this.$refs?.areaTree?.getCheckedNodes();
      if (selectNode?.length) {
        const nodeValueList = selectNode.map(item => item.value);
        console.log(nodeValueList);
        console.log(getTreeSelectAreaList(nodeValueList, this.areaDataList, "value"));
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.details-of-cooperation {
  .default-layout-container-inner {
    .consulting-search-form {
      background: #fff;
      padding: 16px;
      border-radius: 4px;
      box-sizing: border-box;
      @import "@/assets/styles/el-search-form-public.scss";

      .special-line {
        display: flex;
        align-items: center;
        .el-form-item {
          margin-bottom: 0px;
        }
      }

      .consulting-search-form-btn {
        width: 364px;
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;

        .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% - 80px);
        margin-top: 16px;

        .pagination-box {
          padding: 0px;
          margin-top: 16px;
        }
      }
    }
  }
}
</style>
