<template>
  <a-modal
    :title="title"
    :width="modelStyle.width"
    :bodyStyle="bodyStyle"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    :footer="null">
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">

        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <!--<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>-->
      <!--<a-button type="primary" icon="download" @click="handleExportXls('服务商账户明细')">导出</a-button>-->
      <!--<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">-->
        <!--<a-button type="primary" icon="import">导入</a-button>-->
      <!--</a-upload>-->
      <!--<a-dropdown v-if="selectedRowKeys.length > 0">-->
        <!--<a-menu slot="overlay">-->
          <!--<a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</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> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
        <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--</div>-->

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
           <a @click="viewSubcontract(record)" v-has="'require:subcontract'">外包合同</a>
          <a-divider type="vertical"/>
          <a @click="handleEdit(record)" v-has="'require:outinfo'">出账信息</a>


        </span>

      </a-table>
    </div>

    <hwSubcontractorAccountDetail-modal ref="modalForm" @ok="modalFormOk"></hwSubcontractorAccountDetail-modal>
    <HwPaymentOutModal ref="hwPaymentOutModal" @ok="modalFormOk"></HwPaymentOutModal>
  </a-card>
  </a-modal>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import HwSubcontractorAccountDetailModal from './modules/HwSubcontractorAccountDetailModal'
  import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
  import DetailList from '@/components/tools/DetailList'
  import qs from 'qs';
  import HwPaymentOutModal from './modules/HwPaymentOutModal'
  const DetailListItem = DetailList.Item
  export default {
    name: "HwSubcontractorAccountDetailList",
    mixins:[JeecgListMixin],
    components: {
      HwPaymentOutModal,
      HwSubcontractorAccountDetailModal,
      DetailListItem
    },
    data () {
      return {
        paymentId:0,
        form: this.$form.createForm(this),
        title: '操作',
        bodyStyle: {
          padding: '0',
          height: (window.innerHeight * 0.66) + 'px',
          'overflow-y': 'auto'
        },
        modelStyle: {
          width: '80%',
          style: { top: '20px' },
          fullScreen: false
        },
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        description: '服务商账户明细管理页面',
        // 表头
        columns: [
          {
            title:'业务单号',
            align:"center",
            dataIndex: 'hwRequirement.code'
          },
          {
            title:'平台',
            align:"center",
            dataIndex: 'requirementId',
            customRender:function (text) {
              return "江苏开心工作科技有限公司"
            }
          },
          {
            title:'服务商',
            align:"center",
            dataIndex: 'hwSubcontractor.name'
          },
          {
            title:'项目数额',
            align:"center",
            dataIndex: 'amount',
            customRender:function (text) {
              if(text==null){
                return "--"
              }else{
                return text;
              }
            }
          },
          {
            title:'服务费',
            align:"center",
            dataIndex: 'serviceFee',
            customRender:function (text) {
              if(text==null){
                return "--"
              }else{
                return text;
              }
            }
          },
          {
            title:'时间',
            align:"center",
            dataIndex: 'businessTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: "/subcontratormanager/hwSubcontractorAccountDetail/subList",
          delete: "/subcontratormanager/hwSubcontractorAccountDetail/delete",
          deleteBatch: "/subcontratormanager/hwSubcontractorAccountDetail/deleteBatch",
          exportXlsUrl: "/subcontratormanager/hwSubcontractorAccountDetail/exportXls",
          importExcelUrl: "subcontratormanager/hwSubcontractorAccountDetail/importExcel",
          subList: "/subcontratormanager/hwSubcontractorAccountDetail/subList",
        },
        dictOptions:{
        } ,
        isorter: {
          column: 'generate_time',
          order: 'desc'
        },
      }
    },
    computed: {
      // importExcelUrl: function(){
      //   return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      // }
    },
    methods: {
      initDictConfig(){
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk(){
        this.$emit('ok')
        this.visible = false
      },
      handleCancel() {
        this.close()
      },
      edit(record) {
        console.log(11111111111)
        var record1 = qs.parse( record)
        this.paymentId=record1.paymentId
        this.visible = true
        this.loadData(record1);
      },
      loadData(record1)  {
          this.loading = true
          let params = {paymentId: this.paymentId}
          getAction(this.url.subList,params).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records;
              this.ipagination.total = res.result.total;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
            this.loading = false;
          })
      },
      handleEdit(record) {
        this.$refs.hwPaymentOutModal.edit(record)
        this.$refs.hwPaymentOutModal.title = '出账信息'
        this.$refs.hwPaymentOutModal.disableSubmit = false
      },
      viewSubcontract(record){
        if(record.hwRequirement.subcontract==null){
          this.$message.warning('该合同为线下合同,不支持预览')
          return
        }
        window.open(window._CONFIG['imgDomainOssURL']+record.hwRequirement.subcontract, '_blank', 'toolbar=yes')
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>