<template>
  <el-dialog class="sync-imgtext__dialog" :title="wxscType == 4 ? '同步微信草稿箱图文' : '同步已发布的微信图文'" :visible.sync="show" width="30%" :before-close="close" v-loading="loading">
    <div class="gic-modal-bd">
      <div class="gic-modal-content">
        <p class="fz16" style="margin-bottom:20px">
          {{ wxscType == 4 ? '微信草稿箱里的图文共' : '已发布微信图文共' }}<span> {{ count }} </span>条<span @click="getSyncInfo" class="blue" style="margin-left:10px;">刷新</span>
        </p>
        <div style="margin-bottom: 10px">
          同步条数：
          <el-select style="width: 160px" :disabled="!(loadStatus === 1 && count !== 0)" v-model="size" placeholder="选择同步条数">
            <el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <p class="gray fz12">同步全部图文可能会需要比较久的时间，请耐心等待...</p>
      </div>
    </div>
    <template slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button v-if="loadStatus === 1" type="primary" @click="syncWechat()">立即同步</el-button>
      <el-button v-if="loadStatus === 0" type="primary" :loading="true">同步中</el-button>
      <el-button v-if="loadStatus === 3" icon="el-icon-error" type="danger">同步失败</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { getSyncInfo, syncWechatImageText } from '@/service/api/wechatApi.js';
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 4：草稿列表  5：发布列表
    wxscType: {
      type: [Number, String],
      default: ''
    }
  },
  watch: {
    show(val) {
      if (val) {
        this.getSyncInfo();
      }
    }
  },
  data() {
    return {
      loadStatus: 1,
      loading: false,
      count: 0,
      size: 5,
      sizeOptions: [
        { label: '最新的5条', value: 5 },
        { label: '最新的10条', value: 10 },
        { label: '最新的20条', value: 20 },
        { label: '全部', value: 999999 }
      ]
    };
  },
  methods: {
    close() {
      this.$emit('update:show', false);
      this.$nextTick(() => {
        this.size = 5;
      });
    },
    async getSyncInfo() {
      this.loading = true;
      let res = await getSyncInfo({ wxscType: this.wxscType });
      this.count = res.result.wechatCount;
      this.loadStatus = res.result.status;
      this.loading = false;
    },
    async syncWechat() {
      this.loadStatus = 0;
      const num = this.size === 999999 ? this.count : this.size;
      let res = await syncWechatImageText({ num, wxscType: this.wxscType });
      if (num <= 20 && res.errorCode === 0) {
        this.$tips({ type: 'success', message: '同步成功' });
        this.loadStatus = 1;
        this.close();
        this.$emit('syncSuccess');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.gic-modal-content {
  font-size: 18px;
  color: #333;
  margin-top: 30px;
  font-size: 16px;
}
</style>
