<template>
  <a-modal
    :title="title"
    :width="width"
    v-model:open="modalVisible"
    centered
    :closable="true"
    :keyboard="false"
    :maskClosable="false"
  >

    <a-alert type="info" showIcon style="margin-bottom: 16px;">
      <template #message>
        <span>已选择</span>
        <a style="font-weight: 600;padding: 0 4px;">{{ selectedRowKeys.length }}</a>
        <span>项</span>
        <template v-if="selectedRowKeys.length>0">
          <a-divider type="vertical"/>
          <a @click="onClearSelected">清空选择</a>
          <a-divider type="vertical"/>
          <a @click="handleRevertBatch">批量移出</a>
        </template>
      </template>
    </a-alert>


    <a-modal layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom:15px">
      <a-form-item>
        <a-input placeholder="邮箱/姓名/国家" v-model="queryParam.queryParam"></a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchQuery">查询</a-button>
        <a-button @click="searchReset" style="margin-left:8px">重置</a-button>
      </a-form-item>
    </a-modal>


    <a-table
      :columns="columns"
      :data-source="dataSource"
      size="small"
      :scroll="{x:true}"
      :rowKey="(record,index) => record.id"
      :pagination="ipagination"
      :loading="loading"
      class="j-table-force-nowrap"
      :rowSelection="{selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record, index, text }">

        <template  v-if="column.dataIndex === 'action'">
          <!--        <a @click="enquiryDetail(record)">详情</a>-->
          <a @click="handleRevert(record)" style="margin-left: 8px">移出黑名单</a>
        </template>

      </template>

    </a-table>

    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
    </template>

    <!--询盘详情-->
    <enquiry-detail ref="enquiryDetail"></enquiry-detail>

  </a-modal>
</template>

<script>

import {getAction, postAction, putAction} from '/@/api/manage/manage'
import {JeecgListMixin} from '/@/hooks/component/JeecgListMixin'
import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue'
import {Modal} from "ant-design-vue";
import {useMessage} from "@/hooks/web/useMessage";
const { createMessage } = useMessage();

export default {
  name: 'blackList',
  mixins: [JeecgListMixin],
  components: {enquiryDetail},
  data() {
    return {
      title: "黑名单",
      width: 1000,
      modalVisible: false,
      spinning: false,
      columns: [
        {title: '姓名', align: 'left', dataIndex: 'name',},
        {title: '邮箱', align: 'left', dataIndex: 'email'},
        {title: '电话', align: 'left', dataIndex: 'phone'},

        {
          title: '国家', align: 'left',
          dataIndex: 'countryName',
          customCell: function (text) {
            if (text == null || text == '' || text == undefined) {
              return '--'
            } else {
              return text
            }
          }
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          width: 200
        }
      ],
      url: {
        list: '/enquiry/blacklist/list'
      },
      disableMixinCreated: true
    }
  },

  props: {
    userEffectiveOption: {}
  },

  filters: {
    filter_Null_format(value) {
      if (value === '' || value === null || value === undefined) {
        return '--'
      } else {
        return value
      }
    }
  },


  methods: {
    init(siteId) {
      this.modalVisible = true
      this.queryParam.siteId = siteId
      this.loadData(1);
    },

    //询盘详情
    enquiryDetail(record) {
      this.$nextTick(() => {
        this.$refs.enquiryDetail.init(record)
      })
    },

    handleCancel() {
      this.$emit('close');
      this.modalVisible = false;
    },

    handleRevert(record) {

      Modal.confirm({
        title: '恢复询盘',
        content: `您确定要移出这个询盘吗？`,
        centered: true,
        onOk: () => {
          getAction('/enquiry/blacklist/removeBlacklist?id=' + record.id).then(res => {
            if (res.code === 200) {
              this.loadData()
              this.$emit('ok')
              createMessage.success('移出黑名单成功')
            } else {
              if (res.code === 403 || res.code === 401) {
                createMessage.warning(res.message)
              } else {
                createMessage.error('恢复失败！')
              }
            }
          })
        }
      });
    },

    handleRevertBatch() {
      this.handleRevert({id: this.selectedRowKeys.toString()})
    }

  }
}
</script>


<style lang="less" scoped>
.wrap {

}

</style>
