<template>
  <div class="sjp-lookPrize">
      <Row>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">奖品状态：{{statusObj[prizeForm.prizeStatus]}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">创建时间：{{prizeForm.createTime}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">创建人： {{prizeForm.prizeCreateUserName}}</i-col>
     </Row>
     <div class="lookPrize-title">奖品基本情况</div>
      <Row>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">抽奖商圈：{{businessAreaObj[prizeForm.belongRegion]}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">c端预热展示开始时间：{{prizeForm.warmUpTime}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">报名抽奖时间：{{prizeForm.joinStartTime}} - {{prizeForm.joinEndTime}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">奖品名称：{{prizeForm.prizeName}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">奖品图片：
          <br/>
          <img :src="item" alt="" class="sjp-upload__pic" v-for="(item, index) of prizeForm.prizePics" :key="index">
        </i-col>
        <i-col  class="sjp-lookPrize__row sjp-prize__item" offset="1" span="22">奖品说明：
            <quill-editor ref="text" disabled v-model="prizeForm.prizeContent" class="myQuillEditor" :options="editorOption" />
        </i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">奖品价值：{{prizeForm.prizeAmount}} 元 </i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">中奖名额：{{prizeForm.prizeWinQuantity}} 个 </i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">使用时间：{{prizeForm.prizeUseStartTime}} - {{prizeForm.prizeUseEndTime}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">是否需要预约：{{prizeForm.isReserve === 1 ? '是' : '否'}}</i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">适用商户：{{shopName}} <span v-if="prizeForm.businessIds && prizeForm.businessIds.length">/</span>  <span class="sjp-shop" v-if="prizeForm.businessIds && prizeForm.businessIds.length > 1" @click="lookShop"> 共计{{prizeForm.businessIds && prizeForm.businessIds.length}}个商户可用</span></i-col>
        <i-col  class="sjp-lookPrize__row" offset="1" span="22">开奖时间：{{prizeForm.prizeTime}}</i-col>
     </Row>
     <div class="lookPrize-title">
       奖品数据情况 
        <Button type="primary" class="sjp-trend mt20" @click="lookPrize('trend')">奖品数据趋势图</Button>
     </div>
     <Table stripe class="mt10" :columns="columns" :data="list"></Table>
     <Button type="primary" class="mt20" @click="lookPrize('prize')">查看商户核销情况</Button>
     <br>
     <!-- <Button type="primary" class="mt20" @click="lookPrize('runoff')">查看顾客流失情况</Button> -->
      <!-- 详情 -->
       <Modal
        v-model="visibleModal"
        width="75%"
        class="prize-dialog"
        :title="titleObj[titleStatus]"
        >
        <div class="prize-detail">
            <!-- 数据趋势图 -->
            <div v-if="titleStatus === 'trend'" >
              <prizetrend :id="prizeId"></prizetrend>
            </div>
            <!-- 顾客流失情况 -->
            <div v-if="titleStatus === 'runoff'">
              <div class="sjp-runoff__title">
                  顾客流失走向
              </div>
              <div class="sjp-runoff__time">
                  统计周期： 2020.09.22 - 2020.09.30
              </div>
              <div>
                <!-- <runofftree></runofftree> -->
              </div>
              <div class="sjp-runoff__title">
                顾客去向门店
              </div>
              <!-- <div>
                <RadioGroup v-model="button1" type="button">
                    <Radio label="1">同业</Radio>
                    <Radio label="2">异业</Radio>
                </RadioGroup>
              </div> -->
            </div>
          <!-- 需要展示4个弹框的内容 -->
            <div v-if="titleStatus== 'prize'">说明：商户按核销张数从大到小排列</div>
            <div v-if="titleStatus== 'shop'">共计{{total}}个商户</div>
            <!-- 只要不是数据趋势图，都要展示 -->
            <div v-if="titleStatus !== 'trend'">
              <Table stripe :columns="renderColumns" :data="prizeList"></Table>
              <Page style="margin-top: 20px" :total="total" :current.sync="current" :page-size.sync="limit" @on-change="pageChange" @on-page-size-change="pageSizeChange" show-total show-sizer></Page>
            </div>
          </div>
          <div slot="footer" style="text-align: center;">
              <Button type="default" size="large"  @click="close">关闭</Button>
          </div>
      </Modal>
    
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import http from './../../service/statics'
import shopinfo from './../../service/shopinfo'

// import runofftree from './runofftree'
import prizetrend from './prizetrend'
export default {
  name: 'lookPrize',
  components: { quillEditor,prizetrend },
  props:['prizeId'],
  data() {
    return {
      visibleModal: false,
      total:0,
      // button1:'',
      current:1,
      limit:10,
      statusList: [{
        code: '1',
        message:'待上架'
      },{
        code: '2',
        message:'上架'
      },{
        code: '3',
        message:'下架'
      }],
      statusObj:{},
      titleStatus: 'prize',
      titleObj:{
        prize: '查看商户核销情况',
        shop: '查看适用商户',
        runoff: '客户流失情况',
        trend: '奖品数据趋势'
      },
      editorOption:{
        modules:{
            toolbar:[
              ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
              ['blockquote', 'code-block'],     //引用，代码块
  
  
              [{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
              [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
              [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
              [{ 'direction': 'rtl' }],             // 文本方向
  
  
              [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
  
  
              [{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
              [{ 'font': [] }],     //字体
              [{ 'align': [] }],    //对齐方式
              ['clean'],    //清除字体样式
              ['image']    //上传图片、上传视频
  
            ]
          },
          theme:'snow'
      },
      prizeForm:{},
      prizeList:[],
      shopColumns:[
        {
          title: '商户名称',
          key: 'name',
          align: 'center',
        },
        {
          title: '商户ID',
          key: 'id',
          align: 'center',
        },
      ],
      prizeColumns:[
        {
          title: '使用商户',
          key: 'name',
          align: 'center',
        },
        {
          title: '核销张数',
          key: 'useCount',
          align: 'center',
        },
      ],
      columns:[{
          title: '数据项',
          key: 'name',
          align: 'center',
      },
      {
          title: '真实数据',
          key: 'realAmount',
          align: 'center',
      },
      {
          title: 'c端数据',
          key: 'cAmount',
          align: 'center',
      }],
      list:[],
      shopName:'',
      renderColumns:[],
      businessAreaObj:{},
    }
  },
  created() {
    this.statusList.forEach((item)=>{
      this.statusObj[item.code] = item.message
    })
    // 获取商圈信息列表
    shopinfo.getAllData({})
    .then((res) => {
      let result = res.data || []
      result.forEach((item)=>{
        this.businessAreaObj[item.id] = item.name
      })
    })
    if(this.prizeId){
     http.manageDetail({id:this.prizeId})
     .then((res)=>{
       this.prizeForm = res.data || {}
       this.prizeForm.prizePics = this.prizeForm.prizePics.split(',')
       this.list = [{
        name: '活动影响人次',
        realAmount:this.prizeForm.prizeData.effectTime,
        cAmount:'——',
      },{
        name: '活动影响人数',
        realAmount: this.prizeForm.prizeData.effectNumber,
        cAmount:'——',
      },{
        name: '参与人次',
        realAmount:this.prizeForm.prizeData.participationTime,
        cAmount:'——',
      },{
        name: '参与人数',
        realAmount:this.prizeForm.prizeData.participationNumber,
        cAmount:'——',
      },{
        name: '感兴趣人次',
        realAmount: this.prizeForm.prizeData.interestTime,
        cAmount:'——',
      },{
        name: '感兴趣人数',
        realAmount:this.prizeForm.prizeData.interestNumber,
        cAmount:this.prizeForm.prizeData.interestNumberInC,
      },{
        name: '报名人数',
        realAmount: this.prizeForm.prizeData.signUpNumber,
        cAmount:'——',
      },{
        name: '中奖人数',
        realAmount:this.prizeForm.prizeData.winningNumber,
        cAmount:'——',
      },{
        name: '使用人数',
        realAmount:this.prizeForm.prizeData.verificationNumber,
        cAmount:'——',
      }]
      // 获取第一条商户信息
      shopinfo.getShops({
        shopIds: [this.prizeForm.businessIds[0]],
        pageSize: 1,
        currentPage: 1,
      })
      .then((shops) => {
        this.shopName = shops.data[0].name
      })
     })
     
    }
  },
  methods:{
      close(){
        this.visibleModal = false
      },
      pageChange(){
        this.getData()
      },
      pageSizeChange(val){
         this.limit = val
        // 如果当前也不是第一页会默认会更改为第一页，然后触发第一页的回调
        // 如果当前为第一页， 进行请求数据
        if(this.current === 1){
          this.getData()
        }
      },
      getData(){
        this.renderColumns = []
        this.prizeList = []
        this.total = 0
        if(this.titleStatus === 'shop'){
          this.renderColumns = this.shopColumns; // 展示shop的值
          shopinfo.getShops({
            shopIds: this.prizeForm.businessIds,
            pageSize: this.prizeForm.businessIds.length,
            currentPage: 1,
          })
          .then((res) => {
            this.prizeList = res.data || []
            this.total = this.prizeForm.businessIds.length
          })

        } else if(this.titleStatus === 'prize') {
          this.renderColumns = this.prizeColumns; // 展示奖品的
          http.businessUsage({
            couponId:this.prizeForm.couponId,
            pageCount: this.current,
            pageSize:this.limit
          })
          .then(res=>{
            this.prizeList = res.data || []
          })
        }
      },
      lookShop(){
        this.visibleModal = true
        this.titleStatus = 'shop'
        this.limit = 10
        this.current  = 1
        this.getData()
      },
      lookPrize(status){
        this.visibleModal = true
        this.titleStatus = status
        this.limit = 10
        this.current  = 1
        this.getData()
      },
  },
  mounted(){
   
  }
}
</script>

<style lang="less" scoped>
  .mt20{
    margin-top: 20px;
  }
  .mt10{
    margin-top: 10px;
  }
  .sjp-runoff__title{
    font-weight: bold;
    font-size: 18px;
  }
  .sjp-lookPrize{
    .lookPrize-title{
      margin-top: 14px;
      font-size: 16px;
      font-weight: bold;
      .sjp-trend{
        position: relative;
        top: -10px;
        left: 10px;
      }
    }
    .myQuillEditor{
      margin-top: 14px;
    }
    .sjp-lookPrize__row{
      font-size: 14px;
      line-height: 20px;
      margin-top: 14px;
    }
    .sjp-upload__pic{
      width: 100px;
      height: 100px;
      object-fit: cover;
      margin-right: 4px;
    }
    .sjp-shop{
      color: #0600ff;
      cursor: pointer;
    }
  }
 
</style>
<style >
  .prize-dialog .ivu-modal{
    top: 7%;
  }
  .prize-detail{
    height: calc(93vh - 200px);
    overflow-y: auto;
  }
</style>

