<template>
    <view class="container">
        <form>
            <view class="form-item" v-if="chaxun.status == 'AUDIT_REJECT'">
                <view class="input-block flex box-pack-between">
                    <label class="label">操作</label>
                    <view class="content">
                        <view class="shixiao-btn" @click="onShixiao">点此失效</view>
                    </view>
                </view>
                <view class="tips">如果更新类目 请先失效后再重新提交审核</view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">状态</label>
                    <view class="content">
                        {{getStatusName(chaxun.status)}}
                    </view>
                </view>
            </view>
            <view class="form-item" v-if="chaxun.status == 'AUDIT_REJECT'">
                <view class="input-block flex box-pack-between">
                    <label class="label">驳回原因</label>
                    <view class="content">
                        <rich-text :nodes="chaxun.reject_reason"></rich-text>
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">类目</label>
                    <view class="content flex-grow-1 ">
                        <view class="input-box text-align-right" @click="showCategoryList">
                            {{info.category_name || '请选择'}}
                        </view>
                        <input type="text" :value="info.category_id"
                            style="position: fixed;left: -1000px;top: -1000px;">
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">提报页面</label>
                    <view class="content flex-grow-1 ">
                        <picker :range="pagesList" range-key="name" @change="onPagesChange">
                            <view class="input-box text-align-right">{{info.pages_name || '请选择'}}</view>
                        </picker>
                        <input type="text" :value="info.pages" style="position: fixed;left: -1000px;top: -1000px;">
                    </view>
                </view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">服务名称</label>
                    <view class="content flex-grow-1 ">
                        <input type="text" v-model="info.serviceName" placeholder="请输入"
                            class="input-box text-align-right" />
                    </view>
                </view>
                <view class="tips">字数限制2～15个字填写格式：可以由中文、数字、英文、下划线、+、-组成，相同小程序下的服务名称不能重复。 审核提醒：
                    1.服务名称代表小程序内的某个功能或服务，服务名称不可重复且需代表不同的功能。 2.服务名称不可与小程序名称重复。
                    3.服务名称需要与小程序本身提供的服务相关，如租赁类小程序的服务名称需要与租赁服务有关,如以品牌名称/商家名称+服务类型、经营品类+服务类型、服务场所+服务类型来命名。不得表述宽泛，语义不清。正确示例：“XX酒店预定”、“XX手机租赁”、“杭州法喜寺购票”。
                </view>
            </view>
            <view class="form-item">
                <view class="input-block flex box-pack-between">
                    <label class="label">服务描述</label>
                    <view class="content flex-grow-1 ">
                        <!-- <input type="text" value="" placeholder="请输入" class="input-box text-align-right" /> -->
                        <textarea v-model="info.serviceDesc" placeholder="请输入" disable-default-padding
                            style="padding-top:7rpx ;" class="input-box" />
                    </view>
                </view>
                <view class="tips">请描述具体的服务内容，字数限制为5-100字审核提醒： 1.要清楚介绍服务功能，比如提供了什么功能，便于通过审核。
                    2.请不要填写无意义的内容3.请不要出现向外部应用引流的文案。
                </view>
            </view>
            <block v-if="['C000003266','C000003268'].includes(info.category_id)">
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">商家配送范围</label>
                        <view class="content flex-grow-1 ">
                            <input type="text" v-model="info.fangwei" placeholder="请输入"
                                class="input-box text-align-right" />
                        </view>
                    </view>
                    <view class="tips">请输入可以支持配送的距离和范围，单位（公里）,例如5公里内配送，请输入：5.00 </view>
                </view>
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">联系电话</label>
                        <view class="content flex-grow-1 ">
                            <input type="text" v-model="info.tel" placeholder="请输入"
                                class="input-box text-align-right" />
                        </view>
                    </view>
                    <view class="tips">请输入合法的手机号码或者固定号码，其中固定号码的区号3到4位，电话7到8位，分机号选填(例：固定电话：0834-1133567 或者
                        0834-1133567-1234
                    </view>
                </view>
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">营业开始时间</label>
                        <view class="content flex-grow-1 ">
                            <picker mode="time" :value="info.start" @change="onChangeTime($event,'start')">
                                <view class="input-box text-align-right">{{info.start || '请选择'}}</view>
                            </picker>
                        </view>
                    </view>
                </view>
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">营业结束时间</label>
                        <view class="content flex-grow-1 ">
                            <picker mode="time" :value="info.end" @change="onChangeTime($event,'end')">
                                <view class="input-box text-align-right">{{info.end || '请选择'}}</view>
                            </picker>
                        </view>
                    </view>
                </view>
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">客单价/人均消费</label>
                        <view class="content flex-grow-1 ">
                            <input type="digit" v-model="info.price" placeholder="请输入"
                                class="input-box text-align-right" />
                        </view>
                    </view>
                    <view class="tips">请输入大致的人均消费，单位（元）,例如：20元请输入：20</view>
                </view>
                <view class="form-item">
                    <view class="input-block flex box-pack-between">
                        <label class="label">品牌名称</label>
                        <view class="content flex-grow-1 ">
                            <input type="text" v-model="info.pinpai" placeholder="请输入"
                                class="input-box text-align-right" />
                        </view>
                    </view>
                    <view class="tips">请输入品牌名称</view>
                </view>
            </block>
            <view class="sub-btn" v-if="!chaxun || ['PROMOTION','INVALID','AUDIT_REJECT'].includes(chaxun.status)"
                @click="onSubmit">立即提交</view>
        </form>
        <view class="is-iphone-x"></view>
        <uni-popup ref="leimu-list" type="bottom" backgroundColor="#ffffff">
            <view class="leimu-list">
                <uni-search-bar placeholder="搜索类目" @confirm="searchLeimu" :value="leimuKeywords"
                    @clear="clearLeimuKeywords" @cancel="clearLeimuKeywords">
                </uni-search-bar>
                <scroll-view scroll-y class="limu-list" @scrolltolower="getCategoryList(leimuPage+1)">
                    <uni-table border stripe emptyText="暂无更多数据" :loading="getCategoryListLoading">
                        <!-- 表头行 -->
                        <uni-tr>
                            <uni-th align="center" width="150rpx">选择</uni-th>
                            <uni-th align="center" width="200rpx">一级类目</uni-th>
                            <uni-th align="center" width="200rpx">二级类目</uni-th>
                            <uni-th align="center" width="200rpx">三级类目</uni-th>
                        </uni-tr>
                        <!-- 表格数据行 -->
                        <uni-tr v-for="(item,index) in leimuList" :key="item.id">
                            <uni-td align="center"><button type="primary" size="mini"
                                    style="background: #1E9FFF;padding:0 16rpx;"
                                    @click="onLeimuChange(item)">选择</button></uni-td>
                            <uni-td align="center">{{item.first_name}}</uni-td>
                            <uni-td align="center">{{item.second_name}}</uni-td>
                            <uni-td align="center">{{item.third_name}}</uni-td>
                        </uni-tr>



                    </uni-table>
                </scroll-view>

            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                admin_id: '',
                info: {},
                chaxun: {},
                getCategoryListLoading: false,
                leimuList: [],
                leimuKeywords: '',
                leimuPage: 1,
                leimuLimit: 20,
                leimuHasMore: true,
                pagesList: [{
                    name: "下单页",
                    url: 'pages/index/index'
                }, {
                    name: '首页',
                    url: "pages/home/home"
                }]
            }
        },
        onLoad() {
            this.admin_id = uni.getStorageSync('admin_id')
            this.getInfo()
            this.getCategoryList()
        },
        methods: {
            showCategoryList() {
                this.$refs['leimu-list'].open('bottom')
            },
            clearLeimuKeywords() {
                console.log('cancel');
                this.leimuKeywords = ""
                this.getCategoryList()
            },
            searchLeimu(e) {
                console.log(e)
                this.leimuKeywords = e.value
                this.getCategoryList()
            },
            getCategoryList(page = 1) {
                if (page == 1) {
                    this.leimuHasMore = true
                    this.leimuList = []
                    this.leimuPage = 1
                }
                if (this.getCategoryListLoading || !this.leimuHasMore) {
                    return false
                }
                this.getCategoryListLoading = true

                this.request({
                    url: 'alipaycoupon/service_category',
                    data: {
                        keyword: this.leimuKeywords,
                        page,
                        limit: this.leimuLimit
                    }
                }).then(res => {
                    if (res.code == 200) {

                        if (res.data.length > 0) {
                            this.leimuList.push(...res.data)
                            this.leimuPage = page
                            this.leimuHasMore = res.data.length == this.leimuLimit
                        } else {
                            this.leimuHasMore = false
                        }
                    }
                }).finally(() => {
                    this.getCategoryListLoading = false
                })
            },
            getInfo() {
                this.request({
                    url: 'alipaycoupon/fuwu_info',
                    data: {
                        admin_id: this.admin_id
                    }
                }).then(res => {
                    if (res.code == 200) {
                        console.log(res)
                        this.info = res.data.info
                        this.chaxun = res.data.chaxun
                        // if (res.data.info.category_id) {
                        //     this.getCategoryName(res.data.info.category_id)
                        // }
                        if (res.data.info.pages) {
                            this.getPagesName(res.data.info.pages)
                        }
                    }
                })
            },
            getStatusName(status) {
                let name = ""
                switch (status) {
                    case "EDITING":
                        name = "编辑中"
                        break;
                    case "AUDITING":
                        name = "审核中"
                        break;
                    case "PROMOTION":
                        name = "可推广"
                        break;
                    case "STOP_PROMOTION":
                        name = "停止推广"
                        break;
                    case "INVALID":
                        name = "失效"
                        break;
                    case "PUNISHED":
                        name = "处罚"
                        break;

                    case "AUDIT_REJECT":
                        name = "审核驳回"
                        break;
                }
                return name
            },
            onLeimuChange(item) {
                this.$set(this.info, 'category_id', item.category_id)
                this.$set(this.info, 'category_name', `${item.first_name}-${item.second_name}-${item.third_name}`)
                this.$refs['leimu-list'].close()
            },

            getCategoryName(category_id) {
                let active = this.leimuList.find(item => {
                    return item.category_id == category_id
                })
                if (active) {
                    this.$set(this.info, 'category_name',
                        `${active.first_name}-${active.second_name}-${active.third_name}`)
                } else {
                    this.$set(this.info, 'category_name', '')
                }
            },
            onPagesChange(e) {
                this.$set(this.info, 'pages', this.pagesList[e.detail.value].url)
                this.$set(this.info, 'pages_name', this.pagesList[e.detail.value].name)
            },
            getPagesName(url) {
                let active = this.pagesList.find(item => {
                    return item.url == url
                })
                if (active) {
                    this.$set(this.info, 'pages_name', active.name)
                } else {
                    this.$set(this.info, 'pages_name', '')
                }
            },
            onChangeTime(e, name) {
                this.info[name] = e.detail.value
            },
            onSubmit(e) {
                let params = {
                    admin_id: this.admin_id,
                    category_id: this.info.category_id,
                    serviceName: this.info.serviceName,
                    serviceDesc: this.info.serviceDesc,
                    fangwei: this.info.fangwei,
                    tel: this.info.tel,
                    start: this.info.start,
                    end: this.info.end,
                    price: this.info.price,
                    pinpai: this.info.pinpai,
                    pages: this.info.pages
                }
                this.request({
                    url: 'alipaycoupon/edit',
                    data: params
                }).then(res => {
                    if (res.code == 200) {
                        uni.showModal({
                            content: "提交成功",
                            showCancel: false,
                            success: (r) => {
                                this.getInfo()
                            }
                        })
                    } else {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        })
                    }
                }).catch(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    })
                })

            },
            onShixiao() {
                uni.showModal({
                    content: "确定要失效吗",
                    success: (r) => {
                        if (r.confirm) {
                            this.request({
                                url: "alipaycoupon/shixiao",
                                data: {
                                    admin_id: uni
                                        .getStorageSync(
                                            "admin_id")
                                }
                            }).then(res => {
                                if (res.code == 200) {
                                    uni.showModal({
                                        content: "操作成功",
                                        showCancel: false,
                                        success: (
                                            r) => {
                                            this.getInfo()
                                        }
                                    })
                                } else {
                                    uni.showToast({
                                        title: res
                                            .message,
                                        icon: 'none'
                                    })
                                }
                            }).catch(res => {
                                uni.showToast({
                                    title: res.message,
                                    icon: 'none'
                                })
                            })
                        }
                    }
                })
            },
        }
    }
