<template>
	<div class="lbody">
		<div class="zuobian">
			<div style="background-color: #ffffff;">
				<div style="padding: 20px;">
					<div>{{$t('index.newdd')}}</div>
					<div style="display: flex;align-items: center;padding-top: 20px;">
						<el-button type="text" :class="queryParams.mdId==item.id?'mdyx':'mdwx'" v-for="item in mdlist" @click="xuanzemd(item)">{{item.posName}}</el-button>
					</div>
					<div style="display: flex;align-items: center;padding-top: 5px;">
						<el-button type="text" :class="yxlex==idx?'lxyx':'lxwx'" v-for="(item,idx) in ddleix" @click="xzleixing(item,idx)">{{generateTitle(item.name)}}</el-button>
					</div>
				</div>
				<!-- 查询区域 -->
				<el-row :gutter="10" style="margin-bottom: 5px;margin-left: 20px">
				  <el-col :span="12" style="display: flex; align-items: center;">
				    <el-date-picker
				      v-model="queryParams.createTimeRange"
				      type="daterange"
				      range-separator="-"
				      :start-placeholder="$t('index.startTime')"
				      :end-placeholder="$t('index.endTime')"
				      style="width: 260px; margin-right: 10px;"
              value-format="yyyy-MM-dd"
				    />
				    <el-button type="primary" icon="el-icon-search" @click="onDateRangeSearch">{{$t('foots.search')}}</el-button>
				    <el-button icon="el-icon-refresh" @click="onDateRangeReset" style="margin-left: 8px;">{{$t('foots.reset') || '重置'}}</el-button>
				  </el-col>
				</el-row>
				<!-- 导出按钮单独一行 -->
				<el-row :gutter="10" style="margin-bottom: 5px;margin-left: 20px">
				  <el-col :span="1.5">
				    <el-button
				      type="primary"
				      plain
				      icon="el-icon-download"
				      size="mini"
				      @click="handleExport"
				    >{{ $t('index.export') }}</el-button>
				  </el-col>
				</el-row>
				<el-table
					v-loading="loding"
					:data="tableData"
					style="width: 100%">
					<el-table-column
						prop="ddId"
						:label="$t('index.ddid')"
						width="120">
					</el-table-column>
					<el-table-column
						prop="cretim"
						:label="$t('index.cretim')"
						width="140">
					</el-table-column>
					<el-table-column
						prop="amount"
						:label="$t('index.amount')"
						width="80">
					</el-table-column>
					<el-table-column
						prop="jvli"
						:label="$t('index.jvli')"
						width="130">
					</el-table-column>
					<el-table-column :label="$t('index.ddodr')" width="250">
						<template slot-scope="scope">
							<div style="display: flex;align-items: center;padding: 3px 0;" v-for="item in scope.row.food">
								<div style="margin-right: 10px;">{{item.name+'x'+item.number}}</div>
								<div style="margin-right: 5px;
									background-color: #ffaa00;
									padding: 2px 5px;color: #ffffff;
									border-radius: 3px;font-size: 10px;" v-for="os in item.ask"
								>{{os}}</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						prop="type"
						:label="$t('index.type')"
						width="80">
						<template slot-scope="scope">
							<div>{{scope.row.type==1?$t('index.ziqu'):scope.row.type==2?$t('index.tangs'):$t('index.waisong')}}</div>
						</template>
					</el-table-column>
					<el-table-column
						prop="collectPayment"
						:label="$t('index.collectPayment')"
						width="120">
						<template slot-scope="scope">
							<div>{{scope.row.collectPayment==0?$t('index.nos'):$t('index.yes')}}</div>
						</template>
					</el-table-column>
					<el-table-column
						fixed="right"
						:label="$t('index.right')"
						:width="$t('loding.language')=='vi'?'180':'110'">
						<template slot-scope="scope">
							<el-button @click="handleClick(scope.row)" type="text" size="small">{{$t('index.chak')}}</el-button>
							<el-button v-if="scope.row.state<2" type="text" size="small" @click="jiedananniu({id:scope.row.id,state:2},2)">{{$t('index.jiedan')}}</el-button>
							<el-button type="text" size="small" v-if="(scope.row.state==2||scope.row.state==3)&&scope.row.diningStatus==0"  @click="jiedananniu({id:scope.row.id,diningStatus:1},2)">{{$t('index.chucan')}}</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="width: 100%;display: flex;justify-content: flex-end;">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="queryParams.page"
						:page-size="queryParams.size"
						layout="total, prev, pager, next"
						:total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<el-dialog  :title="$t('index.tishi')" :visible.sync="visible" width="300px" append-to-body>
			<div>{{$t('index.tisiyu')}}</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="guanbist">{{$t('index.quxiao')}}</el-button>
				<el-button @click="setorderzhgt">{{$t('index.qued')}}</el-button>
			</div>
		</el-dialog>
		<!-- 详请弹窗 -->
		<el-dialog :title="$t('index.xiangq')" :visible.sync="open" width="700px" append-to-body>
		  <div>
			  <div style="display: flex;align-items: center;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.ddid')}}:</div>
				  <div>{{neirxq.ddId}}</div>
			  </div>
			  <div style="display: flex;align-items: center;margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.cretim')}}:</div>
				  <div>{{neirxq.cretim}}</div>
			  </div>
			  <div style="display: flex;margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.address')}}:</div>
				  <div v-if="psdizhi">
					  <div>{{psdizhi.name+' '+psdizhi.phone}}</div>
					  <div>{{psdizhi.country+psdizhi.city+psdizhi.area+psdizhi.address}}</div>
				  </div>
			  </div>
			  <div style="display: flex;align-items: center;margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.amount')}}:</div>
				  <div>₫{{neirxq.amount}}</div>
			  </div>
			  <div style="display: flex;align-items: center;margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.jvli')}}:</div>
				  <div>{{neirxq.jvli}}km</div>
			  </div>
			  <div style="display: flex;align-items: center;margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.freight')}}:</div>
				  <div>₫{{neirxq.freight}}</div>
			  </div>
			  <div style="display: flex;margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;">{{$t('index.qishou')}}:</div>
				  <div style="display: flex;" v-if="qisou">
					  <img :src="murl+qisou.avatar" style="width: 40px;height: 40px;border-radius: 5px;">
					  <div style="margin-left: 10px;">
						  <div style="font-weight: bold;margin-bottom: 5px;">{{qisou.nickName}}</div>
						  <div>{{qisou.phone}}</div>
					  </div>
				  </div>
			  </div>
        <!-- 新增：促销活动信息 -->
        <div style="margin: 20px 0; padding: 10px; background: #fff7e6; border-radius: 6px;">
          <div style="font-weight: bold; color: #ff5500; margin-bottom: 5px;">{{$t("index.cxhdxx")}}</div>
          <div v-if="neirxq.salesName || neirxq.mdSalesName">
            <div v-if="neirxq.salesName">
              {{$t("index.ptcxhd")}}：{{ neirxq.salesName }}
              <span v-if="neirxq.salesReduction">（{{$t("index.jm")}}：{{ neirxq.salesReduction }}）</span>
            </div>
            <div v-if="neirxq.mdSalesName">
              {{$t("index.sjcxhd")}}：{{ neirxq.mdSalesName }}
              <span v-if="neirxq.mdSalesReduction">（{{$t("index.jm")}}：{{ neirxq.mdSalesReduction }}）</span>
            </div>
          </div>
          <div v-else>{{$t("index.none")}}</div>
        </div>
        <!-- 新增：优惠券信息 -->
        <div style="margin: 20px 0; padding: 10px; background: #e6f7ff; border-radius: 6px;">
          <div style="font-weight: bold; color: #1890ff; margin-bottom: 5px;">{{$t("index.yhqxx")}}</div>
          <div v-if="neirxq.yhName || neirxq.mdYhName">
            <div v-if="neirxq.yhName">
              {{$t("index.ptyhq")}}：{{ neirxq.yhName }}
              <span v-if="neirxq.discountAmount">（{{$t("index.yhje")}}：{{ neirxq.discountAmount }}）</span>
            </div>
            <div v-if="neirxq.mdYhName">
              {{$t("index.sjyhq")}}：{{ neirxq.mdYhName }}
              <span v-if="neirxq.mdDiscountAmount">（{{$t("index.yhje")}}：{{ neirxq.mdDiscountAmount }}）</span>
            </div>
          </div>
          <div v-else>{{$t("index.none")}}</div>
        </div>
        <!-- 新增：积分使用情况 -->
        <div style="margin: 20px 0; padding: 10px; background: #f3e6ff; border-radius: 6px;">
          <div style="font-weight: bold; color: #722ed1; margin-bottom: 5px;">{{$t("index.jfsyqk")}}</div>
          <div v-if="neirxq.points && neirxq.pointsReduction">
            <div v-if="neirxq.points">
              {{$t("index.jfsysl")}}：{{ neirxq.points }}
              <span v-if="neirxq.pointsReduction">（{{$t("index.jfdkje")}}：{{ neirxq.pointsReduction }}）</span>
            </div>
          </div>
          <div v-else>{{$t("index.none")}}</div>
        </div>
			  <div style="margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;margin-bottom: 20px;">{{$t('index.foods')}}:</div>
				  <el-row style="margin:0 0 0 120px">
				    <el-col :span="8" v-for="item in neirxq.food" offset="1" style="margin-bottom: 10px;width:200px">
				      <el-card :body-style="{ padding: '0px' }">
				        <img :src="murl+item.image" class="image">
				        <div style="padding: 14px;display: flex;flex-direction: column;">
				          <span>{{item.name}}×{{item.number}}</span>
						  <span style="color: #ff557f;">₫{{format(item.price)}}</span>
						  <div style="display: flex;align-items: center;flex-wrap: wrap;">
							  <el-tag style="margin: 5px 5px;" type="danger" v-for="or in item.ask">{{or}}</el-tag>
						  </div>
				        </div>
				      </el-card>
				    </el-col>
				  </el-row>
			  </div>
			  <div  style="margin: 20px 0;">
				  <div style="display: flex;justify-content: flex-end;width: 160px;margin-right: 20px;margin-bottom: 20px;">{{$t('index.beizu')}}:</div>
				  <div>{{neirxq.remarks}}</div>
			  </div>
		  </div>
		  <div slot="footer" class="dialog-footer">
			<el-button v-if="neirxq.state<2" @click="setorderzhgt({id:neirxq.id,state:2})">{{$t('index.jiedan')}}</el-button>
			<el-button v-if="(neirxq.state==2||neirxq.state==3)&&neirxq.diningStatus==0" @click="setorderzhgt({id:neirxq.id,diningStatus:1})">{{$t('index.chucan')}}</el-button>
		    <el-button @click="cancel">{{$t('index.guanbi')}}</el-button>
		  </div>
		</el-dialog>
		<div class="youbian">
			<el-col :span="8" style="width:18vw">
			    <el-card class="shujzu">
			      <img class="touxia" :src="murl+user.avatar">
			      <div class="shujzu" style="padding: 10px;">
			        <div style="font-size: 25px;font-weight: bold;margin-bottom: 5px;">{{user.nickName}}</div>
					<div style="font-size: 15px;">{{user.userName}}</div>
					<div style="padding: 3px 10px;background-color: #ffaa00;margin-top: 10px;color: #ffffff;border-radius: 4px;">{{user.userType=='1'?$t('index.shus'):user.userType=='2'?$t('index.sqsu'):$t('index.user')}}</div>
			      </div>
			    </el-card>
			</el-col>
			<div class="hengzy">
				<div>
					<div class="wzsla">{{ustj.stroe}}</div>
					<div class="xiaozi">{{$t('index.dpshu')}}</div>
				</div>
				<div>
					<div class="wzsla">{{ustj.dtshour}}</div>
					<div class="xiaozi">{{$t('index.ddsour')}}</div>
				</div>
				<div>
					<div class="wzsla">{{ustj.dtorder}}</div>
					<div class="xiaozi">{{$t('index.dddingd')}}</div>
				</div>
			</div>
			<div>
				<div class="hxiag">
					<div style="display: flex;align-items: center;justify-content: center;width: 80px;height: 80px;background-color: #df9797;">
						<img style="width: 40px;height: 40px;" src="../assets/zshour.png" alt="" />
					</div>
					<div style="margin-left: 20px;font-size: 13px;color: #787878;">
						<div style="font-size: 22px;font-weight: bold;color: #ff557f;">{{ustj.qbshour}}</div>
						<div>{{$t('index.zongsr')}}</div>
					</div>
				</div>
				<div class="hxiag">
					<div style="display: flex;align-items: center;justify-content: center;width: 80px;height: 80px;background-color: #cfe4ee;">
						<img style="width: 40px;height: 40px;" src="../assets/ddlan.png" alt="" />
					</div>
					<div style="margin-left: 20px;font-size: 13px;color: #787878;">
						<div style="font-size: 22px;font-weight: bold;color: #55aaff;">{{ustj.qborder}}</div>
						<div>{{$t('index.zddlng')}}</div>
					</div>
				</div>
				<div class="hxiag">
					<div style="display: flex;align-items: center;justify-content: center;width: 80px;height: 80px;background-color: #dfddbd;">
						<img style="width: 40px;height: 40px;" src="../assets/ktixian.png" alt="" />
					</div>
					<div style="margin-left: 20px;font-size: 13px;color: #787878;">
						<div style="font-size: 22px;font-weight: bold;color: #ffaa00;">{{ustj.ketixian}}</div>
						<div>{{$t('index.ketixan')}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {getindex,getshordlist,getstorelist,setorder} from '@/api/index';
	import {generateTitle} from '../utils/i18n'
  import {download} from '@/router/request'
	export default{
		name:"index",
		data(){
			return {
				loding:false,
				murl: process.env.VUE_APP_BACKEND_URL,
				user:{},
				ustj:{},
				open:false,
				visible:false,
				ddleix:[{
					name:'Unaccepted',
					type:'z01',
					dstate:''
				},{
					name:'Accepted',
					type:'z23',
					dstate:'0'
				},{
					name:'Mealalreadyserved',
					type:'',
					dstate:'1'
				},{
					name:'RefundAftersales',
					type:'z6789',
					dstate:''
				}],
				yxlex:0,
				// 查询参数
				total: 0,
				queryParams: {
				  page: 1,
				  size: 10,
				  mdId:'',
				  state: 'z01',
				  diningStatus: '',
				  createTimeRange: []
				},
				dqxzmd:'',
				tableData: [],
				mdlist:[],
				neirxq:{},
				psdizhi:{},
				qisou:{},
				orderrow:{},
				tjzt:0
			}
		},
		created() {
			this.user = JSON.parse(localStorage.getItem('user'));
			// console.log('1111111111',this.user);
			this.getshindex();
			this.getmendlist(0);
		},

		methods:{
			generateTitle,
			format(str) {
			  var arr = [];
			    var counter = 0;
			    str = (str || 0).toString().split("");
			    for (var i = str.length - 1; i >= 0; i--) {
			      counter++;
			      arr.unshift(str[i]);
			      if (!(counter % 3) && i !== 0) {
			        arr.unshift(",");
			      }
			    }
			    return arr.join("");
			},
			setorderzhgt(order){
				this.orderrow = this.tjzt==2?this.orderrow:order;
				setorder(this.orderrow).then(res=>{
					// console.log('提交结果',res)
					if(res.code==200){
						if(this.tjzt==0){
							this.cancel()
						}else{
							this.guanbist();
						}
						this.getshddlist();
					}
				})
			},
			//接单弹窗
			jiedananniu(order,zt){
				this.orderrow = order;
				this.tjzt = zt;
				this.visible = true;
			},
			guanbist(){
				this.orderrow = {};
				this.tjzt = 0;
				this.visible = false;
			},
			// 关闭弹窗按钮
			cancel() {
			  this.open = false;
			},
			handleClick(row){
				this.neirxq = row;
				this.orderrow = row;
				this.psdizhi = row.shaddress;
				this.qisou = row.qishou;
				this.open = true;
			},
			//获取首页统计
			getshindex(){
				getindex(this.user.userId).then(response => {
					// console.log("获取用户统计",response);
					this.ustj = response.data;
				});
			},
			//选择门店
			xuanzemd(item){
				this.queryParams.mdId = item.id;
				this.getmendlist(1);
			},
			//选择订单类型
			xzleixing(item,idx){
				this.yxlex = idx;
				this.queryParams.state = item.type;
				this.queryParams.diningStatus = item.dstate;
				this.getmendlist(1);
			},
			// 获取门店列表
			getmendlist(lx){
				getstorelist().then(response => {
					// console.log("获取门店列表",response);
					this.mdlist = response.data || [];
					if(lx==0 && response.data && response.data.length > 0){
						this.queryParams.mdId = response.data[0].id;
					}
					this.getshddlist();
				});
			},
			//获取门店订单
			getshddlist(){
				this.loding = true;
				// 拆分时间范围
				let params = { ...this.queryParams };
				if (params.createTimeRange && Array.isArray(params.createTimeRange) && params.createTimeRange.length === 2) {
				  params.startTime = params.createTimeRange[0];
				  params.endTime = params.createTimeRange[1];
				}
				delete params.createTimeRange;
				getshordlist(params).then(response => {
					this.total = response.data.total;
					var list = response.data.list;
					for(let i=0;i<list.length;i++){
					  list[i].amount = this.format(list[i].amount);
					  list[i].freight = this.format(list[i].freight);
					  list[i].priceAll = this.format(list[i].priceAll);
					}
					this.tableData = list;
					// console.log("获取订单",response);
					this.loding = false;
				});
			},
			//翻页
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.queryParams.size = val;
				this.getshddlist();
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.queryParams.page = val;
				this.getshddlist();
			},
      /** 导出按钮操作 */
      handleExport() {
        console.log('导出按钮操作')
        console.log(this.$t)
        // 拆分时间范围
        let params = { ...this.queryParams };
        if (params.createTimeRange && Array.isArray(params.createTimeRange) && params.createTimeRange.length === 2) {
          params.startTime = params.createTimeRange[0];
          params.endTime = params.createTimeRange[1];
        }
        delete params.createTimeRange;
        download('/index/export', {
          ...params
        }, `order_${new Date().getTime()}.xlsx`, {
          headers: {
            isToken: true
          }
        },this.$t)
      },
      onDateRangeChange() {
        this.getshddlist();
      },
      onDateRangeSearch() {
        this.getshddlist();
      },
      onDateRangeReset() {
        this.queryParams.createTimeRange = [];
        this.getshddlist();
      }
		}
	}
