<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div v-show="showType==='list'"
           class="mod-/oper/customize__homecomponent}">
        <el-form :inline="true">
          <el-form-item>
            <el-input v-model="ruleForm.name"
                      placeholder="请输入客户名称"
                      :clearable="true"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm(ruleForm)">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="customerList"
                  ref="ref_customertable"
                  border
                  style="width: 100%;">
          <el-table-column label="客户名称"
                           header-align="center"
                           align="center"
                           prop="customerName"></el-table-column>
          <el-table-column label="logo"
                           header-align="center"
                           align="center"
                           prop="logo">
            <template slot-scope="scope">

              <el-image v-if="scope.row.logo"
                        style="width: 50px; height: 50px"
                        :src="scope.row.logo"
                        @click="addSrcList(scope.row.logo)"
                        :preview-src-list="srcList"></el-image>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('handle')"
                           fixed="right"
                           header-align="center"
                           align="center"
                           width="700">
            <template slot-scope="scope">
              <el-button type="text"
                         size="small"
                         @click="showMiniHome(scope.row.customerId,scope.row.customerName,0)">居民端首页</el-button>
              <el-button type="text"
                         size="small"
                         @click="showMiniHome(scope.row.customerId,scope.row.customerName,1)">工作端首页</el-button>
              <el-button type="text"
                         size="small"
                         @click="showConfigItem(scope.row.customerId,scope.row.customerName)">功能配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showFootbar(scope.row.customerId,scope.row.customerName)">FootBar配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showRoleAuth(scope.row.customerId,scope.row.customerName)">角色权限</el-button>

              <el-button type="text"
                         size="small"
                         @click="showMost(scope.row.customerId,scope.row.customerName)">高级配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showCategory(scope.row.customerId,scope.row.customerName)">分类配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showStartPage(scope.row.customerId,scope.row.customerName,0)">启动页配置</el-button>
              <el-button type="text"
                         size="small"
                         @click="showElegant(scope.row.customerId,scope.row.customerName)">党员风采分类配置</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="pageNo"
                       :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       @size-change="pageSizeChangeHandle"
                       @current-change="pageCurrentChangeHandle"></el-pagination>
      </div>
      <div v-show="showType==='miniHome'">
        <homepage ref="ref_mini_home"
                  @cancleBack="cancleBack"></homepage>
      </div>
      <div v-show="showType==='config'">
        <config-item ref="ref_config_item"
                     @cancleBack="cancleBack"></config-item>
      </div>
      <div v-show="showType==='footbar'">
        <footbar-list ref="ref_footbarlist"
                      :showFrom="'customize'"
                      :tableKeywork="'FootBarCustomize'"
                      @cancleBack="cancleBack"></footbar-list>
      </div>
      <div v-show="showType==='roleAuth'">
        <role-auth ref="ref_roleAuth"
                   @cancleBack="cancleBack"></role-auth>
      </div>
      <div v-if="showType==='mostedit'">
        <most-list ref="ref_mostlist"
                   @cancleBack="cancleBack"></most-list>
      </div>
      <div v-if="showType==='category'">
        <category-list ref="ref_category"
                       @cancleBack="cancleBack"></category-list>
      </div>

      <div v-if="showType==='elegant'">
        <elegant ref="ref_elegant"
                       @cancleBack="cancleBack"></elegant>
      </div>

      <!-- <el-dialog :visible.sync="funcVisible"
                 title="功能列表"
                 :close-on-click-modal="false"
                 :close-on-press-escape="false"
                 width="90%"
                 top="30px">
        <role-list v-if="funcVisible"
                   :customer-id="customerId"
                   :customer-name="customerName" />
      </el-dialog> -->
      <div v-show="showType==='startPage'">
        <start-page ref="ref_startPage"
                    :customer-id="customerId"
                    :showFrom="'customize'"
                    :tableKeywork="'FootBarCustomize'"
                    @cancleBack="cancleBack"></start-page>
      </div>
    </el-card>
  </div>
</template>

