<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="success"
        @click="save">保存</el-button>
      <el-button type="danger"
        @click="publish">发布</el-button>

      <el-row class="wrap" :gutter="20">
        <el-col :span="4">
          <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.functionId==0" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/common-cpt.png">
                <img v-if="item.functionId==1" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt1.png">
                <img v-if="item.functionId==2" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt2.png">
                <img v-if="item.functionId==3" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt3.png">
                <img v-if="item.functionId==4" class="d-ico" src="@/assets/img/modules/wx-mini/index-set/function-cpt4.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-name">{{ cptItem.componentName }}</span>
                  <span class="d-item-btn" @click="beforeAddCpt(cptItem)">
                    <img class="d-item-ico" src="@/assets/img/modules/wx-mini/index-set/add.png">
                    <span>添加</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="mw-show">
            <div class="mw-phone">
              <div class="mw-phone-top z-none">
                <div class="mw-phone-hint" :class="{'z-out-left': topCptList.length>0}">（标题区）</div>
                <div class="mw-cpt"
                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
                  @click="focusCpt(item)" :key="item.componentId"
                  v-for="item in topCptList">
                  <div class="mw-cpt-top_title" v-if="item.componentFrontId==='top_title'">
                    <span>{{ item.demoData.content }}</span>
                  </div>
                </div>
              </div>
              <div class="mw-phone-ban z-none">
                <div class="mw-phone-hint" :class="{'z-out-left': banCptList.length>0}">（置顶区）</div>
              </div>
              <div class="mw-phone-fixed z-none">
                <div class="mw-phone-hint" :class="{'z-out-down': fixedCptList.length>0}">（浮窗区）</div>
              </div>
              <div class="mw-phone-cnt z-none">
                <div class="mw-phone-hint" :class="{'z-out-left': cntCptList.length>0}">（功能区）</div>
                <div class="mw-cpt"
                  :class="{'z-focused': focusedCpt.tempOnlyId===item.tempOnlyId}"
                  @click="focusCpt(item)"
                  :key="index"
                  v-for="(item, index) in cntCptList">
                  <div class="mw-cpt-cnt_news" :style="{backgroundColor: item.configuration.bgc}" v-if="item.componentFrontId==='cnt_news'">
                    <div class="d-news-title">{{ item.demoData.title }}</div>
                    <p class="d-news-cnt">{{ item.demoData.content }}</p>
                    <div class="d-cpt-operate"
                      v-show="focusedCpt.tempOnlyId===item.tempOnlyId"
                      @click.stop>
                      <div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'up')">
                        <img src="@/assets/img/modules/wx-mini/index-set/up.png">
                        <p>上移</p>
                      </div>
                      <div class="d-cpt-btn" @click="delCpt(item)">
                        <img src="@/assets/img/modules/wx-mini/index-set/del.png">
                        <p>删除</p>
                      </div>
                      <div class="d-cpt-btn" @click="changeCptDisplayOrder(item, 'down')">
                        <img src="@/assets/img/modules/wx-mini/index-set/down.png">
                        <p>下移</p>
                      </div>
                    </div>
                  </div>
                </div>
              </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" label-position="left" label-width="60px" :model="focusedCpt.demoData" size="mini">
                  <el-form-item label="标题">
                    <el-input v-model="focusedCpt.demoData.title"></el-input>
                  </el-form-item>
                  <el-form-item label="内容">
                    <el-input type="textarea" v-model="focusedCpt.demoData.content"></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" label-position="left" label-width="60px" :model="focusedCpt.configuration" size="mini">
                  <el-form-item label="背景色">
                    <el-input v-model="focusedCpt.configuration.bgc"></el-input>
                  </el-form-item>
                </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 { Loading } from 'element-ui'
import nextTick from 'dai-js/tools/nextTick'
import getRandomString from 'dai-js/tools/getRandomString'
import cloneDeep from 'lodash/cloneDeep'

