<template>
  <div>
    <manager-ui
      ref="form"
      :loading="loading"
      :query-model="qureyParam"
      :query-items="queryItems"
      :static-data="staticData"
      :column-items="columnItems"
      :table-data="tableData"
      :pagination="page"
      :showDownloadBtn="false"
      show-table-tools
      @create="openDialog('add')"
      @selection-change="handleSelectionChange"
      @searchClick="searchClick"
      @search="search"
      @resetForm="reset"
    >
      <template slot="resourceStatus" slot-scope="scope">
        <span>{{ scope.scope.row.resourceStatus|toCase(staticData.resourceStatusList,'value', 'label') }}</span>
      </template>
      <template slot="resourceType" slot-scope="scope">
        <span>{{ scope.scope.row.resourceType|toCase(staticData.resourceTypeList,'value', 'label') }}</span>
      </template>
      <template slot="createUser" slot-scope="scope">
        <span>{{ scope.scope.row.createUser|toCase(staticData.userList,'dataId', 'dataName') }}</span>
      </template>
      <template slot="updateUser" slot-scope="scope">
        <span>{{ scope.scope.row.updateUser|toCase(staticData.userList,'dataId', 'dataName') }}</span>
      </template>
      <template slot="operaiton" slot-scope="scope">
        <el-context-menu :menus="menus" :scope="scope.scope" :default="3" @oper="clickRow" />
      </template>
      <template slot="tableTools">
        <el-button type="text" icon="el-icon-delete-solid" @click="handleDelete">删除</el-button>
      </template>
    </manager-ui>
    <Dialog
      ref="dialog"
      :command="command"
      :row="row"
      :statics="staticData"
      @success="search"
    />
  </div>
</template>
<script>
import table from '@ability/mixins/table'
import { getObjectList, removeObject, getAllUser } from '../api/dataSource'
import Dialog from './Dialog'
export default {
  components: { Dialog },
  mixins: [table],
  data() {
    return {
      loading: false,
      qureyParam: {
        resourceId: null,
        resourceName: null,
        resourceStatus: null,
        resourceType: null,
        resourceTable: null
      },
      queryItems: [
        {
          type: 'input',
          span: 12,
          key: 'resourceId',
          label: '数据源ID'
        },
        {
          type: 'input',
          span: 12,
          key: 'resourceName',
          label: '数据源名称'
        },
        {
          type: 'select',
          span: 12,
          key: 'resourceType',
          label: '数据源类型',
          option: 'resourceTypeList',
          optionLabel: 'label',
          optionValue: 'value',
          clearable: true
        },
        {
          type: 'input',
          span: 12,
          key: 'resourceTable',
          label: '数据源表'
        },
        // {
        //   dataType: 'datetimerange',
        //   type: 'datetime',
        //   key: 'createTime',
        //   span: 12,
        //   label: '创建时间',
        //   format: 'yyyy-MM-dd HH:mm:ss',
        //   valueFormat: 'yyyy-MM-dd HH:mm:ss'
        // },
      ],
      columnItems: [
        {
          type: 'selection',
          width: 50
        },
        {
          _key: 'resourceId',
          prop: 'resourceId',
          label: '数据源ID',
          showOverflowTooltip: true
        },
        {
          _key: 'resourceName',
          prop: 'resourceName',
          label: '数据源名称',
          showOverflowTooltip: true
        },
        {
          _key: 'resourceStatus',
          prop: 'resourceStatus',
          label: '数据源状态',
          showOverflowTooltip: true,
          render: true
        },
        {
          _key: 'resourceType',
          prop: 'resourceType',
          label: '数据源类型',
          showOverflowTooltip: true,
          render: true
        },
        {
          _key: 'resourceTable',
          prop: 'resourceTable',
          label: '数据源表',
          showOverflowTooltip: true
        },
        {
          _key: 'createUser',
          prop: 'createUser',
          label: '创建人',
          showOverflowTooltip: true,
          render: true
        },
        {
          _key: 'createTime',
          prop: 'createTime',
          label: '创建时间',
          showOverflowTooltip: true
        },
        {
          _key: 'updateUser',
          prop: 'updateUser',
          label: '更新人',
          showOverflowTooltip: true,
          render: true
        },
        {
          _key: 'updateTime',
          prop: 'updateTime',
          label: '更新时间',
          showOverflowTooltip: true
        },
        {
          _key: 'operaiton',
          prop: 'operaiton',
          width: '115px',
          label: '操作',
          showOverflowTooltip: true,
          render: true
        }
      ],
      tableData: [],
      userList: [],
      command: '',
      row: null,
      menus: [
        {
          text: '查看',
          command: 'detail',
          icon: 'el-icon-s-order'
          // ruleCode: 'rightRuleManage_del'
        },
        {
          text: '修改',
          command: 'edit',
          icon: 'el-icon-edit'
          // ruleCode: 'rightRuleManage_update'
        },
        {
          text: '删除',
          command: 'delete',
          icon: 'el-icon-delete',
          iconColor: 'red'
          // ruleCode: 'rightRuleManage_del'
        },
        {
            text: '数据源字段',
            command: 'field'
        }
      ]
    }
  },
  computed: {
    staticData() {
      return {
        resourceStatusList: [
          { label: '可用', value: '1' },
        ],
        resourceTypeList: [
          {
            value: '1',
            label: 'MySQL'
          },
          {
            value: '2',
            label: 'ES'
          },
          {
            value: '3',
            label: 'CTGMQ'
          }
        ],
        userList: this.userList
      }
    }
  },
  created() {
    this.search()
    this.getUser()
  },
  methods: {
    getUser() {
        getAllUser().then(resp => {
            if (resp.data.returnCode == '0') {
                this.userList = resp.data.data.list
            }
        }).catch(error => {
            this.$message.error(error.message)
        })
    },
    clickRow(command, scope) {
      if (command === 'edit') {
        this.openDialog('modify', scope.row)
      }
      if (command === 'delete') {
        this.handleDelete(scope.row)
      }
      if (command === 'detail') {
        this.openDialog('detail', scope.row)
      }
      if (command === 'field') {
        this.$router.push(`dataSourceField/${scope.row.resourceId}`)
      }
    },
    openDialog(command, row) {
      this.command = command
      if (command !== 'add' && row) {
        this.row = row
      }
      this.$refs.dialog.dialogVisible = true
    },
    handleDelete(row) {
      let id = []
      if (row.resourceId) {
        id = [row.resourceId]
      } else {
        if (this.multipleSelection.length === 0) {
          this.$message.warning('请至少选择一项')
          return
        } else {
          id = this.multipleSelection.map((obj) => obj.resourceId)
        }
      }
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          removeObject({
            delIds: id
          })
            .then((resp) => {
              if (resp.data.returnCode == '0') {
                this.$message.success('删除成功')
                if (this.tableData.length == 1 || (!row && this.multipleSelection.length)) this.page.current = --this.page.current || 1
                this.search()
              }
            })
        })
    },
    searchClick() {
      this.page.current = 1
      this.search()
    },
    reset() {
      this.page.current = 1
      this.search()
    },
    search() {
      this.loading = true
      const dataResourceMap = JSON.parse(JSON.stringify(this.qureyParam))
      getObjectList(
        {
          dataResourceMap,
          page: this.page
        }
      )
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            this.tableData = resp.data.data.list
            const { current, size, total } = resp.data.data.page
            this.page.current = current
            this.page.size = size
            this.page.total = total
          }
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    }
  }
}
</script>