<template>
  <div class="dashboard-container">


    <div class="border">
      <div class="dashboard-text">账单总览</div>
      <div class="all">
        <div class="item">
          <div class="title">总收款</div>
          <div class="number">
            <div>欧元</div>
            <div>
              {{ Number(tjList1.deductionEurotj).toString() }}
            </div>
          </div>
          <div class="number">
            <div>人民币</div>
            <div>
              {{ Number(tjList1.deductionRmbtj).toString() }}
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">总提款</div>
          <div class="number">
            <div>欧元</div>
            <div>
              {{ Number(tjList2.deductionEurotj).toString() }}
            </div>
          </div>
          <div class="number">
            <div>人民币</div>
            <div>
              {{ Number(tjList2.deductionRmbtj).toString() }}
            </div>
          </div>
        </div>
        <div class="item">
          <div class="title">账面余额</div>
          <div class="number">
            <div>欧元</div>
            <div>
              {{ Number(tjList3.deductionEurotj).toString() }}
            </div>
          </div>
          <div class="number">
            <div>人民币</div>
            <div>
              {{ Number(tjList2.deductionRmbtj).toString() }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="border">
      <div class="dashboard-text">地区账单明细</div>
      <div class="select-style">
        <el-select v-model="dataForm.receivingWithdrawingRegion" placeholder="请选择收款地"
          style="margin: 20px; font-size: 30px;" @change="getList1()" size="medium">
          <el-option :label="item.country" :value="item.country" v-for="(item, index) in placeList" :key="index"
            style="font-size: 30px;height: 50px;line-height: 50px;">
          </el-option>
        </el-select>
        <div class="all place-price">
          <div class="item">
            <div class="title">总收款</div>
            <div class="number">
              <div>欧元</div>
              <div>
                {{ Number(tjList11.deductionEurotj).toString() }}
              </div>
            </div>
            <div class="number">
              <div>人民币</div>
              <div>
                {{ Number(tjList11.deductionRmbtj).toString() }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">总提款</div>
            <div class="number">
              <div>欧元</div>
              <div>
                {{ Number(tjList22.deductionEurotj).toString() }}
              </div>
            </div>
            <div class="number">
              <div>人民币</div>
              <div>
                {{ Number(tjList22.deductionRmbtj).toString() }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="title">账面余额</div>
            <div class="number">
              <div>欧元</div>
              <div>
                {{ Number(tjList33.deductionEurotj).toString() }}
              </div>
            </div>
            <div class="number">
              <div>人民币</div>
              <div>
                {{ Number(tjList33.deductionRmbtj).toString() }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  listCountry
} from '@/api/country'
import {
  getList1
} from '@/api/country'
export default {
  name: "Dashboard",
  computed: {
    ...mapGetters(["name"]),
  },
  data() {
    return {
      placeList: [],
      tjList1: {},
      tjList2: {
        deductionRmbtj:''
      },
      tjList3: {},
      tjList11: {},
      tjList22: {},
      tjList33: {},
      dataForm: {
        receivingWithdrawingRegion: ''
      },
      listPlace: {
        page: 1,
        limit: 2000,
        type: {
          country: ''
        }
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  created() {
    this.getList()
  },
  methods: {
    getList1() {
      getList1(this.dataForm.receivingWithdrawingRegion).then(response => {

        if (response.data.errno == 200) {
          this.tjList11 = response.data.data[0]
          this.tjList22 = response.data.data[1]
          this.tjList33 = response.data.data[2]
        }

      })
        .catch(() => {
          this.tjList = []
        })
    },
    getList() {
      listCountry(this.listPlace).then(response => {

        this.placeList = response.data.data.items
        this.dataForm.receivingWithdrawingRegion = this.placeList[0].country
        getList1().then(response => {
          if (response.data.errno == 200) {
            this.tjList1 = response.data.data[0]
            this.tjList2 = response.data.data[1]
            this.tjList3 = response.data.data[2]
          }

        })
          .catch(() => {
            this.tjList = []
          })

        getList1(this.dataForm.receivingWithdrawingRegion).then(response => {

          if (response.data.errno == 200) {
            this.tjList11 = response.data.data[0]
            this.tjList22 = response.data.data[1]
            this.tjList33 = response.data.data[2]
          }

        })
          .catch(() => {
            this.tjList = []
          })
      })
        .catch(() => {
          this.placeList = []
        })


    }

  },
};
</script>

<style lang="scss">
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.all {
  background: re;
  display: flex;
  justify-content: space-around;

  .title {
    font-size: 30px;
  }

  .number {
    font-size: 20px;
    display: flex;
    margin: 10px 0;
  }
}

.dq {
  margin: 10px 0;
}

.place-price {
  display: flex;
  justify-content: space-around;
}

.border {
  border: 1px solid #ccc;
  margin: 50px 0;
  padding: 30px;
  border-radius: 20px;
}

.select-style {

  // .el-select-dropdown__item{
  //    height: 50px !important;;
  //     line-height: 50px!important;
  //      font-size: 30px!important;
  //          font-size: 30px;
  //   height: 50px;
  //   display: flex;
  //   align-items: center;
  // }
  .el-input__inner {
    // width:140px!important;
    margin-left: 4px;
    height: 50px !important;
    ;
    line-height: 50px !important;
    font-size: 30px !important;
  }


}
</style>


