<template>
    <div class='page-header-index-wide welcome' v-if="!isCompany">
      <img src='~@/assets/welcome.jpg' class='logo'>
    </div>
    <div v-else>
      <div class='content step-list'>
        <div class='step-list-item' v-for='(item,index) in stepList' :key='index'>
          <div class='step-list-item-top'>
            <img :src='item.icon' :alt='item.title'>
            <div class='title'>{{ item.title }}</div>
            <div class='bar' v-if='index !== stepList.length - 1'></div>
          </div>
          <div class='step-list-item-bottom'>
            {{ item.content }}
          </div>
        </div>
      </div>

      <div class='account-data-content'>
        <div class='content account-data' v-for='(item,index) in dataList' :key='index'>
          <img :src='item.image' alt=''>
          <div class='account-data-count'>
            <div class='account-data-title'>{{ accountData[item.title] }}</div>
            <div class='account-data-description'>{{ item.content }}</div>
          </div>
        </div>
      </div>

      <div class='content' v-show='subcontractorName.length'>
        <div class='account-info'>
          <!-- 查询区域 -->
          <a-tabs @change='chooseSubcontractor' style='width: 100%;padding:0 10px'>
            <a-tab-pane v-for='(item,index) in Subcontractor' :key='index.toString()'
                        :tab='item.subcontractorName'></a-tab-pane>
          </a-tabs>
          <div class='table-page-search-wrapper'>
            <a-spin :spinning='sendLoading'>
              <a-row type='flex' justify='space-between'>
                <!--            <div class='title'>我的账户</div>-->
                <a-col :span='11' class='account-manager-content'>
                  <a-row type='flex'>
                    <a-col span='12'>
                      <a-row type='flex' align='middle'>
                        <a-col span='24'>
                          <a-row type='flex' align='middle'>
                            <a-col span='24'>

                            <span class='money'>
                              {{ information.balance || '0.00' | moneyFixed }}
                            </span>
                            </a-col>
                            <a-col span='24'>
                              <div class='yue'>
                                <span>当前余额(元)</span>
                              </div>
                              <div>
                                <a-button type='primary' size='large' @click='handleRecharge' style='margin:10px 0'>
                                  <img src='@/assets/icon/account/charge.png' alt='我要充值'
                                       style='width: 16px;height: 16px;margin-right: 8px'>
                                  <span style='font-size: 14px;'>我要充值</span>
                                </a-button>
                                <br>
                                <div style='display: flex;align-items: center;'>
                                  <span>我已充值，提醒平台完成发放</span>
                                  <a-button type='primary' ghost size='small' style='margin-left: 5px'
                                            @click='handleSendMessage'>发送短信
                                  </a-button>
                                </div>
                              </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-row>
                        </a-col>
                      </a-row>
                    </a-col>
                    <a-col span='12' class='accept-info'>
                      <div class='accept-info-title'>
                        收款信息
                        <img class='accept-info-copy-image' src='../../assets/icon/account/copy.png' alt=''
                             :data-clipboard-text='subcontractorCopyInfo'
                             @click='copy'>
                      </div>
                      <div class='accept-info-detail'>
                        <div>银行账户：{{ subcontractorName }}</div>
                        <div>银行账号：{{ subcontractorBankInfo.bankAccount }}</div>
                        <div>开户行：{{ subcontractorBankInfo.bankName }}</div>
                      </div>
                    </a-col>
                  </a-row>
                  <a-row class='tips'>
                    温馨提示：
                    受银行处理时间影响，线下汇款方式到账会有延误。
                    请避免北京时间21：00-00：00进行汇款，否则受银行出账时间影响，可能出现延迟一天到账情况。
                  </a-row>
                  <a-row class='tips2'>
                    <img src='../../assets/icon/account/warning.png' alt=''>
                    <span>充值转账附言不要填写，如必填写请填写“服务费”</span>
                  </a-row>
                </a-col>
                <a-col :span='11' class='account-manager-content' style='padding: 15px 45px'>
                  <a-row>
                    <a-list :grid='{ gutter: 0, column: 4 }' :data-source='supplierDataList' :bordered='false'>
                      <a-list-item slot='renderItem' slot-scope='item, index' :bordered='false'>
                        <a-card :bordered='false'>
                          <a-card-meta>
                            <template slot='title'>
                              <div
                                style='text-align:center;font-size: 30px;font-family: HelveticaNeue-Bold, HelveticaNeue;font-weight: bold;color: rgba(0,0,0,0.85);'>
                                {{ supplierData[item.title] }}
                              </div>
                            </template>
                            <template slot='description'>
                              <div
                                style='text-align:center;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(0,0,0,0.65);'>
                                {{ item.content }}
                              </div>
                            </template>
                          </a-card-meta>
                        </a-card>
                      </a-list-item>
                    </a-list>
                  </a-row>
                  <a-row class='money-list'>
                    <div>
                      付款金额（元）：<span>{{ noPayment }}</span>
                    </div>
                    <div>
                      服务费（元）：<span>{{ noServiceFee }}</span>
                    </div>
                  </a-row>
                  <a-row class='total'>
                    待付款金额合计（元）： <span>{{ noTotalPayment }}</span>
                  </a-row>
                </a-col>

              </a-row>
            </a-spin>
          </div>
          <!-- 查询区域-END -->
        </div>
      </div>
      <HwPaymentRechargeModal ref='rechargeModal'></HwPaymentRechargeModal>
    </div>
