<template>
  <div>
    <el-card v-show="step==1"
             shadow="never"
             class="aui-card--fill">
      <el-table v-loading="dataListLoading"
                :data="dataList"
                border
                @selection-change="dataListSelectionChangeHandle"
                @sort-change="dataListSortChangeHandle"
                style="width: 100%;">
        <el-table-column prop="customerName"
                         label="客户名称"
                         header-align="left"
                         align="left"></el-table-column>
        <el-table-column label="小程序首页配置"
                         fixed="right"
                         header-align="center"
                         align="center"
                         width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 0)">居民端</el-button>
            <el-button type="text"
                       size="small"
                       @click="startSetWxIndex(scope.row.customerId, scope.row.customerName, 1)">政府端</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div class="m-wx_index"
         v-show="step==2">
      <el-button type="default"
                 @click="toStep(1)">取消返回</el-button>
      <el-button type="info"
                 @click="isInPreview = true">预览</el-button>
      <el-button type="success"
                 @click="save">保存</el-button>
      <el-button type="danger"
                 @click="publish">发布</el-button>
      <span style="margin-left:20px; color:#aaa; font-size:13px">({{ wxIndex.customerName }} - {{ wxIndex.clientType===1 ? '政府端' : '居民端' }})</span>

      <el-row class="wrap"
              :gutter="20">
        <el-col :span="5">
          <h4>选择组件</h4>
          <div class="mw-cpt_type">
            <div class="d-function"
                 v-show="item.componentList.length > 0"
                 :key="item.functionId"
                 v-for="item in cptTypeList">
              <div class="d-info"
                   @click="shiftCptTypeItemUnfold(item)">
                <img v-if="item.functionName=='议事厅'"
                     class="d-ico"
                     src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png">
                <img v-else-if="item.functionName=='社群'"
                     class="d-ico"
                     src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png">
                <img v-else-if="item.functionName=='党建声音'"
                     class="d-ico"
                     src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png">
                <img v-else-if="item.functionName=='消息通知'"
                     class="d-ico"
                     src="@/assets/img/modules/wx-mini/index-set/function-cpt4.png">
                <img v-else
                     class="d-ico"
                     src="@/assets/img/modules/wx-mini/index-set/common-cpt.png">

                <span class="d-name">{{ item.functionName }}</span>

                <img class="d-arrow"
                     :class="{'z-unfold': item.isUnfold}"
                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
              </div>
              <div class="d-list"
                   v-show="item.isUnfold">
                <div class="d-item"
                     :key="cptItem.componentId"
                     v-for="cptItem in item.componentList">
                  <span class="d-item-region">({{ getCptRegionName(checkCptRegion(cptItem)) }})</span>
                  <span class="d-item-name">{{ cptItem.componentName }}</span>
                  <span class="d-item-btn z-disabled"
                        v-if="!checkCptReuse(cptItem) && checkExistCpt(cptItem)">已添加</span>
                  <span class="d-item-btn"
                        v-else
                        @click="beforeAddCpt(cptItem)">
                    <img src="@/assets/img/modules/wx-mini/index-set/add.png">
                    <span>添加</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="13">
          <div class="mw-show"
               :class="{'z-preview': isInPreview}">
            <div v-show="isInPreview"
                 class="mw-show-close">
              <el-button type="default"
                         @click="isInPreview = false"
                         icon="el-icon-close"
                         circle></el-button>
            </div>
            <div class="mw-phone">
              <img class="mw-phone-topbar"
                   v-show="isInPreview"
                   src="@/assets/img/modules/wx-mini/index-set/page/wx-top.png">

              <div class="mw-phone-top"
                   v-show="!isInPreview || topCptList.length>0"
                   :class="{'z-none': !isInPreview}">
                <div class="mw-phone-hint"
                     v-show="!isInPreview"
                     :class="{'z-out-left': topCptList.length>0}">（{{ getCptRegionName('top') }}）</div>
                <cpt-item :item="item"
                          :key="item.tempOnlyId"
                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
                          @del="delCpt"
                          @sort="changeCptDisplayOrder"
                          @focus="focusCpt"
                          v-for="item in topCptList"></cpt-item>
              </div>
              <div class="mw-phone-ban"
                   v-show="!isInPreview || banCptList.length>0"
                   :class="{'z-none': !isInPreview}">
                <div class="mw-phone-hint"
                     v-show="!isInPreview"
                     :class="{'z-out-left': banCptList.length>0}">（{{ getCptRegionName('ban') }}）</div>
                <cpt-item :item="item"
                          :key="item.tempOnlyId"
                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
                          @del="delCpt"
                          @sort="changeCptDisplayOrder"
                          @focus="focusCpt"
                          v-for="item in banCptList"></cpt-item>
              </div>
              <div class="mw-phone-fixed"
                   v-show="!isInPreview || fixedCptList.length>0"
                   :class="{'z-none': !isInPreview}">
                <div class="mw-phone-hint"
                     v-show="!isInPreview"
                     :class="{'z-out-down': fixedCptList.length>0}">（{{ getCptRegionName('fixed') }}）</div>
                <cpt-item :item="item"
                          :key="item.tempOnlyId"
                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
                          @del="delCpt"
                          @sort="changeCptDisplayOrder"
                          @focus="focusCpt"
                          v-for="item in fixedCptList"></cpt-item>
              </div>
              <div class="mw-phone-cnt"
                   v-show="!isInPreview || cntCptList.length>0"
                   :class="{'z-none': !isInPreview}">
                <div class="mw-phone-hint"
                     v-show="!isInPreview"
                     :class="{'z-out-left': cntCptList.length>0}">（{{ getCptRegionName('cnt') }}）</div>
                <cpt-item :item="item"
                          :key="item.tempOnlyId"
                          :is-focused="focusedCpt.tempOnlyId===item.tempOnlyId"
                          @del="delCpt"
                          @sort="changeCptDisplayOrder"
                          @focus="focusCpt"
                          v-for="item in cntCptList"></cpt-item>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <transition v-show="focusedCpt.tempOnlyId"
                      name="el-zoom-in-top">
            <div class="mw-set el-zoom-in-top"
                 v-if="focusedCpt.tempOnlyId">
              <div class="d-set-head"
                   @click="focusedCpt.demoIsUnfold = !focusedCpt.demoIsUnfold">
                <span class="d-title">演示数据</span>
                <img class="d-arrow"
                     :class="{'z-unfold': focusedCpt.demoIsUnfold}"
                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
              </div>
              <el-form v-show="focusedCpt.demoIsUnfold"
                       ref="form">
                <el-form-item>
                  <el-input type="textarea"
                            v-model="focusedCpt.demoData"></el-input>
                </el-form-item>
              </el-form>

              <div class="d-set-head"
                   @click="focusedCpt.confIsUnfold = !focusedCpt.confIsUnfold">
                <span class="d-title">高级选项</span>
                <img class="d-arrow"
                     :class="{'z-unfold': focusedCpt.confIsUnfold}"
                     src="@/assets/img/modules/wx-mini/index-set/arrow-down.png">
              </div>
              <el-form v-show="focusedCpt.confIsUnfold"
                       ref="form">
                <el-form-item>
                  <el-input type="textarea"
                            v-model="focusedCpt.configuration"></el-input>
                </el-form-item>
                <div class="d-config-hint"
                     v-show="focusedCpt.configurationDescription">
                  <img src="@/assets/img/modules/wx-mini/index-set/info.png">
                  <span>{{ focusedCpt.configurationDescription }}</span>
                </div>
              </el-form>

              <div class="d-operate">
                <el-button type="default"
                           size="small"
                           round
                           @click="resetFocusedCptData">重置</el-button>
                <el-button type="success"
                           size="small"
                           round
                           @click="saveFocusedCptData">保存</el-button>
              </div>
            </div>
          </transition>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" src="@/assets/scss/modules/wx-mini/index-set.scss"></style>

