<template>
  <div class="app-container">
   <div style="font-size:18px;margin-bottom:20px">活动专区配置</div>
 
    <div class="table">
      <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe>
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="toConfigure(scope.row)">配置</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="活动专区名称" prop="activityName" min-width="160" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="状态" prop="status" min-width="160" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.status ? "开启" : "隐藏" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {getEnterpriseTemplate} from "@/api/special"
import { findElem } from '@/utils/util'

export default {
  data(){
    return {
      companyWechatId: "", // 企业微信id
      companyWechatTemplateId:"", // 小程序模板id
      useTemplate:"", // 模板类型 1=模板1 2=模板2
      listLoading: false, // 列表加载loading
      dataList:[
        { 
          activityName: '首页弹窗',
          status: false,
          type: 2,
          popupBackgroundColor: "",
          popupHeadImage: "",
          popupImage: "",
          popupQrcode: "",
          ratio: '600*700'
        },
         { 
          activityName: '胶囊图',
          status: false,
          type: 3,
          active1BackgroundColor: "",
          active1HeadImage: "",
          active1Image: "",
          active1Qrcode: "",
          ratio: '710*220'
        },
         { 
          activityName: '活动专区2-左侧专区',
          status: false,
          type: 4,
          active2LeftBackgroundColor: "",
          active2LeftHeadImage: "",
          active2LeftImage: "",
          active2LeftQrcode: "",
          ratio: '350*240'
        },
         { 
          activityName: '活动专区2-右侧专区',
          status: false,
          type: 5,
          active2RightBackgroundColor: "",
          active2RightHeadImage: "",
          active2RightImage: "",
          active2RightQrcode: "",
          ratio: '350*240'
        },
         { 
          activityName: '专场专区-01',
          status: false,
          type: 6,
          only1BackgroundColor: "",
          only1HeadImage: "",
          only1Image: "",
          only1Qrcode: "",
          ratio: '320*200'
        },
         { 
          activityName: '专场专区-02',
          status: false,
          type: 7,
          only2BackgroundColor: "",
          only2HeadImage: "",
          only2Image: "",
          only2Qrcode: "",
          ratio: '320*200'
        },
         { 
          activityName: '专场专区-03',
          status: false,
          type: 8,
          only3BackgroundColor: "",
          only3HeadImage: "",
          only3Image: "",
          only3Qrcode: "",
          ratio: '320*200'
        },
         { 
          activityName: '专场专区-04',
          status: false,
          type: 9,
          only4BackgroundColor: "",
          only4HeadImage: "",
          only4Image: "",
          only4Qrcode: "",
          ratio: '320*200'
        }
      ]
    }
  },
  created(){
    this.getEnterpriseTemplate()
  },

  methods:{
    // 获取企业下模板
    getEnterpriseTemplate(){
      this.companyWechatId = JSON.parse(
        localStorage.getItem("jsmmall_user")
      ).companyWechatId;
      this.useTemplate=JSON.parse(
        localStorage.getItem("jsmmall_user")
      ).useTemplate;
        getEnterpriseTemplate({
          companyId: this.companyWechatId
        }).then(res=>{
          if(!res.data && res.data.length < 1) return false;
          let obj = res.data.find(item => {
            return item.templateType == this.useTemplate;
          })

          this.dataList[0].status = obj.popupStatus;  // 首页弹窗 开启状态
          this.dataList[1].status = obj.active1Status;  // 活动专区1 开启状态 
          this.dataList[2].status = obj.active2Status;  // 活动专区2 开启状态 
          this.dataList[3].status = obj.active2Status;  // 活动专区2 开启状态 
          this.dataList[4].status = obj.onlyStatus; // 专场专区 开启状态
          this.dataList[5].status = obj.onlyStatus; // 专场专区 开启状态
          this.dataList[6].status = obj.onlyStatus; // 专场专区 开启状态
          this.dataList[7].status = obj.onlyStatus; // 专场专区 开启状态

          // 首页弹窗
          this.dataList[0].popupBackgroundColor = obj.popupBackgroundColor; // 首页背景颜色
          this.dataList[0].popupHeadImage = obj.popupHeadImage; // 首页表头图片
          this.dataList[0].popupImage = obj.popupImage; // 首页图片
          this.dataList[0].popupQrcode = obj.popupQrcode; // 首页活动分享图片
          // 活动专区1
          this.dataList[1].active1BackgroundColor = obj.active1BackgroundColor; // 活动专区1背景颜色用(,)隔开
          this.dataList[1].active1HeadImage = obj.active1HeadImage; // 活动专区1表头图片
          this.dataList[1].active1Image = obj.active1Image; // 活动专区1图片
          this.dataList[1].active1Qrcode = obj.active1Qrcode; // 活动专区1活动分享图片
          // 活动专区2 左侧
          this.dataList[2].active2LeftBackgroundColor = obj.active2LeftBackgroundColor; // 活动专区2左侧背景颜色用(,)隔开
          this.dataList[2].active2LeftHeadImage = obj.active2LeftHeadImage; // 活动专区2左侧表头图片
          this.dataList[2].active2LeftImage = obj.active2LeftImage; // 活动专区2左侧图片
          this.dataList[2].active2LeftQrcode = obj.active2LeftQrcode; // 活动专区2活动分享图片
          // 活动专区2 右侧
          this.dataList[3].active2RightBackgroundColor = obj.active2RightBackgroundColor; // 活动专区2右侧背景颜色用(,)隔开
          this.dataList[3].active2RightHeadImage = obj.active2RightHeadImage; // 活动专区2右侧表头图片
          this.dataList[3].active2RightImage = obj.active2RightImage; // 活动专区2右侧图片
          this.dataList[3].active2RightQrcode = obj.active2RightQrcode; // 活动专区2活动分享图片
          // 专场专区1
          this.dataList[4].only1BackgroundColor = obj.only1BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[4].only1HeadImage = obj.only1HeadImage; // 专场专区表头图片
          this.dataList[4].only1Image = obj.only1Image; // 专场专区图片
          this.dataList[4].only1Qrcode = obj.only1Qrcode; // 专场专区活动分享图片
          // 专场专区2
          this.dataList[5].only2BackgroundColor = obj.only2BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[5].only2HeadImage = obj.only2HeadImage; // 专场专区表头图片
          this.dataList[5].only2Image = obj.only2Image; // 专场专区图片
          this.dataList[5].only2Qrcode = obj.only2Qrcode; // 专场专区活动分享图片
          // 专场专区3
          this.dataList[6].only3BackgroundColor = obj.only3BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[6].only3HeadImage = obj.only3HeadImage; // 专场专区表头图片
          this.dataList[6].only3Image = obj.only3Image; // 专场专区图片
          this.dataList[6].only3Qrcode = obj.only3Qrcode; // 专场专区活动分享图片
          // 专场专区4
          this.dataList[7].only4BackgroundColor = obj.only4BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[7].only4HeadImage = obj.only4HeadImage; // 专场专区表头图片
          this.dataList[7].only4Image = obj.only4Image; // 专场专区图片
          this.dataList[7].only4Qrcode = obj.only4Qrcode; // 专场专区活动分享图片

          this.companyWechatTemplateId = obj.companyWechatTemplateId;
        })
    },

    // 配置
    toConfigure(item){
      console.log('配置',item)
      item.objectId=this.companyWechatTemplateId
      this.$router.push({
        path: '/activity/special_set',
        query: {
          item
        }
      })
    },

    
  }

}
</script>

<style>

</style>