<!-- 主页模块 主页一览-->
<template>
  <div>
    <div class="head">
      <span class="headicon">基本信息</span>
    </div>
    <div class="top-buttons">
      <el-button type="primary"
                 size="small"
                 @click="edit">编辑</el-button>
      <el-button size="small"
                 @click="ena">{{ enabled }}</el-button>
      <el-button size="small"
                 @click="back">返回</el-button>
    </div>
    <div class="table" />
    <div class="detail-item">
      <span class="name">公司中文名称</span>
      <span class="content">{{ msg.tenantName | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">公司英文名称</span>
      <span class="content">{{ msg.tenantEnName | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">公司简称</span>
      <span class="content">{{ msg.compSimpleNameEn | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">公司域名</span>
      <span class="content">{{ msg.compDomainName | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">联系人</span>
      <span class="content">{{ msg.linkmanName | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">联系人电话</span>
      <span class="content">{{ msg.linkmanPhone | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">联系人邮箱</span>
      <span class="content">{{ msg.linkmanEmail | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">专属客服</span>
      <span class="content">{{ msg.customerServiceStaffName | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">服务类型</span>
      <span class="content">{{ msg.serviceType | serviceType }}</span>
    </div>
    <!-- <div class="detail-item">
      <span class="name">入驻船舶数</span>
      <span class="content">{{ msg.enteringShipNumber | enteringShipNumber }}</span>
    </div> -->
    <!-- 船舶总数量 -->
    <div class="detail-item">
      <span class="name">入驻船舶数</span>
      <span class="content">{{ msg.shipNumber | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">合同时间</span>
      <span class="content">{{ msg.contractStartDate | empty }}</span>
    </div>
    <div class="detail-item">
      <span class="name">到期时间</span>
      <span class="content">{{ msg.contractEndDate | empty }}</span>
    </div>
    <div class="head head2">
      <span class="headicon">开通服务</span>
    </div>
    <div class="activatedServices">
      <el-collapse>
        <el-collapse-item v-for="plugin in pageTreeData"
                          :key="plugin.pluginId">
          <div slot="title"
               class="payedPlugin">
            <div class="basic">
              <svg-icon icon-class="ship"
                        class="svg-icon" />
              <div class="plugin-name">{{ plugin.pluginName }}</div>
            </div>
            <div class="plugin-extra">
              <div>开通时间：{{ plugin.pluginOpenedDate }}</div>
              <div class="plugin-extra-end-date">到期时间：{{ plugin.pluginExpiredDate }}</div>
              <div class="plugin-extra-seperator"></div>
              <div class="plugin-extra-left-days"
                   :class="leftDays(plugin.pluginOpenedDate, plugin.pluginExpiredDate) < 100 && leftDays(plugin.pluginOpenedDate, plugin.pluginExpiredDate) >= 0 && 'red'">剩余天数：{{ { start: plugin.pluginOpenedDate, end: plugin.pluginExpiredDate } | leftDays }}天</div>
            </div>
          </div>
          <div class="collapse-item-content">
            <el-tree :data="plugin.activatedServices"
                     :props="{ label: 'label', children: 'tenantServiceItems' }"></el-tree>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import {
  enable,
  disable,
  tenantDetail,
  operators,
  plugins
} from "../../api/lessee";
export default {
  name: "Lessee",

  // 空内容填充‘--’字符
  filters: {
    empty (value) {
      let empt = "";
      if (!value) {
        empt = "--";
      } else {
        empt = value;
      }
      return empt;
    },
    serviceType (value) {
      switch (value) {
        case "SHIP_CLIENT":
          return "船端";
        case "COAST_CLIENT":
          return "岸端";
        case "SHIP_COAST_CLIENT":
          return "船端+岸端";
        default:
          return "";
      }
    },
    leftDays ({ start, end }) {
      return Math.floor(
        (new Date(end).getTime() - new Date(start).getTime()) /
        (1000 * 3600 * 24)
      );
    }
  },
  data () {
    return {
      tenantId: "",
      options: "",
      enabled: "", // 启用或禁用
      state: "", // 启用禁用状态
      msg: "",
      pageTreeData: []
    };
  },
  created () {
    this.tenantId = localStorage.getItem("tenantId");
    this.checkMsg();
    this.getPayedServices();
  },
  methods: {
    leftDays (start, end) {
      return Math.floor(
        (new Date(end).getTime() - new Date(start).getTime()) /
        (1000 * 3600 * 24)
      );
    },
    // 查询账户
    checkList () {
      operators({
        currentPage: "",
        pageSize: ""
      }).then(response => {
        this.options = response.data.records;
      });
    },
    // 查询租户详细信息
    checkMsg () {
      tenantDetail({
        tenantId: this.tenantId
      }).then(response => {
        this.msg = response.data;
        this.enable();
      });
    },
    // 获取租户插件列表
    // 获取租户已购买的插件列表
    getPayedServices () {
      plugins({ tenantId: this.tenantId }).then(response => {
        this.pageTreeData = response.data.map(plugin => {
          return {
            ...plugin,
            activatedServices: plugin.activatedServices.map(service => {
              return {
                ...service,
                label: service.serviceName,
                tenantServiceItems: service.tenantServiceItems.map(item => {
                  return { ...item, label: item.serviceItemName };
                })
              };
            })
          };
        });
      });
    },
    enable () {
      if (this.msg.enabled === 1) {
        this.enabled = "禁用";
        this.state = false;
      } else if (this.msg.enabled === 0) {
        this.enabled = "启用";
        this.state = true;
      }
    },
    ena () {
      this.$confirm("此操作将启用或禁用该租户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.state) {
            enable({
              tenantId: this.msg.tenantId
            }).then(() => {
              this.msg.enabled = "1";
              localStorage.setItem("row", JSON.stringify(this.msg));
              this.$message({
                message: "启用成功",
                type: "success",
                showClose: true
              });
              this.state = false;
              this.enabled = "禁用";
            });
          } else {
            disable({
              tenantId: this.msg.tenantId
            }).then(() => {
              this.msg.enabled = "0";
              localStorage.setItem("row", JSON.stringify(this.msg));
              this.$message({
                message: "禁用成功",
                type: "success",
                showClose: true
              });
              this.state = true;
              this.enabled = "启用";
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
            showClose: true
          });
        });
    },
    back () {
      this.$router.push({
        name: "lessee"
      });
    },
    edit () {
      this.$router.push({
        name: "lesseeEdit",
        params: {
          state: false
        }
      });
    },
    // Helper
    convertTreeData (arr) {
      return arr.map(item => {
        return {
          ...item,
          id: item.pluginId,
          label: item.pluginName,
          children: item.pluginServers.map(item => {
            return {
              ...item,
              id: item.serviceId,
              label: item.serviceName,
              children: item.children.map(item => {
                return { ...item, id: item.serviceId, label: item.serviceName };
              })
            };
          })
        };
      });
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../styles/variables.scss";
.table {
  margin-top: 40px;
}
.detail-item {
  margin-bottom: 20px;
}
.name {
  width: 120px;
  text-align: right;
  display: inline-block;
  color: #666666;
}
.content {
  margin-left: 20px;
  display: inline-block;
  color: #333333;
}
.head2 {
  margin-top: 40px;
}
.activatedServices {
  margin-top: 20px;
}
.first-level-tree-node {
  .property {
    display: flex;
  }
}
.collapse-item-content {
  padding-left: 32px;
}
.collapse-item-content-item {
  line-height: 2;
  display: flex;
  .title {
    margin-right: 8px;
  }
}
.svg-icon,
.plugin-name {
  margin-left: 8px;
}
.payedPlugin {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .basic {
    display: flex;
    align-items: center;
  }
}
.plugin-extra {
  display: flex;
  align-items: center;
  .plugin-extra-end-date {
    margin-left: 16px;
  }
  .plugin-extra-seperator {
    margin-left: 8px;
    height: 14px;
    background-color: #999;
    width: 1px;
  }
  .plugin-extra-left-days {
    margin-left: 8px;
  }
  .red {
    color: $red;
  }
}
</style>
