<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="订单管理" name="first">
      <div style="display: inline-block;">
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>状态：</span>
          <el-select v-model="status" style="width:150px;margin-left: 10px;" @change="animeDat2(status)">
            <el-option v-for="item in taskstates" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>订单类型：</span>
          <el-select v-model="orderType" style="width:150px;margin-left: 10px;" @change="animeDat2(orderType)">
            <el-option v-for="item in orderTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>订单号:</span>
          <el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入订单号"
            v-model="orderNumber"></el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>商铺：</span>
          <el-select v-model="shopId" style="width:150px;margin-left: 10px;" @change="animeDat2(shopId)">
            <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId">
            </el-option>
          </el-select>&nbsp;&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>手机号:</span>
          <el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入手机号" v-model="phone">
          </el-input>&nbsp;&nbsp;
        </div>
        <div style="position: relative;display: inline-block;margin: 10px 0px;">
          <span>昵称:</span>
          <el-input style="width: 200px;" @keydown.enter.native="phoneSelect" placeholder="请输入昵称" v-model="userName">
          </el-input>&nbsp;&nbsp;
        </div>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="phoneSelect">查询
        </el-button>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans2">重置</el-button>
        <el-button style="margin-left:15px;" size="mini" type="primary" icon="document" @click="cleans2">刷新
        </el-button>
      </div>
      <el-table v-loading="tableDataLoading" :data="tableData2.list">
        <el-table-column fixed prop="orderId" label="编号" width="80"></el-table-column>
        <el-table-column fixed prop="userName" label="下单用户">
          <template slot-scope="scope">
            <span style="color: #4f9dec;cursor: pointer;" @click="updates(scope.row)">
              {{ scope.row.userName ? scope.row.userName : '未绑定' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed prop="userName" label="用户头像">
          <template slot-scope="scope">
            <img v-if="scope.row.avatar" :src="scope.row.avatar" width="60" height="60"/>
            <span v-else>
              <img :src="$http.adornUrlUp('logo.png')" width="60" height="60" />
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" label="订单类型">
          <template slot-scope="scope">
            <div>{{scope.row.orderType==1?'到店取餐':'外卖配送'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="orderType" label="配送信息" width="300">
          <template slot-scope="scope">
            <div v-if="scope.row.orderType==2">
              <div>订餐人：{{scope.row.address.userName}}</div>
              <div>订餐人电话：{{scope.row.address.userPhone}}</div>
              <div>订餐地址：{{scope.row.address.address}}({{scope.row.address.addressDetail}})</div>
            </div>
            <div v-else style="text-align: center;width: 100%;"> - </div>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="shopName" label="商铺"></el-table-column>
        <el-table-column prop="orderNumber" label="订单号" width="180"></el-table-column>
        <el-table-column prop="content" label="内容" width="300">
          <template slot-scope="scope">
            <div>
              <div v-for="(item,index) in scope.row.orderGoodsList" :key="index">
                <span>{{index+1}}.
                  商品名：{{item.goodsName}},</span><span>数量：{{item.goodsNum}},</span><span>规格：{{item.skuMessage}}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="goodsPriceZ" label="商品总价" width="100">
        </el-table-column>
        <el-table-column prop="couponMoney" label="优惠金额" width="100">
          <template slot-scope="scope">
             <div>
               <div>
                 <span>{{scope.row.couponMoney?scope.row.couponMoney:'0'}}</span>
               </div>
             </div>
           </template>
        </el-table-column>
        <el-table-column prop="packMoney" label="打包费" width="100"></el-table-column>
        <el-table-column prop="errandMoney" label="跑腿费" width="100"></el-table-column>
        <el-table-column prop="payMoney" label="支付金额" width="100"></el-table-column>
        <el-table-column prop="remark" label="订单备注" width="150">
        </el-table-column>
        <el-table-column prop="payTime" label="支付时间"></el-table-column>
        <el-table-column prop="payType" label="支付方式" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.payType === 1 ">微信</span>
            <span v-if="scope.row.payType === 2 ">余额</span>

          </template>
        </el-table-column>
        <el-table-column prop="orderCode" label="取餐号" width="100"></el-table-column>
        <el-table-column fixed="right" prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <span style="color: #4f9dec;" v-if="scope.row.status === 0 ">待结算</span>
            <span style="color: #4f9dec;" v-if="scope.row.status === 1 ">待支付</span>
            <span style="color: #4f9dec;" v-if="scope.row.status === 3 ">
              {{scope.row.orderType==1?'待取餐':'待配送'}}
            </span>
            <span style="color: #4f9dec;" v-if="scope.row.status === 4 ">已完成</span>
            <span style="color: #4f9dec;" v-if="scope.row.status === 5 ">已取消</span>
            <span style="color: #4f9dec;" v-if="scope.row.status === 6 ">制作中</span>

          </template>
        </el-table-column>
        <el-table-column fixed="right" prop="status" label="操作" width="250">
          <template slot-scope="scope">
            
              <el-button type="primary" v-if="scope.row.status === 6 " :disabled="!isAuth('missionSm:qucan')"
                @click="wancheng(scope.row)">制作已完成</el-button>
            <el-button type="danger" :disabled="!isAuth('shopsListSm:tuikuan')" style="margin: 10px;"
              v-if="scope.row.status === 3 || scope.row.status === 6|| scope.row.status === 7" @click="tuikuan(scope.row)">退款</el-button>
			  <el-button type="primary" v-if="scope.row.status === 3 " :disabled="!isAuth('missionSm:qucan')"
			    @click="wancheng(scope.row)">餐品已完成，提示顾客取餐</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="color: #B94A48;font-size: 20px;margin-top: 10px;" v-if="totalMoney">本页累计交易统计：{{totalMoney}}元</div>
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3"
          :page-sizes="[10, 20, 30, 50,100]" :page-size="limit" :current-page="page" layout="total,sizes, prev, pager, next"
          :total="tableData2.totalCount">
        </el-pagination>
      </div>
    </el-tab-pane>
    <!-- 任务拒绝弹框 -->
    <el-dialog title="任务拒绝" :visible.sync="dialogFormVisible7" center>
      <div style="margin-bottom: 10px;">
        <span style="width: 200px;display: inline-block;text-align: right;">拒绝理由：</span>
        <el-input style="width:50%;" v-model="content" type="text" placeholder="请输入拒绝理由"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible7 = false">取 消</el-button>
        <el-button type="primary" @click="refuseto()">确 定</el-button>
      </div>
    </el-dialog>
    <!--    图片展示-->
    <el-dialog title="图片" :visible.sync="dialogVisible" width="35%" :before-close="handleClose">
      <span v-if="imageUrl.length>0" v-for="(item, index) in imageUrl" :key="index" style="width: 100px;
      height: 100px;display:inline-block;">
        <!--      <el-image style = "width: 100px; height: 100px" :src = "item" :preview-src-list="imageUrl"></el-image>-->
        <img :src="item" alt="" style="width: 100px; height: 100px">
      </span>
      <span v-else>暂无图片</span>
    </el-dialog>

  </el-tabs>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible: false,
        imageUrl: [],
        limit: 10,
        page: 1,
        totalMoney:0,
        phone: '',
        userName: '',
        orderNumber: '',
        status: '',
        describes: '',
        token: '',
        taskNum: '',
        taskMoney: '',
        statesnum: [{
            label: '全部',
            value: 0
          },
          {
            label: '待接单',
            value: 2
          },
          {
            label: '待送达',
            value: 3
          },
          {
            label: '已完成',
            value: 4
          },
          {
            label: '已下架',
            value: 5
          },
        ],
        taskstates: [{
            label: '全部',
            value: ''
          },
          {
            label: '待结算',
            value: 0
          },
          {
            label: '待支付',
            value: 1
          },
          {
            label: '待取餐', //待取餐、派送中
            value: 3
          },
          {
            label: '已完成',
            value: 4
          },
          {
            label: '已取消',
            value: 5
          }
        ],
        shopId: '',
        shopList: [],
        sort: 10,
        id: '',
        btnChangeEnable: true,
        helpTakeId: '',
        helpMaintainId: '',
        content: '',
        classifyIcon: '',
        classifyId: '',
        classifyUrl: '',
        classifyName: '',
        classifyDeatilsName: '',
        formLabelWidth: '200px',
        activeName: 'first',
        tableDataLoading: false,
        dialogFormVisible: false,
        dialogFormVisible1: false,
        dialogFormVisible2: false,
        dialogFormVisible3: false,
        dialogFormVisible4: false,
        dialogFormVisible5: false,
        dialogFormVisible6: false,
        dialogFormVisible7: false,
        dialogFormVisible8: false,
        tableData: [],
        tableData2: {},
        form: {
          id: '',
          classifyName: '',
          classifyUrl: '',
          classifyIcon: '',
          describes: ''
        },
        form2: {
          id: '',
          classifyDeatilsName: '',
          classifyUrl: '',
          classifyIcon: '',
          taskNum: '',
          taskMoney: '',
        },
        protectjieData: [],
        protectpaiData: [],
        helpTaskData: [],
        safeguardData: [],
        classifyData: [],
        checkBoxData: [], //多选框选择的值
        checkBoxData2: [] ,//多选框选择的值
        orderType:'',
        orderTypes:[
          {
              label: '全部',
              value: ''
            },
            {
              label: '到店取餐',
              value: 1
            },
            {
              label: '外卖配送',
              value: 2
            },
        ],
      }
    },
    methods: {
      // 详情跳转
      updates(row) {
        this.$router.push({
          path: '/userDetail',
          query: {
            userId: row.userId
          }
        })
      },
      // 图标上传一级分类
      handleAvatarSuccess(file) {
        this.classifyIcon = file.data
      },
      // 图标上传一级分类编辑
      handleAvatarSuccess2(file) {
        this.form.classifyIcon = file.data
      },
      // 多选
      changeFun(val) {
        this.checkBoxData = val
      },
      // 多选
      changeFun2(val) {
        this.checkBoxData2 = val
      },
      handleSizeChange(val) {
        this.limit = val
        this.dataSelect()
      },
      handleCurrentChange(val) {
        this.page = val
        this.dataSelect()
      },
      handleSizeChange2(val) {
        this.limit = val
        this.classifySelect()
      },
      handleCurrentChange2(val) {
        this.page = val
        this.classifySelect()
      },
      handleSizeChange3(val) {
        this.limit = val
        this.taskdataSelect()
      },
      handleCurrentChange3(val) {
        this.page = val
        this.taskdataSelect()
      },
      // tabs切换
      handleClick(tab, event) {

        if (tab._props.label == '订单管理') {
          this.page = 1
          this.limit = 10
          this.taskdataSelect()
        }

      },
      // 下架
      soldClick(row) {
        this.$confirm(`确定要下架此任务?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`help/outHelpOrder/?helpOrderId=${row.id}`),
            method: 'post',
            data: this.$http.adornData({})
          }).then(({
            data
          }) => {
            if (data.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            } else {
              this.$message({
                message: data.msg,
                type: 'error',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }

          })
        }).catch(() => {})
      },
      //查看照片
      refund(e) {
        this.imageUrl = []
        if (e.image != null) {
          let img = e.image.split(',')
          if (img.length != 0) {
            this.imageUrl = img
          }
        }
        this.dialogVisible = true
      },
      handleClose(done) {
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        done()
        // })
        // .catch(_ => {});
      },
      // 添加一级分类弹框
      classifyStair() {
        this.dialogFormVisible = true
      },
      // 添加一级分类确定
      StairNoticeTo() {
        if (this.classifyName == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入分类名称',
            type: 'warning'
          })
          return
        }
        // if (this.classifyUrl == '') {
        //     this.$notify({
        //         title: '提示',
        //         duration: 1800,
        //         message: '请输入分类链接',
        //         type: 'warning'
        //     });
        //     return
        // }
        if (this.describes == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入分类描述',
            type: 'warning'
          })
          return
        }
        if (this.classifyIcon == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请上传分类图标',
            type: 'warning'
          })
          return
        }
        this.$http({
          url: this.$http.adornUrl('helpClassify/saveHelpClassify'),
          method: 'post',
          data: this.$http.adornData({
            'classifyName': this.classifyName,
            'state': this.state,
            'sort': this.sort,
            'classifyIcon': this.classifyIcon,
            'classifyUrl': this.classifyUrl,
            'describes': this.describes
          })
        }).then(({
          data
        }) => {
          this.dialogFormVisible = false
          this.$message({
            message: '一级分类添加成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.classifyUrl = ''
              this.classifyName = ''
              this.classifyIcon = ''
              this.describes = ''
              this.classifySelect()
            }
          })
        })
      },
      // 修改一级分类
      compile(index, rows) {
        this.dialogFormVisible2 = true
        this.form.id = rows.id
        this.form.classifyName = rows.classifyName
        this.form.classifyUrl = rows.classifyUrl
        this.form.classifyIcon = rows.classifyIcon
        this.form.describes = rows.describes
      },
      // 修改一级分类确定
      CompileNoticeTo() {
        if (this.form.classifyName == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入分类名称',
            type: 'warning'
          })
          return
        }
        if (this.form.describes == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请输入分类描述',
            type: 'warning'
          })
          return
        }
        if (this.form.classifyIcon == '') {
          this.$notify({
            title: '提示',
            duration: 1800,
            message: '请上传分类图标',
            type: 'warning'
          })
          return
        }
        this.$http({
          url: this.$http.adornUrl('helpClassify/updateHelpClassify'),
          method: 'post',
          data: this.$http.adornData({
            'id': this.form.id,
            'classifyName': this.form.classifyName,
            'classifyUrl': this.form.classifyUrl,
            'classifyIcon': this.form.classifyIcon,
            'describes': this.form.describes
          })
        }).then(({
          data
        }) => {
          this.dialogFormVisible2 = false
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.classifySelect()
            }
          })
        })
      },
      //删除一级
      deleteStair(row) {
        let delid = row.id
        this.$confirm(`确定删除此条信息?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`helpClassify/deleteClassifyById/?id=${delid}`),
            method: 'post',
            data: this.$http.adornData({})
          }).then(({
            data
          }) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.name = ''
                this.classifySelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 手机号搜索
      phoneSelect() {
        this.page = 1
        this.limit = 10
        this.taskdataSelect()
      },
      // 重置
      cleans2() {
        this.phone = ''
        this.userName = ''
        this.orderNumber = ''
        this.orderType = ''
        this.status = ''
        this.shopId = ''
        this.page = 1
        this.taskdataSelect()
      },
      // 查询
      select() {
        this.page = 1
        this.limit = 10
        this.dataSelect()
      },
      // 重置
      cleans() {
        this.phone = ''
        this.status = 0
        this.content = ''
        this.dataSelect()
      },
      // select选择事件
      animeDat(state) {
        this.page = 1
        this.dataSelect()
      },
      animeDat2(state) {
        this.page = 1
        this.taskdataSelect()
      },
      // 获取接单数据列表
      taskdataSelect() {
        // this.tableDataLoading = true
        this.totalMoney=0
        this.$http({
          url: this.$http.adornUrl('admin/order/selectAllOrder'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.page,
            'limit': this.limit,
            'phone': this.phone,
            'userName': this.userName,
            'orderNumber': this.orderNumber,
            'status': this.status,
            'shopId': this.shopId,
            'orderType':this.orderType
          })
        }).then(({
          data
        }) => {
          // this.tableDataLoading = false

          let returnData = data.data
          this.tableData2 = returnData
          for(var i in this.tableData2.list){
            this.tableData2.list[i].goodsPriceZ = 0
            // for (var i = 0; i < tableData2.list.length; i++) {
                 this.totalMoney= this.totalMoney+this.tableData2.list[i].payMoney
            // }
            if(this.tableData2.list[i].address){
              this.tableData2.list[i].address = JSON.parse(this.tableData2.list[i].address)
            }
            for (var j in this.tableData2.list[i].orderGoodsList) {
              this.tableData2.list[i].orderGoodsList[j].goodsPriceZ = (this.tableData2.list[i].orderGoodsList[j]
                .goodsPrice * this.tableData2.list[i].orderGoodsList[j].goodsNum)

              this.tableData2.list[i].goodsPriceZ = this.tableData2.list[i].goodsPriceZ+this.tableData2.list[i].orderGoodsList[j].goodsPriceZ
            }
          }
          this.totalMoney = this.totalMoney.toFixed(2)

        })
      },
      // 商铺列表
      classifySelect() {
        this.$http({
          url: this.$http.adornUrl('admin/goods/selectAllShopList'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({
          data
        }) => {
          let returnData = data.data
          this.shopList = returnData
          console.log('this.shopList', this.shopList)
        })
      },
      // 餐品完成
      wancheng(row) {
        if(row.status==3){
          var status1 = 4
        }
        if(row.status==6){
          var status1 = 3
        }
        this.$http({
          url: this.$http.adornUrl('admin/order/updateOrder'),
          method: 'post',
          data: this.$http.adornData({
            'status': status1,
            'orderId': row.orderId,
            'orderNumber': row.orderNumber
          })
        }).then(({
          data
        }) => {
          if (data.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.taskdataSelect()
              }
            })
          } else {
            this.$message({
              message: data.msg,
              type: 'warning',
              duration: 1500,
              onClose: () => {}
            })
          }
        })
      },
      // 退款
      tuikuan(row) {
        console.log('退款')
        this.$confirm(`确定要取消退款?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          console.log('取定')
          this.$http({
            url: this.$http.adornUrl('admin/order/adminCancelOrder'),
            method: 'post',
            params: this.$http.adornParams({
              'orderId': row.orderId
            })
          }).then(({
            data
          }) => {
            if (data.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.taskdataSelect()
                }
              })
            } else {
              this.$message({
                message: data.msg,
                type: 'error',
                duration: 1500,
                onClose: () => {}
              })
            }
          })
        }).catch(() => {
          console.log('取消')
        })
      }
    },
    mounted() {
      this.classifySelect()
      this.taskdataSelect()

    },
    watch: {
      '$route':'taskdataSelect'
    }
  }
</script>

<style>

</style>
