<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"
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: '',
        ratio: '600*700'
      }, {
        activityName: '胶囊图',
        status: false,
        type: 3,
        active1BackgroundColor: '',
        active1HeadImage: '',
        active1Image: '',
        ratio: '710*220'
      }, {
        activityName: '活动专区2-左侧专区',
        status: false,
        type: 4,
        active2LeftBackgroundColor: '',
        active2LeftHeadImage: '',
        active2LeftImage: '',
        ratio: '350*240'
      }, {
        activityName: '活动专区2-右侧专区',
        status: false,
        type: 5,
        active2RightBackgroundColor: '',
        active2RightHeadImage: '',
        active2RightImage: '',
        ratio: '350*240'
      }, {
        activityName: '专场专区-01',
        status: false,
        type: 6,
        only1BackgroundColor: '',
        only1HeadImage: '',
        only1Image: '',
        ratio: '320*200'
      }, {
        activityName: '专场专区-02',
        status: false,
        type: 7,
        only2BackgroundColor: '',
        only2HeadImage: '',
        only2Image: '',
        ratio: '320*200'
      }, {
        activityName: '专场专区-03',
        status: false,
        type: 8,
        only3BackgroundColor: '',
        only3HeadImage: '',
        only3Image: '',
        ratio: '320*200'
      }, {
        activityName: '专场专区-04',
        status: false,
        type: 9,
        only4BackgroundColor: '',
        only4HeadImage: '',
        only4Image: '',
        ratio: '320*200'
      }, {
        activityName: '专题精选-01',
        status: false,
        type: 10,
        topics1BackgroundColor: '',
        topics1HeadImage: '',
        topics1Image: '',
        topics1Title: '',
        topics1Title2: '',
        ratio: '320*320'
      }, {
        activityName: '专题精选-02',
        status: false,
        type: 11,
        topics2BackgroundColor: '',
        topics2HeadImage: '',
        topics2Image: '',
        topics2Title: '',
        topics2Title2: '',
        ratio: '320*320'
      }, {
        activityName: '专题精选-03',
        status: false,
        type: 12,
        topics3BackgroundColor: '',
        topics3HeadImage: '',
        topics3Image: '',
        topics3Title: '',
        topics3Title2: '',
        ratio: '320*320'
      }, {
        activityName: '底部广告图',
        status: false,
        type: 13,
        bottomBannerBackgroundColor: '',
        bottomBannerHeadImage: '',
        bottomBannerImage: '',
        ratio: '710*70'
      }]
    }
  },
  created(){
    this.getEnterpriseTemplate()
  },

  methods:{
    //获取企业下模板
    getEnterpriseTemplate(){
      this.companyWechatId = JSON.parse(localStorage.getItem("greemall_user")).companyWechatId;
      this.useTemplate = JSON.parse(localStorage.getItem("greemall_user")).useTemplate;
        getEnterpriseTemplate({
          companyId: this.companyWechatId
        }).then(res => {
          let index = this.useTemplate - 1;

          this.dataList[0].status = res.data[index].popupStatus;  // 首页弹窗 true:开启 false:隐藏
          this.dataList[1].status = res.data[index].active1Status;  // 活动专区1 true:开启 false:隐藏 
          this.dataList[2].status = res.data[index].active2Status;  // 活动专区2 true:开启 false:隐藏 
          this.dataList[3].status = res.data[index].active2Status;  // 活动专区2 true:开启 false:隐藏 
          this.dataList[4].status = res.data[index].onlyStatus; // 专场专区 true:开启 false:隐藏
          this.dataList[5].status = res.data[index].onlyStatus; // 专场专区 true:开启 false:隐藏
          this.dataList[6].status = res.data[index].onlyStatus; // 专场专区 true:开启 false:隐藏
          this.dataList[7].status = res.data[index].onlyStatus; // 专场专区 true:开启 false:隐藏
          this.dataList[8].status = res.data[index].topicsStatus; // 专题精选 true:开启 false:隐藏
          this.dataList[9].status = res.data[index].topicsStatus; // 专题精选 true:开启 false:隐藏
          this.dataList[10].status = res.data[index].topicsStatus;  // 专题精选 true:开启 false:隐藏
          this.dataList[11].status = res.data[index].bottomBannerStatus;  // 底部广告图 true:开启 false:隐藏

          // 首页弹窗
          this.dataList[0].popupBackgroundColor = res.data[index].popupBackgroundColor; // 首页背景颜色
          this.dataList[0].popupHeadImage = res.data[index].popupHeadImage; // 首页表头图片
          this.dataList[0].popupImage = res.data[index].popupImage; // 首页图片
          // 活动专区1
          this.dataList[1].active1BackgroundColor = res.data[index].active1BackgroundColor; // 活动专区1背景颜色用(,)隔开
          this.dataList[1].active1HeadImage = res.data[index].active1HeadImage; // 活动专区1表头图片
          this.dataList[1].active1Image = res.data[index].active1Image; // 活动专区1图片
          // 活动专区2 左侧
          this.dataList[2].active2LeftBackgroundColor = res.data[index].active2LeftBackgroundColor; // 活动专区2左侧背景颜色用(,)隔开
          this.dataList[2].active2LeftHeadImage = res.data[index].active2LeftHeadImage; // 活动专区2左侧表头图片
          this.dataList[2].active2LeftImage = res.data[index].active2LeftImage; // 活动专区2左侧图片
          // 活动专区2 右侧
          this.dataList[3].active2RightBackgroundColor = res.data[index].active2RightBackgroundColor; // 活动专区2右侧背景颜色用(,)隔开
          this.dataList[3].active2RightHeadImage = res.data[index].active2RightHeadImage; // 活动专区2右侧表头图片
          this.dataList[3].active2RightImage = res.data[index].active2RightImage; // 活动专区2右侧图片
          // 专场专区1
          this.dataList[4].only1BackgroundColor = res.data[index].only1BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[4].only1HeadImage = res.data[index].only1HeadImage; // 专场专区表头图片
          this.dataList[4].only1Image = res.data[index].only1Image; // 专场专区图片
          // 专场专区2
          this.dataList[5].only2BackgroundColor = res.data[index].only2BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[5].only2HeadImage = res.data[index].only2HeadImage; // 专场专区表头图片
          this.dataList[5].only2Image = res.data[index].only2Image; // 专场专区图片
          // 专场专区3
          this.dataList[6].only3BackgroundColor = res.data[index].only3BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[6].only3HeadImage = res.data[index].only3HeadImage; // 专场专区表头图片
          this.dataList[6].only3Image = res.data[index].only3Image; // 专场专区图片
          // 专场专区4
          this.dataList[7].only4BackgroundColor = res.data[index].only4BackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[7].only4HeadImage = res.data[index].only4HeadImage; // 专场专区表头图片
          this.dataList[7].only4Image = res.data[index].only4Image; // 专场专区图片
          // 专题精选1
          this.dataList[8].topics1BackgroundColor = res.data[index].topics1BackgroundColor; // 专题精选背景颜色用(,)隔开
          this.dataList[8].topics1HeadImage = res.data[index].topics1HeadImage; // 专题精选表头图片
          this.dataList[8].topics1Image = res.data[index].topics1Image; // 专题精选图片
          this.dataList[8].topics1Title = res.data[index].topics1Title; // 专题精选大标题
          this.dataList[8].topics1Title2 = res.data[index].topics1Title2; // 专题精选小标题
          // 专题精选2
          this.dataList[9].topics1BackgroundColor = res.data[index].topics1BackgroundColor; // 专题精选背景颜色用(,)隔开
          this.dataList[9].topics1HeadImage = res.data[index].topics1HeadImage; // 专题精选表头图片
          this.dataList[9].topics1Image = res.data[index].topics1Image; // 专题精选图片
          this.dataList[9].topics1Title = res.data[index].topics1Title; // 专题精选大标题
          this.dataList[9].topics1Title2 = res.data[index].topics1Title2; // 专题精选小标题
          // 专题精选3
          this.dataList[10].topics1BackgroundColor = res.data[index].topics1BackgroundColor; // 专题精选背景颜色用(,)隔开
          this.dataList[10].topics1HeadImage = res.data[index].topics1HeadImage; // 专题精选表头图片
          this.dataList[10].topics1Image = res.data[index].topics1Image; // 专题精选图片
          this.dataList[10].topics1Title = res.data[index].topics1Title; // 专题精选大标题
          this.dataList[10].topics1Title2 = res.data[index].topics1Title2; // 专题精选小标题
          // 底部广告图
          this.dataList[11].bottomBannerBackgroundColor = res.data[index].bottomBannerBackgroundColor; // 专场专区背景颜色用(,)隔开
          this.dataList[11].bottomBannerHeadImage = res.data[index].bottomBannerHeadImage; // 专场专区表头图片
          this.dataList[11].bottomBannerImage = res.data[index].bottomBannerImage; // 专场专区图片

          this.companyWechatTemplateId = res.data[index].companyWechatTemplateId;
        })
    },

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

    
  }

}
</script>

<style>

</style>