<template>

  <div class="execution">

    <basic-container>

      <div class="zm_info_header">
        <span>注销店铺</span>
      </div>

      <div class="zm_info_body">
        <div class="hint_text layout_v" style="margin-top: 10px;">
          <span>在注销账号前，请进行以下风险确认：</span>
          <span>1.钱包清算</span>
          <span>请确认账户中是否还有余额等财务信息，注销账号后将全部清零</span>
          <span>2.历史数据清空</span>
          <span>您的商品、订单、交易等数据将被清空，无法查询或恢复。</span>
        </div>
      </div>

      <el-button @click="onCancel" style="width: 100px;margin-top: 16px;" class="self_center" :loading="saving" type="primary">立即注销</el-button>

    </basic-container>

  </div>

</template>

<script>

  import { cancelShop, checkCancel } from '@/api/shop/shop.js'
  import { ZmMixin } from '@/mixins/ZmMixin.js'

  export default {

    mixins: [ZmMixin],

    data() {
      return {
        saving: false,
        canCancel: false
      }
    },

    methods: {
      onCancel() {
        this.saving = true
        checkCancel()
        .then(r => {
          let z = this.zmRes(r)
          if(z == 0) {
            this.canCancel = true
            return this.needConfirm("店铺注销后，不能再登录店铺端，如果再使用，需要重新申请及添加商品等。是否确认注销店铺？")
          } else {
            this.canCancel = false
            return this.simpleConfirm("有进行中的订单，不能注销店铺，建议先下架所有商品，订单结束后可注销。")
          }
        })
        .then(sure => {
          if('confirm' == sure && this.canCancel) {
            return cancelShop()
          }
        })
        .then(r => {
          this.saving = false
          if(this.canCancel) {
            this.canCancel = false
            this.$store.dispatch("LogOut").then(() => {
              location.reload()
            })
          }
        })
        .catch(e => {
          this.canCancel = false
          this.saving = false
          this.error('注销失败')
        })
      }
    }

  }

</script>

<style scoped>

  .zm_info_header {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    background: #dedede;
  }

  .zm_info_body {
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

  .zm_info_row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .zm_label {
    width: 120px;
  }

  .zm_info_body .zm_info_row:not(:first-child) {
    margin-top: 10px;
  }

</style>
