<template>
  <div class="app-container" style="border-box:box-sizing;">
    <el-row :gutter="30">

<!--      左侧菜单-->
      <el-col :span="2">
        <el-menu :default-active="menu" class="el-menu-vertical-demo" @select="leftMenuSelect">
          <el-menu-item index="1">
            <i class="el-icon-goods">普通收银</i>
          </el-menu-item>

          <el-menu-item :disabled="app.isEmpty(member.memberId)" index="2" style="border-top: none;">
            <i class="el-icon-bank-card">开卡</i>
          </el-menu-item>

          <el-menu-item :disabled="app.isEmpty(memberCard.memberCardId)" index="3" style="border-top: none;">
            <i class="el-icon-bank-card">续卡</i>
          </el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="13">
 <!--      中间 会员信息-->
        <el-autocomplete
          style="width: 35%"
          popper-class="my-autocomplete"
          v-model="querySearchStr"
          :fetch-suggestions="querySearch"
          placeholder="会员检索"
          @select="handleMemberSelect">
          <i
            class="el-icon-search el-input__icon"
            slot="prefix"
          >
          </i>
          <template slot-scope="{ item }">
            <div v-if="item.errorMsg">
              {{item.errorMsg}}
            </div>

            <template v-else>
              <div class="name">
                <i class="el-icon-user"></i>
                {{ item.memberName }}
              </div>
              <span class="addr">
                <i class="el-icon-phone"></i>
                {{ item.memberPhone }}
              </span>
            </template>
          </template>
        </el-autocomplete>


        <el-autocomplete
          style="width: 35%;margin-left: 50px;"
          popper-class="my-autocomplete"
          v-model="queryCardSearchStr"
          :fetch-suggestions="queryCardSearch"
          placeholder="会员卡号检索"
          @select="handleMemberCardSelect">
          <i
            class="el-icon-search el-input__icon"
            slot="prefix"
          >
          </i>
          <template slot-scope="{ item }">
            <div v-if="item.errorMsg">
              {{item.errorMsg}}
            </div>

            <template v-else>
              <div class="name">
                <i class="el-icon-bank-card"></i>
                {{ item.cardNo }}
              </div>

              <div class="name">
                <i class="el-icon-user"></i>
                {{ item.member.memberName }}
              </div>

              <span class="addr">
                <i class="el-icon-phone"></i>
                {{ item.member.memberPhone  }}
              </span>
            </template>
          </template>
        </el-autocomplete>


        <el-descriptions :column="2" border title="用户信息" v-if="member.memberId"
                         style="margin-top: 20px;margin-bottom: 20px;">
          <el-descriptions-item :labelStyle="{ 'width': '80px' }" label="用户名">{{member.memberName}}
            <el-button style="margin-left: 30px;" size="mini" type="success" plain @click="clearMember">重选</el-button>
          </el-descriptions-item>
          <el-descriptions-item :labelStyle="{ 'width': '80px' }" label="手机号">{{member.memberPhone}}
          </el-descriptions-item>
          <el-descriptions-item :span="2" :labelStyle="{ 'width': '80px' }" label="备注">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="member.remark">
            </el-input>
          </el-descriptions-item>
          <el-descriptions-item :span="2" label="会员卡" :labelStyle="{ 'height': '100px' }">
            <el-collapse v-if="app.isNotEmpty(memberCard.memberCardId)" v-model="collapseItem"
                         style="border-top: none;">
              <el-collapse-item name="1">
                <el-tag
                  slot="title"
                  class="el-tag"
                  @click="chooseMemberCard(item)"
                  type="danger"
                  effect="light">
                  卡号：{{memberCard.cardNo}} 卡名：{{ memberCard.cardName }} <br/>余额：{{memberCard.amount}}
                  赠送金额：{{memberCard.giveAmount}}
                </el-tag>

                <el-tag
                  class="el-tag"
                  @click="chooseMemberCard(item)"
                  v-for="item in memberCardList"
                  :key="item.memberCardId"
                  type="danger"
                  :effect="memberCard.memberCardId==item.memberCardId?'light':'plain'">
                  卡号：{{item.cardNo}} 卡名：{{ item.cardName }} <br/>余额：{{item.amount}} 赠送金额：{{item.giveAmount}}
                </el-tag>


              </el-collapse-item>
            </el-collapse>
            <span v-else class="info-text" style="cursor: pointer;" @click="menu = '2'">去开卡</span>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions border title="用户信息" v-else style="margin-top: 20px;margin-bottom: 20px;">
          <el-descriptions-item label="用户名">散客

            <el-button style="margin-left: 30px;" size="mini" type="success" plain @click="addMember">快速建档</el-button>
          </el-descriptions-item>
        </el-descriptions>


        <!--      中间 购物车信息-->
        <div class="grid-content bg-purple">
          <el-table
            v-if="menu == '1'"
            border
            height="270"
            max-height="270"
            :data="shopCart"
            style="width: 100%;margin-bottom: 20px;">

            <el-table-column
              align="center"
              prop="categoryName"
              label="分类"
              width="100">
            </el-table-column>

            <el-table-column
              align="center"
              prop="productName"
              label="商品名"
              width="120"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="productAmount"
              label="价格"
              width="80"
            >
              <template slot-scope="scope">
                <span v-if="app.isEmpty(member.memberId)" class="price-text">{{ scope.row.productAmount }}</span>
                <span v-else="member.memberId" class="price-text">{{ scope.row.productMemberAmount }}</span>
              </template>
            </el-table-column>

            <el-table-column
              v-if="app.isNotEmpty(memberCard.memberCardId)"
              align="center"
              label="折扣"
              width="80"
            >
              <template slot-scope="scope">
                <span class="price-text">{{ scope.row.discount}}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="折后价"
              width="80"
            >
              <template slot-scope="scope">
                <span class="price-text">{{ scope.row.realAmount}}</span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="count"
              label="数量"
              width="155"
            >
              <template slot-scope="scope">
                <el-input-number size="mini" :min="0" :max="100" v-model="scope.row.count"
                                 @change="handleShopCartChange($event,scope)"></el-input-number>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="totalRealAmount"
              label="总金额"
              width="80"
            >
              <template slot-scope="scope">
                <span class="price-text">{{ scope.row.totalRealAmount  }}</span>
              </template>
            </el-table-column>


            <el-table-column
              align="center"
              label="关联员工"
            >
              <template slot-scope="scope">

                <el-tag
                  v-for="tag in scope.row.serverList"
                  :key="tag.serverId"
                  closable
                  @close="handleServerClose(scope.row.serverList,index)"
                  type="warning">
                  {{tag.serverName}}
                </el-tag>

                <el-button  size="mini" type="success" plain @click="addServer(scope.$index)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table
            v-if="menu == '2'"
            border
            height="200"
            max-height="200"
            :data="shopCart"
            style="width: 100%;margin-bottom: 20px;">

            <el-table-column
              align="center"
              prop="cardName"
              label="卡名"
            >
            </el-table-column>


            <el-table-column
              align="center"
              prop="cardNo"
              label="设置卡号"
              width="200"
            >
              <template slot-scope="scope">
                <el-input placeholder="请输入卡号" v-model="scope.row.cardNo">
                  <!--              <template slot="append">.com</template>-->
                </el-input>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="cardDiscount"
              label="卡折扣"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="todos"
              label="工本费"
            >


            </el-table-column>

            <el-table-column
              align="center"
              prop="cardAmount"
              label="开卡金额"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.cardAmount"
                  @keyup.native="app.clearNoNum"
                  placeholder="请输入"></el-input>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="giveAmount"
              label="赠送金额"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.giveAmount"
                  @keyup.native="app.clearNoNum"
                  placeholder="请输入"></el-input>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="关联员工"
            >
              <template slot-scope="scope">

                <el-tag
                  v-for="tag in scope.row.serverList"
                  :key="tag.serverId"
                  closable
                  @close="handleServerClose(scope.row.serverList,index)"
                  type="warning">
                  {{tag.serverName}}
                </el-tag>

                <el-button  size="mini" type="success" plain @click="addServer(scope.$index)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-table
            v-if="menu == '3'"
            border
            height="200"
            max-height="200"
            :data="shopCart"
            style="width: 100%;margin-bottom: 20px;">

            <el-table-column
              align="center"
              prop="cardName"
              label="卡名"
            >
            </el-table-column>


            <el-table-column
              align="center"
              prop="cardNo"
              label="设置卡号"
              width="200"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="discount"
              label="卡折扣"
            >
            </el-table-column>

            <el-table-column
              align="center"
              prop="chargedCardAmount"
              label="续卡金额"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.chargedCardAmount"
                  @keyup.native="app.clearNoNum"
                  placeholder="请输入"></el-input>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="chargedGiveAmount"
              label="赠送金额"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.chargedGiveAmount"
                  @keyup.native="app.clearNoNum"
                  placeholder="请输入"></el-input>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              label="关联员工"
            >
              <template slot-scope="scope">

                <el-tag
                  v-for="tag in scope.row.serverList"
                  :key="tag.serverId"
                  closable
                  @close="handleServerClose(scope.row.serverList,index)"
                  type="warning">
                  {{tag.serverName}}
                </el-tag>

                <el-button  size="mini" type="success" plain @click="addServer(scope.$index)">选择</el-button>
              </template>
            </el-table-column>
          </el-table>

          <el-divider></el-divider>

          <div>
            总金额: <span class="price-text">{{app.getFloatStr(getTotalRealAmount)}}</span>
          </div>

          <el-input placeholder="不填则自动生成" size="small " v-model="sellNo"
                    style="width: 300px;margin-bottom: 15px;margin-top: 10px;">
            <template slot="prepend">订单号</template>
          </el-input>

          <el-row>
            <el-button @click="pay" type="success">结算</el-button>
            <el-button @click="pendingOrder" type="warning">挂单</el-button>
            <el-button @click="takePendingOrder" type="primary">取单</el-button>

            <pay-type ref="payTypeRef" @ok="getPayList"/>
          </el-row>
        </div>
      </el-col>