<script>
import ConfigItem from './ConfigItem'
import FootbarList from '../../productConfig/footbar/FootbarList'
// import MiniHome from './MiniHome'
import homepage from '../../productConfig/homeCustom/homepage'
import MostList from './MostList'
// import RoleList from './roleList'
import categoryList from './CategoryList'
import StartPage from './StartPage'
import RoleAuth from './RoleAuth'
import elegant from './elegant.vue'
export default {
  data () {
    return {
      funcVisible: false,
      diaName: '功能配置',
      noImg: '暂无图片',
      customerList: [],
      input: '',

      customerId: '',
      customerName: '',
      pageNo: 1,
      pageSize: 10,
      ruleForm: { name: '' },

      total: 0,
      srcList: [],

      showType: 'list' // 显示的组件类型
    }
  },
  components: {
    ConfigItem,
    homepage,
    // MiniHome,
    // RoleList,
    FootbarList,
    MostList,
    categoryList,
    StartPage,
    RoleAuth,
    elegant
  },
  activated () {

    if (this.showType === 'list') {
      this.$nextTick(() => {
        this.$refs['ref_customertable'].doLayout() // 解决表格错位
      })

    }

  },
  mounted () {
    // const userType = localStorage.getItem('userType')
    // if (userType === 'work') {
    //   this.showMiniHome(localStorage.getItem('customerId'), localStorage.getItem('customerName'), 0)
    // } else {
    this.queryCustomerList()
    // }
  },
  methods: {
    queryCustomerList () {
      let params = {
        customerName: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http
        .post('/oper/crm/customer/pagequery', params)
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.customerList = res.data.list
            this.total = res.data.total
          }
        })
    },
    submitForm (formName) {
      let params = {
        customerName: formName.name,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      this.$http
        .post('/oper/crm/customer/pagequery', params)
        .then(({ data: res }) => {
          if (res.code === 0) {
            this.customerList = res.data.list
          }
        })
    },
    showMiniHome (customerId, customerName, type) {
      this.showType = 'miniHome'
      this.$refs['ref_mini_home'].startSetWxIndex(
        customerId,
        customerName,
        type,
        'customize'
      )
    },

    // 功能配置
    showConfigItem (customerId, customerName) {
      this.showType = 'config'
      this.$refs['ref_config_item'].initData(customerId, customerName)
    },
    // footbar配置
    showFootbar (customerId, customerName) {
      this.showType = 'footbar'
      this.$refs['ref_footbarlist'].initData(customerId, customerName)
      this.$nextTick(() => {
        this.$refs['ref_footbarlist'].doLayout() // 解决表格错位
      })
    },
    // most配置
    showMost (customerId, customerName) {
      this.showType = 'mostedit'
      console.log('ref_mostlist', this.$refs['ref_mostlist'])
      this.$nextTick(() => {
        this.$refs['ref_mostlist'].initData(customerId, customerName)
      })
    },
    // 显示分类配置
    showCategory (customerId, customerName) {
      this.showType = 'category'

      this.$nextTick(() => {
        this.$refs['ref_category'].initData(customerId, customerName)
      })
    },
    // 党员风采
    showElegant (customerId, customerName) {
      this.showType = 'elegant'

      this.$nextTick(() => {
        this.$refs['ref_elegant'].initData(customerId, customerName)
      })
    },

    // 显示权限配置
    showRoleAuth (customerId, customerName) {
      this.showType = 'roleAuth'
      this.$refs['ref_roleAuth'].initData(customerId, customerName)
    },

    // 启动页配置
    showStartPage (customerId, customerName) {
      this.showType = 'startPage'
      this.$refs['ref_startPage'].initData(customerId, customerName)
    },

    pageCurrentChangeHandle (val) {
      this.pageNo = val
      this.queryCustomerList()
    },
    pageSizeChangeHandle (val) {
      this.pageSize = val
      this.queryCustomerList()
    },

    addSrcList (url) {
      this.srcList = []
      this.srcList.push(url)
    },
    // 组件取消返回
    cancleBack () {
      this.showType = 'list'
    }
  }
}
</script>
