<template>
  <div
    class="dashboard-wrap"
  >
    <a-card class="card-wrap">
      <div class="dashboard-head">
        <div class="hello">
          <h2>{{ welcome }}，{{ name }}</h2>
        </div>
        <div class="weather">
          <div>{{ nowTime }}</div>
        </div>
      </div>
    </a-card>

    <a-card class="card-wrap" title="常用售票地址">
      <a-form-model
        ref="form"
        :model="form"
        class="form-wrap">
        <a-col v-bind="layout">
          <a-form-model-item label="PC售票地址">
            <a-button
              type="primary"
              size="small"
              v-clipboard="()=>pcUrl"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError">复制</a-button>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout">
          <a-form-model-item label="H5(手机)售票地址">
            <a-button
              type="primary"
              size="small"
              v-clipboard="()=>mobileUrl"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError">复制</a-button>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout">
          <a-form-model-item label="微信售票地址">
            <a-button
              v-if="!appid"
              type="primary"
              size="small"
              @click="$router.push('/saleChannel/weixinConfig')">配置微信appid</a-button>
            <a-button
              v-else
              type="primary"
              size="small"
              v-clipboard="()=>wxIndexUrl"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError">复制</a-button>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout">
          <a-form-model-item label="微信订单列表">
            <a-button
              v-if="!appid"
              type="primary"
              size="small"
              @click="$router.push('/saleChannel/weixinConfig')">配置微信appid</a-button>
            <a-button
              v-else
              type="primary"
              size="small"
              v-clipboard="()=>wxOrderUrl"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError">复制</a-button>
          </a-form-model-item>
        </a-col>

        <a-col v-bind="layout">
          <a-form-model-item label="微信预约门票">
            <a-button
              v-if="!appid"
              type="primary"
              size="small"
              @click="$router.push('/saleChannel/weixinConfig')">配置微信appid</a-button>
            <a-button
              v-else
              type="primary"
              size="small"
              v-clipboard="()=>preTicketUrl"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError">复制</a-button>
          </a-form-model-item>
        </a-col>
        <a-col v-bind="layout" v-if="form.wxmini_url">
          <a-form-model-item label="微信小程序地址">
            <a-button
              type="primary"
              size="small"
              v-clipboard="()=>form.wxmini_url"
              v-clipboard:success="copySuccess"
              v-clipboard:error="copyError">复制</a-button>
          </a-form-model-item>
        </a-col>
        <a-col v-bind="layout" v-if="form.wxmini_qrcode_url">
          <a-form-model-item label="微信小程序二维码">
            <img :src="form.wxmini_qrcode_url" style="width:130px" alt="二维码">
          </a-form-model-item>
        </a-col>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import moment from 'moment'
import { getConfigProject } from '@/api/project'
import { getWeixinConfig } from '@/api/saleChannel/weixin'
import { mapGetters } from 'vuex'

const baseUrl = process.env.NODE_ENV === 'development' ? 'https://pwxdev.cleartv.cn/' : window.config.baseUrl

