<template>
  <a-modal :width="1200" :title="title" :visible="visible" @cancel="handleCancel" cancelText="关闭" :okButtonProps="{ style: { display: 'none' } }">
    <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="handleClearSelection">清空选择</a>
          <a-divider type="vertical" />
          <a @click="handleRevertBatch">批量还原</a>
          <!--          <a-divider type="vertical"/>
                    <a @click="handleDeleteBatch">批量删除</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.searchText" />
      </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
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :loading="loading"
      :dataSource="dataSource"
      :pagination="ipagination"
      :rowSelection="{ selectedRowKeys, onChange: handleTableSelectChange }"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record, index, text }">
        <template v-if="column.dataIndex === 'contact'">
          <a-popover>
            <template #content>
              {{ text }}
            </template>
            <div style="width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
              {{ text }}
            </div>
          </a-popover>
        </template>

        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="enquiryDetail(record)"> 详情</a>
            <a @click="handleRevert([record.id])" style="margin-left: 8px">还原询盘</a>
          </span>
        </template>
      </template>
    </a-table>
    <!--询盘详情-->
    <enquiry-detail ref="enquiryDetail" />
  </a-modal>
</template>

<script>
  import { putAction, deleteAction, postAction, getAction } 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: 'XpRecycleBinModal',
    components: { enquiryDetail },
    mixins: [JeecgListMixin],
    data() {
      return {
        title: '询盘回收站',
        loading: false,
        innerVisible: false,
        selectedRowKeys: [],
        dataSource: [],
        visible: false,
        columns: [],
        siteId: '',
        enquiryType: '',
        url: {
          list: '/adweb/adwebEnquiry/queryWasteEnquiryList',
          putRecycleBin: '/adweb/adwebEnquiry/refreshBatch',
        },
        disableMixinCreated: true,
      };
    },

    methods: {
      init(siteId, enquiryType) {
        let that = this;
        that.columns = [
          {
            title: '站点名称',
            align: 'left',
            dataIndex: 'siteName',
          },
          {
            title: '姓名',
            align: 'left',
            dataIndex: 'contact',
          },
          {
            title: '邮箱',
            align: 'left',
            dataIndex: 'fromEmail',
          },
          { title: '电话', align: 'left', dataIndex: 'phone' },
          { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
          { title: '操作', align: 'center', dataIndex: 'action' },
        ];
        that.siteId = siteId;
        that.enquiryType = enquiryType;
        that.loadData(siteId);
        that.visible = true;
      },

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

      searchReset() {
        this.queryParam = {};
        this.loadData(this.siteId);
        this.onClearSelected();
      },

      handleTableChange(pagination, filters, sorter) {
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = 'ascend' == sorter.order ? 'asc' : 'desc';
        }
        this.ipagination = pagination;
        this.loadData(this.siteId);
      },

      handleOk() {
        this.loadData(this.siteId);
        this.$emit('ok');
      },
      handleCancel() {
        this.visible = false;
      },
      // 恢复询盘
      handleRevert(userIds) {
        const that = this;

        Modal.confirm({
          title: '恢复询盘',
          content: `您确定要恢复这 ${userIds.length} 个询盘吗？`,
          onOk: () => {
            putAction(that.url.putRecycleBin, { no: userIds.join(',') }).then((res) => {
              if (res.code === 200) {
                that.loadData(that.siteId);
                that.handleOk();
                that.handleClearSelection();
                createMessage.success(`还原 ${userIds.length} 个询盘成功！`);
              } else {
                if (res.code === 403 || res.code === 401) {
                  createMessage.warning(res.message);
                } else {
                  createMessage.error('恢复失败！');
                }
              }
            });
          },
        });
      },

      loadData(siteId, arg) {
        if (!this.url.list) {
          createMessage.error('请设置url.list属性!');
          return;
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams(); //查询条件
        this.loading = true;
        params.siteId = siteId;
        params.enquiryType = this.enquiryType;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records || res.result;
            if (res.result.total != 0) {
              this.ipagination.total = res.result.total;
            } else {
              this.ipagination.total = 0;
            }
          }
          if (res.code === 510) {
            createMessage.warning(res.message);
          }
          this.loading = false;
        });
      },

      handleRevertBatch() {
        this.handleRevert(this.selectedRowKeys);
      },
      handleDeleteBatch() {
        this.handleDelete(this.selectedRowKeys);
      },
      handleClearSelection() {
        this.handleTableSelectChange([], []);
      },
      handleTableSelectChange(selectedRowKeys, selectionRows) {
        this.selectedRowKeys = selectedRowKeys;
        this.selectionRows = selectionRows;
      },
    },
  };
</script>

<style lang="less" scoped></style>
