<template>
  <!-- 1、已接单 进行中 #077AEC 2、已拒回 #FF9100 3、已完成 #95989E-->
  <div class="fe-bigbox">
    <div >
      <div class="person-information">
        <div class="person-information-top">
          <div class="person-information-left">
            <h3>{{ name }}</h3>
            <p>{{ birthday }}</p>
          </div>
        </div>
        <div class="info-card-bottom">
          <p>
            <label>已接任务</label>
            <span>{{ accept_work }}</span>
          </p>
          <p>
            <label>完成任务</label>
            <span>{{ perform_work }}</span>
          </p>
          <p>
            <label>应收报酬</label>
            <span
              >￥{{
                Payment_receivable
                  ? Number(Payment_receivable).toFixed(2)
                  : 0.0 | get_thousand_num
              }}</span
            >
          </p>
          <p>
            <label>已收报酬</label>
            <span
              >￥{{
                receive_receivable
                  ? Number(receive_receivable).toFixed(2)
                  : 0.0 | get_thousand_num
              }}</span
            >
          </p>
        </div>
      </div>
      <van-popup
        v-model="showPopup"
        :overlay="!showPopup"
        :close-on-click-overlay="!showPopup"
        round
        position="bottom"
        :style="popupStyle"
        get-container=".fe-bigbox"
      >
        <div class="close-box" @click="expand_click">
          <img src="../assets/images/ic_unfold@2x.png" />
        </div>
        <div class="green-bg" v-if="showList == 1">
          <div class="fe-list-box">
            <div class="fe-list-title">
              <h3>任务记录</h3>
            </div>
            <a
              class="fe-list-child"
              href="javascript:void(0)"
              v-for="item in taskRecordList"
              :key="item.id"
              @click="toDetail(item.id)"
            >
              <div class="fe-list-child-left">
                <h3>
                  {{
                    item.title.length > 16
                      ? item.title.substring(0, 15) + "..."
                      : item.title
                  }}
                </h3>
                <p>{{ item.createTime | format }}</p>
              </div>
              <div class="fe-list-child-right">
                <div class="fe-list-child-right-desc">
                  <h3>
                    ￥{{
                      Number(item.paidSalary)
                        ? Number(item.paidSalary).toFixed(2)
                        : 0.0 | get_thousand_num
                    }}
                  </h3>
                  <p :style="matchColor(item.billStatus)">
                    {{ item.billStatus }}
                  </p>
                </div>
                <img src="../assets/images/agent/next_gray.png" alt />
              </div>
            </a>
          </div>
        </div>
        <div class="empty_data" v-if="showList == 0">
      <p>
        您在亲亲小保未从事灵活用工的相关任务
        <br />暂无相关记录
      </p>
    </div>
      </van-popup>
    </div>
    
  </div>
</template>

<script lang='ts'>
import { Popup } from "vant";
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    [Popup.name]: Popup
  }
})
export default class FlexEmployee extends Vue {
  private name: string = ""; //入参
  private birthday: string = ""; //

  private accept_work: string = "0";
  private perform_work: string = "0";
  private Payment_receivable: string = "0.00";
  private receive_receivable: string = "0.00";
  private fullName: string = "";
  private taskRecordList: any = null;
  private showList: number = -1;
  private showPopup: boolean = true;
  private expand: boolean = true;

  get popupStyle() {
    if (this.expand) {
      return { height: "63%" };
    } else {
      return { height: "86%" };
    }
  }
  private expand_click() {
    this.expand = !this.expand;
  }
  private toDetail(id: any): void {
    this.$router.push({ name: "FlexEmployeeDetial", query: { id } });
  }

  get matchColor() {
    return (ibillStatus: string) => {
      if (ibillStatus === "进行中") {
        return { color: "#077aec" };
      } else if (ibillStatus === "已拒回") {
        return { color: "#FF9100" };
      } else if (ibillStatus === "已完成") {
        return { color: "#95989E" };
      } else if (ibillStatus === "已接单") {
        return { color: "#077aec" };
      }
    };
  }

