<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.serviceStation" clearable placeholder="请选择门店">
            <el-option v-for="(item,index) in stationList" :key="index" :label="item.dataName" :value="item.dataName"></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>
                        <!-- v-per="'downloadBusiness'" -->
                        <el-button type="primary" icon="el-icon-download" @click="downloadBusiness" v-per="'downloadBusiness'">导出</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="城市" label="城市" width="100px" fixed="left"></el-table-column>
                    <el-table-column prop="公海录入" label="公海录入"></el-table-column>
                    <el-table-column prop="合伙人录入" label="合伙人录入"></el-table-column>
                    <el-table-column prop="私海录入" label="私海录入"></el-table-column>
                    <el-table-column prop="等待跟单" label="等待跟单"></el-table-column>
                    <el-table-column prop="跟单不通过" label="跟单不通过"></el-table-column>
                    <el-table-column prop="跟单通过" label="跟单通过"></el-table-column>
                    <el-table-column prop="进入跟单" label="进入跟单"></el-table-column>
                    <el-table-column prop="日期" label="日期"></el-table-column>

                </el-table>

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

            <el-tab-pane label="保洁结算" name="2">
                <!--        <div style="font-size: 9px; color:darkcyan">tips: 可左右滑动查看更多指标</div>-->
                <el-form :inline="true" size="small" v-model="listQuery2">
                    <el-form-item label="月份">
                        <el-date-picker v-model="listQuery2.ofMonth" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="门店简称">
                        <el-input v-model="listQuery2.store" placeholder="" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="服务者姓名">
                        <el-input v-model="listQuery2.workerName" placeholder="" clearable></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch2(false)">查询</el-button>
                        <el-button icon="el-icon-download" type="primary" plan @click="querySearch2(true)">导出</el-button>
                    </el-form-item>
                </el-form>

                <!-- 列表数据 -->
                <el-table :data="listData2" border style="width: 100%" class="table">
                    <el-table-column prop="workerNo" label="商家编号" width="100px" fixed="left"></el-table-column>
                    <el-table-column prop="workerName" label="姓名"></el-table-column>
                    <el-table-column prop="entryTime" label="上线日期"></el-table-column>

                    <el-table-column prop="cancelTime" label="解约日期"></el-table-column>
                    <el-table-column prop="sourceId" label="门店编号"></el-table-column>
                    <el-table-column prop="store" label="门店简称"></el-table-column>
                    <el-table-column prop="company" label="公司名称"></el-table-column>
                    <el-table-column prop="wbdjr" label="BD对接人"></el-table-column>

                    <el-table-column prop="jsjs" label="结算基数"></el-table-column>
                    <el-table-column prop="dydl" label="当月单量"></el-table-column>
                    <el-table-column prop="mony" label="结算金额"></el-table-column>
                    <el-table-column prop="currOnline" label="当前在职"></el-table-column> 

                </el-table>
                <!-- 分页 -->
                <pagination :total="listQuery2.total" :page.sync="listQuery2.currentPage" :limit.sync="listQuery2.pageSize" @pagination="querySearch2(false)" />
            </el-tab-pane>

              <el-tab-pane label="保姆结算" name="3"> 
                <el-form :inline="true" size="small" v-model="listQuery3">
                    <el-form-item label="月份">
                        <el-date-picker v-model="listQuery3.ofMonth" type="month" value-format="yyyy-MM" :picker-options="{}"></el-date-picker>
                    </el-form-item>
                    

                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" plan @click="querySearch3(false)">查询</el-button>
                        <el-button icon="el-icon-download" type="primary" plan @click="querySearch3(true)">导出明细</el-button>
                    </el-form-item>
                </el-form>

                <!-- 列表数据 -->
                <el-table :data="listData3" border style="width: 100%" class="table">
                    <el-table-column prop="ofMonth" label="年月" width="100px"  ></el-table-column>
                    <el-table-column prop="cityName" label="城市"></el-table-column>
                    <el-table-column prop="companyId" label="门店编号"></el-table-column>

                    <el-table-column prop="store" label="门店简称"></el-table-column>
                    <el-table-column prop="companyName" label="公司名称"></el-table-column>
                    <el-table-column prop="insideName" label="BD对接人"></el-table-column>
                    <el-table-column prop="agencyFee" label="中介费"></el-table-column>  

                    <el-table-column prop="clueCost" label="线索成本"></el-table-column>   
                    <el-table-column prop="baomuGongge" label="保姆供给"></el-table-column>  

                     <el-table-column prop="adjustmentFee" label="专项调整"></el-table-column>  
                      <el-table-column prop="pretaxMoney" label="税前金额"></el-table-column>  
                </el-table> 
            </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 addTrainHisDia from './components/addTrainHisDia';
