<template>
  <div>
    <a-form style="max-width: 700px; margin: 40px auto 0;">

      <a-form-item
        label="支付服务商"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <a-select v-model="subcontractorKey" @change="chooseSubcontractor" placeholder="请选择服务商" :disabled="disableSelected">
          <a-select-option value="">请选择</a-select-option>
          <a-select-option v-for="(item,key) in Subcontractor" :key="key" :value="key">
            {{item.name}}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="服务商到款"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <template v-if="arrivalAmount == '--'">
          {{arrivalAmount}}
        </template>
        <template v-else>
          ￥ <span class="money" style="color: #f50;">{{arrivalAmount}}</span><a style="margin-left: 15px;" @click="editAmount">修改</a>
        </template>
      </a-form-item>

      <a-form-item
        label="服务商支出"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        ￥ <span class="money" style="color: #f50;">{{model.payment}}</span>
      </a-form-item>

      <a-form-item
        label="参考费率"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <template v-if="cpServiceRate == '--'">
          {{cpServiceRate}}
        </template>
        <template v-else>
          <span class="money">{{cpServiceRate}}%</span>
        </template>

      </a-form-item>

      <a-form-item
        label="交易结余(服务费)"
        :labelCol="{span: 7}"
        :wrapperCol="{span: 17}"
      >
        <template v-if="arrivalServiceFee == '--'">
          {{arrivalServiceFee}}
        </template>
        <template v-else>
          ￥ <span class="money" style="color: #2db7f5;">{{arrivalServiceFee}}</span>
        </template>

      </a-form-item>

      <a-form-item :wrapperCol="{span: 17, offset: 7}">
        <a-button type="primary"  @click="nextStep">下一步</a-button>
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
      </a-form-item>

      <HlwPaymentEditAmountModal ref="editAmountModal" @ok="modalFormOk"></HlwPaymentEditAmountModal>
    </a-form>
  </div>
</template>