</script>

<style>
	.image{
		width: 200px;
		height: 150px;
	}
	.mdyx{
		margin-right: 10px;
		font-size: 18px;
		font-weight: bold;
	}
	.mdwx{
		margin-right: 10px;
		font-size: 18px;
		color:#b9b9b9;
	}
	.lxyx{
		margin-right: 10px;
		font-size: 12px;
		font-weight: bold;
	}
	.lxwx{
		margin-right: 10px;
		font-size: 12px;
		color:#b9b9b9;
	}
	.hxiag{
		display: flex;
		align-items: center;
		width: 18vw;
		background-color: #fafafa;
		margin-top: 20px;
	}
	.lbody{
		display: flex;
		justify-content: space-between;
	}
	.hengzy{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 18vw;
		background-color: #fafafa;
		padding: 20px 10px;
		margin-top: 20px;
	}
	.wzsla{
		font-size: 20px;
		font-weight: bold;
	}
	.xiaozi{
		font-size: 13px;
		color: #b1b5ba;
	}
	.zuobian{
		width: 60vw;
		height: 88vh;
		background-color: #ecf2f9;
		border-radius: 10px;
		padding: 20px;
	}
	.youbian{
		width: 21vw;
		height: 88vh;
		background-color: #ecf2f9;
		border-radius: 10px;
		padding: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.shujzu{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.touxia{
		width: 150px;
		height: 150px;
		border-radius: 75px;
	}
</style>
