<!--
  @description: app菜单列表
  @Modifier: zxl
  @routerPath:
  @date: 2020-2-20-14:56
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form.sync="searchForm"
      search-label-width="100px"
      :menu="true"
      @on-load="loadData"
    >
      <template v-slot:header>
        app菜单列表
      </template>
      <template v-slot:search="search">
        <el-form-item label="应用名称" prop="appName">
          <el-input v-model.trim="searchForm.appName" placeholder="应用名称" @keyup.enter.native="search.onSearch" />
        </el-form-item>
        <el-form-item label="应用状态" prop="appStatus">
          <el-select v-model="searchForm.appStatus" placeholder="请选择" style="width:228px">
            <el-option
              v-for="(item,index) in appStatusList"
              :key="index"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应用类型" prop="appType">
          <el-select v-model="searchForm.appType" placeholder="请选择" style="width:228px">
            <el-option
              v-for="(item,index) in appTypeList"
              :key="index"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应用类别" prop="appType">
          <el-select v-model="searchForm.appCategory" placeholder="请选择" style="width:228px">
            <el-option
              v-for="(item,index) in appCategoryList"
              :key="index"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <el-button type="primary" @click="addMenu">
          新增
        </el-button>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="loading"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60"
          />
          <el-table-column
            header-align="center"
            prop="appName"
            label="app名称"
            min-width="230"
          />
          <el-table-column
            header-align="center"
            prop="appStatus"
            label="应用状态"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ filterDictText(appStatusList, scope.row.appStatus) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="appType"
            label="应用类型"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ filterDictText(appTypeList, scope.row.appType) }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="appCategory"
            label="应用类别"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ filterDictText(appCategoryList, scope.row.appCategory) }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            header-align="center"
            prop="appVersion"
            label="应用版本号"
            min-width="100"
            align="center"
          />
          <el-table-column
            header-align="center"
            prop="appUrl"
            label="应用路径"
            min-width="230"
          />
          <el-table-column prop="icoFavicon" align="center" width="80" label="应用图标">
            <template slot-scope="scope">
              <img :src="scope.row.appIcon" alt class="img_pic">
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            prop="isNew"
            label="是否上新"
            min-width="90"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.isNew==='01'?'是':'否' }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            header-align="center"
            prop="sort"
            label="排序"
            min-width="90"
          />
          <el-table-column label="操作" align="center" width="125">
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="toEdit(scope.row)"
              >
                [编辑]
              </el-link>
              <el-link
                type="primary"
                @click="toDel(scope.row,scope.$index)"
              >
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <menu-add-dialog v-if="dialogData.flag" :dialog-data="dialogData" @change="callBack" />
  </div>
</template>

<script>

/* 混合开发方法-参数字段*/
import { filterDictText } from '../../../assets/js/utils'
import { delAppFunction, queryFunctionListPage } from '../../../api/appManagement/menu'
import menuAddDialog from './menuAdd-dialog.vue'
export default {
  components: {
    menuAddDialog
  },
  data() {
    return {
      loading: true,
      searchForm: {
        appName: '', // 应用名称
        appStatus: '', // 应用状态
        appType: '', // 应用类型
        appCategory: ''// app类别 00:H5;01:小程序;02:原生;
      },
      tableData: [],
      appTypeList: [],
      appCategoryList: [],
      appStatusList: [
        {
          typename: '下架',
          typecode: '00'
        },
        {
          typename: '上架',
          typecode: '01'
        }
      ],
      dialogData: {
        flag: false,
        row: null
      }
    }
  },
  created() {
    this.initGroup()
  },
  methods: {
    filterDictText, // 字典值替换文本通用方法
    // 字典请求
    initGroup() {
      this.$store.dispatch('getGroupType', ['appType', 'appCategory']).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    },
    // 获取数据
    loadData(params, callback) {
      queryFunctionListPage(params).then(response => {
        this.tableData = response.data.records
        this.loading = false
        callback(response.data.total)
      }).catch(() => {
        this.loading = false
      })
    },
    addMenu() {
      this.dialogData.row = null
      this.dialogData.flag = true
    },
    toEdit(row) {
      this.dialogData.row = row
      this.dialogData.flag = true
    },
    toDel(row, index) {
      this.$confirm('确认是否删除该条数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        delAppFunction({ id: row.id }).then(res => {
          this.tableData.splice(index, 1)
        }).catch(() => {
        })
      }).catch(() => {
      })
    },
    // 操作回调
    callBack() {
      this.$refs.tableCrud.onSearchChange()
    },
    // 详情
    handleDetail(row) {

    }
  }
}
</script>

<style lang="less" scoped>
.img_pic {
  max-height: 50px;
}
</style>
