<template>
  <page-layout>
    <a-card :bordered="false">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" style="height: 100%;">
          <a-row :gutter="24" type="flex" style="height: 100%;" justify="center" align="middle">
            <a-col span="12">
              <a-form-item label="我的服务商">
                <a-select v-model="subcontractorKey" @change="chooseSubcontractor">
                  <a-select-option value="">请选择服务商</a-select-option>
                  <a-select-option v-for="(item,key) in Subcontractor" :key="key +'-sub'" :value="key">
                    {{item.subcontractorName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-divider type="horizontal" style="margin-top: 0"/>
          </a-row>

        </a-form>
        <div>
          <div class="title">我的账户</div>
          <a-row type="flex" class="account-manager-content">
            <a-col span="12">
              <a-row type="flex" align="middle">
                <a-col span="24">
                  <a-row type="flex" align="middle">
                    <a-col span="13">
                      <div style="color: #7F7F7F;font-size: 18px;">当前余额</div>
                    </a-col>
                    <a-col>
                      <div v-show="information.isOn === 0">
                        该服务商暂时停用，若有疑问请联系客服
                      </div>
                    </a-col>
                  </a-row>
                  <a-row type="flex" align="middle" style="margin-top: 15px;">
                    <a-col span="13">
                      <div style="color: #A30014;font-size: 28px;">￥ {{information.balance || '0.00'}}</div>
                    </a-col>
                    <a-col>
                      <div v-show="information.isOn === 1">
                        <a type="link" @click="handleRecharge">我要充值</a>
                      </div>
                    </a-col>
                  </a-row>
                </a-col>
              </a-row>
            </a-col>
            <a-col span="2">
              <a-divider type="vertical" style="height: 100%;margin: 0 30px"/>
            </a-col>
            <a-col span="9">
              <div style="color: #7F7F7F;font-size: 18px;">
                服务费率
              </div>
              <div style="color: #555555;font-size: 28px;">
                {{information.serviceRate || '0'}}%
              </div>
            </a-col>
          </a-row>
        </div>
      </div>
      <!-- 查询区域-END -->

      <!-- 操作按钮区域 -->
      <div class="table-operator">

      </div>

      <!-- table区域-begin -->
      <div>
        <div style="color: #333;font-size: 24px">
          <span>账户明细</span>
          <span style="color: #7F7F7F;font-size: 14px;margin-left: 15px">仅展示最近半年的记录</span>
          <a-button type="primary" icon="download" @click="handleExportXls('账户明细')" style="float: right;">导出</a-button>
        </div>
        <a-divider type="horizontal"/>
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange">
          <span slot="type_dictText" slot-scope="text,record">
            <span :class="record.type===1?'red':'green'">{{text}}</span>
          </span>
          <span slot="amount" slot-scope="text,record">
            <span :class="record.type===1?'red':'green'">
              <template v-if="record.isDrawback === 1">
                {{text?text+'(已退款)':text===0?text+'(已退款)':'--'}}
              </template>
              <template v-else>
                {{text?text:text===0?text:'--'}}
              </template>
            </span>
          </span>
          <span slot="serviceFee" slot-scope="text,record">
            <span :class="record.type===1?'red':'green'">
              <template v-if="record.isDrawback === 1">
                {{text?text+'(已退款)':text===0?text+'(已退款)':'--'}}
              </template>
              <template v-else>
                {{text?text:text===0?text:'--'}}
              </template>
            </span>
          </span>
        </a-table>
      </div>
      <HlgPaymentRechargeModal ref="rechargeModal"></HlgPaymentRechargeModal>
    </a-card>
  </page-layout>
</template>

<script>

  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { Arithmetic } from '@/mixins/Arithmetic'
  import PageLayout from '@/components/page/PageLayout'
  import HlgPaymentRechargeModal from '../hlgpayment/modules/HlgPaymentRechargeModal'
  import { httpAction, getAction,downFile } from '@/api/manage'

  export default {
    name: 'HlgAccountList',
    mixins: [JeecgListMixin, Arithmetic],
    components: {
      PageLayout,
      HlgPaymentRechargeModal
    },
    data() {
      return {
        form: this.$form.createForm(this),
        description: '账户信息表管理页面',
        // 表头
        columns: [
          {
            title: '时间',
            align: 'left',
            dataIndex: 'updateTime'
          },
          {
            title: '业务类型',
            align: 'left',
            dataIndex: 'type_dictText',
            scopedSlots: { customRender: 'type_dictText' }
          },
          {
            title: '金额',
            align: 'left',
            dataIndex: 'amount',
            scopedSlots: { customRender: 'amount' }
          },
          {
            title: '服务费',
            align: 'left',
            dataIndex: 'serviceFee',
            scopedSlots: { customRender: 'serviceFee' }
          },
          {
            title: '备注',
            align: 'left',
            dataIndex: 'paymentCode',
            customRender: (value,record) => {
              return value ? value:'--'
            }
          }
        ],
        url: {
          list: '/hlgaccount/hlgAccount/myCompanyList',
          details: '/hlgaccount/hlgAccountDetail/managerList',
          exportXlsUrl: '/hlgaccount/hlgAccountDetail/exportXlsManager'
        },
        dictOptions: {},
        Subcontractor: [],
        dataSource: [],
        information: {},
        subcontractorId: '',
        subcontractorName: '',
        subcontractorKey: '',
        cpType:'',
        companyId:'',
      }
    },
    created() {

    },
    methods: {
      //企业服务商
      loadData() {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }

        var params = this.getQueryParams()//查询条件
        this.loading = true
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            if (res.result && res.result.length === 1) {
              this.subcontractorId = res.result[0].subcontractorId
              this.subcontractorName = res.result[0].subcontractorName
              this.information = res.result[0]
              this.subcontractorKey = 0;
              this.cpType = res.result[0].cpType;
              this.companyId = res.result[0].companyId;
              this.getDetails(1)
            }
            this.Subcontractor = res.result
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },
      handleRecharge() {
        this.$refs.rechargeModal.edit(this.information)
        this.$refs.rechargeModal.title = '我要充值'
        this.$refs.rechargeModal.subcontractorName = this.subcontractorName
        this.$refs.rechargeModal.disableSubmit = false
      },
      getDetails(arg) {
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        var params = this.getQueryParams()//查询条件
        params.subcontractorId = this.subcontractorId
        params.cpType = this.cpType;
        params.companyId = this.companyId;
        this.loading = true
        getAction(this.url.details, 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
        })
      },
      chooseSubcontractor(index) {
        if (index || index === 0) {
          this.information = this.Subcontractor[index]
          this.subcontractorId = this.Subcontractor[index].subcontractorId
          this.subcontractorName = this.Subcontractor[index].subcontractorName
          this.subcontractorKey = index
          this.cpType = this.Subcontractor[index].cpType;
          this.companyId = this.Subcontractor[index].companyId;
          this.getDetails(1)
        } else {
          this.information = {}
          this.dataSource = [];
          this.ipagination.current = 1;
          this.ipagination.total = 0;
          this.subcontractorKey = '';
        }
      },
      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.getDetails();
      },
      handleExportXls(fileName){
        if(!fileName || typeof fileName != "string"){
          fileName = "导出文件"
        }
        let param = this.getQueryParams();
        if(this.selectedRowKeys && this.selectedRowKeys.length>0){
          param['selections'] = this.selectedRowKeys.join(",")
        }
        param.subcontractorId = this.subcontractorId
        param.cpType = this.cpType;
        param.companyId = this.companyId;
        console.log("导出参数",param)
        downFile(this.url.exportXlsUrl,param).then((data)=>{
          if (!data) {
            this.$message.warning("文件下载失败")
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data]), fileName+'.xls')
          }else{
            let url = window.URL.createObjectURL(new Blob([data]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', fileName+'.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link); //下载完成移除元素
            window.URL.revokeObjectURL(url); //释放掉blob对象
          }
        })
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .title {
    font-size: 24px;
    font-weight: 400;
    margin-bottom: 15px
  }

  .account-manager-content {
    border: 1px solid #ccc;
    padding: 30px;
    box-sizing: border-box
  }

  .red {
    color: #D9001b;
  }

  .green {
    color: #70b603;
  }
</style>