<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.customerTel" clearable class="filter-item" style="width: 160px;" placeholder="请输入客户手机" />
            <el-input v-model="listQuery.customerName" clearable class="filter-item" style="width: 160px;" placeholder="请输入客户姓名" />
            <el-button v-permission="['GET /admin/customerOrder/list']" class="filter-item" type="primary" icon="el-icon-search" @click="getList">查找</el-button>
            <!-- <el-button :loading="importLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleImport">导入盒马订单</el-button> -->
        </div>

        <!-- 查询结果 -->
        <el-table :data="listdata" element-loading-text="正在查询中。。。" border fit highlight-current-row>

            <el-table-column align="center" label="订单编号" prop="order_no" />
            <el-table-column align="center" label="订单渠道" prop="channel_id" :formatter="channelFilter" />
            <el-table-column align="center" label="客户姓名" prop="customer_name" />
            <el-table-column align="center" label="管家姓名" prop="charge_name" />

            <el-table-column align="center" label="订单状态" prop="state" :formatter="customerOrderStatusFilter" />
            <el-table-column align="center" label="居间合同状态" prop="contract_state" :formatter="contractStateFilter" />

            <el-table-column align="center" label="服务模式" prop="service_model" :formatter="serviceModelFilter" />
            <el-table-column align="center" label="下单时间" :formatter="dateFormatA" prop="create_time" />
            <el-table-column align="center" label="城市" prop="city_name" />

            <!-- <el-table-column align="center" label="订单渠道" min-width="90" prop="orderChannel">
                <template slot-scope="scope">
                    <el-tag type="success">{{ scope.row.orderChannel | channelsFilter }}</el-tag>
                </template>
            </el-table-column> -->

            <el-table-column align="center" label="操作" min-width="100" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <!--钟点工没有详情，没有生成三者关系-->
                    <el-button v-permission="['GET /admin/customerOrder/detail']" v-if="scope.row.service_model!=5||scope.row.service_model!=6"
                    type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>

                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    </div>
</template>

<script>
import axios from "axios";
import { allChannel } from "@/api/channel";
import { customerOrderlist } from "@/api/customerorder";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import checkPermission from "@/utils/permission"; // 权限判断函数
const customerOrderStatus = {
    0: "待签约 ",
    1: "待上户",
    2: "上户中",
    3: "已解约",
    4: "已到期",
};
const contractState = {
    0: "生效中 ",
    1: "已解约",
    2: "待审核",
    3: "签署失败",
    4: "待签署",
    5: "解约中",
    6: "已到期",
};
const serviceModel = {
    1: "钟点工",
    2: "白班保姆",
    3: "住家保姆",
    4: "月嫂",
    5: "代班保姆-终点工",
    6: "代班保姆-保姆",
};
export default {
    name: "Order",
    components: { Pagination },
    filters: {},
    data() {
        return {
            listdata: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 20,
                customerTel: "",
                customerName: "",
                userId:this.$store.state.user.id
            },
            customerOrderStatus,
            contractState,
            serviceModel,
            channels: [],
        };
    },
    computed: {},
    beforeCreate() {},
    created() {
        this.getChannel();
        this.getList();
    },
    methods: {
        checkPermission,
        getChannel() {
            allChannel().then((res) => {
                this.channels = res.data.data;
            });
        },
        getList() {
            customerOrderlist(this.listQuery)
                .then((response) => {
                    this.listdata = response.data.data.list;
                    this.total = response.data.data.total;
                })
                .catch(() => {
                    this.listdata = [];
                    this.total = 0;
                });
        },
        handleDetail(row) {
            this.$router.push({
                path: "/order/orderservantDetail",
                query: {
                    orderId: row.id,
                },
            });
        },
        customerOrderStatusFilter(row) {
            return customerOrderStatus[row.state];
        },
        contractStateFilter(row) {
            return contractState[row.contract_state];
        },
        serviceModelFilter(row) {
            return serviceModel[row.service_model];
        },
        channelFilter(row) {
            let nm = "";
            this.channels.forEach((item) => {
                if (item.id == row.channel_id) {
                    nm = item.name;
                }
            });
            return nm;
        },
    },
};
</script>

<style>
.detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
}
</style>
