<template>
  <el-dialog
    class="common-dialog"
    :title="$t('gua-dan-lie-biao')"
    :visible="showDialog"
    @close="close"
    width="1000px"
    destroy-on-close
  >
    <el-alert
      :title="$t('ti-shi-qing-xuan-ze-yi-ge-kong-bai-wei-zhi-gua-dan')"
      type="warning"
      :closable="false"
    ></el-alert>
    <div class="order-list">
      <div class="order-item" v-for="orderInfo in orderList">
        <div class="info" v-if="!orderInfo.isEmpty">
          <div class="sn">
            {{ orderInfo.hangNo }}
            <span @click="remove(orderInfo.hangNo)" class="remove el-icon-delete"></span>
          </div>
          <div
            class="order"
            v-if="!orderInfo.isEmpty"
            @click="getHangUp(orderInfo.hangNo, orderInfo.memberInfo)"
          >
            <!-- <div class="item">
              会员：{{ orderInfo.memberInfo ? orderInfo.memberInfo.name : '游客' }}
            </div> -->
            <div class="item">{{ $t('jian-shu') }}：{{ orderInfo.num }}</div>
            <div class="item">{{ $t('jin-e') }}：￥{{ orderInfo.amount }}</div>
            <div class="item time">{{ orderInfo.dateTime }}</div>
          </div>
        </div>
        <div v-if="orderInfo.isEmpty" class="none" @click="doHangUp(orderInfo.hangNo)">
          <div class="sn">
            {{ orderInfo.hangNo }}
            <span @click="remove(orderInfo.hangNo)" class="remove el-icon-delete"></span>
          </div>
          <div class="tips">{{ $t('kong-bai-wei-zhi') }}</div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" class="main-button" @click="close()">{{ $t('close') }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { doHangUp, getHangUpList, removeHangUp } from '@/api/cashier'
import { Message } from 'element-ui'
export default {
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
    memberInfo: {
      type: [Object],
      default: () => {},
    },
    cartList: {
      type: [Array],
      default: () => [],
    },
    hangNo: {
      type: [String],
      default: () => '',
    },
  },
  watch: {
    showDialog(value) {
      if (value) {
        console.log('memberInfo = ', this.memberInfo)
        this.getHangUpList()
      }
    },
  },
  data() {
    return {
      loading: false,
      orderList: [],
    }
  },
  methods: {
    // 删除挂单
    remove(hangNo) {
      const app = this
      const param = { hangNo: hangNo }
      this.$confirm(this.$t('ci-cao-zuo-jiang-shan-chu-gua-dan-shi-fou-ji-xu'), this.$t('ti-shi'), {
        confirmButtonText: this.$t('que-ding'),
        cancelButtonText: this.$t('qu-xiao'),
        type: 'warning',
      })
        .then(() => {
          removeHangUp(param)
            .then((response) => {
              if (response) {
                Message({
                  message: this.$t('shan-chu-gua-dan-cheng-gong'),
                  type: 'success',
                })
                app.getHangUpList()
              }
            })
            .catch(() => {
              // empty
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('yi-qu-xiao-shan-chu'),
          })
        })
    },
    // 执行挂单
    doHangUp(hangNo, msg = this.$t('shi-fou-gua-dan')) {
      const app = this
      if (!app.cartList || app.cartList.length < 1) {
        Message({
          message: this.$t('qing-xian-tian-jia-jie-suan-shang-pin'),
          type: 'error',
        })
        return false
      }
      this.$confirm(this.$t('shi-fou-gua-dan'), this.$t('ti-shi'), {
        confirmButtonText: this.$t('que-ding'),
        cancelButtonText: this.$t('qu-xiao'),
        type: 'warning',
      })
        .then(() => {
          let cartIds = []
          app.cartList.forEach(function (cart) {
            cartIds.push(cart.cartId)
          })
          const param = {
            hangNo: hangNo,
            userId: app.memberInfo ? app.memberInfo : '',
            cartIds: cartIds.join(','),
          }
          doHangUp(param)
            .then((response) => {
              if (response) {
                Message({
                  message: this.$t('gua-dan-cheng-gong'),
                  type: 'success',
                })
                app.getHangUpList()
                app.$emit('doHangUp')
                this.$emit('closeDialog', 'hangUpDialog')
              }
            })
            .catch(() => {
              // empty
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('yi-qu-xiao-gua-dan'),
          })
        })
    },
    // 获取挂单列表
    getHangUpList() {
      const app = this
      getHangUpList()
        .then((response) => {
          if (response.data) {
            app.orderList = response.data
          }
        })
        .catch(() => {
          // empty
        })
    },
    // 取单
    getHangUp(hangNo, memberInfo) {
      //添加判断是否是一个桌子要更新菜品
      console.log(this.hangNo, 'this.hangNo', hangNo, 'hangNo')

      if (this.hangNo === hangNo) {
        // this.$emit('updateHangNo')
        console.log(this.hangNo, hangNo)
        this.doHangUp(hangNo, this.$t('geng-xin-cai-pin'))
        this.$emit('closeDialog', 'hangUpDialog')

        return
      }
      this.$emit('getHangNo', { hangNo: hangNo, memberInfo: memberInfo })
    },
    close() {
      this.$emit('closeDialog', 'hangUpDialog')
    },
  },
}
</script>
<style lang="scss" scoped>
.order-list {
  margin-top: 6px;
  height: 50vh;
  overflow-y: auto;
  .order-item {
    width: 20%;
    float: left;
    height: 200px;
    cursor: pointer;
    padding: 5px;
    .info {
      padding: 5px;
      height: 100%;
      border-radius: 4px;
      background: #ffc03833;
      border: #f67f20 solid 1px;
      .sn {
        font-weight: bold;
        font-size: 20px;
        color: #ff5b57;
        .remove {
          float: right;
          font-size: 12px;
          color: #666666;
          font-weight: bold;
        }
      }
      .order {
        margin: 10px;
        .item {
          margin-bottom: 3px;
        }
        .time {
          position: relative;
          bottom: -50px;
          color: #909399;
        }
      }
    }
    .none {
      height: 100%;
      color: #666666;
      border: solid 1px #cccccc;
      border-radius: 4px;
      padding: 10px;
      .tips {
        line-height: 150px;
        text-align: center;
      }
      .sn {
        font-weight: bold;
        font-size: 20px;
        color: #ff5b57;
        .remove {
          float: right;
          font-size: 12px;
          color: #666666;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
