<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="对账单号">
              <j-input placeholder="请输入对账单号" v-model="queryParam.id"></j-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="对账开始时间">
              <a-date-picker placeholder="对账开始时间" valueFormat="YYYY-MM-DD 00:00:00" v-model="queryParam.beginDate"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="对账结束时间">
              <a-date-picker placeholder="对账结束时间" valueFormat="YYYY-MM-DD 23:59:59" v-model="queryParam.endDate"></a-date-picker>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-model-item label="对账状态">
              <a-select style="width: 100%" v-model="queryParam.communityAuditStatus" placeholder="请选择对账状态">
                <a-select-option v-for="item in audioStatusList" :key="item.value" :value="item.value">{{item.label}}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="6" :sm="24">
              <a-button type="primary" @click="searchQuery">查询</a-button>
              <a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="propertyDetails(3)" type="primary" icon="plus">新增对账</a-button>
      <!-- <a-button type="primary" icon="download" @click="handleExportXls('t_property_settled')">导出</a-button> -->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="onReconciliation()"><a-icon type="audit" />批量审核</a-menu-item>
          <a-menu-item key="2" @click="onSubmit()"><a-icon type="audit" />批量申请对账</a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" v-if="selectedRowKeys.length > 0" @click="onClearSelected">清空</a>
      </div> -->

      <a-table ref="table" size="middle" :scroll="{x:true}" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, getCheckboxProps: onCheckboxProps}" bordered rowKey="id"  :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap" @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a href="javascript:;" @click="propertyDetails(1, record.id)">详情</a>
          <template v-if="record.communityAuditStatus === 'communityWaitAudit'">
            <a-divider type="vertical" />
            <a href="javascript:;" @click="propertyDetails(2, record.id)">审核</a>
          </template>
          <template v-if="record.communityAuditStatus === 'communityRefuse' || record.companyAuditStatus === 'companyRefuse' || record.centralAuditStatus === 'centralRefuse'">
            <a-divider type="vertical" />
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)" placement="topLeft">
              <a>删除</a>
            </a-popconfirm>
          </template>
          <template v-if="record.communityAuditStatus === 'communityAuditPass' && !record.companyAuditStatus">
            <a-divider type="vertical" />
            <a href="javascript:;" @click="onSubmit(record.id)">申请对账</a>
          </template>
        </span>
      </a-table>

    </div>
    <!-- table区域-end -->

    <a-modal v-model="visibleAudit" :width="400">
      <template slot="footer">
        <a-button key="back" @click="visibleAudit = false">取消</a-button>
        <a-button key="reject" type="danger" @click="handleAudit('refuse')">驳回</a-button>
        <a-button key="submit" type="primary" @click="handleAudit('auditPass')">通过</a-button>
      </template>
      <div class="ant-modal-confirm-body">
        <a-icon type="question-circle" style="color:#faad14;margin-right: 16px;font-size:22px;" />
        <span class="ant-modal-confirm-title">确认要审核当前对账吗？</span>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import { communitySubAuditApi, communitySubCompanyApi } from '@/api/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { filterDictTextByStatic, RECONCILIATION_STATUS, COMPANY_AUDIT_STATUS, CENTRAL_AUDIT_STATUS } from '@/assets/static.js'

const columns = [
  {
    title: '对账单号',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
  },
  {
    title: '对账开始日期',
    dataIndex: 'reconciliationBeginDate',
    key: 'reconciliationBeginDate',
    align: 'center',
  },
  {
    title: '对账结束日期',
    dataIndex: 'reconciliationEndDate',
    key: 'reconciliationEndDate',
    align: 'center',
  },
  {
    title: '对账金额',
    dataIndex: 'reconciliationAmount',
    key: 'reconciliationAmount',
    align: 'center',
  },
  {
    title: '操作日期',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '操作人',
    dataIndex: 'createBy',
    key: 'createBy',
    align: 'center',
  },
  {
    title: '审核状态',
    dataIndex: 'communityAuditStatus',
    key: 'communityAuditStatus',
    align: 'center',
    customRender: function (text) {
      return filterDictTextByStatic(RECONCILIATION_STATUS, text)
    }
  },
  {
    title: '公司审核状态',
    dataIndex: 'companyAuditStatus',
    key: 'companyAuditStatus',
    align: 'center',
    customRender: function (text) {
      return filterDictTextByStatic(COMPANY_AUDIT_STATUS, text)
    }
  },
  {
    title: '总平台审核状态',
    dataIndex: 'centralAuditStatus',
    key: 'centralAuditStatus',
    align: 'center',
    customRender: function (text) {
      return filterDictTextByStatic(CENTRAL_AUDIT_STATUS, text)
    }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    fixed: 'right',
    width: 150,
  },
]

export default {
  name: 'PermissionListAsync',
  mixins: [JeecgListMixin],
  data() {
    return {
      // 表头
      audioStatusList: RECONCILIATION_STATUS,
      columns: columns,
      url: {
        // list: '/property-community/property/communityReconciliation/communityAccountPage',
        list: '/property-community/property/communityReconciliation/list',
        delete: '/property-community/property/communityReconciliation/delete',
        deleteBatch: '/property-community/property/communityReconciliation/deleteBatch',
      },
      visibleAudit: false
    }
  },
  methods: {
    onCheckboxProps: record=> ({
      props: {
        disabled: record.communityAuditStatus === 'communityRefuse' || (record.communityAuditStatus === 'communityAuditPass' && (record.companyAuditStatus === 'companyWaitAudit' || record.companyAuditStatus === 'companyAuditPass')),
        name: record.id
      }
    }),
    propertyDetails(type, id) {
      let params = id ? `?type=${type}&id=${id}` : `?type=${type}`
      this.$router.push({
        path: '/property/RecordDetails' + params
      })
    },
    handleAudit(type) {
      let ids = this.selectedRowKeys.join(',')
      communitySubAuditApi({
        ids,
        auditStatus: type
      }).then(res=> {
        this.visibleAudit = false
        this.$message.success(`${type === 'auditPass' ? '审核' : '驳回'}成功！`)
        this.searchQuery()
      })
    },
    onReconciliation() {
      let flag = this.selectionRows.some(item=>item.communityAuditStatus === 'communityAuditPass')
      if(flag) {
        this.$message.warning('请注意，已选数据中有 已审核 账单！')
      } else {
        this.visibleAudit = true
      }
    },
    onSubmit(id) {
      let flag = this.selectionRows.some(item=>item.communityAuditStatus !== 'communityAuditPass')
      if(flag) {
        this.$message.warning('请注意，已选数据中有 未审核 账单！')
      } else {
        let ids = id || this.selectedRowKeys.join(',')
        let that = this
        this.$confirm({
          title: id ? '确认要申请当前对账吗？' : '确认要批量申请当前对账吗？',
          closable: true,
          okText: '确认',
          onOk() {
            return communitySubCompanyApi({
              ids
            }).then((res) => {
              that.$message.success('申请对账成功！')
              that.searchQuery()
            })
          }
        })
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>