<template>
  <div
    class="headinfo"
    :class="{ 'show-head': isShow, 'hide-head': !isShow }"
  >
    <common-title titleText="报账及付款金额"></common-title>

    <Form
      ref="basicInfoForm"
      :model="basicInfo"
      :label-width="100"
    >
      <Form-item label="归属公司">
        <Input
          v-model="basicInfo.ouName"
          placeholder=""
          disabled
        ></Input>
      </Form-item>

      <Form-item label="备注">
        <Input
          v-model="basicInfo.remark"
          placeholder=""
          disabled
        ></Input>
      </Form-item>

      <Form-item label="附件张数">
        <Input
          v-model="basicInfo.attachNum"
          placeholder=""
          disabled
        ></Input>
      </Form-item>

      <Form-item label="申请付款总额">
        <InputMoney
          v-model="basicInfo.applyPayAmount"
          placeholder=""
          disabled
        ></InputMoney>
      </Form-item>

      <Form-item label="拒付金额">
        <InputMoney
          v-model="basicInfo.rejectAmount"
          placeholder=""
          disabled
        ></InputMoney>
      </Form-item>

      <Form-item label="未准备金额">
        <InputMoney
          v-model="basicInfo.unpreparedAmount"
          placeholder=""
          disabled
        ></InputMoney>
      </Form-item>

      <Form-item label="已准备金额">
        <InputMoney
          v-model="basicInfo.preparedAmount"
          placeholder=""
          disabled
        ></InputMoney>
      </Form-item>

      <Form-item label="实际付款总额">
        <InputMoney
          v-model="basicInfo.payAmount"
          placeholder=""
          disabled
        ></InputMoney>
      </Form-item>

      <Form-item label="未传送ERP金额">
        <InputMoney
          v-model="basicInfo.undoPayVoucherAmount"
          placeholder=""
          disabled
        ></InputMoney>
      </Form-item>
    </Form>

    <div
      class="drop-switch"
      @click="toggleCard"
    >
      <!-- <Icon :type="isShow ? 'ios-arrow-forward' : 'ios-arrow-back'" /> -->
      <div
        v-if="!isShow"
        class="arrow-left"
      ></div>
      <div
        v-else
        class="arrow-right"
      ></div>
    </div>
  <!-- </FloatingBox> -->
  </div>
</template>
<script>
import { mapState } from 'vuex';
import InputMoney from './InputMoney';
import { commonTitle } from '@paymentPlatformComps/index.js';
export default {
  components: {
    InputMoney,
    'common-title': commonTitle
  },
  props: {
    urlParams: {
      type: Object,
      default() {
        return {};
      }
    },
    // basicInfo: {
    //   type: Object,
    //   default() {
    //     return {};
    //   }
    // },
    showIsDaiBao: {
      type: Boolean,
      default() {
        return false;
      }
    },
    setBasicInfo: {
      type: Function,
      default() {
        return () => {};
      }
    },
    setBasicInfoForm: {
      type: Function,
      default() {
        return () => {};
      }
    }
  },
  data() {
    return {
      isShow: false
    };
  },
  computed: {
    ...mapState({
      yesNo: state => state.yesNo,
      yesNoMap: state => state.yesNoMap,
      basicInfo: state => state.createPaymentPreparation.basicInfo
    })
  },
  watch: {},
  created: function() {
    // 起草阶段需要调用GetBasicInfo接口查询，其他情况不用
    if (!this.urlParams.taskId) {
      this.init();
    }
  },
  beforeMount: function() {},
  mounted: function() {
    // this.setBasicInfoForm(this.$refs.basicInfoForm);
  },
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    toggleCard() {
      this.isShow = !this.isShow;
    },
    init() {
      const self = this;
    },
    getApplicantList() {
      new this.$pageModal(GetApplicantList, {}, data => {});
    },
    addBasicInfo() {}
  }
};
</script>
<style lang="less" scoped>
.headinfo.hide-head {
  right: -240px;
}
.headinfo.show-head {
  right: 0;
}
.headinfo {
  position: fixed;
  right: 0;
  width: 260px;
  padding: 15px 15px;
  background: #fff;
  z-index: 50;
  top: 40%;
  transform: translateY(-50%);
  border: 1px solid #eaecf1;
  box-shadow: 0px 4px 8px 0px rgba(66,70,86,0.05);
  transition: all .2s ease-in-out;

  /deep/ .ivu-form-item-label {
    font-size:12px !important;
    padding-left: 0;
    color: #9d9fa7;
  }
  /deep/.ivu-input[disabled] {
    border: none;
    background: #fff;
    color: #424656;
    text-align: left;
    cursor: auto;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
  }

  .drop-switch {
    position: absolute;
    left: -22px;
    width: 22px;
    height: 36px;
    // border: 1px solid #eaecf1;
    text-align: center;
    line-height: 60px;
    background:#fff;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    // border-right: none;
    background: linear-gradient(180deg,#fdcb64, #f99c34);
    border-radius: 4px 0px 0px 4px;
    box-shadow: 0px 2px 4px 0px rgba(249,156,52,0.5);
    color: #F99C34;
    display: flex;
    align-items: center;
    justify-content: center;

    .arrow-left {
      width: 16px;
      height: 16px;
      background: url('../../../../assets/images/arrow-left.png') no-repeat center;
      background-size: cover;
    }
    .arrow-right {
      width: 16px;
      height: 16px;
      background: url('../../../../assets/images/arrow-right.png') no-repeat center;
      background-size: cover;
    }
  }
}

</style>
