<template>
  <layout-page>
    <i-breadcrumb slot="breadcrumb">
      <i-breadcrumb-item>首页</i-breadcrumb-item>
      <i-breadcrumb-item>店铺列表</i-breadcrumb-item>
    </i-breadcrumb>
    <layout-content-card>
      <p slot="title">店铺列表</p>
      <i-radio-group v-model="env" slot="extra">
        <i-radio label="develop">
            <span>测试环境</span>
        </i-radio>
        <i-radio label="production">
            <span>线上环境</span>
        </i-radio>
      </i-radio-group>
      <div class="buttons">
        <i-button icon="plus" type="default" @click="onBindUrl">获取授权链接</i-button>
        <i-button icon="upload" type="primary" @click="onAddToTemplate">草稿箱添加到模板</i-button>
        
      </div>
      <div class="tables">
        <i-table :columns="columns" :data="eshop.eshops"></i-table>
      </div>
      <div class="buttons">
        <i-button icon="upload" type="primary" @click="onBatchCommit">批量上传代码</i-button>
        <!-- <i-button icon="pull-request" type="warning" @click="onBindUrl">批量提交审核</i-button>
        <i-button icon="cloud" type="error" @click="onBindUrl">批量发布</i-button> -->
      </div>
    </layout-content-card>
    <modal-commit ref="modalCommit"></modal-commit>
    <modal-category ref="modalCategory" @on-success="onSubmitSuccess"></modal-category>
    <modal-preview ref="modalPreview"></modal-preview>
    <modal-add-template ref="modalAddTemplate"></modal-add-template>
    <modal-upload-draft ref="modalUploadDraft"></modal-upload-draft>
  </layout-page>
</template>

<script>
import {mapState} from 'vuex';
import {Button} from 'iview';
import components from './components';

export default {
  name: 'EshopList',
  computed: {
    ...mapState(['eshop']),
    env: {
      get() {
        return this.eshop.env;
      },
      set(env) {
        this.$store.commit('eshop/SET_ENV_CHANGE', {env});
        this.fetchData();
      }
    }
  },
  data() {
    return {
      authType: '',
      columns: [{
        title: 'appId',
        key: 'authAppId'
      }, {
        title: '店铺ID',
        key: 'brandId'
      }, {
        title: '店铺名',
        key: 'brandName'
      }, {
        title: '审核状态',
        key: 'auditStatus'
      }, {
        title: '操作',
        width: 270,
        render: (h, {row}) => {
          return (
            <div class="op-btns">
              <i-button icon="upload" type="primary" onClick={() => this.commit(row)}>上传代码</i-button>
              &nbsp;&nbsp;
              <i-button icon="qr-scanner" type="success" onClick={() => this.preview(row)}>体验版</i-button>
              &nbsp;&nbsp;
              <i-button icon="pull-request" type={row._submitAudit ? 'default' : 'warning'} onClick={() => this.submitAudit(row)}>
                {row._submitAudit ? '已提交审核' : '提交审核'}
              </i-button>
              &nbsp;&nbsp;
              <i-button icon="cloud" type={row._released ? 'default' : 'error'} onClick={() => this.release(row)}>
                {row._released ? '已发布' : '发布'}
              </i-button>
            </div>
          );
        }
      }],
      data: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.$store.dispatch('eshop/fetchEshops');
    },
    preview(row) {
      this.$refs.modalPreview.show(row);
    },
    commit(row) {
      this.$refs.modalCommit.show([row]);
    },
    onBatchCommit() {
      this.$refs.modalCommit.show(this.eshop.eshops);
    },
    submitAudit(row) {
      this.$refs.modalCategory.show(row);
    },
    onSubmitSuccess(success) {
      this.$store.commit('eshop/SET_SHOP_SUBMITAUDITED', {success});
    },
    async release(row) {
      this.$Loading.start();
      const result = await this.$store.dispatch('eshop/fetchWxGetVersion', row);

      this.$Loading.finish();
      if (result && result.errcode === 0) {
        this.$Modal.confirm({
          title: '确认',
          content: `当前店铺"${row.brandName}"小程序版本：${result.now_version} 确认发布？`,
          onOk: async() => {
            const resultRelease = await this.$store.dispatch('eshop/fetchWxRelease', row);

            if (resultRelease && resultRelease.errcode === 0) {
              this.$Message.success('发布成功');
              this.$store.commit('eshop/SET_SHOP_RELEASED', {success: [row]});
            } else {
              this.$Message.warning(resultRelease && resultRelease.errmsg || '');
            }
          }
        });
      } else {
        this.$Message.warning(result && result.errmsg || '');
      }
    },
    async onBindUrl() {
      this.$Loading.start();
      const result = await this.$store.dispatch('eshop/fetchAuthUrl');

      this.$Loading.finish();
      if (result && result.code === 200) {
        this.$Modal.info({
          title: '授权链接',
          render: () => {
            return (
              <div style="word-wrap: break-word; margin-top: 20px;">
                <a href={result.data}>点击跳转到扫码授权页面</a>
              </div>
            );
          }
        });
      } else {
        this.$Message.warning(result && result.message || '');
      }
    },
    onUploadDraft() {
      this.$refs.modalUploadDraft.show();
    },
    onAddToTemplate() {
      this.$refs.modalAddTemplate.show();
    }
  },
  components: {Button, ...components}
};
</script>

<style lang="scss">
.buttons,
.tables {
  margin-bottom: 20px;
}

.op-btns {
  overflow: hidden;
  margin-top: 10px;

  .ivu-btn {
    float: left;
    display: block;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100px;
  }
}
</style>