<!--      右侧商品卡项选择-->
      <el-col :span="9">
        <div class="grid-content bg-purple">
          <el-tabs v-if="menu == 1" v-model="activeName" @tab-click="handleCategoryClick" type="border-card"
                   style="height: calc(100vh - 180px);width: 100%;overflow: scroll;overflow:hidden;">
            <el-tab-pane
              v-for="(item, index) in categoryList"
              :key="item.categoryId"
              :label="item.categoryName"
              :name="item.categoryId"
            >
              <div>
                <el-row :gutter="20" style="" v-if="productList.length>0">
                  <el-col @click.native="chooseProduct(item)" :span="8" v-for="item in productList"
                          :key="item.productId" style="margin-top: 10px;cursor: pointer;">
                    <el-card class="product-card" :body-style="{ padding: '0px' }" style="height: 210px;">

                      <div
                        style="height: 110px;display: flex;align-items: center;justify-content: center; 	box-sizing: border-box;">
                        <img style="width:85%;height: 90px;border-radius: 5px;border: 1px solid #eee;"
                             :src="baseUrl  + item.productImageUrl" class="image"/>
                      </div>
                      <div style="padding:10px 0 0 10px;font-size: 16px;">
                        {{item.productName}} <br/><span style="font-size: 12px;" class="gray-text"
                                                   v-show="item.stockControl==1">库存：{{item.productCount}}&nbsp;</span>
                      </div>
                      <div style="padding:5px 0 0 10px;">
                        <span style="font-size: 14px;"> 散客价： <span
                          class="price-text">¥ {{item.productAmount}}</span></span><br/>
                        <span style="font-size: 14px;"> 会员价： <span
                          class="price-text">¥ {{item.productMemberAmount}}</span></span>
                      </div>

                    </el-card>
                  </el-col>
                </el-row>
                <div v-else>
                  <el-empty description="该分类商品为空">
                  </el-empty>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
          <el-tabs v-if="menu == 2" v-model="cardActiveName" @tab-click="handleCardClick" type="border-card"
                   style="height: calc(100vh - 180px);width: 100%;overflow: scroll;overflow:hidden;">
            <el-tab-pane
              v-for="(item, index) in cardTypeList"
              :key="item.cardType"
              :label="item.cardName"
              :name="item.cardType"
            >
              <div>
                <el-row :gutter="20" style="" v-if="cardList.length>0">
                  <el-col @click.native="chooseCard(item)" :span="8" v-for="item in cardList" :key="item.cardId"
                          style="margin-top: 10px;cursor: pointer;">
                    <el-card class="product-card" :body-style="{ padding: '0px' }" style="height: 190px;">

                      <div
                        style="height: 110px;display: flex;align-items: center;justify-content: center; 	box-sizing: border-box;">
                        <i style="font-size:60px !important;border-radius: 5px;color: #409EFF;"
                           class="el-icon-bank-card"></i>
                        <!--                        <img style="width:85%;height: 140px;border-radius: 5px;border: 1px solid #eee;" :src="baseUrl  + item.productImageUrl" class="image"/>-->
                      </div>
                      <div style="padding:10px 0 0 10px;font-size: 16px;">
                        {{item.cardName}}
                      </div>
                      <div style="padding:5px 0 0 10px;">
                        <span style="font-size: 14px;"> 开卡金额： <span
                          class="price-text">¥ {{item.cardAmount}}</span></span><br/>
                        <span style="font-size: 14px;"> 赠送金额： <span
                          class="price-text">¥ {{item.giveAmount}}</span></span>
                      </div>

                    </el-card>
                  </el-col>
                </el-row>
                <div v-else>
                  <el-empty description="该分类商品为空">
                  </el-empty>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>

    <choose-sell ref="chooseSellRef" @ok="getPendingSell"/>
    <add-member ref="addMemberRef" @ok="getAddMember"/>
    <choose-server ref="chooseServerRef" @ok="getServer"/>
  </div>
