<!--
  @description: 保函管理
  @Modifier: sunxinman
  @routerPath: /fee/letterManage
  @date: 2020/03/25-16:40
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back()">
        <i class="iconfont icon-fanhui mr10" />保函管理
      </div>
    </section>
    <section class="p0-16">
      <!--查询条件-->
      <div class="crud_menu_title clearfix">
        <span class="icon-line fl">查询条件</span>
      </div>
      <section :class="{'SearchContent_show':toggleSearchStatus}" class="clearfix SearchContent">
        <div class="SearchContent_leftInput fl">
          <el-form
            ref="searchForm"
            :model="searchForm"
            inline
          >
            <!-- 公司名称 -->
            <el-form-item
              ref="tenderMethod"
              label="公司名称"
              prop="tenderMethod"
            >
              <el-input v-model.trim="searchForm.tenderName" placeholder="公司名称" />
            </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>
      </section>
      <!--查询结果-->
      <div class="crud_menu_title">
        <span class="icon-line">查询结果</span>
      </div>
      <div class="mb10">
        <el-button type="primary" @click="addGuarantee">
          添 加
        </el-button>
      </div>
      <section>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            fixed="left"
            width="60px"
            align="center"
          />
          <!-- 项目编号及名称  -->
          <el-table-column
            prop="tenderNo"
            label="项目编号及名称"
            min-width="220"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.tenderNo }}{{ scope.row.tenderName }}</span>
            </template>
          </el-table-column>
          <!-- 标段（包）编号及名称 -->
          <el-table-column
            header-align="center"
            label="标段（包）编号及名称"
            prop="packName"
            min-width="200"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.packNo }}{{ scope.row.packName }}</span>
            </template>
          </el-table-column>
          <!-- 投标人名称 -->
          <el-table-column
            header-align="center"
            prop="supplierName"
            label="投标人名称"
            min-width="150"
          />
          <!-- 金额（元） -->
          <el-table-column
            header-align="center"
            prop="amount"
            label="金额（元）"
            width="100"
            align="right"
          />
          <!-- 状态 -->
          <el-table-column
            header-align="center"
            label="状态"
            prop="useStatus"
            min-width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.useStatus==='00'">临时</span>
              <span v-if="scope.row.useStatus==='01'">正式</span>
              <span v-if="scope.row.useStatus==='02'">作废</span>
            </template>
          </el-table-column>
          <!-- 提交人 -->
          <el-table-column
            header-align="center"
            label="提交人"
            prop="createUserName"
            align="left"
            min-width="200"
          />
          <!-- 接收时间 -->
          <el-table-column
            label="接收时间"
            prop="receiveTime"
            align="center"
            min-width="110"
          >
            <template slot-scope="scope">
              {{ scope.row.receiveTime && $Moment(scope.row.receiveTime).format(momentDateTime) }}
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column
            header-align="center"
            label="操作"
            width="80"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="letterView(scope.row)">
                [查看]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination :pagination-data="paginationData" @change="loadData" />
      </section>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { getGuaranteeInfoList } from '@api/fee/bailfee'
/* 公用方法*/
import { filterObj } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { cashDepositGroupMixin } from '../../mixins/cashDepositGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页

export default {
  name: 'LetterManageList',
  components: {
    pagination// 分页
  },
  mixins: [ListMixin, cashDepositGroupMixin],
  data() {
    return {
      loading: true,
      date: '',
      // 搜索
      searchForm: {
        buyersName: '', // 招标项目编号
        stageType: '', // 标段（包）名称
        tenderMethod: '', // 标段（包）状态
        tenderName: '', // 资格审查方式
        tenderNo: '', // 项目经理
        tenderType: ''// 业务部门
      },
      tableData: []
    }
  },
  created() {
    // 获取列表信息
    this.loadData()
  },
  methods: {
    // 获取数据
    loadData() {
      const params = this.getQueryParams()// 查询条件
      getGuaranteeInfoList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {

      })
    },
    // 查询条件
    getQueryParams() {
      const param = Object.assign({}, this.searchForm)
      param.pageNo = this.paginationData.pageNo
      param.pageSize = this.paginationData.pageSize
      param.packId = this.$route.params.packId // 标段ID
      return filterObj(param)
    },
    // 搜索
    onSearch() {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      // 获取列表信息
      this.loadData()
    },
    // 重置
    resetForm(formName) {
      this.paginationData.pageNo = 1
      this.paginationData.pageSize = 10
      this.$refs[formName].resetFields()
      // 获取列表信息
      this.loadData()
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/cashDepositManage'
      })
    },
    // 查看保函
    letterView(row) {
      this.$router.push({
        path: '/fee/letterDetail',
        name: 'LetterDetail',
        params: {
          ...this.$route.params,
          guaranteeId: row.guaranteeId // 保函ID
        }
      })
    },
    // 添加保函
    addGuarantee() {
      this.$router.push({
        path: '/fee/letterAdd',
        name: 'LetterAdd',
        params: {
          ...this.$route.params
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
