<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.consultingAgency" placeholder="请输入咨询机构名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="业主单位">
            <el-input v-model="form.ownerName" placeholder="请输入业主名称" clearable></el-input>
          </el-form-item>
        </div>
        <div class="each-line">
          <el-form-item label="承接项目单位">
            <el-input v-model="form.undertakingUnit" 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.prjectType" 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.engineeringCategory" 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.engineeringCategoryDeatil" 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" 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}">
          <span v-if="row.projectName" class="no-line-feed ">{{row.projectName}}</span>
          <span v-else>-</span>
        </template>
        <!-- 业主单位 -->
        <template slot="ownerName" slot-scope="{data,row}">
          <span v-if="row.ownerName" class="no-line-feed ">{{row.ownerName}}</span>
          <span v-else>-</span>
        </template>
        <!-- 项目承接单位 -->
        <template slot="contractOrgName" slot-scope="{data,row}">
          <span v-if="row.contractOrgName" class="no-line-feed ">{{row.contractOrgName}}</span>
          <span v-else>-</span>
        </template>
        <!-- 咨询机构名称 -->
        <template slot="advisoryBodyName" slot-scope="{data,row}">
          <span v-if="row.advisoryBodyName" class="no-line-feed ">{{row.advisoryBodyName}}</span>
          <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 { v4 } from 'uuid';
export default {
  name: "cooperationDeskAccountProject",
  components: {
    DskAmountRange,
    DskTableHeaderSetting,
    TableListCom,
    Skeleton
  },
  data() {
    return {
      form: {
        projectName: "",
        consultingAgency: "",
        ownerName: "",
        undertakingUnit: "",
        projectCreateTime: [],
        prjectType: "",
        engineeringCategory: "",
        engineeringCategoryDeatil: "",
        contractAmount: []
      },
      tableLoading: false,
      // 列表表头
      formColum: [
        { label: '序号', type: "index", lock: true, fixed: true, uid: v4() },
        { label: '项目列表', prop: 'projectName', width: "220px", lock: true, slot: true, uid: v4() },
        { label: '项目编码', prop: 'projectCode', width: "121px", uid: v4() },
        { label: '省市', prop: 'provinceName', width: "100px", uid: v4() },
        { label: '项目承接类型', prop: 'isinvestproject', width: "100px", uid: v4() },
        { label: '工程基础大类', prop: 'projectType1', width: "100px", uid: v4() },
        { label: '工程类别明细', prop: 'projectType', width: "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() },
        { label: '项目承接单位', prop: 'contractOrgName', width: "196px", slot: true, uid: v4() },
        { label: '咨询机构名称', prop: 'advisoryBodyName', width: "172px", slot: true, uid: v4() },
        { label: '创建时间', prop: 'loadTime', width: "172px", uid: v4() },
      ],
      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.getList();
  },
  //计算集
  computed: {

  },
  //方法集
  methods: {
    searchForm() {

    },
    resetForm() {
      const defaultValue = this.$options.data.call(this);
      this.form = defaultValue.form;
      this.queryParams = defaultValue.queryParams;
    },
    async getList() {
      try {
        this.tableLoading = true;
        const result = await getConsultingOrgProjectListWithSearchApi(this.queryParams);
        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.$refs.tableContainer.$refs.tableRef.doLayout();
      }
    },
    async settingChange(use) {
      try {
        this.formColum = use;
      } catch (error) {

      }
    },
    handleCurrentChange(page) {

    }
  },
}
</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>
