<template>
    <div class="app-container">
        <el-form
            :model="queryParams"
            ref="queryForm"
            :inline="true"
            v-show="showSearch"
        >
            <el-form-item label="订单编号"  label-position="right" label-width="145px" prop="orderIndex">
                <el-input
                    v-model="queryParams.orderIndex"
                    placeholder="请输入订单编号"
                    clearable
                    size="small"
                    maxlength="30"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item
                label="商家编号"
                label-position="right" label-width="145px"
                prop="merchantIndex"

            >
                <el-input
                    v-model="queryParams.merchantIndex"
                    placeholder="请输入商家编号"
                    clearable
                    size="small"
                    maxlength="30"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item
                label="服务主题"
                label-position="right" label-width="145px"
                prop="goodsName"

            >
                <el-input
                    v-model="queryParams.goodsName"
                    placeholder="请输入服务主题"
                    clearable
                    size="small"
                    maxlength="20"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="服务人员手机号"  label-position="right" label-width="145px" prop="serverPhone">
                <el-input
                    v-model="queryParams.serverPhone"
                    placeholder="请输入服务人员手机号"
                    clearable
                    maxlength="11"
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item
                label="服务人员姓名"
                label-position="right"
                label-width="145px"
                prop="serverName"

            >
                <el-input
                    v-model="queryParams.serverName"
                    placeholder="请输入服务人员姓名"
                    clearable
                    size="small"
                    maxlength="10"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item
                label="店铺名称"
                label-position="right"
                label-width="145px"
                prop="merchantName"

            >
                <el-input
                    v-model="queryParams.merchantName"
                    placeholder="请输入店铺名称"
                    clearable
                    size="small"
                    maxlength="20"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="顾客手机号"
            label-position="right"
            label-width="145px"
             prop="memberPhone">
                <el-input
                    v-model="queryParams.memberPhone"
                    placeholder="请输入顾客手机号"
                    clearable
                    size="small"
                    maxlength="11"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item
                label="服务类型主体"
                label-position="right" label-width="145px"
                prop="merchantType"

            >
                <el-select
                    v-model="queryParams.merchantType"
                    placeholder="请选择"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                >
                    <el-option label="全部" value=""></el-option>
                    <el-option label="商家" value="0"></el-option>
                    <!-- <el-option label="个体" value="1"></el-option> -->
                </el-select>
            </el-form-item>
            
          
            <el-form-item label="核验时间" label-position="right" label-width="145px">
                <el-date-picker
                    v-model="searchDate"
                    type="daterange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    align="left"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    clearable
                    size="small"
                    style="width: 220px;x"
                    :default-time="['00:00:00', '23:59:59']"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="handleQuery"
                    plain
                    >搜索</el-button
                >
                <el-button
                    icon="el-icon-refresh"
                    size="small"
                    @click="resetQuery"
                    >重置</el-button
                >
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="dataList" border stripe>
            <!-- <el-table-column label="序号" align="center" type="index" /> -->
            <el-table-column
                label="订单编号"
                align="center"
                prop="orderIndex"
                show-overflow-tooltip
            />
            <el-table-column
                label="商家编号"
                align="center"
                prop="merchantIndex"
                show-overflow-tooltip
            />
            <el-table-column
                label="店铺名称"
                align="center"
                prop="merchantName"
                show-overflow-tooltip
            />
          
            <el-table-column
                label="服务主题"
                align="center"
                prop="goodsName"
                width="80px"
                show-overflow-tooltip
            />
         
        
            <el-table-column
                label="服务人员手机号"
                align="center"
                prop="serverPhone"
                width="120"
                show-overflow-tooltip
            />
            <el-table-column
                label="服务人员姓名"
                align="center"
                prop="serverName"
                width="100"
                show-overflow-tooltip
            />
            <el-table-column
                label="顾客手机号"
                align="center"
                prop="memberPhone"
                width="110"
                show-overflow-tooltip
            />
             <el-table-column
                label="上门地址"
                align="center"
                prop="address"
                width="110"
                show-overflow-tooltip
            />
            <el-table-column
                label="上门时间"
                align="center"
                prop="appointmentStartTime"
                width="160"
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span>{{ scope.row.appointmentStartTime}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="核验时间"
                align="center"
                prop="createTime"
                width="160"
            >
                <template slot-scope="scope">
                    <span>{{scope.row.createTime }}</span>
                </template>
            </el-table-column>
             <el-table-column
                label="核验人手机号"
                align="center"
                prop="verifierPhoneNum"
                width="110"
                show-overflow-tooltip
            />
             <el-table-column
                label="核验人微信号"
                align="center"
                prop="verifierWxNickname"
                width="110"
                show-overflow-tooltip
            />

           
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />

    </div>
</template>

<script>
import { accessPasscodeList} from "@/api/merchant/accessPasscode"; 

export default {
    name: "adminMember",
    data() {
        return {
            refundOpen: false,
            order: {},
            activeNames: ["1"],
            imgSrc: "",
            goodsList: [],
            member: {},
            serverUser: {},
            recordOpen: false,
            orderRecord: [],
            refStatusOptions: [],
            refund: {},
            clipboard: null,
            showSearch: true,
            loading: true,
            total: 0,
            dataList: [],
            //订单详情
            orderOpen:false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                beginTime: "",
                endTime: "",
                merchantId: "",
                merchantIndex: "",
                merchantName: "",
                goodsId: "",
                goodsName: "",
                name: "",
                serverPhone: "",
                memberPhone: "",
                categoryId: [],
                merchantType: "",
                orderType: "",
                isAdd: "",
                status: "",
            },
            form: {},
            // 弹出层标题
            title: "",
            open: false,

            searchDate: [],
            categoryList: [],
            statusList: [],
            optionProps: {
                value: "categoryId",
                label: "categoryName",
                children: "childrenCategory",
            },
          
        };
    },
    
   
    created() {
       
        this.getList();
    },
    methods: {
        /** 查询待审核列表 */
        getList() {
 
            if (this.searchDate == null) {
                this.searchDate = "";
            }
            const [searchBegin, searchEnd] = this.searchDate;
            let sBegin = searchBegin;
            let sEnd = searchEnd;
            if (typeof searchBegin == "undefined") {
                var start = new Date()
                start.setTime(start.getTime()-3600 * 1000 * 24 * 30)
                this.searchDate = [start,new Date()]
                sBegin = this.timeStamp2String(start)
            }
            if (typeof searchEnd == "undefined") {
                sEnd = this.timeStamp2String(new Date())
                this.searchDate=[sBegin,sEnd]
            }
            this.queryParams.beginTime = sBegin;
            this.queryParams.endTime = sEnd;
           
            accessPasscodeList(this.queryParams)
                .then((response) => { 
                    this.dataList = response.rows;
                    this.total = parseInt(response.total);
                })
                .catch((err) => {
                    console.log(err);
                })
                .finally(() => {
                    this.loading = false;
                });
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.searchDate = [];
            this.queryParams = {
                pageNum: 1,
                pageSize: 10,
                beginTime: "",
                endTime: "",
                merchantId: "",
                merchantIndex: "",
                merchantName: "",
                goodsId: "",
                name: "",
                serverPhone: "",
                memberPhone: "",
                categoryId: [],
                merchantType: "",
                isAdd: "",
                status: "",
            };
            this.handleQuery();
        },

        parseAddress(row) {
            if (row.addressList != null && row.addressList.length > 0) {
                return row.addressList[0].address + row.addressList[0].detailed;
            } else {
                return "--";
            }
        },
 
       
        timeStamp2String(datetime){

            var year = datetime.getFullYear();
            var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            var hour = datetime.getHours()< 10 ? "0" + datetime.getHours() : datetime.getHours();
            var minute = datetime.getMinutes()< 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
            var second = datetime.getSeconds()< 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
            return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
        },
       
      
  
    
    },
};
</script>


