<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>三嫂数据</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->
    <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="销售业绩" name="1">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery1">
                           <el-form-item label="合同编号">
                        <el-input v-model="listQuery1.contractNo" placeholder="合同编号" clearable></el-input>
                    </el-form-item>
                       <el-form-item label="客户姓名">
                        <el-input v-model="listQuery1.customerName" placeholder="客户姓名" clearable></el-input>
                    </el-form-item>
                                       <el-form-item label="线索编号">
                        <el-input v-model="listQuery1.leadNo" placeholder="线索编号" clearable></el-input>
                    </el-form-item>
                     <el-form-item label="订单编号">
                        <el-input v-model="listQuery1.orderNo" placeholder="订单编号" clearable></el-input>
                    </el-form-item>
                     <el-form-item label="跟进人姓名">
                        <el-input v-model="listQuery1.followName" placeholder="跟进人姓名" clearable></el-input>
                    </el-form-item>
  
          <el-form-item label="服务模式">
              <el-select
      v-model="listQuery1.serviceModel"
      clearable
     
      placeholder="服务模式"
    >
      <el-option v-for="(value,key) in servantModelList" :key="key" :label="value" :value="key"></el-option>
    </el-select>
        
          </el-form-item>
          
  <el-form-item label="合同状态">
            
      <el-select
      v-model="listQuery1.state"
      placeholder="合同状态"
      clearable
     
    >
      <el-option value="1" label="待签署"></el-option>
      <el-option value="2" label="已签署（待审核）"></el-option>
      <el-option value="3" label="已取消"></el-option>
      <el-option value="4" label="签署完成"></el-option>
    </el-select>
    
        
          </el-form-item>
        
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch1">查询</el-button>
             <el-button type="primary" icon="el-icon-download" @click="downloadServant1" v-per="'nannyDataDownload1'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->

        <el-table :data="listData1" border style="width: 100%" class="table">
          <el-table-column prop="leadId" label="线索id"  width="50px" fixed="left"></el-table-column>
          <el-table-column prop="leadNo" label="线索编号" width="120px" ></el-table-column>
          <el-table-column prop="contractNo" label="合同编号"  ></el-table-column>
          <el-table-column prop="sourceName" label="来源名称"  ></el-table-column>
          <el-table-column prop="orderNo" label="订单编号" ></el-table-column>
          <el-table-column prop="serviceModel" label="服务模式"></el-table-column>
         <el-table-column prop="createTime" label="创建日期"></el-table-column>
         <el-table-column prop="state" label="合同状态"></el-table-column>
         <el-table-column prop="payFee" label="订单关联凭证支付金额"></el-table-column>
         <el-table-column prop="contractFee" label="居间服务费用"></el-table-column>
         <el-table-column prop="refundFee" label="订单关联凭证退款金额"></el-table-column>
         <el-table-column prop="serviceBeginDate" label="服务开始日期"></el-table-column>
         <el-table-column prop="serviceEndDate" label="服务结束日期"></el-table-column>
         <el-table-column prop="resignDate" label="解约时间"></el-table-column>
         <el-table-column prop="firstShanghuDate" label="首次上户时间"></el-table-column>
         <el-table-column prop="createUserName" label="跟进人"></el-table-column>
         <el-table-column prop="customerName" label="客户姓名"></el-table-column>
         <el-table-column prop="approveTime" label="审核时间"></el-table-column>

          <!-- <el-table-column prop="effectiveDistribution" label="是否有效分配">
              <template slot-scope="scope">
              <span v-if="scope.row.effectiveDistribution==1">是</span>
              <span v-if="scope.row.effectiveDistribution==0">否</span>
            </template>
          </el-table-column> -->

        </el-table>

        <!-- 分页 -->
        <pagination
          :total="total1"
          :page.sync="currentPage1"
          :limit.sync="pageSize1"
          @pagination="querySearch1"
        />
      </el-tab-pane>
    
    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
import commutil from "@/components/common/globaldata/commutil.data.vue";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: { Pagination },
  data() {
    return {
      activeTab:'1',
       listData1: [],
      total1: 0,
      pageSize1: 20,
      currentPage1: 1, //当前页
      listQuery1: {
        contractNo: "",
        customerName:'',
        leadNo:'',
        orderNo:'',
        followName:'',
        serviceModel:'',
        state:'',
        
      },
     
      servantModelList:commutil.serviceModelMap,
     
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
 
   
  
    this.querySearch1();
  
  },
  methods: {
       querySearch1() {
      let temp=this.listQuery1;
      temp.pageNo=this.currentPage1;
      temp.pageSize=this.pageSize1;
      temp.exportFlag=false;
      Service.$axiosSansaoContractList(temp)
        .then(res => {
          this.listData1 = res.data.data.list;
          this.total1 = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
 
     downloadServant1() {
       let temp=this.listQuery1;
       temp.exportFlag=true;
       Service.$axiosSansaoContractListExport(temp)
  
    },
    handleTabClick(tab){

    },
 
 

  }
};
</script>
<style>
.crumbs {
  margin: 0 0 10px 0; 
}
</style>