<script>
import mixinViewModule from '@/mixins/view-module'
import componentWxcpt from '@/components/wx-index/cpt-item'
import { Loading } from 'element-ui'
import nextTick from 'dai-js/tools/nextTick'
import getRandomString from 'dai-js/tools/getRandomString'
import cloneDeep from 'lodash/cloneDeep'

// 处理获得mock测试接口地址
const getMockFilterUrl = (url) => {
  const usedMockTest = false
  const mockBaseUrl = 'https://nei.netease.com/api/apimock/30f0251f1b7dc90a8c38e3c634ef2a8b/api'
  if (usedMockTest) {
    return mockBaseUrl + url
  } else {
    return url
  }
}

// 当前是否是开发环境
const envIsDev = process.env.VUE_APP_NODE_ENV === 'dev'

export default {
  mixins: [mixinViewModule],
  data () {
    const cptTypeListTestdata = [
      // 通用组件
      {
        functionId: '0',
        functionName: '通用组件',
        functionType: 1, // 1通用 2功能
        isUnfold: true,
        componentList: [
          {
            componentId: '7',
            componentName: '最新议题',
            componentFrontId: 'resi-functionList-hall-latestIssueList',
            region: 'functionList',
            configuration: {
              num: 3
            },
            demoData: {
              list: [
                {
                  avatar: '',
                  title: '最新议题的标题。最新议题的标题。最新议题的标题。最新议题的标题。',
                  content: '最新议题的内容，最新议题的内容，最新议题的内容。',
                  author: '山东路45号-刘女士',
                  date: '2020-01-02'
                },
                {
                  avatar: '',
                  title: '最新议题的标题。',
                  content: '最新议题的内容，最新议题的内容，最新议题的内容。',
                  author: '山东路45号-刘女士',
                  date: '2020-01-02'
                },
                {
                  avatar: '',
                  title: '最新议题的标题。',
                  content: '最新议题的内容，最新议题的内容，最新议题的内容。',
                  author: '山东路45号-刘女士',
                  date: '2020-01-02'
                }
              ]
            },
            configurationDescription: ''
          },
          {
            componentId: '8',
            componentName: '最新发布',
            componentFrontId: 'resi-functionList-voice-newsList',
            region: 'functionList',
            configuration: {
              num: 3
            },
            demoData: {
              list: [
                {
                  pic: '',
                  title: '新型冠状病毒检测重大突破！新型冠状病毒检测重大突破！！！',
                  author: '大港路党支部',
                  date: '2020-01-02'
                },
                {
                  pic: '',
                  title: '新型冠状病毒检测重大突破！',
                  author: '大港路党支部',
                  date: '2020-01-02'
                },
                {
                  pic: '',
                  title: '新型冠状病毒检测重大突破！',
                  author: '大港路党支部',
                  date: '2020-01-02'
                }
              ]
            },
            configurationDescription: ''
          },
          {
            componentId: '9',
            componentName: '结案项目',
            componentFrontId: 'resi-functionList-hall-closedProjectList',
            region: 'functionList',
            configuration: {
              num: 3
            },
            demoData: {
              list: [
                {
                  title: '结案项目的标题。',
                  content: '结案项目的内容，结案项目的内容，结案项目的内容。',
                  author: '党支部-卫生部门',
                  date: '2020-01-02'
                },
                {
                  title: '结案项目的标题。',
                  content: '结案项目的内容，结案项目的内容，结案项目的内容。',
                  author: '党支部-卫生部门',
                  date: '2020-01-02'
                },
                {
                  title: '结案项目的标题。',
                  content: '结案项目的内容，结案项目的内容，结案项目的内容。',
                  author: '党支部-卫生部门',
                  date: '2020-01-02'
                }
              ]
            },
            configurationDescription: ''
          }
        ]
      },
      // 功能组件
      {
        functionId: '1',
        functionName: '议事厅',
        functionType: 2, // 1通用 2功能
        isUnfold: false,
        componentList: [
          {
            componentId: '1',
            componentName: '顶部标题',
            componentFrontId: 'resi-titleList-home-gridNameTitle',
            configuration: {
              // content: ''
            },
            demoData: {
              ico: '',
              avatar: '',
              title: '青岛市市北区大港路第二网格'
            },
            region: 'titleList',
            configurationDescription: '请配置具体内容'
          },
          {
            componentId: '2',
            componentName: '轮播图',
            componentFrontId: 'resi-topList-voice-hotNewsSwiper',
            configuration: {
              // content: ''
            },
            demoData: {
              pic: '',
              title: '轮播图新闻标题'
            },
            region: 'topList',
            configurationDescription: '请配置具体内容'
          },
          {
            componentId: '3',
            componentName: '消息通知',
            componentFrontId: 'resi-floatingList-mine-newMessageButton',
            configuration: {
              // content: ''
            },
            demoData: {
              ico: '',
              text: '有新消息！'
            },
            region: 'floatingList',
            configurationDescription: ''
          },
          {
            componentId: '5',
            componentName: '功能菜单',
            componentFrontId: 'resi-functionList-extend-moreFunctionIcons',
            region: 'functionList',
            configuration: {
              // bgc: '#eee'
            },
            demoData: {
              list: [
                {
                  ico: '',
                  text: '议事厅'
                },
                {
                  ico: '',
                  text: '社群'
                },
                {
                  ico: '',
                  text: '党建声音'
                },
                {
                  ico: '',
                  text: '更多功能'
                }
              ]
            },
            configurationDescription: ''
          },
          {
            componentId: '6',
            componentName: '热门群',
            componentFrontId: 'resi-functionList-group-recommendGroupSlider',
            region: 'functionList',
            configuration: {
              // bgc: '#fff'
            },
            demoData: {
              list: [
                {
                  ico: '',
                  no: '1',
                  avatar: '',
                  title: '群名称',
                  info1: '山东路45号-张三',
                  info2: '共240人',
                  info3: '党员11人'
                },
                {
                  ico: '',
                  no: '2',
                  avatar: '',
                  title: '群名称',
                  info1: '山东路45号-张三',
                  info2: '共240人',
                  info3: '党员11人'
                },
                {
                  ico: '',
                  no: '3',
                  avatar: '',
                  title: '群名称',
                  info1: '山东路45号-张三',
                  info2: '共240人',
                  info3: '党员11人'
                }
              ]
            },
            configurationDescription: ''
          }
        ]
      }
    ]
    return {
      mixinViewModuleOptions: {
        getDataListURL: getMockFilterUrl('/oper/crm/customer/getvalidcustomerlist'),
        getDataListIsPage: false
      },

      dataList: !envIsDev ? [] : [
        {
          customerName: '测试1',
          customerId: '1'
        },
        {
          customerName: '测试2',
          customerId: '2'
        }
      ],

      // 步骤: 1列表选择 2首页配置
      step: 1,

      wxIndex: {
        customerId: '',
        customerName: '',
        clientType: ''
      },

      // 在预览中状态
      isInPreview: false,

      // 可用列表
      cptTypeList: !envIsDev ? [] : cptTypeListTestdata,
      // 当前应用组件列表
      cptList: [
        // {
        //   componentId: '1',
        //   componentName: '顶部标题',
        //   componentFrontId: 'top_title',
        //   configuration: {
        //     content: '青岛市党委'
        //   },
        //   demoData: {
        //     content: '我是标题'
        //   },
        //   configurationDescription: '请配置具体内容',
        //   displayOrder: 1,
        //   region: 1 // 区域 1top 2ban 3fixed 4cnt
        // }
      ],
      lastSavedCptList: [],
      focusedCpt: {
        tempOnlyId: ''
      }
    }
  },

  components: {
    'cpt-item': componentWxcpt
  },

  computed: {
    cptTypeListTiled () {
      const { cptTypeList } = this
      let list = []
      cptTypeList.forEach(item => {
        list = [...list, ...item.componentList]
      })
      return list
    },
    topCptList () {
      return this.cptList.filter(item => this.checkCptRegion(item) === 'top')
    },
    banCptList () {
      return this.cptList.filter(item => this.checkCptRegion(item) === 'ban')
    },
    cntCptList () {
      console.log('cntCpt发生了变化')
      let arr = this.cptList.filter(item => this.checkCptRegion(item) === 'cnt')
      arr.sort((f, s) => f.displayOrder - s.displayOrder)
      return arr
    },
    fixedCptList () {
      return this.cptList.filter(item => this.checkCptRegion(item) === 'fixed')
    }
  },

  methods: {
    // 改变步骤
    toStep (s) {
      this.step = s
    },
    // 选择用户开始配置
    async startSetWxIndex (id, name, type) {
      this.wxIndex.customerId = id
      this.wxIndex.customerName = name
      this.wxIndex.clientType = type
      console.log(this.wxIndex)
      let loadingInstance = Loading.service()
      await this.getCptTypeList()
      await this.getCptList()
      this.toStep(2)
      this.cleanFocusCpt()
      loadingInstance.close()
    },
    processBackendCptData (item) {
      let demoData = {}
      let configuration = {}
      const tempOnlyId = getRandomString(20)
      try {
        demoData = JSON.parse(item.demoData)
        configuration = JSON.parse(item.configuration)
      } catch (err) {
        console.log(err)
      }
      return { tempOnlyId, ...item, demoData, configuration }
    },
    // 获取用户可用组件列表
    getCptTypeList () {
      const url = getMockFilterUrl('/oper/customize/home/getcomponentlistbycustomer')
      const { wxIndex: { clientType, customerId } } = this
      return this.$http.post(
        url,
        { clientType, customerId }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          let list = [{
            functionId: '0',
            functionName: '通用组件',
            functionType: 1, // 1通用 2功能
            isUnfold: true,
            componentList: res.data.commonList.map(this.processBackendCptData)
          }, ...res.data.functionList.map(item => {
            return {
              functionId: item.functionId,
              functionName: item.functionName,
              functionType: 2, // 1通用 2功能
              isUnfold: false,
              componentList: item.componentList.map(this.processBackendCptData)
            }
          })]
          this.cptTypeList = list
          console.log('可用组件列表', list)
        }
      }).catch((err) => {
        console.log(err)
        return this.$message.error('网络错误')
      })
    },
    // 获取用户当前保存的组件列表
    getCptList () {
      const url = getMockFilterUrl('/oper/customize/home/gethomedesignbycustomer')
      const { wxIndex: { clientType, customerId } } = this
      return this.$http.post(
        url,
        { clientType, customerId }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          let list = [
            ...res.data.titleList,
            ...res.data.topList,
            ...res.data.functionList,
            ...res.data.floatingList
          ]
          this.cptList = list.map(this.processBackendCptData)
          this.lastSavedCptList = cloneDeep(this.cptList)
          console.log('用户储存组件列表', list)
        }
      }).catch((err) => {
        console.log(err)
        return this.$message.error('网络错误')
      })
    },

    // 保存配置
    save () {
      console.log('保存配置')
      const url = getMockFilterUrl('/oper/customize/home/savehomedesign')
      const { wxIndex: { clientType, customerId }, cptList } = this
      const componentList = cptList.map(item => {
        return {
          componentId: item.componentId,
          region: item.region,
          displayOrder: item.displayOrder,
          demoData: JSON.stringify(item.demoData),
          configuration: JSON.stringify(item.configuration)
        }
      })
      return this.$http.post(
        url,
        { clientType, customerId, componentList }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        } else {
          console.log(res)
          this.lastSavedCptList = cloneDeep(this.cptList)
          return this.$message.success('保存成功')
        }
      }).catch((err) => {
        console.log(err)
        return this.$message.error('网络错误')
      })
    },
    // 发布配置
    publish () {
      console.log('发布配置')
      const url = getMockFilterUrl('/oper/customize/home/distributehomedesign')
      const { wxIndex: { clientType, customerId }, cptList } = this
      const componentList = cptList.map(item => {
        return {
          componentId: item.componentId,
          region: item.region,
          displayOrder: item.displayOrder,
          demoData: JSON.stringify(item.demoData),
          configuration: JSON.stringify(item.configuration)
        }
      })
      if (componentList.length === 0) {
        return this.$message.error('您尚未选择任何组件，不能发布')
      }
      return this.$confirm('目前的设置会呈现在所有用户的小程序上，是否继续发布？', '确认发布', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.$http.post(
          url,
          { clientType, customerId, componentList }
        ).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          } else {
            console.log(res)
            this.lastSavedCptList = cloneDeep(this.cptList)
            return this.$message.success('发布成功')
          }
        }).catch((err) => {
          console.log(err)
          return this.$message.error('网络错误')
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    // 判断组件所属区域类别
    checkCptRegion (item) {
      const { region } = item
      if (region === 'titleList') {
        return 'top'
      } else if (region === 'topList') {
        return 'ban'
      } else if (region === 'functionList') {
        return 'cnt'
      } else if (region === 'floatingList') {
        return 'fixed'
      } else {
        return 'none'
      }
    },
    // 判断组件是否可用复用
    checkCptReuse (item) {
      const { componentFrontId } = item
      const reuseList = this.cptTypeList[0].componentList.map(v => v.componentFrontId)
      const fun = name => name === componentFrontId
      return reuseList.findIndex(fun) !== -1
    },
    // 根据所属区域简称得到名字
    getCptRegionName (id) {
      return {
        'top': '标题区',
        'ban': '置顶区',
        'fixed': '浮窗区',
        'cnt': '功能区',
        'none': ''
      }[id]
    },
    // 添加组件到实例-前验证
    beforeAddCpt (item) {
      console.log('添加组件到实例-前验证')
      const regionType = this.checkCptRegion(item)
      const tempOnlyId = getRandomString(20)
      if (regionType === 'top') {
        if (this.topCptList.length > 0) {
          this.$message('标题区已有组件，请删除后再添加')
        } else {
          this.addCpt(item, tempOnlyId)
        }
      } else if (regionType === 'ban') {
        if (this.banCptList.length > 0) {
          this.$message('置顶区已有组件，请删除后再添加')
        } else {
          this.addCpt(item, tempOnlyId)
        }
      } else if (regionType === 'fixed') {
        if (this.fixedCptList.length > 0) {
          this.$message('浮窗区已有组件，请删除后再添加')
        } else {
          this.addCpt(item, tempOnlyId)
        }
      } else if (regionType === 'cnt') {
        this.cntCptListResort()
        this.addCpt(item, tempOnlyId, (this.cntCptList.length + 1) * 10)
      } else {
        return false
      }
    },
    // 实例内容组件重置displayOrder属性
    cntCptListResort () {
      console.log('实例内容组件重置displayOrder属性')
      this.cntCptList.forEach((item, index) => {
        item.displayOrder = (index + 1) * 10
      })
    },
    // 添加组件到实例
    addCpt (item, tempOnlyId, displayOrder = 0) {
      console.log('添加组件到实例')
      let trueItem = cloneDeep(item)
      trueItem.tempOnlyId = tempOnlyId
      trueItem.displayOrder = displayOrder
      this.cptList.push(trueItem)
    },
    // 改变实例组件显示顺序
    async changeCptDisplayOrder (item, type) {
      console.log('改变实例组件显示顺序')
      if (type === 'up') {
        item.displayOrder -= 11
      } else if (type === 'down') {
        item.displayOrder += 11
      }
      await nextTick()
      this.cntCptListResort()
    },
    // 删除组件
    delCpt (item) {
      this.cptList = this.cptList.filter(cptItem => item.tempOnlyId !== cptItem.tempOnlyId)
      if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
        this.focusedCpt = { tempOnlyId: '' }
      }
      this.cntCptListResort()
    },
    // 检测实例中是否存在某种类型组件
    checkExistCpt (item) {
      return this.cptList.some(cptItem => item.componentFrontId === cptItem.componentFrontId)
    },
    // 清空聚焦实例组件
    cleanFocusCpt () {
      this.focusedCpt = { tempOnlyId: '' }
    },
    // 聚焦实例组件
    focusCpt (item) {
      console.log('聚焦实例组件')
      if (this.isInPreview) return
      if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
        this.cleanFocusCpt()
      } else {
        this.focusedCpt = { ...cloneDeep(item), demoData: JSON.stringify(item.demoData), configuration: JSON.stringify(item.configuration), demoIsUnfold: true, confIsUnfold: false }
      }
    },
    // 保存聚焦组件数据
    saveFocusedCptData () {
      const { focusedCpt } = this
      this.cptList.forEach(item => {
        if (item.tempOnlyId === focusedCpt.tempOnlyId) {
          try {
            item.demoData = JSON.parse(focusedCpt.demoData)
            item.configuration = JSON.parse(focusedCpt.configuration)
          } catch (err) {
            this.$alert('json数据格式有误', '无法保存', {
              confirmButtonText: '确定'
            })
            console.log(err)
          }
        }
      })
    },
    // 重置聚焦组件数据，重置为上次整体保存时的数据
    resetFocusedCptData () {
      const { focusedCpt } = this
      const fun = item => {
        if (item.tempOnlyId === focusedCpt.tempOnlyId) {
          focusedCpt.demoData = JSON.stringify(item.demoData)
          focusedCpt.configuration = JSON.stringify(item.configuration)
          return true
        } else {
          return false
        }
      }
      if (!this.lastSavedCptList.some(fun)) {
        this.cptTypeListTiled.forEach(item => {
          if (item.componentFrontId === focusedCpt.componentFrontId) {
            focusedCpt.demoData = JSON.stringify(item.demoData)
            focusedCpt.configuration = JSON.stringify(item.configuration)
          }
        })
      }
    },

    // 改变可用列表组件展开与收起
    shiftCptTypeItemUnfold (item) {
      item.isUnfold = !item.isUnfold
    }
  }
}
</script>