</script>
<style>
    page {
        background-color: #f4f5f6;
    }
</style>
<style lang="scss" scoped>
    @import url("@/static/css/flex.css");


    .container {

        background-color: #f4f5f6
    }

    .text-align-right {
        text-align: right;
    }

    .form-item {

        padding: 20rpx 20rpx;
        font-size: 28rpx;
        line-height: 1.5;
        margin-bottom: 20rpx;
        background: #fff;
        word-break: break-all;

        .input-block {}

        .label {
            flex: none;
            display: block;
            padding-right: 30rpx;
        }

        .content {}

        .input-box {
            width: 100%;
        }

        .shixiao-btn {
            background: #1E9FFF;
            color: #fff;
            padding: 6rpx 16rpx;
            border-radius: 12rpx;
        }

        .tips {
            font-size: 24rpx;
            color: #f00;
            line-height: 1.5;
            border-top: 1rpx solid #f2f2f2;
            margin-top: 20rpx;
            padding-top: 15rpx;
        }
    }

    .sub-btn {
        width: 700rpx;
        height: 100rpx;
        background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
        border-radius: 8rpx;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
        text-align: center;
        line-height: 100rpx;
        font-size: 36rpx;
        font-weight: 500;
        color: #fff;
        margin: 0 auto;
    }

    .limu-list {
        max-height: 70vh;

       
    }
  
</style>
<style>
    .uni-table-td {
        vertical-align: middle;
    }
</style>