<template>
  <div :class="$style.wrapHeight">
    <div :class="$style.rowHeight">
      <div :class="$style.rightcard">
        <a-tabs ref="tabs" v-model="expressions[0].stringValue" @change="tabTypeChange">
          <a-tab-pane key="1">
            <!-- 0 -->
            <span slot="tab">
              共享申请
            </span>
            <a-card>
              <sd-data-table
                ref="messageTable"
                :filter-expressions="expressions"
                :columns="columns"
                :actions="actions"
                form-id="iamModelMaintain"
                data-url="api/xcoa-mobile/v1/iammodelshare/iamModelShareQueryList"
              >
                <div slot="action" slot-scope="text, record">
                  <a-button
                    v-if="record['applyStatus'] === 0"
                    type="primary"
                    style="margin-right: 15px;"
                    @click="handleClick(record, 'ok')"
                    >通过</a-button
                  >
                  <a-button v-if="record['applyStatus'] === 0" @click="handleClick(record, 'no')"
                    >拒绝</a-button
                  >
                </div>
                <!-- 申请结果  -->
                <template slot="applyStatus" slot-scope="text, record">
                  <span v-if="record['applyStatus'] === 0">待审核</span>
                  <span v-else-if="record['applyStatus'] === 1">已通过</span>
                  <span v-else-if="record['applyStatus'] === 2">已拒绝</span>
                </template>
              </sd-data-table>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="0">
            <!-- 1 -->
            <span slot="tab">
              提交申请
            </span>
            <a-card>
              <sd-data-table
                ref="submitTable"
                :filter-expressions="expressions"
                :columns="columns"
                :actions="actions"
                form-id="iamModelMaintain"
                data-url="api/xcoa-mobile/v1/iammodelshare/iamModelShareQueryList"
              >
                <template slot="applyStatus" slot-scope="text, record">
                  <span v-if="record['applyStatus'] === 0">待审核</span>
                  <span v-else-if="record['applyStatus'] === 1">已通过</span>
                  <span v-else-if="record['applyStatus'] === 2">已拒绝</span>
                </template>
              </sd-data-table>
            </a-card>
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import auditAdvancedGroupMixins from '../../components/audit-advanced-group-mixins'
import components from './_import-components/audit-view-list-import'
import TableColumnTypes from '@/common/services/table-column-types'
import auditMaintainService from './audit-maintain-service'

export default {
  name: 'AuditMessageList',
  metaInfo: {
    title: '消息通知',
  },
  components: {
    ...components,
  },
  mixins: [auditAdvancedGroupMixins],

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

      formData: {
        tagCode: '',
        tagName: '',
        tagType: '',
      },
      formId: 'iamModelMaintain',
      columns: [
        {
          title: '申请模型名称',
          dataIndex: 'reservestring5',
        },
        {
          title: '申请人',
          dataIndex: 'reservestring4',
        },
        // 审核人
        {
          title: '审核人',
          dataIndex: 'reservestring3',
        },
        // 标签描述
        {
          title: '操作时间',
          dataIndex: 'creationTime',
          sdRender: TableColumnTypes.date,
        },
        // 申请结果
        {
          title: '申请结果',
          dataIndex: 'applyStatus',
          scopedSlots: { customRender: 'applyStatus' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],

      actions: [],
      type: '0',

      expressions: [
        {
          dataType: 'str',
          name: 'messageType',
          op: 'eq',
          stringValue: '1',
        },
      ],
      catalogId: null,
      catalogName: '',
      isroot: true,
    }
  },
  watch: {
    type(val) {
      this.expressions = [
        {
          dataType: 'str',
          name: 'messageType',
          op: 'eq',
          stringValue: val,
        },
      ]
      if (val === '1') {
        // 如果没有操作列，添加操作列
        const isHasAction = this.columns.some((item) => item.dataIndex === 'action')
        if (!isHasAction) {
          this.columns.push({
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
          })
        }
        this.$refs.messageTable.refresh()
      } else if (val === '0') {
        // 删除columns中的操作列
        this.columns.splice(this.columns.length - 1, 1)

        // this.$refs.submitTable.refresh()
      }
    },
  },
  methods: {
    tabTypeChange(val) {},
    handleClick(record, type) {
      const status = type === 'ok' ? 1 : 2
      auditMaintainService.updateApplyStatus({ id: record.id, applyStatus: status }).then(() => {
        this.$refs.messageTable.refresh()
      })
    },
  },
}
</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>
