<template>
    <a-modal
    :title="title"
    :width="900"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
  <a-card :bordered="false">

      <!-- table区域-begin -->
  <div>
    <div>
    <!-- 查询区域 -->

    <!-- 表格区域 -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="tableData"
      :pagination="ipagination"
      :loading="loading"
      @change="handleTableChange"
    >
          <!-- 字符串超长截取省略号显示-->
          <span slot="esContent" slot-scope="text">
            <j-ellipsis :value="text" :length="10" />
          </span>
          
          <span slot="materialUrl" slot-scope="materialUrl">
                 <a @click="handleQrCode(materialUrl)">查看</a>
            </span>

    </a-table>
  </div>
      </div>
      <!-- table区域-end -->
      </a-card>
    </a-modal>
</template>

<script>
  import pick from 'lodash.pick'
  import { httpAction } from '@/api/manage'
  import { duplicateCheck } from '@/api/api'
  import JDictSelectTag from '@/components/dict/JDictSelectTag'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import QRCode from 'qrcodejs2';

  let validatorCodeTimer = null

  export default {
    // name: 'SysPositionModal',
    mixins: [JeecgListMixin],
    components: { JDictSelectTag },
    data() {
      return {
      url: {
          list:'/ai/preReviewRecordsDetail/list',
          acceptanceList: '/ai/preReviewRecordsDetail/list',
          cancel:'/system/materialBag/cancel',
          state: '/application/offline/route/flow/state',
          getNumber: '/application/offline/route/get/number/each/flow/state',
        },
        selectedRowKeys: [],
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '材料名称',
            align: "center",
            dataIndex: 'materialName'
          },
          {
            title: '预审时间',
            align: "center",
            dataIndex: 'createTime'
          },
          {
            title: '预审结果',
            align: "center",
            dataIndex: 'reviewResult'
          },
          {
            title: '详情',
            align: "center",
            dataIndex: 'materialUrl',
            scopedSlots: { customRender: 'materialUrl' },
          },
        ],
        title: '操作',
        visible: false,
        model: {},
        confirmLoading: false,
        readOnly:false
      }
    },
    created() {
    },
    methods: {
      add(reviewRecordsId) {
        this.queryParam.reviewRecordsId=reviewRecordsId;
        this.searchQuery();
        this.edit({})
      },
      edit() {
        this.visible = true
      },
      close() {
        this.$emit('close')
        this.visible = false
        this.$refs.form.resetFields();
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }

            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }else{
            return false;
          }
        })
      },
      handleCancel() {
        this.close()
      },


    }
  }
</script>

<style lang="less" scoped>
.ant-modal-footer  {
     text-align: center !important;
}
.ant-modal-confirm .ant-modal-confirm-btns {
  text-align: center !important;
}

div.ant-modal-footer {
  text-align: center !important;
}
</style>