</template>

<script>
  import {addSelljson} from "@/api/business/sellJson/sellJson";
  import addMember from "@/views/business/member/addMember";

  import {accAdd, accMul, isEmpty, isNotEmpty, getFormattedTimeAsSerialNumber, getSelectObj, deepClone} from "@/utils";
  import confirm from "@/utils/confirm";
  import {getCategoryList} from "@/api/business/category/category";
  import {getProductList} from "@/api/business/product/product";
  import {getMemberList,getMemberSearchList} from "@/api/business/member/member";
  import {getCardList} from "@/api/business/card/card";
  import PayType from "@/views/business/cashier/payType";
  import {buildCard, productPay, chargedCard} from "@/api/business/pay/pay";
  import {getMemberCardList,getMemberCardSearchList} from "@/api/business/memberCard/memberCard";
  import ChooseSell from "@/views/business/cashier/chooseSell";
  import ChooseServer from "@/views/business/cashier/chooseServer";

  export default {
    name: "cashierDesk",
    components: {ChooseServer, ChooseSell, PayType,addMember},
    data() {
      return {
        //基础信息
        menu: "",
        cardTypeList: [
          {cardType: "1", cardName: '折扣卡'}
        ],
        categoryList: [],
        cardList: [],
        productList: [],
        //商品分类当前激活菜单
        activeName: "",
        cardActiveName: "",
        //会员信息
        collapseItem: 1,
        member: {},
        memberCard: {},
        memberCardList: [],
        //搜索信息
        querySearchStr: '',
        queryCardSearchStr: '',
        //结算相关
        shopCart: [],
        shopCartIndex:0,
        sellNo: '',
        //挂单id
        pendingSellId: ''
      }
    },
    mounted() {
      //初始化 获取相关信息
      this.getCategoryList()
      this.getCardList()
      this.menu = '1'
      this.cardActiveName = this.cardTypeList[0].cardType
    },
    computed: {
      //计算总支付金额
      getTotalRealAmount() {
        let totalRealAmount = 0;
        if (this.shopCart.length == 0) {
          return totalRealAmount;
        }

        if (this.menu == "1") {
          for (let product of this.shopCart) {
            const noMember = isEmpty(this.member.memberId)
            let productTotalRealAmount
            if (noMember) {
              this.$set(product, 'realAmount', product.productAmount);
              productTotalRealAmount = accMul(product.productAmount, product.count)
            } else if (isNotEmpty(this.memberCard.memberCardId)) {
              let realDiscount = accMul(this.memberCard.discount, 0.1);
              this.$set(product, 'discount', realDiscount)
              let realAmount = accMul(product.productMemberAmount, realDiscount);
              this.$set(product, 'realAmount', realAmount)
              productTotalRealAmount = accMul(realAmount, product.count)
            } else {
              this.$set(product, 'realAmount', product.productMemberAmount);
              productTotalRealAmount = accMul(product.productMemberAmount, product.count)
            }

            this.$set(product, 'totalRealAmount', productTotalRealAmount)
            totalRealAmount = accAdd(totalRealAmount, productTotalRealAmount);
          }
        } else if (this.menu == "2") {
          let cardAmount = this.shopCart[0].cardAmount
          let todos = this.shopCart[0].todos
          totalRealAmount = accAdd(cardAmount, todos);
          this.$set(this.shopCart[0], 'totalRealAmount', totalRealAmount)
        } else if (this.menu == "3") {
          totalRealAmount = this.shopCart[0].chargedCardAmount
          this.$set(this.shopCart[0], 'totalRealAmount', totalRealAmount)
        }

        return totalRealAmount;
      }
    },
    watch: {
      //监听购物车改变 暂时没用到
      shopCart(newVal, oldVal) {
        let showCardList = newVal
        console.log('这是监听属性新的')
      },
      //会员改变时 会员卡信同时改变
      member(newVal, oldVal) {
        console.log('这是监听属性新的')
        console.log(newVal)
        if (isEmpty(newVal.memberId)) {
          console.log('member为空了')
          this.memberCard = this.$options.data().memberCard
          this.memberCardList = this.$options.data().memberCardList
          //没有会员自然跳转到商品结算页
          this.menu = '1'
        }
        //当会员切换时 清空购物车
        // this.shopCart = this.$options.data().shopCart
      }
    },
    methods: {
      //添加会员
      addMember(){
        this.$refs.addMemberRef.open()
      },
      getAddMember(e){
        this.member = e
      },
      clearMember() {
        this.member = this.$options.data().member
        this.shopCart = this.$options.data().shopCart
      },
      //搜索会员
      querySearch(queryString, cb) {
        if (queryString) {
          getMemberSearchList({querySearch: queryString}).then(res => {
            // 调用 callback 返回建议列表的数据
            if(res.data.length>0){
              cb(res.data);
            }else{
              cb([
                {errorMsg: '暂无数据'}
              ])
            }
          })
        } else {
          cb([
            {errorMsg: '暂无数据'}
          ])
        }
      },
      handleMemberSelect(e) {
        console.log(e)
        this.member = e
        this.getMemberCardList()
      },
      queryCardSearch(queryString, cb) {
        if (queryString) {
          getMemberCardSearchList({querySearch: queryString}).then(res => {
            // 调用 callback 返回建议列表的数据
            if(res.data.length>0){
              cb(res.data);
            }else{
              cb([
                {errorMsg: '暂无数据'}
              ])
            };
          })
        } else {
          cb([
            {errorMsg: '暂无数据'}
          ])
        }
      },
      handleMemberCardSelect(e) {
        console.log(e)
        this.member = e.member
        this.getMemberCardList(e.memberCardId)
      },
      //获取基本信息
      getCategoryList() {
        getCategoryList({categoryStatus:0}).then(res => {
          this.categoryList = res.data
          if (this.categoryList.length > 0) {
            this.activeName = this.categoryList[0].categoryId
            getProductList({categoryId: this.activeName,productStatus:0}).then(res => {
              this.productList = res.data
            })
          }
        })
      },
      handleCategoryClick(e) {
        //拿到分类id
        const categoryId = e.name
        getProductList({categoryId: categoryId}).then(res => {
          this.productList = res.data
        })
      },
      handleCardClick(e) {

      },
      getCardList() {
        getCardList().then(res => {
          this.cardList = res.data
        })
      },
      chooseCard(e) {
        let card = e;
        let findCardIndex = this.shopCart.findIndex(p => p.cardId == card.cardId);
        console.log(findCardIndex)
        if (findCardIndex == -1) {
          card.cardNo = getFormattedTimeAsSerialNumber()
          this.shopCart.push(deepClone(card))
        }
      },
      //选择商品添加购物车
      chooseProduct(e) {
        let product = e;
        let findProductIndex = this.shopCart.findIndex(p => p.productId == product.productId);
        console.log(findProductIndex)
        if (findProductIndex == -1) {
          this.$set(product, 'count', 1)
          this.shopCart.push(product)
        } else {
          this.shopCart[findProductIndex].count += 1
        }
        console.log(this.shopCart)
      },
      handleShopCartChange(e, scope) {
        console.log(e)
        console.log(scope.$index)
        if (e == 0) {
          confirm('要删除该条目吗？').then(res => {
            if (res) {
              this.shopCart.splice(scope.$index, 1)
            } else {
              this.shopCart[scope.$index].count = 1
            }
          })
        }
      },
      //获取某个会员下的所有会员卡 传入则选中目标卡项
      getMemberCardList(memberCardId) {
        if (isEmpty(this.member.memberId)) return
        // 发送请求获取会员卡列表
        getMemberCardList({memberId: this.member.memberId}).then(response => {
          console.log('getMemberCardList===>' + response.data)
          // 如果获取到的列表长度为 0
          if (response.data.length == 0) {
            // 恢复默认的会员卡列表和会员卡信息
            this.memberCardList = this.$options.data().memberCardList
            this.memberCard = this.$options.data().memberCard
          } else {
            // 设置获取到的会员卡列表
            this.memberCardList = response.data
            // 如果会员卡id不为空
            if (isNotEmpty(memberCardId)) {
              // 根据会员卡id获取选中的对象
              const memberCard = getSelectObj(memberCardId, this.memberCardList, 'memberCardId')
              this.memberCard = memberCard
            } else {
              // 否则设置为列表中的第一个会员卡
              this.memberCard = this.memberCardList[0]
            }
          }
        })
      },
      //选择某个会员卡
      chooseMemberCard(item) {
        this.memberCard = item

        if (this.menu == '3') {
          this.shopCart = this.$options.data().shopCart

          let memberCard = this.memberCard;
          let findCardIndex = this.shopCart.findIndex(p => p.meberCardId == memberCard.meberCardId);
          console.log(findCardIndex)
          if (findCardIndex == -1) {
            //使用克隆 避免改变会员卡原始信息
            this.shopCart.push(deepClone(memberCard))
          }
        }
      },
      //左侧菜单切换
      leftMenuSelect(e) {
        this.menu = e
        //切换时清空购物车
        this.shopCart = this.$options.data().shopCart

        if (this.menu == '3') {
          let memberCard = this.memberCard;
          let findCardIndex = this.shopCart.findIndex(p => p.meberCardId == memberCard.meberCardId);
          console.log(findCardIndex)
          if (findCardIndex == -1) {
            //使用克隆 避免改变会员卡原始信息
            this.shopCart.push(deepClone(memberCard))
          }
        }
      },
      //打开支付页
      pay() {
        this.$refs.payTypeRef.open(this.getTotalRealAmount, this.memberCard, this.menu)
      },
      //商品页面支付完成
      payDone(sell) {
        //支付完成清空购物车
        this.shopCart = this.$options.data().shopCart
        this.sellNo = this.$options.data().sellNo
        this.pendingSellId = this.$options.data().pendingSellId
        this.member = {}
        if (isNotEmpty(this.member.memberId)) {
          //传入memberCardId 则默认选中
          this.getMemberCardList(sell.memberCardId)
        }
        this.getCategoryList()
      },
      //充卡页面支付完成
      payCardDone(sell) {
        //支付完成清空购物车
        this.shopCart = this.$options.data().shopCart
        this.sellNo = this.$options.data().sellNo
        this.pendingSellId = this.$options.data().pendingSellId
        if (isNotEmpty(this.member.memberId)) {
          //传入memberCardId 则默认选中
          this.getMemberCardList(sell.memberCardId)
        }
        //支付完成跳转
        this.menu = '1'
        this.getCategoryList()
      },
      //打开取单
      takePendingOrder() {
        this.$refs.chooseSellRef.open()
      },
      addServer(shopCartIndex) {
        this.$refs.chooseServerRef.open()
        this.shopCartIndex = shopCartIndex
      },
      handleServerClose(serverList,index){
        serverList.splice(index,1);
        //取消选中状态
      },
      getServer(e){
        console.log(e)
        if(!this.shopCart[this.shopCartIndex].serverList){
          this.$set(this.shopCart[this.shopCartIndex],'serverList',[])
        }
        this.shopCart[this.shopCartIndex].serverList = this.shopCart[this.shopCartIndex].serverList.concat(e)
      },
      getPendingSell(e) {
        console.log(e)
        const data = JSON.parse(e.sellJson)
        Object.assign(this.$data, data)
        this.pendingSellId = e.jsonId
        //重新获取用户卡余额
        this.getMemberCardList()
      },
      //保存挂单
      handleAddSelljson() {
        const data = {
          sellJson: JSON.stringify(this.$data),
          memberName: isEmpty(this.member.memberName) ? '散客' : this.member.memberName,
          memberPhone: this.member.memberPhone,
          //如果传入原始挂单id 则为修改
          jsonId: this.pendingSellId
        }
        addSelljson(data).then(response => {
          this.payDone()
        })
      },
      pendingOrder() {
        confirm("确定要挂单吗?挂单后稍后可继续结算").then(res => {
          if (res) {
            if (isNotEmpty(this.pendingSellId)) {
              confirm('该订单已是待结算订单，继续则覆盖之前挂单信息？').then(res => {
                if (res) {
                  this.handleAddSelljson()
                }
              })
            } else {
              this.handleAddSelljson()
            }
          }
        })
      },
      //支付支付支付
      getPayList(e) {
        console.log(e)
        console.log(this.$options.data())
        //结算传输相关参数
        //会员信息 开卡信息 支付信息
        const pay = {
          sellNo: '',
          memberCardId: this.memberCard.memberCardId,
          memberId: this.member.memberId,
          memberName: this.member.memberName,
          sellAmount: this.getTotalRealAmount,
          sellPayList: e,
          sellJson: JSON.stringify(this.$data),
          jsonId: this.pendingSellId
        }

        if (this.menu == '1') {
          pay.productFormList = this.shopCart

          productPay(pay).then(response => {
            console.log(response)
            this.payDone(response.data)
          })
        }
        //开卡续卡不刷新 可能会去结算
        if (this.menu == '2') {
          pay.buildCardForm = this.shopCart[0]

          buildCard(pay).then(response => {
            console.log(response)
            this.payCardDone(response.data)

          })
        }
        if (this.menu == '3') {
          pay.chargedCardForm = this.shopCart[0]

          chargedCard(pay).then(response => {
            console.log(response)
            this.payCardDone(response.data)
          })
        }
      }
    }
  }
</script>

<style scoped>
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }

  /*左侧菜单*/
  .el-menu-vertical-demo {
    border-right: none;
    padding-left: 0;
    width: 100%;
  }

  .el-menu-vertical-demo .el-menu-item {
    padding: 0 16px !important;
    border: 1px solid #eee;
  }

  .el-menu-vertical-demo .el-menu-item [class^=el-icon-] {
    font-size: 15px !important;
  }

  /*会员卡*/
  .el-tag {
    white-space: normal;
    height: auto;
    margin: 5px;
    cursor: pointer;
  }

  /*会员卡折叠无边框*/
  ::v-deep .el-collapse-item__header {
    border-bottom: none;
  }

  ::v-deep .el-collapse-item__content {
    padding-top: 20px;
  }
</style>
