<script>
import ScoreList from "@/subPages/pages/commitment/enterpriseCommitment/components/score-list/index.vue";
import {getEnterpriseDetail, getPromiseList} from "@/api/commitment";
import PromiseList from "@/subPages/pages/commitment/components/promiseList/index.vue";
import RemindList from "@/components/bussinessComponents/remind-list/index.vue";

export default {
  components: {
    PromiseList,
    ScoreList,
    RemindList
  },
  data() {
    return {
      enterpriseDetail: {},
      active: 0
    }
  },
  watch:{
    "$route.query.uuid": {
      handler(value) {
        if(value) {
          this.handleGetEnterpriseDetail()
        }
      },
      immediate: true
    }
  },
  methods: {
    /* 获取企业详情 */
    async handleGetEnterpriseDetail() {
      try {
        const res = await getEnterpriseDetail({
          uuid: this.$route.query.uuid
        })
        if (res.code === 0) {
          this.enterpriseDetail = res.data
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}

</script>

<template>
  <view class="page">
    <view class="top">
      <view class="company">{{ enterpriseDetail.companyName }}</view>
      <view class="code">组织机构代码: {{ enterpriseDetail.companyId }}</view>
    </view>
    <view class="page-content">
      <ScoreList :creditScore="enterpriseDetail.creditGoal" :commitmentNum="enterpriseDetail.promiseCount"
                 :commitmentRemindNum="enterpriseDetail.creditGoal"></ScoreList>
      <van-tabs v-model="active">
        <van-tab title="全部承诺">
          <PromiseList
              class="promise-style"
              :company-id="enterpriseDetail.uuid"
              :show-status="true"
          ></PromiseList>
        </van-tab>
        <van-tab title="整改提醒">
          <RemindList v-if="enterpriseDetail.uuid" :type="0" :company-id="enterpriseDetail.uuid"></RemindList>
        </van-tab>
        <van-tab title="系统提醒">
          <RemindList v-if="enterpriseDetail.uuid" :type="1" :company-id="enterpriseDetail.uuid"></RemindList>
        </van-tab>
      </van-tabs>
    </view>

  </view>
</template>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #fff;
}

.top {
  background-image: url("@/static/images/commitment/company-bg.png");
  height: 143px;
  position: relative;
}

.company {
  font-size: 18px;
  color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
}

.code {
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 50px;
  left: 20px;
}

.page-content {
  position: relative;
  top: -45px;
  padding: 20px;

}

.number-list {

}

.promise-list {
}


.promise-list-item {
  margin-top: 20px;
  border-bottom: 1px solid #ebeef5;
  height: 120px
}

.item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 40px;
}

.left-title {
  font-size: 16px;
  font-weight: bold;
}

.status {
  font-size: 14px;
  color: #999;
}

.list-content {
  padding: 10px 20px;
}

.content-item {
  display: flex;
  margin-bottom: 10px;
}

.content-key {
  font-size: 14px;
  width: 60px;
  color: #999;
}

.content-value {
  font-size: 14px;
  margin-left: 10px;
}
</style>