</template>

<script>
  import { USER_AUTH,SYS_BUTTON_AUTH } from "@/store/mutation-types"
  import { Arithmetic } from '@/mixins/Arithmetic'
  import HwPaymentRechargeModal from '../hwaccount/modules/HwPaymentRechargeModal'
  import { httpAction, getAction, downFile } from '@/api/manage'
  import Clipboard from 'clipboard'

export default {
  name: 'Analysis',
  mixins: [Arithmetic],
  components: {
    HwPaymentRechargeModal
  },
  filters: {
    moneyFixed(money) {
      return Number(money).toLocaleString()
    }
  },
  data() {
    return {
      isCompany: false,
      stepList: [
        {
          title: '发布需求',
          content: '前往需求大厅发布需求',
          icon: require('../../assets/icon/account/requirement.png')
        },
        {
          title: '导入报名',
          content: '在具体需求中导入接单人名单',
          icon: require('../../assets/icon/account/import.png')
        },
        {
          title: '电签确认',
          content: '接单人登录开心灵工小程序确认订单',
          icon: require('../../assets/icon/account/confirm.png')
        },
        {
          title: '导入付款单',
          content: '导入付款人名单进行结算',
          icon: require('../../assets/icon/account/payment.png')
        },
        {
          title: '账户充值',
          content: '根据付款金额提示进行余额充值',
          icon: require('../../assets/icon/account/charge-icon.png')
        }
      ],
      dataList: [
        {
          image: require('../../assets/icon/account/requirementCount.png'),
          title: 'requirementCount',
          content: '总需求数'
        },
        {
          image: require('@/assets/icon/account/userCount.png'),
          title: 'userCount',
          content: '总用户数'
        },
        {
          image: require('@/assets/icon/account/orderCount.png'),
          title: 'orderCount',
          content: '总订单数'
        },
        {
          image: require('@/assets/icon/account/paymentCount.png'),
          title: 'paymentCount',
          content: '总支付数'
        }
      ],
      accountData: {
        requirementCount: 0,
        userCount: 0,
        orderCount: 0,
        paymentCount: 0
      },
      supplierData: {
        noPaymentCount: 0,
        onPaymentCount: 0,
        alPaymentCount: 0,
        serviceRate: '0%'
      },
      supplierDataList: [
        {
          title: 'noPaymentCount',
          content: '待支付'
        },
        {
          title: 'onPaymentCount',
          content: '支付中'
        },
        {
          title: 'alPaymentCount',
          content: '已支付'
        },
        {
          title: 'serviceRate',
          content: '服务费率'
        }
      ],
      form: this.$form.createForm(this),
      description: '账户信息表管理页面',
      // 表头
      columns: [
        {
          title: '时间',
          align: 'left',
          dataIndex: 'updateTime',
          customRender: (text) => {
            return <span style='padding-left:20px'>{text}</span>
          }
        },
        {
          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: '/saasmanager/hwPlatformCompanyAccount/myAccount',
        exportXlsUrl: '/saasmanager/hwPlatformCompanyAccountDetail/exportXlsManager',
        detail: '/saasmanager/hwPlatformCompanyAccountDetail/managerList',
        sendMessage: '/saasmanager/hwPlatformCompanyAccount/sendMessage',
        getAllSubcontractorData: '/saasmanager/hwPlatformCompanyAccount/getAllSubcontractorData',
        getSubcontractorBankInformation: '/saasmanager/hwPlatformCompanyAccount/getSubcontractorBankInformation'
      },
      dictOptions: {},
      Subcontractor: [],
      subcontractorBankInfo: {},
      dataSource: [],
      information: {},
      accountId: '',
      subcontractorId: '',
      subcontractorName: '',
      subcontractorKey: '0',
      cpType: '',
      companyId: '',
      noPayment: 0,
      noServiceFee: 0,
      noTotalPayment: 0,
      sendLoading: false,
      subcontractorCopyInfo: ''
    }
  },
  created() {
    this.initColumns();
  },
  methods: {
    initColumns(){
      //获取页面权限
      let authList = JSON.parse(sessionStorage.getItem(USER_AUTH) || "[]");
      var bo = false;
      for (var auth of authList) {
        if(auth.action === 'account:manager') {
          bo = true;
          break;
        }
      }
      console.log('bo',bo)
      if (bo) {
       this.isCompany = true;
       this.getAllSubcontractorData();
       this.loadDataOne();
      } else {
        this.isCompany = false;
      }
    },
    loadDataOne() {
      this.loading = true
      getAction(this.url.list, {}).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.Subcontractor = res.result
          if (this.Subcontractor.length) {
            this.chooseSubcontractor(0)
          }
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    //获取企业所有服务商数据
    getAllSubcontractorData() {
      getAction(this.url.getAllSubcontractorData, {}).then((res) => {
        if (res.success) {
          //企业需求总数
          this.requirementCount = res.result.requirementCount
          //企业订单总数
          this.orderCount = res.result.orderCount
          //企业用户总数
          this.userCount = res.result.userCount
          //企业已付款订单数
          this.paymentCount = res.result.paymentCount
          this.accountData = 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.disableSubmit = false
    },
    //发送短信
    handleSendMessage() {
      var params = {}
      params.subcontractorName = this.information.subcontractorName
      params.balance = this.information.balance
      //企业服务商银行信息接口获取
      params.noPaymentCount = this.noPaymentCount
      params.noTotalPayment = this.noTotalPayment
      this.sendLoading = true
      getAction(this.url.sendMessage, params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.sendLoading = false
      })
    },
    chooseSubcontractor(index) {
      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.getSubcontractorBankInformation(this.subcontractorId, this.cpType, this.companyId)
    }
    ,
    getSubcontractorBankInformation(subcontractorId, cpType, companyId) {
      getAction(this.url.getSubcontractorBankInformation, {
        subcontractorId,
        cpType,
        companyId
      }).then(data => {
        console.log('result=>', data.result)
        const { noPaymentCount, onPaymentCount, alPaymentCount, serviceRate } = data.result
        this.supplierData = { noPaymentCount, onPaymentCount, alPaymentCount, serviceRate: serviceRate + '%' }
        this.subcontractorBankInfo = data.result.bankList[0]
        //待支付金额
        this.noPayment = data.result.noPayment
        //待支付服务费
        this.noServiceFee = data.result.noServiceFee
        //待支付金额合计
        this.noTotalPayment = data.result.noTotalPayment
        //待支付付款单数量
        this.noPaymentCount = data.result.noPaymentCount
        //支付中付款单数量
        this.onPaymentCount = data.result.onPaymentCount
        //已支付付款单数量
        this.alPaymentCount = data.result.alPaymentCount
        // 服务费率
        this.serviceRate = data.result.serviceRate
        this.subcontractorCopyInfo = `银行账户：${this.subcontractorName} 银行账号：${this.subcontractorBankInfo.bankAccount} 开户行：${this.subcontractorBankInfo.bankName}`
      })
    },
    copy() {
      console.log(this.subcontractorCopyInfo)
      var clipboard = new Clipboard('.accept-info-copy-image')
      clipboard.on('success', () => {
        clipboard.destroy()
        this.$message.success('复制成功')
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制')
        clipboard.destroy()
      })
    },
    toAccount() {
      this.$router.replace('/saasmanager/hwPlatformCompanyAccountDetail/managerList')
    }
  }
}
</script>

<style lang='scss' scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}

.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

.welcome {
  padding: 9px 9px;
  //margin:169px auto 0 auto;
  //text-align: center;
  position: relative;

  .logo {
    //height: 411px;
    width: 100%;
    border-radius: 4px;
    background: #FFFFFF;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  }

  .content {
    height: 100%;
    width: 100%;
    padding-left: 90px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;

    .title {
      font-size: 38px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-top: 159px;
    }

    .tips {
      font-size: 18px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      margin-top: 12px;
      margin-bottom: 94px;
    }

    .btn {
      width: 183px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #FFFFFF;
      background: #0057FF;
      border-radius: 22px;
      cursor: pointer;
    }
  }
}
.title {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 15px
}

.content {
  background: #FFFFFF;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  margin-bottom: 10px;
}

.step-list {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .step-list-item {
    width: 20%;
    min-height: 139px;
    padding: 25px 0 25px 25px;

    .step-list-item-top {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      display: flex;
      align-items: center;
      //justify-content: space-between;
      margin-bottom: 8px;

      img {
        height: 32px;
        width: 32px;
      }

      .title {
        margin: 0 10px 0 20px;
      }

      .bar {
        flex: 1;
        height: 1px;
        background: #000000;
        opacity: 0.25;
      }
    }

    .step-list-item-bottom {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      padding-left: 55px;
      padding-right: 25px;
    }
  }
}

.account-data-content {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .account-data {
    flex: 1;
    margin-right: 10px;

    &:last-child {
      margin-right: 0;
    }
  }
}

.account-data {
  width: 90%;
  padding: 27px 0 27px 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 28px;
    height: 28px;
    margin-right: 20px;
  }

  .account-data-count {

  }

  .account-data-title {
    font-size: 34px;
    font-family: HelveticaNeue-Bold, HelveticaNeue;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }

  .account-data-description {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
  }
}

.table-page-search-wrapper {
  padding: 40px;
}

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

.money {
  font-size: 30px;
  font-family: HelveticaNeue-Bold, HelveticaNeue;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.85);
}

.yue {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
}

.tips {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #DA5631;
  margin-bottom: 15px;
}

.tips2 {
  height: 40px;
  background: #FFFBE6;
  border-radius: 4px;
  border: 1px solid #FFE58F;
  line-height: 40px;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;

  img {
    height: 14px;
    width: 14px;
    margin-right: 8px;
  }
}

.accept-info {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);

  .accept-info-title {
    display: flex;
    align-items: center;

    img {
      height: 12px;
      width: 12px;
      cursor: pointer;
      margin-left: 5px;
    }
  }

  .accept-info-detail {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    margin-top: 15px;
  }
}

.money-list {
  text-align: right;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  margin-top: 49px;

  span {
    font-size: 14px;
    font-family: HelveticaNeue-Bold, HelveticaNeue;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.85);
  }
}

.total {
  text-align: right;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #D4380D;
  margin-top: 12px;

  span {
    font-size: 30px;
    font-family: HelveticaNeue-Bold, HelveticaNeue;
    font-weight: bold;
    color: rgba(212, 56, 13, 0.85);
  }
}

::v-deep .ant-table-thead th[key="updateTime"] {
  padding-left: 30px !important;
}

.red {
  color: #D9001b;
}

.green {
  color: #70b603;
}

.account-info ::v-deep .ant-card-body {
  padding: 0;
}

::v-deep .ant-table-pagination {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>