<!--
  @description:采购立项-供应商-可参与项目
  @Modifier:gmy
  @routerPath:/proEnquiry/projectPaticipation // 询价
  @routerPath:/proSinglesource/projectPaticipation // 单一来源
  @routerPath:/proCompetitive/projectPaticipation // 竞谈
  @routerPath:/proOurtcy/projectPaticipation 竞价
  @date:2020/8/10-13:10
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />可参与项目（{{ $route.meta.tenderMethodText }}）
    </div>
    <section class="p0-16">
      <!--查询条件-->
      <div class="crud_menu_title clearfix">
        <span class="icon-line fl">查询条件</span>
        <span class="fr pointer" @click="handleToggleSearch">
          <el-link
            :underline="false"
            :class="toggleSearchStatus?'arrow-is-active':''"
            type="primary"
            class="toggleSearchStatus icon el-icon-arrow-down"
          />
          {{ toggleSearchStatus?'收起高级查询' :'展开高级查询' }}
        </span>
      </div>
      <div :class="{'SearchContent_show':toggleSearchStatus}" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            :inline="true"
            label-width="98px"
            label-position="right"
          >
            <el-form-item ref="tenderNo" label="采购项目编号" prop="tenderNo">
              <el-input
                v-model.trim="searchForm.tenderNo"
                placeholder="请输入采购项目编号"
                style="width:204px"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <el-form-item ref="tenderNo" label="采购项目名称" prop="tenderNo">
              <el-input
                v-model.trim="searchForm.tenderName"
                placeholder="请输入采购项目名称"
                style="width:204px"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!--采购执行单位-->
            <el-form-item
              ref="projectBuyersName"
              label="采购执行单位"
              prop="projectBuyersName"
            >
              <el-input
                v-model.trim="searchForm.projectBuyersName"
                placeholder="请输入采购执行单位名称"
                style="width:204px"
                @keyup.enter.native="onSearch"
              />
            </el-form-item>
            <!--报价截止时间-->
            <el-form-item
              label="报价截止时间"
            >
              <el-date-picker
                v-model="searchForm.quoteEndTimeBegin"
                :format="elValueFormatDate"
                :value-format="elValueFormatDate"
                type="date"
                placeholder="开始日期"
                style="width:15vw"
              />
              至
              <el-date-picker
                v-model="searchForm.quoteEndTimeEnd"
                :format="elValueFormatDate"
                :value-format="elValueFormatDate"
                type="date"
                placeholder="结束日期"
                style="width:15vw"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="fr">
          <el-button type="primary" @click="onSearch">
            搜 索
          </el-button>
          <el-button plain type="info" @click="resetForm('searchForm')">
            重 置
          </el-button>
        </div>
      </div>
      <!--响应内容-->
      <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
        <el-tab-pane v-if="$route.meta.tenderMethod!=='12'" name="first">
          <span slot="label">采购公告({{ paginationDataF.total }})</span>
          <div>
            <el-table
              ref="smallTable"
              :data="tableDataF"
              class="tableLimit procurement_table"
              width="100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60px"
                align="center"
              />
              <el-table-column
                header-align="center"
                align="left"
                label="采购项目编号/名称"
                min-width="230"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.tenderNo }}</p>
                  <p>{{ scope.row.tenderName }}</p>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                prop="projectBuyersName"
                label="采购执行单位"
                width="180"
                align="center"
              />
              <el-table-column
                header-align="center"
                label="采购方式"
                width="180"
                align="center"
              >
                <template slot-scope="scope">
                  <p>{{ filterDictText(tender_methodList,scope.row.tenderMethod ) }}</p>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                label="公告发布时间"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  {{ scope.row.bulletinPushTime && $Moment(scope.row.bulletinPushTime).format(momentDateTime) }}
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                label="报价截止日期"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <p>
                    {{ $Moment(scope.row.quoteEndTime).format(momentDateTime) }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                label="操作"
                width="180"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link
                    :underline="false"
                    size="mini"
                    type="primary"
                    @click="participationProject(scope.row)"
                  >
                    [参与项目]
                  </el-link>
                  <el-link
                    :underline="false"
                    size="mini"
                    type="primary"
                    @click="lookNotice(scope.row)"
                  >
                    [查看公告]
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination :pagination-data="paginationDataF" @change="loadDataF" />
          </div>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label">邀请函({{ paginationDataA.total }})</span>
          <div>
            <el-table
              ref="smallTable"
              :data="tableDataA"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60px"
                align="center"
              />
              <el-table-column
                header-align="center"
                align="left"
                label="采购项目编号/名称"
                min-width="230"
              >
                <template slot-scope="scope">
                  <p>{{ scope.row.tenderNo }}</p>
                  <p>{{ scope.row.tenderName }}</p>
                </template>
              </el-table-column>
              <el-table-column
                label="采购执行单位"
                min-width="110"
                header-align="center"
                align="left"
              >
                <template slot-scope="scope">
                  <span>
                    <!-- 采购单位多出省略 -->
                    {{ procurementUnitOmit(scope.row.projectBuyersName) }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                header-align="center"
                label="采购方式"
                width="180"
                align="center"
              >
                <template slot-scope="scope">
                  <p>{{ filterDictText(tender_methodList,scope.row.tenderMethod ) }}</p>
                </template>
              </el-table-column>
              <el-table-column
                v-if="$route.meta.tenderMethod !== '12'"
                header-align="center"
                label="邀请函发布时间"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  {{ scope.row.invitationPublishTime && $Moment(scope.row.invitationPublishTime).format(momentDateTime) }}
                </template>
              </el-table-column>
              <!--   单一来源无报价截止时间有报价发布时间-->
              <el-table-column
                v-if="$route.meta.tenderMethod !== '12'"
                header-align="center"
                label="报价截止日期"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <p v-if="scope.row.quoteEndTime">
                    {{ $Moment(scope.row.quoteEndTime).format(momentDateTime) }}
                  </p>
                </template>
              </el-table-column>
              <el-table-column
                v-if="$route.meta.tenderMethod === '12'"
                header-align="center"
                label="发布时间"
                align="center"
                width="200"
              >
                <template slot-scope="scope">
                  <p v-if="scope.row.invitationPublishTime">
                    {{ $Moment(scope.row.invitationPublishTime).format(momentDateTime) }}
                  </p>
                </template>
              </el-table-column>

              <el-table-column
                header-align="center"
                label="操作"
                width="230"
                align="center"
              >
                <template slot-scope="scope">
                  <el-link
                    :underline="false"
                    size="mini"
                    type="primary"
                    @click="acceptnvitation(scope.row)"
                  >
                    [接受邀请]
                  </el-link>
                  <el-link
                    :underline="false"
                    size="mini"
                    type="primary"
                    @click="lookInvitation(scope.row)"
                  >
                    [查看邀请函]
                  </el-link>
                </template>
              </el-table-column>
            </el-table>
            <!--分页组件-->
            <pagination :pagination-data="paginationDataA" @change="loadDataA" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { canParticipateInTheProjectPage } from '@/api/procurement/procurementProject'//  供应商报名可参与列表
import { refuseInvitationAsk } from '@/api/procurement/procurementInvitation'//  供应商报名可参与列表
/* 公用方法*/
import { filterObj, filterDictText, restoreInitialValue } from '@/assets/js/utils'// 常用方法
import { procurementUnitOmit } from '@/assets/js/procurement' // 采购单位名称多出...显示

/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { initGroupMixin } from '@/mixins/initGroupMixin'// 字典信息
import { commonMxin } from '@/mixins/commonMxin'// 字典信息
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
/* 混合开发*/
import { procurementProjectGroupMixin } from '@/views/procurement/procurementProject/mixins/procurementProjectGroupMixin'// 立项采购-字典
import { procurementProjectMixins } from '@/views/procurement/procurementProject/mixins/procurementProjectMixins'// 立项采购-公用方法参数

export default {
  name: 'ProjectManagerTenderList',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin, initGroupMixin, commonMxin, procurementProjectGroupMixin, procurementProjectMixins],
  data() {
    return {
      activeName: 'first',
      loading: true,
      participationDate: [], // 可参与项目时间器
      value: '',
      // 搜索
      searchForm: {
        tenderNo: '', // 采购项目编号
        tenderName: '', // 采购名称
        tenderMethod: this.$route.meta.tenderMethod, // 获取采购方式
        quoteEndTimeBegin: '', // 创建开始时间
        quoteEndTimeEnd: '', // 创建结束时间
        projectBuyersName: '' // 采购执行单位
      },
      // 切换字段
      state: '01',
      tableDataF: [], // 公告数据
      tableDataA: [], // 邀请数据
      projectBuyersName: '' // 采购单位
    }
  },
  watch: {
    // 监听路由meta中tenderMethod值的变化
    '$route.meta.tenderMethod': {
      handler(newVal, oldVal) {
        this.searchForm.tenderMethod = newVal
        // 获取列表信息
        if (newVal === '12') {
          this.activeName = 'second'
          this.loadDataA() // 调用邀请函数据方法
        } else {
          this.loadDataA() // 调用邀请函数据方法
          this.loadDataF() // 调用采购公告数据方法
        }
      },
      deep: true
    },
    // 供应商可参与项目的时间监听
    participationDate(val) {
      this.searchForm.createTimeBegin = val[0]
      this.searchForm.createTimeEnd = val[1]
    }
  },
  created() {
  // 查询项目状态
    this.inCodes()
    // 字典信息
    this.initWebTypeGroup()
    // 获取列表信息
    if (this.$route.meta.tenderMethod === '12') {
      this.activeName = 'second'
      this.loadDataA() // 调用邀请函数据方法
    } // 调用采购公告数据方法
    this.loadDataA() // 调用邀请函数据方法
    this.loadDataF()
  },
  methods: {
    filterDictText, // 数据字典
    procurementUnitOmit,
    // -----------------dom操作事件--------------
    // 参与项目按钮 根据 tenderMethod字段判断进入的竞价与非竞价页面
    participationProject(row) {
      this.$router.push({
        path: '/procurement/procurementContactsApply',
        query: {
          packId: row.packId, // 标段Id
          tenderMethod: row.tenderMethod,
          check: '01' // 01 表示可参与项目
        }
      })
    },
    // 可参与项目-查看公告
    lookNotice(row) {
      // 标段Id的容错处理
      if (row.packId) {
        this.$router.push({
          path: '/procurement/procurementNotice',
          query: {
            packId: row.packId, // 标段ID
            bizId: row.bizId, // Id
            tenderType: row.tenderType, // 采购方式
            tenderMethod: row.tenderMethod
          }
        })
      } else {
        this.$message({
          message: '缺少参数',
          type: 'success'
        })
      }
    },
    // 接受邀请函
    acceptnvitation(row) {
      this.$router.push({
        path: '/procurement/procurementContactsApply',
        query: {
          packId: row.packId, // 标段Id
          tenderMethod: row.tenderMethod,
          check: '01' // 01 表示可参与项目
        }
      })
    },
    // 拒绝邀请函
    refuseInvitation(row) {
      const data = {
        id: row.bizId,
        packId: row.packId,
        invitationStateType: '00'
      }
      this.$confirm('拒绝之后将不能再次参与本项目，确认拒绝吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        this.refuseInvitationData(data)
      }).catch(() => {
      })
    },
    // 查看邀请函
    lookInvitation(row) {
      this.$router.push({
        path: '/procurement/invitation',
        query: {
          bizId: row.bizId, // 邀请函主键id
          packId: row.packId, // 标段id
          invitationStateType: '00', // 邀请函状态 00拒绝 01接受 02待接受
          tenderType: row.tenderType,
          tenderMethod: row.tenderMethod // 根据采购方式判断跳转竞价与非竞价 14 公开竞价 15 邀请竞价 跳转竞价页面
        }
      })
    },
    // ---------------------------------api ---------------------------
    // 获取数据-cai
    loadDataF() {
      this.state = '01'
      // 采购公告
      const params = this.getQueryParam()// 查询条件
      canParticipateInTheProjectPage(params).then(response => {
        this.loading = false
        // 获取采购公告数据列表
        this.tableData = response.data.results
        this.paginationDataF.total = response.data.total
        this.tableDataF = response.data.records
      }).catch(() => {
      })
    },
    // 获取数据-邀请函
    loadDataA() {
      this.state = '02'
      // 邀请含
      const params = this.getQueryParams()// 查询条件
      canParticipateInTheProjectPage(params).then(response => {
        this.loading = false
        // 获取邀请函数据列表
        this.tableData = response.data.results
        this.tableDataA = response.data.records
        this.paginationDataA.total = response.data.total
      }).catch(() => {
      })
    },
    // 公告查询条件
    getQueryParam() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationDataF.pageNo
      param.pageSize = this.paginationDataF.pageSize
      param.state = '01'
      return filterObj(param)
    },
    // 邀请函查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationDataA.pageNo
      param.pageSize = this.paginationDataA.pageSize
      param.state = '02'
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      if (this.activeName === 'first') {
        this.tableDataF = []
        this.loadDataF()
      } else {
        this.tableDataA = []
        this.loadDataA()
      }
    },
    // 切换标题
    handleClick(name) {

    },
    // 重置按钮
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      restoreInitialValue(this.searchForm) // 清空表单数据
      this.searchForm.quoteEndTimeBegin = '' // 报价截止开始时间
      this.searchForm.quoteEndTimeBegin = '' // 报价截止结束时间
      this.searchForm.tenderMethod = this.$route.meta.tenderMethod // 清空采购方式
      if (this.activeName === 'first') {
        // 初始化请求数据
        this.tableDataF = []
        // 查询采购公告方法
        this.loadDataF()
      } else {
        // 初始化请求数据
        this.tableDataA = []
        // 查询邀请函方法
        this.loadDataA()
      }
    },
    // 拒绝邀请函请求
    refuseInvitationData(data) {
      refuseInvitationAsk(data).then(res => {
        // 删除成功后重新查询邀请函接口
        this.loadDataA()
      }).catch(() => {

      })
    }
  },
  // 路由生命钩子动态修改前往路由的meta中的path值
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    // 动态修改前往路由的meta中的path
    // 前往路由的path为空时在获取
    // 跳转联系人报名信息页面是需要动态切换meta的path路径 pathType 01 标记为联系人登录页面
    if (to.meta.pathType === '01') {
      to.meta.path = from.meta.path
    }
    next()
  }
}
</script>
<style lang="less" scoped>

</style>
