<template>
  <div class="cooperation-desk-account-project">
    <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.projectName" placeholder="请输入项目名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="咨询机构">
            <el-input v-model="form.advisoryBodyName" placeholder="请输入咨询机构名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="业主单位">
            <el-input v-model="form.ownerUnit" placeholder="请输入业主名称" clearable></el-input>
          </el-form-item>
        </div>
        <div class="each-line">
          <el-form-item label="承接项目单位">
            <el-input v-model="form.undertakeProjectUnit" placeholder="请输入承接项目单位名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="项目创建时间">
            <el-date-picker v-model="form.projectCreateTime" 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-select v-model="form.projectUndertakeType" 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" style="padding-top:16px;border-top:1px solid #EEEEEE;box-sizing:border-box">
          <el-form-item label="工程类型大类">
            <el-select v-model="form.engineeringFoundationCategory" placeholder="请选择" clearable>
              <el-option v-for="item in engineeringCategoryOptions" :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.engineeringCategoryDetail" 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="合同金额">
            <dsk-amount-range v-model="form.contractAmount" :range-text="'至'" :start-placeholder="'最小金额(万元)'"
              :end-placeholder="'最大金额(万元)'"></dsk-amount-range>
          </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">
          <!-- 表头设置 -->
          <dsk-table-header-setting :settingList="formColum" @settingChange="settingChange"></dsk-table-header-setting>
        </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>
        <!-- 业主单位 -->
        <template slot="ownerName" slot-scope="{data,row}">
          <div v-if="row.ownerName" class="no-line-feed ">{{row.ownerName}}</div>
          <span v-else>-</span>
        </template>
        <!-- 项目承接单位 -->
        <template slot="contractOrgName" slot-scope="{data,row}">
          <div v-if="row.contractOrgName" class="no-line-feed ">{{row.contractOrgName}}</div>
          <span v-else>-</span>
        </template>
        <!-- 咨询机构名称 -->
        <template slot="advisoryBodyName" slot-scope="{data,row}">
          <div v-if="row.advisoryBodyName" class="no-line-feed ">{{row.advisoryBodyName}}</div>
          <span v-else>-</span>
        </template>
      </table-list-com>

    </div>
  </div>
</template>
<script>
import DskAmountRange from "@/components/DskAmountRange";
import DskTableHeaderSetting from "@/components/DskTableHeaderSetting";
import TableListCom from "@/components/TableListCom";
import Skeleton from "@/components/Skeleton";
import { getConsultingOrgProjectListWithSearchApi } from "@/api/consultingOrgManagement";
import { queryConditionFiltering } from "@/utils";
import { v4 } from 'uuid';
export default {
  name: "cooperationDeskAccountProject",
  components: {
    DskAmountRange,
    DskTableHeaderSetting,
    TableListCom,
    Skeleton
  },
  data() {
    return {
      form: {
        // 项目名称
        projectName: "",
        // 咨询机构名称
        advisoryBodyName: "",
        // 业主单位
        ownerUnit: "",
        // 承接项目单位
        undertakeProjectUnit: "",
        // 项目创建开始时间
        projectStartTime: "",
        // 项目创建开始结束时间
        projectEndTime: "",
        // 组件时间用值
        projectCreateTime: [],
        // 项目承接类型
        projectUndertakeType: "",
        // 工程基础大类
        engineeringFoundationCategory: "",
        // 工程类别明细
        engineeringCategoryDetail: "",
        // 组件合同金额区间
        contractAmount: [],
        // 最小合同金额
        minContractAmount: "",
        // 最大合同金额
        maxContractAmount: ""
      },
      tableLoading: false,
      // 列表表头
      formColum: [
        { label: '序号', prop: "staticSerialNumber", type: "index", lock: true, fixed: false, uid: v4() },
        { label: '项目列表', prop: 'projectName', width: "220px", lock: true, fixed: false, slot: true, uid: v4(), showOverflowTooltip: true },
        { label: '项目编码', prop: 'projectCode', width: "121px", uid: v4() },
        { label: '省市', prop: 'provinceName', width: "100px", uid: v4() },
        { label: '项目承接类型', prop: 'isinvestproject', width: "100px", uid: v4() },
        { label: '工程基础大类', prop: 'projectType1', minWidth: "100px", uid: v4() },
        { label: '工程类别明细', prop: 'projectType', minWidth: "100px", uid: v4() },
        { label: '项目负责人姓名', prop: 'projectLeader', width: "110px", uid: v4() },
        { label: '项目负责人专业', prop: 'projectLeaderMajor', width: "110px", uid: v4() },
        { label: '项目负责人联系电话', prop: 'projectLeaderPhone', width: "135px", uid: v4() },
        { label: '合同金额（元）', prop: 'contractOrigValue', width: "110px", align: "right", uid: v4() },
        { label: '业主单位', prop: 'ownerName', slot: true, uid: v4(), width: "185px", showOverflowTooltip: true },
        { label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
        { label: '咨询机构名称', prop: 'advisoryBodyName', width: "172px", slot: true, uid: v4() },
        { label: '创建时间', prop: 'contractSignDate', width: "172px", uid: v4() },
      ],
      fixedPropsKey: ["staticSerialNumber", "projectName"],
      queryParams: {
        pageSize: 50,
        pageNum: 1
      },
      tableDataList: [],
      total: 0,
      rules: {

      },
      projectTypeOptions: [
        {
          value: "1",
          label: "测试1"
        },
        {
          value: "2",
          label: "测试2"
        }
      ],
      engineeringCategoryOptions: [
        {
          value: "1",
          label: "测试1"
        },
        {
          value: "2",
          label: "测试2"
        }
      ],
      engineeringCategoryDetailOptions: [
        {
          value: "1",
          label: "测试1"
        },
        {
          value: "2",
          label: "测试2"
        }
      ]
    };
  },
  //可访问data属性
  created() {
    this.init();
  },
  beforeDestroy() {
    this.removeScrollXListen();
  },
  //计算集
  computed: {

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

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

      delete _form.contractAmount;
      delete _form.projectCreateTime;

      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 getConsultingOrgProjectListWithSearchApi(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-project .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-project .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-project {
  .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% - 241px);

    @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>
