<template>
  <add-page-layout>
    <div slot="Header-Content">
      <span>数据源字段</span>
      <i class="el-icon-close close" @click="$router.go(-1)"></i>
    </div>
    <div slot="Form-Content">
      <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="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="fieldDialog"
        :command="command"
        :row="row"
        :statics="staticData"
        @success="search"
      />
    </div>
  </add-page-layout>
</template>
<script>
import moment from 'moment'
import table from '@ability/mixins/table'
import { getObjectList, removeObject } from '../api/dataSourceField'
import Dialog from './Dialog'
export default {
  components: { Dialog },
  mixins: [table],
  computed: {
    staticData() {
      return {}
    }
  },
  data() {
    return {
      loading: false,
      qureyParam: {
        fieldId: null,
        fieldName: null,
        fieldCode: null,
        resourceId: null
      },
      queryItems: [
        {
          type: 'input',
          span: 12,
          key: 'fieldId',
          label: '字段ID'
        },
        {
          type: 'input',
          span: 12,
          key: 'fieldName',
          label: '字段名称'
        },
        // {
        //   dataType: 'datetimerange',
        //   type: 'datetime',
        //   key: 'createTime',
        //   span: 12,
        //   label: '创建时间',
        //   format: 'yyyy-MM-dd HH:mm:ss',
        //   valueFormat: 'yyyy-MM-dd HH:mm:ss'
        // },
        {
          type: 'input',
          span: 12,
          key: 'fieldCode',
          label: '字段编码'
        }
      ],
      columnItems: [
        {
          type: 'selection',
          width: 50
        },
        {
          _key: 'fieldId',
          prop: 'fieldId',
          label: '字段ID',
          showOverflowTooltip: true
        },
        {
          _key: 'fieldName',
          prop: 'fieldName',
          label: '字段名称',
          showOverflowTooltip: true
        },
        {
          _key: 'fieldCode',
          prop: 'fieldCode',
          label: '字段编码',
          showOverflowTooltip: true
        },
        {
          _key: 'createTime',
          prop: 'createTime',
          label: '创建时间',
          showOverflowTooltip: true
        },
        {
          _key: 'operaiton',
          prop: 'operaiton',
          width: '115px',
          label: '操作',
          showOverflowTooltip: true,
          render: true
        }
      ],
      tableData: [],
      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'
        }
      ]
    }
  },
  created() {
    this.search()
  },
  methods: {
    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)
      }
    },
    openDialog(command, row) {
      this.command = command
      if (command !== 'add' && row) {
        this.row = row
      }
      this.$refs.fieldDialog.dialogVisible = true
    },
    handleDelete(row) {
      let id = []
      if (row.fieldId) {
        id = [row.fieldId]
      } else {
        if (this.multipleSelection.length === 0) {
          this.$message.warning('请至少选择一项')
          return
        } else {
          id = this.multipleSelection.map((obj) => obj.fieldId)
        }
      }
      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 dataResourceFieldMap = JSON.parse(JSON.stringify(this.qureyParam))
      dataResourceFieldMap.resourceId = this.$route.params.id
      getObjectList(
        {
          dataResourceFieldMap,
          page: this.page
        }
      )
        .then((resp) => {
          if (resp.data.returnCode == '0') {
            this.tableData = resp.data.data.list.map(el => {
                el.createTime = moment(el.createTime).format('YYYY-MM-DD HH:mm:ss')
                return el
            })
            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>