<!--
 * @Author: 曹捷
 * @Date: 2021-03-15 14:54:07
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-03 16:26:27
 * @Description: 应用管理
-->
<template>
  <obitUniversalTable name="查询结果" :pagination="pagination" v-if="$fmt(['system_service_type'])">
    <template #search>
      <obit-search-form :params="params" :paramList="paramList" @search="pageQuery(true)">
      </obit-search-form>
    </template>
    <template #btn>
      <a-button type="primary" @click="addDialog">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table :loading="pageLoading" rowKey="appId" :columns="tableColumns" :dataSource="pageDataList"
      :pagination="false" class="com-table" highlight-current-row style="width: 100%" :scroll="{x:'100%'}">
      <template #icon="{ record  }" :key="record.appId">
        <span class=" iconfont obit-link" :class="'icon-'+record.appIcon"></span>
      </template>
      <template #appEnable="{ record }">
        <div v-if="record.appId !== '1'">
          <obit-switch v-model:value="record.appEnable" unCheckedChildren="停用" checkedChildren="启用" activeValue="1"
            inactiveValue="0" @change="onChange(record)">
          </obit-switch>
        </div>

      </template>
      <template #operation="{ record  }" :key="record.appId">
        <div v-if="record.appId !== '1'">
          <a-button type="link" @click="editDialog(record)">编辑</a-button>
          <a-divider type="vertical" style="height: 16px;" v-if="record.appEnable !== '1'" />
          <a-button type="link" @click="remove(record)" v-if="record.appEnable !== '1'"> 删除</a-button>
        </div>
      </template>
    </a-table>
  </obitUniversalTable>
  <appAdd :addType="pageType" v-model:open="pageVisable" :detailsInfo="detailsInfo" @reload="pageQuery(true)">
  </appAdd>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, toRefs, inject } from 'vue'
import appAdd from './appAdd.vue'
import page from './../../../hook/page.js'
export default {
  components: { appAdd },
  setup (props, contenxt) {
    let http = inject('http')

    let { proxy } = getCurrentInstance()
    let pageIns = page({
      url: 'system/app/pageList',
      key: 'appId',
      removeUrl: 'system/app/remove',
    })
    let _data = reactive({
      tableColumns: [
        { title: '图标', slots: { customRender: 'icon' }, width: 80 },
        { dataIndex: 'appName', title: '应用名称' },
        { slots: { customRender: 'appEnable' }, title: '应用状态' },
        { dataIndex: 'appCode', title: '应用编码' },
        { dataIndex: 'appType', title: '应用类型', customRender: ({ text, record, index }) => proxy.$fmt('system_service_type', text) },
        { dataIndex: 'appDesc', title: '应用描述' },
        { title: '操作', slots: { customRender: 'operation' }, width: 160 },
      ],
      paramList: [
        { name: '应用名称', key: 'appName' },
        { name: '应用编码', key: 'appCode' },
        {
          type: 'ajax',
          key: 'appType',
          name: '应用类型',
          valuename: 'dictValue',
          labelname: 'dictLabel',
          ajaxurl: 'system/dict/data/type/system_service_type',
        },
      ],
    })
    let _methods = {
      onChange (item) {
        let contents = item.appEnable === '1' ? '您确认停用' + item.appName + '吗？' : '您确认启用' + item.appName + '吗？'
        let appEnable = item.appEnable === '1' ? '0' : '1'
        proxy.$confirm({
          title: '提示',
          content: contents,
          onOk () {
            let param = {
              appId: item.appId,
              appEnable: appEnable
            }
            http.sysPost('system/app/edit', param).then((res) => {
              pageIns._method.pageQuery()
            })
          },
          onCancel () {
            item.appEnable = item.appEnable === '1' ? '0' : '1'
          }
        })
      }
    }
    onMounted(() => {
      pageIns._method.pageQuery()
    })
    return {
      ...toRefs(pageIns._data),
      ...pageIns._method,
      ...toRefs(_data),
      ..._methods,
    }
  },
}
</script>

<style>
</style>