<style lang="scss" scoped>
.tabs_label {
    text-align: center;
    span {
        line-height: 28px;
    }
}
.dateTable {
    .el-col {
        display: table;
        margin: 5px 0;
    }
    .grid-content {
        border-radius: 4px;
        height: 58px;
        border: 1px solid #ccc;
        display: table-cell;
        width: 100%;
        vertical-align: middle;
        text-align: center;
        cursor: pointer;
        p {
            margin: 0;
            padding: 0;
            line-height: 2;
            font-size: 12px;
        }
        p:first-child {
            font-size: 14px;
        }
    }
    .grid-content:hover {
        background: #f2f8fe;
    }
    .grid-content.cur {
        background: #dddddd;
    }
    .grid-content.cur:hover {
        background: #dddddd;
        cursor: auto;
    }
    .highlight {
        background-color: #409eff !important;
        color: #fff;
    }
    .booked {
        background-color: #d7d7d7 !important;
    }
    .text {
        font-size: 20px;
        margin: 50px 0 50px 0;
        text-align: center;
        color: rgb(255, 0, 0);
    }
}
.el-card {
  margin-bottom: 20px;
  background-color: #f4f4f4;
  color:#737373;
  font-size:14px;

}

li {
  list-style-type: none;
}
ul {
  padding-inline-start: 0px;
}
.span-color{

    font-size:16px;
    font-weight: bold;
    color: #F59A23;
}
.span-color-size {
    font-size:16px;
    font-weight: bold;
    color: #f59a23;
    line-height: 14px;
}
.span-detailed-info{
    color:black;
}

.gatePass {
    margin-left: 135px;
}
.qrCodeDialog {
    display: flex;
    justify-content: center;
    align-items: center;
}
   </style>