  mounted() {
    this.name = localStorage.getItem("name") as string;
    this.birthday = localStorage.getItem("birthday") as string;
    const idNo = window.atob(decodeURI(String(this.$route.query.id_no)));
    let params = {
      idNo: idNo //371327198511175134
    };
    this.$server.EmployeeService.getAgileWorker(params).then((res: any) => {
      console.log("res=", res);
      this.accept_work = res.alCount; // 已接任务
      this.perform_work = res.comCount; // 完成任务
      this.Payment_receivable = res.receivableSalary ? res.receivableSalary.toFixed(2) : 0.0; // 应收报酬
      this.receive_receivable = res.receivedSalary ? res.receivedSalary.toFixed(2) : 0.0; // 已收报酬
      this.taskRecordList = res.taskList == null ? [] : res.taskList; // 任务记录

      this.taskRecordList.length > 0 ? (this.showList = 1) : (this.showList = 0);
      this.taskRecordList.length >= 3?this.expand = false:this.expand = true;
      localStorage.setItem("taskList", JSON.stringify(this.taskRecordList));
    });
  }
}
</script>

<style lang="less">
.fe-bigbox {
  min-height: 667px;
  background: #19b370;
}

.info-card-bottom {
  margin-top: 40px;
}
.info-card-bottom p {
  color: #d3f1e4;
  font-size: 13px;
  line-height: 18px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.empty_data {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.empty_data p {
  font-size: 14px;
  font-weight: 400;
  color: #999999;
  line-height: 24px;
  text-align: center;
  margin-top: 156px;
}

.person-information {
  background-color: #19b370;
  width: 100%;
  padding: 20px 16px 0 16px;
}
.person-information-top {
  height: 60px;
}
.person-information-left {
  float: left;
}
.person-information-left h3 {
  color: #ffffff;
  font-size: 24px;
  line-height: 33px;
}
.person-information-left p {
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
  margin-top: 7px;
}
.person-information-right {
  float: right;
}
.person-information-right img {
  width: 60px;
  height: 60px;
  border-radius: 90%;
}
.person-information-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
}
.person-information-bottom-child {
  flex: 1;
  text-align: center;
}
.person-information-bottom-child h3 {
  color: #ffffff;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.person-information-bottom-child p {
  color: #bcead6;
  font-size: 13px;
  line-height: 18px;
  margin-top: 6px;
}
.fe-list-box {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px 12px 0px 0px;
  padding: 0 16px;
  height: 100%;
}
.fe-list-title {
  width: 100%;
  height: 52px;
  border-bottom: 1px solid #ebecf0;
}
.fe-list-title h3 {
  color: #3d4047;
  font-size: 14px;
  line-height: 52px;
  font-weight: 500;
}
.fe-list-child {
  display: block;
  height: 77px;
  border-bottom: 1px solid #ebecf0;
  display: flex;
  justify-content: space-between;
}
.fe-list-child-left h3 {
  color: #3d4047;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  margin-top: 15px;
  height: 22px;
}
.fe-list-child-left p {
  color: #95989e;
  font-size: 13px;
  line-height: 18px;
  margin-top: 6px;
}
.fe-list-child-right {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fe-list-child-right img {
  width: 9px;
  height: 14px;
  margin-left: 7px;
}
.fe-list-child-right-desc {
  height: 100%;
}
.fe-list-child-right h3 {
  color: #3d4047;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  text-align: right;
  margin-top: 15px;
}
.fe-list-child-right p {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  margin-top: 6px;
  text-align: right;
  // color: #077aec;
}
.close-box {
  width: 100%;
  height: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
}
.close-box img {
  display: block;
  width: 32px;
  height: 4px;
  margin: 0 auto;
}

.van-popup--bottom.van-popup--round {
  border-radius: 0.53333rem 0.53333rem 0 0;
}
.van-popup--bottom {
  bottom: 0;
  left: 0;
  width: 100%;
}
.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-overflow-scrolling: touch;
}
</style>