<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <div :class="$style.rightcard">
        <a-card>
          <!-- 高级搜索组件 -->
          <audit-advanced-query
            :expand="expand"
            :search-data="formData"
            :ref-name="searchform"
            :search-style="{ height: '150px', left: '20px', top: '57px' }"
            :search-fun="handleSearch"
            @searchedClick="searchedClick"
          >
            <template>
              <a-col :span="12">
                <a-form-model-item :label="'标签分类名称'" prop="tagName">
                  <a-input v-model="formData.tagName" allow-clear />
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="12">
                <a-form-model-item :label="'标签编号'" prop="tagCode">
                  <a-input v-model="formData.tagCode" allow-clear />
                </a-form-model-item>
              </a-col> -->
            </template>
          </audit-advanced-query>

          <SdDataTableEx
            ref="dataref"
            :filter-expressions="expressions"
            :columns="columns"
            :actions="actions"
            form-id="iamIncidentTag"
            data-url="api/xcoa-mobile/v1/iamincidenttag/iamIncidentTagQueryList"
            :search-fields="['tagName']"
            show-selection
            :show-advance-query="true"
            :custom-delete-fun="deleteRows"
            @searchbtnClick="searchbtnClick"
          >
            <div slot="islink" slot-scope="text, record">
              <a :title="text" @click="rowClick(record)">{{ text }}</a>
            </div>
          </SdDataTableEx>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { message, Modal } from 'ant-design-vue'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import TableActionTypes from '@/common/services/table-action-types'
import auditAdvancedQuery from '../../components/audit-advanced-query.vue'
import auditAdvancedQueryMixins from '../../components/audit-advanced-query-mixins'
import auditAdvancedGroupMixins from '../../components/audit-advanced-group-mixins'
import SdDataTableEx from '@/common/components/sd-data-table-ex.vue'
import auditMaintainService from './audit-maintain-service'

export default {
  name: 'AuditEventTagList',
  metaInfo: {
    title: '事件标签',
  },
  components: {
    SdDataTableEx,
    auditAdvancedQuery,
  },
  mixins: [auditAdvancedQueryMixins, auditAdvancedGroupMixins],

  data() {
    return {
      key: 0,
      treeData: [],
      searchform: 'searchform',

      formData: {
        tagCode: '',
        tagName: '',
      },
      formId: 'iamIncidentTag',
      columns: [
        {
          title: '序号',
          dataIndex: 'sortNumber',
          width: '70px',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '事件标签分类名称',
          dataIndex: 'tagName',
          scopedSlots: { customRender: 'islink' },
        },
        {
          title: '事件标签分类编号',
          dataIndex: 'id',
        },
        // 标签描述
        {
          title: '标签描述',
          dataIndex: 'tagDesc',
        },
      ],
      actions: [
        {
          label: '新建',
          id: 'eventTagAdd',
          permission: null,
          type: TableActionTypes.primary,
          callback: () => {
            // url 根据 /分隔信息获取最后一个
            const urlFullPath = window.location.href.split('/')[
              window.location.href.split('/').length - 1
            ]
            // window.open('#/sd-flow-guide?code=PRODUCT_IAM_SQSQ')
            window.open(`#/audit-event-tag-from?fullPath=${urlFullPath}&type=new`)
          },
        },
        {
          label: '删除',
          id: 'delete',
          permission: null,
          type: 'delete',
          callback: this.deleteRows,
        },
      ],
      expressions: [
        {
          dataType: 'str',
          name: 'catalogId',
          op: 'eq',
          stringValue: 0,
        },
      ],
      catalogId: null,
      catalogName: '',
      isroot: true,
    }
  },
  methods: {
    refresh() {
      return this.$refs.dataref.refresh(true)
    },
    rowClick(record) {
      const url = '/audit-event-tag-from?record=' + record.id // 新页面要打开的路由地址
      crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
        if (refreshFlag) {
          this.refresh()
        }
      })
    },
    // 查询
    handleSearch() {
      this.expressions = []
      // 模型编号
      if (this.formData.tagCode) {
        this.expressions.push({
          dataType: 'str',
          name: 'tagCode',
          op: 'like',
          stringValue: `%${this.formData.tagCode}%`,
        })
      }
      // 模型名称
      if (this.formData.tagName) {
        this.expressions.push({
          dataType: 'str',
          name: 'tagName',
          op: 'like',
          stringValue: `%${this.formData.tagName}%`,
        })
      }
    },
    deleteRows() {
      const ids = this.$refs.dataref.getSelectedRowKeys()
      auditMaintainService.checkEventTag(ids).then((res) => {
        if (!res.data) {
          message.error('当前标签已绑定模型无法删除')
        } else {
          return new Promise((resolve) => {
            Modal.confirm({
              title: '您确定删除这项内容吗？',
              cancelText: '取消',
              okText: '删除',
              okType: 'danger',
              onOk: () => {
                this.deleteCategory(ids, resolve)
              },
              onCancel: () => {
                resolve()
              },
            })
          })
        }

        // } else {
        // }
      })
      // this.$refs.dataref.deleteRows()
    },
    deleteCategory(ids, resolve) {
      auditMaintainService.deleteEventTag(ids).then((res) => {
        if (res) {
          message.success('删除成功')
          this.refresh()
        } else {
          message.error('删除失败')
        }
        resolve()
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrap-height {
  height: 100%;
  .row-height {
    display: flex;
    flex: auto;
    height: 100%;
    .rightcard {
      flex: 1;
      width: calc(100% - 20%);
      height: 100%;
    }
  }
}
.no-action {
  color: $text-color-secondary;
}
</style>
