<!--
 * @Author: wanglj 471442253@qq.com
 * @Date: 2022-12-15 11:16:25
 * @LastEditors: wanglj
 * @LastEditTime: 2022-12-15 16:04:09
 * @Description: file content
 * @FilePath: \opms_frontend\src\views\opportunity\all.vue
-->
<template>
  <div class="opportunity-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus"
                   type="primary">
          添加
        </el-button>
        <el-button icon="el-icon-delete">
          转移商机
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="12">
        <el-form :inline="true"
                 :model="queryForm"
                 @submit.native.prevent>
          <el-form-item>
            <el-input v-model.trim="queryForm.userName"
                      clearable
                      placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search"
                       type="primary"
                       @click="fetchData">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table v-loading="listLoading"
              :data="list"
              height="calc(100vh - 295px)"
              @selection-change="setSelectRows">
      <el-table-column show-overflow-tooltip
                       type="selection" />
      <el-table-column align="center"
                       label="商机标题"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="关联客户"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="审批状态"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="商机状态"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="商机类别"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="商机金额"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="最后跟进"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="下次联系时间"
                       prop=""></el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="text"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background
                   :current-page="queryForm.pageNum"
                   :layout="layout"
                   :page-size="queryForm.pageSize"
                   :total="total"
                   @current-change="handleCurrentChange"
                   @size-change="handleSizeChange" />
  </div>
</template>

<script>
export default {
  name: 'OpportunityAll',
  data () {
    return {
      listLoading: false,
      layout: 'total, sizes, prev, pager, next, jumper',
      list: [],
      queryForm: {
        pageSize: 10,
        pageNum: 1
      },
      total: 0,
      selectRows: []
    }
  },
  computed: {
    height () {
      return this.$baseTableHeight(1)
    },
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    async fetchData () {
      this.listLoading = true
      this.list = [
        { id: 1 }
      ]
      this.listLoading = false
    },
    handleSizeChange (val) {
      this.queryForm.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.queryForm.pageNum = val
      this.fetchData()
    },
    setSelectRows (val) {
      this.selectRows = val
    },
  }
}
</script>

<style lang="scss" scoped>
$base: '.opportunity';
#{$base}-container {
}
</style>
