<template>
  <a-card>
    <div :class="$style.wrapHeight">
      <sd-data-table-ex
        ref="kpiAlertOrderTable"
        form-id="kpiAlertOrder"
        page-id="kpi/order/kpiAlertOrder"
        data-url="api/xcoa-mobile/v1/kpialertorder/all-list"
        :columns="columns"
        :actions="actions"
        show-selection
        :filter-expressions="expressions"
        :search-fields="['title']"
      >
        <template slot="islink" slot-scope="text, record">
          <a @click="open(record)">{{ text }}</a>
        </template>
      </sd-data-table-ex>
      <div :class="[$style.btns]">
        <a-col :span="13" :offset="0">
          <a-radio-group v-model="radioValue" @change="radioOnChange">
            <a-radio :value="'0'">
              全部
            </a-radio>
            <a-radio :value="'1'">
              待处理
            </a-radio>
          </a-radio-group>
        </a-col>
      </div>
    </div>
  </a-card>
</template>

<script>
import { getUserInfo } from '@/common/store-mixin'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import TableColumnTypes from '@/common/services/table-column-types'
import TableActionTypes from '@/common/services/table-action-types'
import components from './_import-components/kpi-alert-order-list-import'

export default {
  name: 'KpiAlertOrderList',
  metaInfo: {
    title: '指标预警单',
  },
  components,
  data() {
    return {
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
          width: '80px',
        },
        { dataIndex: 'id', sdHidden: true },
        { dataIndex: 'instId', sdHidden: true },
        {
          title: '预警内容',
          dataIndex: 'title',
          scopedSlots: { customRender: 'islink' },
        },
        {
          title: '接收人',
          dataIndex: 'receiverName',
        },
        {
          title: '维护日期',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.date,
          defaultSortOrder: 'descend',
        },
        {
          title: '当前状态',
          dataIndex: 'flowState',
        },
        {
          title: '当前处理人',
          dataIndex: 'nowUser',
        },
        { title: '文档状态', dataIndex: 'endType', width: '120px', sdHidden: true },
      ],
      actions: [
        {
          label: '删除',
          id: 'delete',
          permission: null,
          type: 'delete',
        },
        {
          label: '新建',
          id: 'new',
          type: TableActionTypes.primary, // 新建按钮，不需要回调，自动处理
          permission: null, // 权限控制
          callback: () => {
            const url = '/sd-flow-guide?code=PRODUCT_KPI_ORDER' // 新页面要打开的路由地址
            crossWindowWatcher.waitForChanged(url).then((refreshFlag) => {
              if (refreshFlag) {
                // 这里写或者调刷新的方法
                this.refresh()
              }
            })
          },
        },
      ],
      radioType: false,
      radioValue: '0',
      expressions: [],
    }
  },
  created() {},
  methods: {
    open(record) {
      let openurl = ''
      const loginUser = getUserInfo()
      if (
        (record.flowState === '起草') |
        (record.flowState === '开始') |
        (record.flowState === null)
      ) {
        if (loginUser.name === record.nowUser) {
          openurl = '/sd-webflow/pages/draft/' + record.instId
        } else {
          openurl = '/sd-webflow/done-pages/' + record.instId
        }
      } else {
        openurl = '/sd-webflow/done-pages/' + record.instId
      }
      crossWindowWatcher.waitForChanged(openurl).then((refreshFlag) => {
        if (refreshFlag) {
          // 这里写或者调刷新的方法
          this.refresh()
        }
      })
    },
    // 刷新表格
    refresh() {
      this.$refs.kpiAlertOrderTable.refresh()
    },
    // 状态筛选单选按钮变化时
    radioOnChange(e, info) {
      this.radioValue = e.target.value
      this.radioType = true
      this.expressions.forEach((item) => {
        if (item.name === 'pending') {
          item.stringValue = this.radioValue
          this.radioType = false
        }
      })

      if (this.radioType) {
        this.expressions.push({
          dataType: 'str',
          name: 'pending',
          op: 'eq',
          stringValue: this.radioValue,
        })
      }
      this.expressions = [...this.expressions]
      this.$refs.kpiAlertOrderTable.clearSelection()
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.btns {
  position: absolute;
  top: 20px;
  right: 0;
  left: 20px;
  z-index: 100;
  width: calc(100% - 400px);
  span {
    // color: blue;
  }
}
</style>