<script>

  import { getAction } from '@/api/manage'
  import HlwPaymentEditAmountModal from './HlwPaymentEditAmountModal'

  export default {
    name: "Step2",
    components: {
      HlwPaymentEditAmountModal
    },
    data(){
      return{
        stepLoading: false,
        Subcontractor: [],
        subcontractorId: 0,
        subcontractorKey: '',
        subcontractorName: '',
        //服务商到账
        arrivalAmount: '--',
        //参考费率
        cpServiceRate: '--',
        //交易结余（服务费）
        arrivalServiceFee: '--',
        //通过平台是否满足支付条件(0：否；1：是)
        isCpPay: '',
        disableSelected: false,
        url: {
          list: '/wisdom/hlwSubcontractor/allListValid',
          cpSubcontractor: '/wisdom/hlwPayment/cpSubcontractor'
        },
      }
    },
    props:{
      model:{
        type:Object,
        default:function() {
          return {}
        }
      }
    },
    mounted(){
      this.loadData();
    },
    methods: {
      //查询所有服务商
      loadData(){
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        let that = this

        var params = {};
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            that.Subcontractor = res.result;
            //开心灵工提前确定服务商,noConfirm用于区分返回上一步时记录的值
            if(that.model.subcontractorId && !that.model.noConfirm){
              for(var i = 0;i< that.Subcontractor.length;i++){
                if(that.Subcontractor[i].id == that.model.subcontractorId){
                  that.disableSelected = true;
                  that.model.noConfirm = false;
                  if(!that.model.selectSubcontractorId){
                    that.chooseSubcontractor(i);
                  }
                  break;
                }
              }
            } else {
              that.model.noConfirm = true;
            }
            //下一步返回的时候，显示已选择的
            that.subcontractorKey =typeof that.model.selectSubcontractorKey === 'number' ?  that.model.selectSubcontractorKey : '';
            that.subcontractorId = that.model.selectSubcontractorId || 0;
            that.subcontractorName = that.model.selectSubcontractorName || '';
            that.arrivalAmount = that.model.arrivalAmount || '--';
            that.cpServiceRate = that.model.cpServiceRate || '--';
            that.arrivalServiceFee = that.model.arrivalServiceFee || '--';
            that.isCpPay = that.model.isCpPay || '';
          }
          if(res.code===510){
            that.$message.warning(res.message)
          }
        })
      },
      //选择服务商
      chooseSubcontractor(index){
        if(index || index === 0){
          this.subcontractorId = this.Subcontractor[index].id
          this.subcontractorName = this.Subcontractor[index].name
          this.subcontractorKey = index
          //计算服务商到款和服务费等
          this.getSubcontractorData(this.subcontractorId);
        }else{
          this.subcontractorId = 0
          this.subcontractorName = ''
          this.subcontractorKey = '';
          this.arrivalAmount = '--';
          this.cpServiceRate = '--';
          this.arrivalServiceFee = '--';
          this.isCpPay = '';
          //赋值给model
          this.model.arrivalAmount = this.arrivalAmount;
          this.model.cpServiceRate = this.cpServiceRate;
          this.model.arrivalServiceFee = this.arrivalServiceFee;
          this.model.isCpPay = this.isCpPay;
        }
        //赋值给model
        this.model.selectSubcontractorId = this.subcontractorId;
        this.model.selectSubcontractorName = this.subcontractorName;
        this.model.selectSubcontractorKey = this.subcontractorKey;
      },
      //计算服务商到款和服务费等
      getSubcontractorData(subcontractorId){
        let that = this
        const id = this.model.id;
        getAction(this.url.cpSubcontractor, { id, subcontractorId }).then((res) => {
          if (res.success) {
            this.arrivalAmount = res.result.arrivalAmount
            this.cpServiceRate = res.result.cpServiceRate
            this.arrivalServiceFee = res.result.arrivalServiceFee
            this.isCpPay = res.result.isCpPay
            //赋值给model
            this.model.arrivalAmount = this.arrivalAmount;
            this.model.cpServiceRate = this.cpServiceRate;
            this.model.arrivalServiceFee = this.arrivalServiceFee;
            this.model.isCpPay = this.isCpPay;
          }else{
            that.$message.warning('操作异常')
          }
          if(res.code===510){
            that.$message.warning(res.message)
          }
        })
      },
      //修改服务商到款
      editAmount(){
        this.$refs.editAmountModal.edit(this.model)
        this.$refs.editAmountModal.title = '调整服务商到款'
        this.$refs.editAmountModal.disableSubmit = false
      },
      modalFormOk(data) {
        this.arrivalAmount = data.arrivalAmount
        this.arrivalServiceFee = data.arrivalServiceFee
        this.isCpPay = data.isCpPay
        //赋值给model
        this.model.arrivalAmount = this.arrivalAmount;
        this.model.arrivalServiceFee = this.arrivalServiceFee;
        this.model.isCpPay = this.isCpPay;
      },
      prevStep () {
        //清空选择服务商
        this.model.selectSubcontractorId = 0;
        this.model.selectSubcontractorName = '';
        this.model.selectSubcontractorKey = '';
        this.model.arrivalAmount = '--';
        this.model.cpServiceRate = '--';
        this.model.arrivalServiceFee = '--';
        this.model.isCpPay = '';
        this.$emit('prevStep',this.model)
      },
      nextStep () {
        if(!this.subcontractorId){
          this.$message.warning('请选择服务商')
          return
        }
        if(this.arrivalServiceFee == '--' || this.arrivalServiceFee == 0){
          this.$message.warning('操作异常，请重新选择!')
          return
        }
        if(this.arrivalServiceFee < 0){
          this.$message.warning('交易结余不能小于0!')
          return
        }
        if(this.isCpPay === 0){
          this.$message.warning('交易结余不能大于企业服务费!')
          return
        }
        //服务商赋值
        this.model.subcontractorId = this.subcontractorId;
        this.$emit('nextStep',this.model)
      }
    }
  }
</script>

<style scoped>
  .money {
    font-family: "Helvetica Neue",sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 14px;
  }
</style>