<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">
      <el-tab-pane label="线索">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery1">
          <el-form-item label="城市">
            <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" multiple>
              <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item.dataName"
                :value="item.dataName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="保姆来源">
            <el-select v-model="listQuery1.resource" placeholder="请选择保姆来源" clearable>
              <el-option
                v-for="(item,index) in resourceList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="服务模式">
            <el-select v-model="listQuery1.serviceModel" placeholder="请选择服务模式" clearable>
              <el-option
                v-for="(item,index) in servantModelList"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>
          

          <el-form-item label="时间段">
            <el-date-picker
              v-model="listQuery1.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </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="'downloadServant1'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData1" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="clueNo" label="线索编号" width="120px" fixed="left"></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="serviceModel" label="服务模式"></el-table-column>
          <el-table-column prop="resource" label="保姆来源"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>
          <el-table-column prop="difference" 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-column prop="clueAllcationName" label="线索合伙人"></el-table-column>
          <el-table-column prop="allocationTime" label="分配日期"></el-table-column>
          <el-table-column prop="month" label="月份"></el-table-column>
          <el-table-column prop="createTime" label="创建日期"></el-table-column>
        </el-table>

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

            <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery2">
          <el-form-item label="城市">
            <el-select
              v-model="listQuery2.city"
              clearable
              placeholder="请选择城市"
             multiple
            >
              <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item.dataName"
                :value="item.dataName"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="服务站">
            <el-select v-model="listQuery2.serviceStation" clearable placeholder="请选择门店">
              <el-option
                v-for="(item,index) in stationList2"
                :key="index"
                :label="item.dataName"
                :value="item.dataName"
              ></el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item label="时间段">
            <el-date-picker
              v-model="listQuery2.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch2">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadServant2" v-per="'downloadServant2'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData2" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="city" label="城市" ></el-table-column>
          <el-table-column prop="creat_name" label="合伙人"></el-table-column>
          <el-table-column prop="clue_count" label="线索数"></el-table-column>
          <el-table-column prop="sign_count" label="签单量"></el-table-column>
          <el-table-column prop="total_pay" label="金额"></el-table-column>
          <el-table-column prop="inverst_rate" label="转化率"></el-table-column>
          <el-table-column prop="avg_price" label="均价"></el-table-column>
          <el-table-column prop="clue_effic" label="线索效率"></el-table-column>
          <el-table-column prop="sign_day" label="签单时长"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="total2"
          :page.sync="currentPage2"
          :limit.sync="pageSize2"
          @pagination="querySearch2"
        />
       </el-tab-pane>
       <el-tab-pane label="保姆签单">
           <el-form :inline="true" size="small" v-model="listQuery3">
          <el-form-item label="城市">
            <el-select v-model="listQuery3.city" clearable placeholder="请选择城市" multiple>
              <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item.dataName"
                :value="item.dataName"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
          <el-select v-model="listQuery3.remark" placeholder  clearable>
            <el-option label="补充" value="补充"></el-option>
            <el-option label="更换" value="更换"></el-option>
            <el-option label="新签" value="新签"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务模式">
            <el-select v-model="listQuery3.serviceModel" placeholder="请选择服务模式" clearable>
              <el-option
                v-for="(item,index) in servantModelList"
                :key="index"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="时间段">
            <el-date-picker
              v-model="listQuery3.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch3">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadServant3" v-per="'downloadServant3'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData3" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="clueNo" label="线索编号" width="120px" fixed="left"></el-table-column>
          <el-table-column prop="orderNo" label="订单编号" ></el-table-column>
          <el-table-column prop="contractNo" label="合同编号"  ></el-table-column>
          <el-table-column prop="city" label="城市"></el-table-column>
          <el-table-column prop="serviceModel" label="服务模式"></el-table-column>
          <el-table-column prop="resource" label="保姆来源"></el-table-column>
          <el-table-column prop="customerName" label="客户姓名"></el-table-column>
          <el-table-column prop="contractState" label="合同状态"></el-table-column>
          <el-table-column prop="contractAmount" label="合同金额"></el-table-column>
          <el-table-column prop="payMount" label="支付金额"></el-table-column>
          <el-table-column prop="payMount" label="合同有效期">
             <template slot-scope="scope">
              <span>{{scope.row.startDate}} 至 {{scope.row.endDate}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="firstDate" label="首次上门日期"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column prop="approvalData" label="审核日期"></el-table-column>
          <el-table-column prop="creatName" label="创建人"></el-table-column>
          <el-table-column prop="createTime" label="创建日期"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="total3"
          :page.sync="currentPage3"
          :limit.sync="pageSize3"
          @pagination="querySearch3"
        />


       </el-tab-pane>
       <el-tab-pane label="支付记录">
           <el-form :inline="true" size="small" v-model="listQuery4">

          <el-form-item label="时间段">
            <el-date-picker
              v-model="listQuery4.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" plan @click="querySearch4">查询</el-button>
            <el-button type="primary" icon="el-icon-download" @click="downloadServant4" v-per="'downloadServant4'">导出</el-button>
          </el-form-item>
        </el-form>

        <!-- 列表数据 -->
        <el-table :data="listData4" border style="width: 100%" class="table">
          <el-table-column prop="index" label="序号" type="index" width="50px" fixed="left"></el-table-column>
          <el-table-column prop="orderNo" label="订单编号" width="180px" fixed="left"></el-table-column>
          <el-table-column prop="revenueType" label="收款类型" ></el-table-column>
          <el-table-column prop="payId" label="支付单号"></el-table-column>
          <el-table-column prop="payType" label="支付类型"></el-table-column>
          <el-table-column prop="amount" label="支付金额"></el-table-column>

          <el-table-column prop="createUser" label="创建人"></el-table-column>
          <el-table-column prop="addTime" label="创建日期"></el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination
          :total="total4"
          :page.sync="currentPage4"
          :limit.sync="pageSize4"
          @pagination="querySearch4"
        />

       </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 {
      exportServantUrl1:
        url.exportUrl +
        "/reportservice/salesdata/selectClue?token=" +
        window.localStorage.getItem("token"),
        exportServantUrl2:
        url.exportUrl +
        "/reportservice/salesdata/bdInvertDetailExport?token=" +
        window.localStorage.getItem("token"),
         exportServantUrl3:
        url.exportUrl +
        "/reportservice/salesdata/servantSignOrder?token=" +
        window.localStorage.getItem("token"),
         exportServantUrl4:
        url.exportUrl +
        "/reportservice/salesdata/cluePayOrder?token=" +
        window.localStorage.getItem("token"),

      servantModelList:commutil.serviceModelList,
      cityList: [],
      resourceList:[],
       listData1: [],
      total1: 0,
      pageSize1: 50,
      currentPage1: 1, //当前页
      listQuery1: {
        resource: "",
        city: [],
        serviceModel:'',
        timePart: []
      },
      allStationList: [],
      stationList2: [],
       listData2: [],
      total2: 0,
      pageSize2: 50,
      currentPage2: 1, //当前页
      listQuery2: {
        city: [],
        serviceStation: "",
        timePart: []
      },
    listData3: [],
      total3: 0,
      pageSize3: 50,
      currentPage3: 1, //当前页
      listQuery3: {
        city: [],
        remark:'',
        timePart: [],
        serviceModel:'',
      },
   listData4: [],
      total4: 0,
      pageSize4: 50,
      currentPage4: 1, //当前页
      listQuery4: {
        timePart: []
      },



      
      channelList: [],
     
      listData2: [],
      total2: 0,
      pageSize2: 50,
      currentPage2: 1, //当前页
      listQuery2: {
        businessType: "",
        category: "",
        type: "",
        city: "",
        timePart: []
      },
      
      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() {
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );
    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    this.$set(this.listQuery1,'createTime',[startDate, currentDate]);
    this.$set(this.listQuery2,'createTime',[startDate, currentDate]);
    this.$set(this.listQuery3,'createTime',[startDate, currentDate]);
    this.$set(this.listQuery4,'createTime',[startDate, currentDate]);
      //  this.getChannel();
    this.getCityStation();
    this.getResource();
  
    this.querySearch4();
  
  },
  methods: {
    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId: globalData.userInfo.id
      }).then(res => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;
          this.allStationList = res.data.data.userCityDataList;
          let city=(res.data.data.userCityDataList[0].dataName).split(',');
          // this.listQuery1.city = city;
          // this.listQuery2.city = res.data.data.userCityDataList[0].dataName;
          // this.listQuery3.city = city;
            this.querySearch1();
    this.querySearch2();
    this.querySearch3();
              //  this.stationList2 = res.data.data.userCityDataList[0].subList;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
     cityChange2(value) {
      this.listQuery2.serviceStation = "";
      let currentStation = this.allStationList.filter(item => {
        return item.dataName == value;
      });
      
      this.stationList2 = currentStation[0].subList;
    },
    getChannel() {
      Service.$axiosGetChannel().then(res => {
        if (res.data.errno == "0") {
          this.channelList = res.data.data;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
     getResource() {
      Service.$axiosGetNurseSource().then(res => {
        if (res.data.errno == "0") {
          this.resourceList = res.data.data;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    //查询
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          // this.$message.warning("选中时间范围不能超过一个月");
          // this.listQuery1.createTime = null;
        }
      }
    },
    querySearch1() {
      if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage1,
        pageSize: this.pageSize1,
        city: this.listQuery1.city.join(','),
        resource: this.listQuery1.resource,
        serviceModel: this.listQuery1.serviceModel,
        startDate: this.listQuery1.createTime[0],
        endDate: this.listQuery1.createTime[1],
      };

    
      Service.$axiosSelectClue(temp)
        .then(res => {
          // console.log(res);
          this.listData1 = res.data.data.dataList;
          this.total1 = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
 
      querySearch2() {
      if (this.isEmptyObjVue(this.listQuery2.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        startPage: this.currentPage2,
        limit: this.pageSize2,
        city: this.listQuery2.city.join(','),
        // serviceStation: this.listQuery2.serviceStation,
        startTime: this.listQuery2.createTime[0],
        endTime: this.listQuery2.createTime[1]
      };

      Service.$axiosBdInvertDetail(temp)
        .then(res => {
          // console.log(res);
          this.listData2 = res.data.data.list;
          this.total2 = res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
  querySearch3() {
      if (this.isEmptyObjVue(this.listQuery3.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage3,
        pageSize: this.pageSize3,
        city: this.listQuery3.city.join(','),
        remark:this.listQuery3.remark,
        startDate: this.listQuery3.createTime[0],
        endDate: this.listQuery3.createTime[1],
        serviceModel: this.listQuery3.serviceModel,
      };

    
      Service.$axiosServantSignOrder(temp)
        .then(res => {
          // console.log(res);
          this.listData3= res.data.data.dataList;
          this.total3 =res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
     querySearch4() {
      if (this.isEmptyObjVue(this.listQuery4.createTime)) {
        this.$message.warning("请选择日期");
        return false;
      }
      let temp = {
        pageNo: this.currentPage4,
        pageSize: this.pageSize4,
        startDate: this.listQuery4.createTime[0],
        endDate: this.listQuery4.createTime[1],
      };

    
      Service.$axiosCluePayOrder(temp)
        .then(res => {
          // console.log(res);
          this.listData4= res.data.data.dataList;
          this.total4 =res.data.data.total;
        })
        .catch(err => {
          console.log(err);
        });
    },
     downloadServant1() {
      
      if (this.isEmptyObjVue(this.listQuery1.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery1.city.join(",")}&resource=${
        this.listQuery1.resource}&serviceModel=${this.listQuery1.serviceModel}&startDate=${
        this.listQuery1.createTime[0]
      }&endDate=${this.listQuery1.createTime[1]}&isExport=${true}`;
      window.open(this.exportServantUrl1 + params);
    },
     downloadServant2() {
         if (this.isEmptyObjVue(this.listQuery2.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery2.city.join(",")}&startTime=${
        this.listQuery2.createTime[0]
      }&endTime=${this.listQuery2.createTime[1]}`;
      window.open(this.exportServantUrl2 + params);
     },
     downloadServant3() {
       if (this.isEmptyObjVue(this.listQuery3.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&city=${this.listQuery3.city.join(",")}&remark=${
        this.listQuery3.remark}&startDate=${
        this.listQuery3.createTime[0]
      }&endDate=${this.listQuery3.createTime[1]}&isExport=${true}&serviceModel=${this.listQuery3.serviceModel}`;
      window.open(this.exportServantUrl3 + params);
     },
     downloadServant4() {
       if (this.isEmptyObjVue(this.listQuery4.createTime)) {
        this.$message.warning("日期不能为空,请选择日期");
        return false;
      }
      let params = `&startDate=${
        this.listQuery4.createTime[0]
      }&endDate=${this.listQuery4.createTime[1]}&isExport=${true}`;
      window.open(this.exportServantUrl4 + params);
     },






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