<template>
    <Container>
        <el-row :gutter="10">
            <el-col :span="9">
                <el-card>
                    <MerchantAvatar ref="avatar" v-if="merchantType == 0" :merchant="merchant"/>
                    <UserMerchantAvatar ref="avatar" v-if="merchantType == 1" :user="user"/>
                </el-card>
            </el-col>
            <el-col :span="15">
                <p class="card-title">今日数据</p>
                <el-row :gutter="10">
                    <el-col :span="8">
                        <el-card>
                            <DataItem label="订单数">{{dashboard.orderNum}}</DataItem>
                        </el-card>
                    </el-col>
                   <el-col :span="8">
                       <el-card>
                           <DataItem label="订单金额">￥{{dashboard.orderAmount}}</DataItem>
                       </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card>
                            <DataItem label="实收金额">￥{{dashboard.actualAmount}}</DataItem>
                        </el-card>
                    </el-col>
                </el-row>
                <p class="footer">注：订单数、订单金额、实收金额均不包含已退款的数据。</p>
            </el-col>
        </el-row>
        <el-row :gutter="10" style="margin-top: 20px;">
            <el-col :span="9">
                <p class="card-title">近7天服务人员订单数<span class="highlight">Top5</span></p>
                <el-card  style="height:400px;">
                    <Table :data="dashboard.serverUserList">
                        <Column label="姓名" prop="realName" :minWidth="80"/>
                        <Column label="手机号" prop="phone" :minWidth="110"/>
                        <Column label="订单数" prop="orderNum" :minWidth="80"/>
                        <Column label="订单金额(￥)" prop="orderAmount" :minWidth="100"/>
                        <Column label="服务时长(h)" prop="serverTime" :minWidth="100" style="text-algin"/>
                    </Table>
                </el-card>
            </el-col>
            <el-col :span="15">
                <p class="card-title">近30天订单数</p>
                <div id="order-count" style="height:180px;width:100%"></div>

                <p class="card-title">近30天订单金额/元</p>
                <div id="order-amount" style="height:180px;width:100%"></div>
            </el-col>
        </el-row>
        <el-row>
            <h2 class="flow-title">店铺配置、管理流程</h2>
            <el-button type="text" @click="visible = !visible"  v-if="visible">不再显示</el-button>
            <el-button type="text" @click="visible = !visible"  v-else>显示流程</el-button>
            <span class="connect">
                <i class="el-icon-phone"></i>
                联系平台客服：{{phone}}
            </span>
        </el-row>
        <el-steps :active="6" v-if="visible">
            <el-step>
                <template #title>
                    <span style="cursor:pointer" @click="$refs.avatar.payBond">缴纳保证金</span>
                </template>
            </el-step>
            <el-step>
                <template #title>
                    <span style="cursor:pointer" @click="$router.push('/merchant/info')">完善店铺信息</span>
                </template>
            </el-step>
            <el-step>
                <template #title>
                    <span style="cursor:pointer" @click="$router.push('/merchant/area')">配置服务范围</span>
                </template>
            </el-step>
            <el-step>
                <template #title>
                    <span style="cursor:pointer" @click="$router.push('/merchant/servicePeople')">添加服务人员</span>
                </template>
            </el-step><el-step>
                <template #title>
                    <span style="cursor:pointer" @click="$router.push('/merchant/merchantCategory')">配置服务类型</span>
                </template>
            </el-step><el-step>
                <template #title>
                    <span style="cursor:pointer" @click="$router.push('/merchant/service')">发布服务项目</span>
                </template>
            </el-step>
        </el-steps>
        <p class="footer">注：缴纳的保证金将转换为优金豆，店铺在【创建服务】时可设置使用优金豆来激励顾客评价服务。</p>
    </Container>
</template>

<script>
import MerchantAvatar from './components/MerchantAvatar.vue'
import UserMerchantAvatar from './components/UserMerchantAvatar.vue'
import DataItem from './components/DataItem.vue'
import {getConfigKey} from '@/api/system/config'
import {dashboard, orderPayment} from '@/api/merchant/merchant'
import moment from 'moment'