export default {
    components: { Pagination },
    data() {
        return {
            exportBusinessUrl:
                url.exportUrl +
                "/reportservice/report/exportDayInvestMenDetail?token=" +
                window.localStorage.getItem("token"),
            activeTab: "1",
            cityList: [],
            stationList: [],
            allStationList: [],
            listData1: [],
            total1: 0,
            pageSize1: 50,
            currentPage1: 1, //当前页
            listQuery1: {
                city: [],
                // serviceStation:'',
                timePart: [],
            },

            listData2: [],
            listQuery2: {
                total: 0,
                pageSize: 50,
                currentPage: 1,
                ofMonth: moment().format("YYYY-MM"),
                store: null,
                workerName: null,
            },

            listData3: [],
            listQuery3: { 
                ofMonth: moment().format("YYYY-MM")
                
            },

            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.getCityStation();
        // this.querySearch1();
    },
    methods: {
        getCityStation() {
            Service.$axiosGetUserAuthBuzData({
                userId: globalData.userInfo.id,
            }).then((res) => {
                if (res.data.errno == "0") {
                    this.cityList = res.data.data.userCityDataList;
                    // this.listQuery1.city = res.data.data.userCityDataList[0].dataName;
                    // this.allStationList = res.data.data.userCityDataList;
                    // this.stationList = res.data.data.userCityDataList[0].subList;

                    // this.listQuery1.city = res.data.data.userCityDataList[0].dataName.split(
                    //   ",");

                    this.querySearch1();
                } else {
                    this.$message.warning(res.data.errmsg);
                }
            });
        },
        cityChange(value) {
            // this.listQuery.storeNames = [];
            this.listQuery1.storeNames = "";
            let currentStation = this.allStationList.filter((item) => {
                return item.dataName == value;
            });
            this.stationList = currentStation[0].subList;
        },
        //查询
        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 = {
                startPage: this.currentPage1,
                limit: this.pageSize1,
                city: this.listQuery1.city.join(","),

                // serviceStation: this.listQuery1.serviceStation,
                startTime: this.listQuery1.createTime[0],
                endTime: this.listQuery1.createTime[1],
            };

            Service.$axiosDayInvestMenDetail(temp)
                .then((res) => {
                    // console.log(res);
                    this.listData1 = res.data.data.list;
                    this.total1 = res.data.data.total;
                })
                .catch((err) => {
                    // console.log(err);
                });
        },
        downloadBusiness() {
            //  if (this.isEmptyObjVue(this.listQuery1.city)) {
            //   this.$message.warning("城市不能为空,请选择城市");
            //   return false;
            // }
            if (this.isEmptyObjVue(this.listQuery1.createTime)) {
                this.$message.warning("日期不能为空,请选择日期");
                return false;
            }
            let params = `&city=${this.listQuery1.city.join(",")}&startTime=${
                this.listQuery1.createTime[0]
            }&endTime=${this.listQuery1.createTime[1]}`;
            window.open(this.exportBusinessUrl + params);
        },
        querySearch2(boo) {
            this.listQuery2.isExport = boo;
            if (boo) {
                Service.$axiosBjSettlementExport(this.listQuery2);
            } else {
                Service.$axiosBjSettlement(this.listQuery2)
                    .then((res) => {
                        console.log(res);
                        this.listData2 = res.data.data.data.list;

                        this.listQuery2.total = res.data.data.data.total;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        querySearch3(boo){
             this.listQuery3.isExport = boo;
            if (boo) {
                Service.$axiosBmSettlementExport(this.listQuery3);
            } else {
                Service.$axiosBmSettlement(this.listQuery3)
                    .then((res) => {
                        this.listData3 = res.data.data; 
                        console.log(res.data.data.data);
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        }
    },
};
</script>
<style>
.crumbs {
    margin: 0 0 10px 0;
}
</style>