<!--
 * @Descripttion: 服务市场账号
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-10-16 11:46:25
 * @LastEditors: 无尘
 * @LastEditTime: 2020-10-30 14:39:37
-->
<template>
  <div class="app-market-body">
    <div class="app-market-account">
      <el-tooltip class="item" effect="dark" content="绑定服务市场账号后可购买应用。购买信息在服务市场可查看。" placement="top-start"> <span  class="font-16 color-303133 font-w-600 common-bottom-border">服务市场账号</span></el-tooltip>
      <el-button :class="['m-l-20 bind-btn-add', marketAccount.accountId ? 'bind-btn-hide': 'bind-btn-show']" type="primary" @click="addAcount">添加</el-button>
      <!-- <el-button v-if="!!marketAccount.accountId" class="m-l-20" type="text" :loading="loadRefesh" @click="refreshData">同步刷新 </el-button> -->
      <!-- <span v-if="!!marketAccount.accountId" class="font-12 color-909399 p-l-15">更新时间：{{ marketAccount.updateTime | formatTimeStamp}}</span> -->
    </div>
    <div v-if="!!marketAccount.accountId" class="app-market-list">
      <el-form ref="form" label-width="85px">
        <el-form-item class="color-303133" label="账号">
            {{marketAccount.phoneNumber | formatPhoneNum }}{{!marketAccount.phoneNumber ? '--' : '' }}
        </el-form-item>
        <el-form-item class="color-303133" label="绑定时间">
            {{marketAccount.bindTime | formatTimeStamp}} {{!marketAccount.bindTime ? '--' : ''}}
        </el-form-item>
        <el-form-item class="color-303133" label="绑定人">
            {{marketAccount.bindName || '--'}}
        </el-form-item>
      </el-form>
    </div>
    <add-market-dialog v-if="showDialog"  @closeMarket="closeMarket"></add-market-dialog>
  </div>
</template>

<script>
import AddMarketDialog from '@/components/app/add-market-dialog.vue';
import fetch from '@/api/app-controls';
const { getMarketAccount } = fetch;
// import showMsg from '@/common/js/showmsg';
export default {
  name: '',
  components: { AddMarketDialog },
  data() {
    return {
      wxEnterpriseId: localStorage.getItem('haoBanUser') ? JSON.parse(localStorage.getItem('haoBanUser')).wxEnterpriseId : '',

      marketAccount: {
        accountId: '',
        bindTime: '',
        bindName: ''
      },
      showDialog: false
    };
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    const that = this;
    that.getMarket();
    that.$emit('showTab', '/app-market');
  },
  // methods
  methods: {

    /**
     * @description: 添加
     * @author: 无尘
     */
    addAcount() {
      const that = this;
      that.showDialog = true;
    },
    closeMarket(res) {
      const that = this;
      that.showDialog = false;
      if (res) {
        that.getMarket();
      }
    },
    /**
     * @description: 获取服务市场账号
     * @author: 无尘
     */
    getMarket() {
      const that = this;
      const para = {
      };
      getMarketAccount(para)
        .then(res => {
          that.marketAccount = res.result || {};
        })
        .catch(function(error) {

        });
    }
  },
  watch: {}
};
</script>
<style lang='less' scoped>
  .m-l-20 {
    margin-left: 20px;
  }
  .common-bottom-border {
    cursor: pointer;
    padding-bottom: 2px;
    border-bottom: 1px dashed #2f54eb;
  }
  .app-market-body {
    min-height: 100%;
    background: #fff;
    padding: 20px;
    .app-market-list {
      width: 100%;
      min-height: 119px;
      margin-top: 22px;
      background: #F5F7FA;
      padding: 18px 26px;
      box-sizing: border-box;
      .el-form-item {
        margin-bottom: 10px;
      }
    }
    .bind-btn-add {
      display: none;
      &.bind-btn-show {
        display: inline-block;
      }
      &.bind-btn-hide {
        display: none;
      }
    }
  }
</style>