export default {
    name: 'Dashboard',
    components: {MerchantAvatar, UserMerchantAvatar, DataItem},
    data(){
        return {
            visible: true,
            dashboard: {
                orderNum: 0,
                orderAmount: 0,
                actualAmount: 0,
                orderStatisticsList: [],
                serverUserList: []
            },
            merchantType: '',
            phone:"",
        }
    },
    computed: {
        merchant() {
            // console.log(">>>>>merchant<<<<<<<<" + JSON.stringify(this.$store.state.user))
            return this.$store.state.user?.merchant
        },
        user() {
        //    console.log(">>>>>user<<<<<<<<<<<<<" + JSON.stringify(this.$store.state.user))
           return this.$store.state.user?.user
        },
        serviceTelephone() {          
            return (this.$store.state.dict.data.service_telephone || [])[0]?.label
        }
    },
    mounted(){
        this.merchantType = this.$store.state.user?.merchant.merchantType
        this.getDetail()
        this.Phone()
    },
    methods: {
        getDetail(){
            const {merchantId} = this.merchant
            // console.log(this.merchant);
            dashboard(merchantId).then(({code, data}) => {
                if (code === 200) {
                    this.dashboard = {...this.dashboard, ...data}
                    this.initEcharts()
                }
            })
        },
      Phone(){
        getConfigKey('home.complaint.hotline')
                .then((res) => {                 
                     if(res.code==200){
                        this.phone=res.msg;
                     }       
            
            })
      },
        
        initEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  const orderCountChart = this.$echarts.init(document.getElementById('order-count'));
          const orderAmountChart = this.$echarts.init(document.getElementById('order-amount'));

          // 横坐标设置为从今天向前30天
          const dateList = []
          const orderNumList = []
          const orderAmountList = []
          for (let i = 0; i <= 30; i++) {
              const date = moment().subtract(i, 'days')
              const dateStr = date.format('YYYY-MM-DD')
              const {orderNum = 0, orderAmount = 0} = this.dashboard.orderStatisticsList.filter(({date}) => dateStr === date)[0] || {}
              dateList.unshift(date.date())
              orderNumList.unshift(orderNum)
              orderAmountList.unshift(orderAmount)
          }

        // console.log(dateList);
		  // 指定图表的配置项和数据
          const commonoptions = {
                xAxis: {
                    type: 'category',
                    data: dateList
                },
                yAxis: {
                    type: 'value'
                },
                grid: {
                    top: '10px',
                    left: '80px',
                    right: '0',
                    bottom: '20px',
                    containLabel: false
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                        label: {
                            backgroundColor: '#6a7985',
                            formatter: () => ''
                        }
                    }
                }
          }

		  // 使用刚指定的配置项和数据显示图表。
		  orderCountChart.setOption({...commonoptions, series: [{data: orderNumList,type: 'line', itemStyle : {
                                normal : {
                                    lineStyle:{
                                        color:'#417bff'
                                    }
                                }
                            },  }]})
          orderAmountChart.setOption({...commonoptions, series: [{data: orderAmountList,type: 'line', itemStyle : {
                                normal : {
                                    lineStyle:{
                                        color:'#fcc000'
                                    }
                                }
                            },   smooth: true}]})
        }
    }
}
</script>

<style scoped>
.card-title{
    margin: 8px;
    font-size: 14px;
}
.card-title .highlight{
    font-size: 18px;
    color: #F59A23;
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 10px;
}
.flow-title{
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #333333;
    display: inline-block;
    margin-right: 30px;
}
.connect{
    font-family: 'Arial Normal', 'Arial', sans-serif;
    float: right;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin: 14px;
}
.footer{
    font-family: 'Arial Normal', 'Arial', sans-serif;
    font-weight: 400;
    margin: 10px 0 0;
    color: #F59A23;
}
</style>
