<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 class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择共享材料 <a style="font-weight: 600">{{
          selectedRowKeys.length }}</a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>


    <div>
    <!-- 查询区域 -->
    <div  style="background-color: rgba(230, 247, 255, 1) !important;border: 1px solid #e8e8e8 !important;padding: 2px !important;">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :span="12" :offset="1">                
            <a-form-item label="材料名称">
              <a-input placeholder="请输入材料名称" v-model="queryParam.materialName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="3" :offset="8">
            <span style="float: left; overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" style="margin-top: 4px !important;">搜索</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <!-- 表格区域 -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="tableData"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
    >
          <!-- 字符串超长截取省略号显示-->
          <span slot="esContent" slot-scope="text">
            <j-ellipsis :value="text" :length="10" />
          </span>
          
          <span slot="materialUrl" slot-scope="materialUrl">
                 <a @click="getImgView(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 { getAction } from '@/api/manage'
  import QRCode from 'qrcodejs2';

  let validatorCodeTimer = null

  export default {
    // name: 'SysPositionModal',
    mixins: [JeecgListMixin],
    components: { JDictSelectTag },
    data() {
      return {
      	url: {
          list:'/ai/ysDirectoryMaterial/list',
          acceptanceList: '/ai/ysDirectoryMaterial/list',
          cancel:'/system/materialBag/cancel',
          state: '/application/offline/route/flow/state',
          getNumber: '/application/offline/route/get/number/each/flow/state',
        },
        selectedRowKeys: [],
        queryParam:{
        	pageNo: 1,
          pageSize: 10,
           materialName: null
        },
        columns: [
          {
            title: '材料名称',
            align: "center",
            dataIndex: 'materialName'
          },
          {
            title: '材料类型',
            align: "center",
            dataIndex: 'materialType'
          },
          {
            title: '核发部门',
            align: "center",
            dataIndex: 'departName'
          },
        ],
        tableData: [],
        title: '操作',
        visible: false,
        model: {},
        confirmLoading: false,
        readOnly:false
      }
    },
    created() {
    },
    methods: {
      getList() {
        this.loading = true
        getAction(this.url.acceptanceList, this.queryParam).then((res) => {
          if (res.success) {
            this.total = res.result.total || 0
            this.pageTotal = Math.ceil(this.total / this.queryParam.pageSize)
            this.tableData = res.result.records
            this.loading = false
          }
        })
        // this.getNumber()
      },
      add() {
        this.edit({})
      },
      edit() {
        this.visible = true
        this.loadData(1);
      },
       getNumber() {
        getAction(this.url.getNumber, this.queryParam).then((res) => {
          // console.log(res)
          if (res.success) {
            this.serviceNum = res.result
          }
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
	      if(!this.selectedRowKeys.length){
	      	this.$message.warning("请至少选择一条数据");
	      	return;
	      }
        httpAction("/ai/preReviewMaterial/add", {ids:this.selectedRowKeys.join(",")}, "post").then((res) => {
              if (res.success) {
                this.$message.success(res.message)
                this.$emit('ok')
              } else {
                this.$message.warning(res.message)
              }
            }).finally(() => {
              this.confirmLoading = false
              this.close()
            })
      },
      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>