export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/oper/crm/customer/getvalidcustomerlist',
        getDataListIsPage: false
      },

      dataList: [
        {
          customerName: '青岛李沧区党委',
          customerId: '1'
        },
        {
          customerName: '青岛市北区党委',
          customerId: '2'
        }
      ],

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

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

      // 可用列表
      cptTypeList: [
        // 通用组件
        {
          functionId: '0',
          functionName: '通用组件',
          functionType: 1, // 1通用 2功能
          isUnfold: true,
          componentList: [
            {
              componentId: '1',
              componentName: '顶部标题',
              componentFrontId: 'top_title',
              configuration: {
                content: '青岛市党委'
              },
              demoData: {
                content: '我是标题'
              },
              configurationDescription: '请配置具体内容'
            }
          ]
        },
        // 功能组件
        {
          functionId: '1',
          functionName: '议事厅',
          functionType: 2, // 1通用 2功能
          isUnfold: false,
          componentList: [
            {
              componentId: '5',
              componentName: '新闻类',
              componentFrontId: 'cnt_news',
              configuration: {
                bgc: '#eee'
              },
              demoData: {
                title: '我是标题',
                content: '我是内容。我是内容。我是内容。'
              },
              configurationDescription: '请配置具体内容'
            }
          ]
        }
      ],
      // 当前应用组件列表
      cptList: [
        // {
        //   componentId: '1',
        //   componentName: '顶部标题',
        //   componentFrontId: 'top_title',
        //   configuration: {
        //     content: '青岛市党委'
        //   },
        //   demoData: {
        //     content: '我是标题'
        //   },
        //   configurationDescription: '请配置具体内容',
        //   displayOrder: 1,
        //   region: 1 // 区域 1top 2ban 3fixed 4cnt
        // }
      ],
      focusedCpt: {
        tempOnlyId: ''
      }
    }
  },

  components: {
  },

  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
      let loadingInstance = Loading.service()
      await nextTick(1000)
      loadingInstance.close()
      this.toStep(2)
      console.log(this.wxIndex)
    },

    // 保存配置
    save () {
      console.log('保存配置')
    },
    // 发布配置
    publish () {
      console.log('发布配置')
    },
    // 判断组件所属区域类别
    checkCptRegion (item) {
      const { componentFrontId } = item
      const fun = name => name === componentFrontId
      if (['top_title'].findIndex(fun) !== -1) {
        return 'top'
      } else if (['ban_banner'].findIndex(fun) !== -1) {
        return 'ban'
      } else if (['cnt_news'].findIndex(fun) !== -1) {
        return 'cnt'
      } else if (['fixed_msg'].findIndex(fun) !== -1) {
        return 'fixed'
      } else {
        return 'none'
      }
    },
    // 添加组件到实例-前验证
    beforeAddCpt (item) {
      console.log('添加组件到实例-前验证')
      const regionType = this.checkCptRegion(item)
      const tempOnlyId = getRandomString(20)
      if (regionType === 'top') {
        if (this.topCptList.length > 0) {

        } else {
          this.addCpt(item, tempOnlyId, 1)
        }
      } else if (regionType === 'ban') {
        if (this.banCptList.length > 0) {

        } else {
          this.addCpt(item, tempOnlyId, 2)
        }
      } else if (regionType === 'fixed') {
        if (this.fixedCptList.length > 0) {

        } else {
          this.addCpt(item, tempOnlyId, 3)
        }
      } else if (regionType === 'cnt') {
        this.addCpt(item, tempOnlyId, 4, (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, region, displayOrder = 0) {
      console.log('添加组件到实例')
      let trueItem = cloneDeep(item)
      trueItem.tempOnlyId = tempOnlyId
      trueItem.region = region
      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)
    },
    // 聚焦实例组件
    focusCpt (item) {
      console.log('聚焦实例组件')
      if (this.focusedCpt.tempOnlyId === item.tempOnlyId) {
        this.focusedCpt = { tempOnlyId: '' }
      } else {
        this.focusedCpt = { ...cloneDeep(item), demoIsUnfold: true, confIsUnfold: false }
      }
    },
    // 保存聚焦组件数据
    saveFocusedCptData () {
      const { focusedCpt } = this
      this.cptList.forEach(item => {
        if (item.tempOnlyId === focusedCpt.tempOnlyId) {
          item.demoData = cloneDeep(focusedCpt.demoData)
          item.configuration = cloneDeep(focusedCpt.configuration)
        }
      })
    },
    // 重置聚焦组件数据
    resetFocusedCptData () {
      const { focusedCpt } = this
      this.cptTypeListTiled.forEach(item => {
        if (item.componentId === focusedCpt.componentId) {
          focusedCpt.demoData = cloneDeep(item.demoData)
          focusedCpt.configuration = cloneDeep(item.configuration)
        }
      })
    },

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