<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-/oper/customize__homecomponent}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item label="组件名称">
          <el-input v-model="dataForm.componentName" placeholder="请输入组件名称模糊匹配" clearable></el-input>
        </el-form-item>
        <el-form-item label="所属端">
          <el-select v-model="dataForm.clientType"
                   placeholder="全部" clearable>
          <el-option v-for="item in clientTypeList"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组件类型">
          <el-select v-model="dataForm.conponentType"
                   placeholder="全部" clearable>
          <el-option v-for="item in conponentTypeList"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="组件适用区域">
          <el-select v-model="dataForm.region"
                   placeholder="全部" clearable>
          <el-option v-for="item in regionList"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="所属功能">
          <el-select v-model="dataForm.functionId"
                   placeholder="全部" clearable>
          <el-option v-for="item in functionList"
                     :key="item.id"
                     :label="item.functionName"
                     :value="item.id">
          </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="唯一标识" header-align="center" align="center" v-if="false"></el-table-column>
        <el-table-column prop="componentName" label="组件名称" header-align="center" align="center"></el-table-column>
        <el-table-column prop="functionName" label="所属功能" header-align="center" align="center" v-if="true"></el-table-column>
        <el-table-column prop="componentFrontId" label="前端标识" header-align="center" align="center"></el-table-column>
        <el-table-column prop="clientType" label="所属端" header-align="center" align="center" :formatter="showClientTypeName"></el-table-column>
        <el-table-column prop="conponentType" label="组件类型" header-align="center" align="center" :formatter="showConponentTypeName"></el-table-column>
        <el-table-column prop="region" label="组件的“适用区域”" header-align="center" align="center" :formatter="showRegionName"></el-table-column>
        <el-table-column prop="configuration" label="高级配置" header-align="center" align="center" v-if="false"></el-table-column>
        <el-table-column prop="configurationDescription" label="配置项说明" header-align="center" align="center" v-if="false"></el-table-column>
        <el-table-column prop="demoData" label="演示数据" header-align="center" align="center" v-if="false"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
            <el-button  type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './homecomponent-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/oper/customize/homecomponent/page',
        getDataListIsPage: true,
        deleteURL: '/oper/customize/homecomponent',
        deleteIsBatch: true
      },
      dataForm: {
        componentName: '',
        clientType: '',
        conponentType: '',
        region: '',
        functionId: ''
      },
      clientTypeList: [
        {
          'dictName': '居民端',
          'dictValue': '0'
        }, {
          'dictName': '政府端',
          'dictValue': '1'
        }
      ],
      conponentTypeList: [
        {
          'dictName': '通用组件',
          'dictValue': '0'
        }, {
          'dictName': '功能组件',
          'dictValue': '1'
        }
      ],
      regionList: [
        {
          'dictName': '标题区',
          'dictValue': 'titleList'
        }, {
          'dictName': '置顶区',
          'dictValue': 'topList'
        }, {
          'dictName': '功能区',
          'dictValue': 'functionList'
        }, {
          'dictName': '悬浮区',
          'dictValue': 'floatingList'
        }
      ],
      functionList: []
    }
  },
  components: {
    AddOrUpdate
  },
  created () {
    this.queryFunctionList()
  },
  methods: {
    showClientTypeName: function (row, column) {
      let clientType = row.clientType
      if (clientType === 0) {
        return '居民端'
      } else if (clientType === 1) {
        return '政府端'
      }
    },
    showConponentTypeName: function (row, column) {
      let conponentType = row.conponentType
      if (conponentType === 0) {
        return '通用组件'
      } else if (conponentType === 1) {
        return '功能组件'
      }
    },
    showRegionName: function (row, column) {
      let region = row.region
      if (region === 'titleList') {
        return '标题区'
      } else if (region === 'topList') {
        return '置顶区'
      } else if (region === 'functionList') {
        return '功能区'
      } else if (region === 'floatingList') {
        return '悬浮区'
      }
    },
    queryFunctionList () {
      this.$http.get(`/oper/customize/function/queryFunctionList`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.functionList = res.data
      }).catch(() => { })
    }
  }
}
</script>