moment.locale('zh-cn', {
  meridiem: function (hour, minute, isLowercase) {
    if (hour <= 9) {
      return '早上'
    } else if (hour <= 11 && minute < 30) {
      return '上午'
    } else if (hour <= 13 && minute < 30) {
      return '中午'
    } else if (hour <= 18) {
      return '下午'
    } else {
      return '晚上'
    }
  }
})
export default {
  name: 'Dashboard',
  created () {
    getConfigProject().then(res => {
      res.extraInfo.app_background = this.isJson(res.extraInfo.app_background) ? JSON.parse(res.extraInfo.app_background) : {
        backgroundImage: '',
        backgroundColor: ''
      }
      this.form = res.extraInfo

      console.log(this.form)
    })

    getWeixinConfig().then(res => {
      this.appid = res.extraInfo.wx_appid
    })
  },
  data () {
    return {
      form: {
        project_name: '',
        company_name: '',
        company_address: '',
        contact_person: '',
        contact_number: '',
        using_shopping_cart: false,
        buyer_need_realname: false,
        allow_user_part_cancel: false,
        player_need_realname: false,
        wx_home_pop_info: {
          type: 'PICTURE',
          content: ''
        },
        app_title: '',
        app_logo: '',
        app_home_url: '',
        app_background: '',
        wxmini_qrcode_url: '',
        wxmini_url: ''
      },
      appid: '',
      layout: {
        xl: 6,
        lg: 8,
        md: 12
      },
      hasDataPermission: false,
      showHandoverMessage: false,
      nowTime: moment().format('YYYY-MM-DD  HH:mm:ss'),
      welcome: '你好',
      timeInt: null,
      week: '',
      weatherInfo: {},
      activeBlock: 1,
      showNotice: false,
      bg: '',
      realtimeData: {
        price: 0,
        count: 0,
        cancel: 0,
        cancelRate: 0
      },
      weekDic: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    pcUrl () {
      if (baseUrl.indexOf('pwxdev') > -1) {
        return `https://pwxdev.cleartv.cn/frontend/pc-ticket/#/?project=${this.form.project_name}`
      } else {
        return `https://pqncdn.cleartv.cn/pc/#/?project=${this.form.project_name}`
      }
    },
    mobileUrl () {
      if (baseUrl.indexOf('pwxdev') > -1) {
        return `https://pwxdev.cleartv.cn/frontend/mobile/#/?project=${this.form.project_name}`
      } else {
        return `https://pqncdn.cleartv.cn/mobile/#/?project=${this.form.project_name}`
      }
    },
    wxOrderUrl () {
      if (this.appid) {
        return `${baseUrl}/wxauth/wxlogin?projectName=${this.form.project_name}&entry=center`
      } else {
        return '请到「渠道管理」->「支付配置」设置微信appid'
      }
    },
    wxIndexUrl () {
      if (this.appid) {
        return `${baseUrl}wxauth/wxlogin?projectName=${this.form.project_name}`
      } else {
        return '请到「渠道管理」->「支付配置」设置微信appid'
      }
    },
    preTicketUrl () {
      console.log('1111')
      if (this.appid) {
        return `${baseUrl}/wxauth/wxlogin?projectName=${this.form.project_name}&entry=reservation`
      } else {
        return '请到「渠道管理」->「支付配置」设置微信appid'
      }
    }
  },
  mounted () {
    this.init()
  },
  beforeDestroy () {
    clearInterval(this.timeInt)
  },
  methods: {
    init () {
      // this.setWeather()
      this.setWelcome()
    },
    isJson (str) {
      if (typeof str === 'string') {
        try {
          var obj = JSON.parse(str)
          if (typeof obj === 'object' && obj) {
            return true
          } else {
            return false
          }
        } catch (e) {
          console.log('error：' + str + '!!!' + e)
          return false
        }
      } else {
        return false
      }
    },
    copySuccess () {
      this.$message.success('复制成功')
    },
    copyError () {
      this.$message.error('复制失败')
    },
    setWelcome () {
      const dayOfWeek = moment().day()
      this.week = this.weekDic[dayOfWeek]
      this.timeInt = setInterval(() => {
        const now = moment()
        this.nowTime = now.format('YYYY-MM-DD HH:mm:ss')
        this.welcome = now.format('A') + '好'
        switch (now.format('A')) {
          case '下午':
            // this.bg = require('imgs/b1.jpg')
            break
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/theme.scss';
.dashboard-wrap {
  position: absolute; top: 0;left: 0;bottom: 0; right: 0; background: transparent no-repeat cover;
  .card-wrap{
    width: 96%; margin: 20px auto;
  }
  .ant-form-item-label label{
    width: 100px; display: inline-block;
  }
  .dashboard-head {
    display: flex;  height: 60px;  justify-content: space-between;  align-items: center;
    h2{
      color: #006269;
    }
    .hello {
      display: flex;  align-items: flex-end;
      h2 {
        margin-right: 20px;
      }
      .subtitle {
        color: #666;
      }
    }
    .weather {
      color: #666;  text-align: right; font-size: 1.4em;
    }
  }
}

</style>
