<template>
  <div>
    <el-breadcrumb separator="/" class="bread_crumb1">
      <el-breadcrumb-item :to="{ path: '/user' }">个人中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user/order_list' }">订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <block-radius class="detail">
      <div class="detail_head">
        <div class="detail_head_cell detail_head_status border_right">
          <p class="detail_head_cell_title">申请状态</p>
          <p
            class="detail_head_cell_val blue"
            v-if="orderDetail.approval_first_level == 0 &&  orderDetail.pay_status != -1"
          >待审核</p>
          <p
            class="detail_head_cell_val blue"
            v-if="orderDetail.approval_first_level == 1&& orderDetail.approval_second_level == 0 && orderDetail.pay_status != -1"
          >审核中</p>
          <p
            class="detail_head_cell_val blue"
            v-if="orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1"
          >审核通过</p>
          <p
            class="detail_head_cell_val blue"
            v-if="orderDetail.approval_first_level == -1 && orderDetail.pay_status != -1"
          >审核未通过</p>
          <p class="detail_head_cell_val blue" v-if="orderDetail.pay_status == -1">订单已取消</p>
        </div>
        <div class="detail_head_cell detail_head_no border_right">
          <p class="detail_head_cell_title">订单编号</p>
          <p class="detail_head_cell_val">{{ orderDetail.order_id }}</p>
        </div>
        <div class="detail_head_cell detail_head_time">
          <p class="detail_head_cell_title">申请时间</p>
          <p class="detail_head_cell_val">{{ helper.dateStringTransform(orderDetail.add_time) }}</p>
        </div>
        <div class="btn_group">
          <el-popover
            v-if="orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1 && orderDetail.is_estimated == 0"
            placement="right-start"
            width="300"
            v-model="visible"
            trigger="click"
          >
            <p>服务评价：</p>
            <div class="pop_rate">
              <el-rate v-model="serviceRate" :colors="colors" show-score score-template="{value}"></el-rate>
            </div>
            <p>填写评价：</p>
            <div class="evaluation_text">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="textarea"
                maxlength="200"
                show-word-limit
                :autosize="{ minRows: 6, maxRows: 10 }"
              ></el-input>
            </div>
            <div class="pop_btn_group">
              <el-button size="small" class="pop_cancel" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" class="pop_submit" size="small" @click="addEvaluation">确定提交</el-button>
            </div>
            <el-button class="evaluation" slot="reference">服务评价</el-button>
          </el-popover>
          <el-button
            v-else-if="orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1 && orderDetail.is_estimated == 1 && !showMsgBox"
            class="approval_status_btn"
            @click="getMessage"
          >查看评价</el-button>
          <el-button
            v-else-if="orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1 && orderDetail.is_estimated == 1 && showMsgBox"
            class="approval_status_btn"
            @click="showMsgBox = false"
          >收起评价</el-button>
          <el-button
            v-if="orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1"
            class="again"
            @click="nextApply"
          >再次申请</el-button>
          <el-button
            v-if="orderDetail.approval_first_level == 1 && orderDetail.approval_second_level == 0 && orderDetail.pay_status != -1"
            class="again"
            @click="cancelDetail"
          >取消申请</el-button>
        </div>
      </div>
      <div class="detail_title">{{ orderDetail.order_type == 1 ? "服务" : "应用"}}信息</div>
      <div class="detail_service">
        <el-row class="detail_service_row">
          <el-col :span="10" v-if="orderDetail.order_type == 1" class="detail_service_msg">
            <img :src="orderDetail.cover" class="detail_service_msg_img" />
            <div class="detail_service_msg_right">
              <div class="detail_service_name">
                <span>{{ orderDetail.name }}</span>
                <span v-if="orderDetail.mapService" class="tags map_service">mapService</span>
                <span v-if="orderDetail.openness == 1" class="tags shared">共享</span>
                <span v-else-if="orderDetail.openness ==  2" class="tags restricted">受限</span>
                <span v-else class="tags sensitive">敏感</span>
              </div>
              <div class="detail_service_msg_other">
                <div class="detail_service_type">{{ orderDetail.sector }}</div>
                <div class="detail_service_creator">{{ orderDetail.src_organization }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="10" v-else-if="orderDetail.order_type == 2" class="detail_service_msg">
            <img :src="orderDetail.cover" class="detail_service_msg_img" />
            <div class="detail_service_msg_right">
              <div class="detail_service_name">
                <span>{{ orderDetail.name }}</span>
              </div>
              <div class="detail_service_msg_other">
                <div class="detail_service_type">{{ orderDetail.sector }}</div>
                <div class="detail_service_creator">{{ orderDetail.src_organization }}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="10" v-else-if="orderDetail.order_type == 3" class="detail_service_msg">
            <img :src="orderDetail.cover" class="detail_service_msg_img" />
            <div class="detail_service_msg_right">
              <div class="detail_service_name_cloud">
                <span>{{ orderDetail.name }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="detail_service_specification">
            <div v-if="orderDetail.order_type == 1">
              <div>
                <span class="detail_service_specification_gg">规格：</span>
                <span
                  class="detail_service_specification_val"
                >访问次数：{{ orderDetail.spec_svc_count }}/日，访问量：{{ orderDetail.spec_svc_pv }}/日</span>
              </div>
              <div>
                <span class="detail_service_specification_type">申请方式：</span>
                <span
                  class="detail_service_specification_val"
                >{{orderDetail.duration_unit == 1 ? "按月" : "按年"}}</span>
              </div>
            </div>
            <div v-else-if="orderDetail.order_type == 2">
              <div>
                <span class="detail_service_specification_gg">规格：</span>
                <span class="detail_service_specification_val">申请获取应用镜像部署权限</span>
              </div>
            </div>
            <div v-else-if="orderDetail.order_type == 3">
              <div>
                <span class="detail_service_specification_gg">类型：</span>
                <span class="detail_service_specification_val">申请新的工作区域</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6" class="detail_service_time">
            <div>
              <span class="detail_service_time_title">申请时长：</span>
              <span
                class="detail_service_specification_val"
              >{{ orderDetail.duration + (orderDetail.duration_unit == 1 ? "个月" : "年") }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-if="orderDetail.order_type == 2">
        <div class="detail_s_title">应用简介：</div>
        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
      </div>
      <div v-if="orderDetail.order_type == 2">
        <div class="detail_s_title">功能简介：</div>
        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
      </div>
      <div v-if="orderDetail.order_type == 1 || orderDetail.order_type == 2">
        <div class="detail_s_title">应用场景：</div>
        <div class="detail_app_scence">{{ orderDetail.scene }}</div>
      </div>
      <div v-if="orderDetail.order_type == 3">
        <div class="detail_s_title">工作区域描述：</div>
      </div>
      <div v-if="orderDetail.order_type == 3" class="params_block">
        <span class="params_block_title">申请规格：</span>
        <div class="params_block_item">
          <div class="params_block_item_in">
            <span class="params_block_item_title">CPU：</span>
            <span class="params_block_item_val">{{ orderDetail.cpu }}核</span>
          </div>
          <div class="params_block_item_in">
            <span class="params_block_item_title">内存：</span>
            <span class="params_block_item_val">{{ orderDetail.memory }}GB</span>
          </div>
          <div class="params_block_item_in">
            <span class="params_block_item_title">容器组：</span>
            <span class="params_block_item_val">{{ orderDetail.memory }}核</span>
          </div>
          <div class="params_block_item_in">
            <span class="params_block_item_title">数据盘：</span>
            <span class="params_block_item_val">{{ orderDetail.disk_num}}块，每块{{orderDetail.disk_cap }}GB</span>
          </div>
        </div>
        <span class="params_block_title margin_top_20">单个容器组规格：</span>
        <div class="params_block_item">
          <div class="params_block_item_in">
            <span class="params_block_item_title">CPU：</span>
            <p class="params_block_item_val">
              <span class="val_has_2">最高&nbsp;{{ orderDetail.one_cpu_max }}核</span>
              <span class="val_has_2">默认&nbsp;{{ orderDetail.one_cpu_min }}核</span>
            </p>
          </div>
          <div class="params_block_item_in">
            <span class="params_block_item_title">CPU：</span>
            <p class="params_block_item_val">
              <span class="val_has_2">最高&nbsp;{{ orderDetail.one_memory_max }}核</span>
              <span class="val_has_2">默认&nbsp;{{ orderDetail.one_memory_min }}核</span>
            </p>
          </div>
        </div>
      </div>
      <div v-if="orderDetail.order_type == 1">
        <div class="detail_s_title">申请内容：</div>
        <table-um :headers="header_arr" :datas="data"></table-um>
      </div>
      <div class="detail_title">申请人信息</div>
      <info-list @download="download" :list_arr="list_arr" class="detail_s_val"></info-list>
      <process-card :data="approval_arr1" class="detail_s_val"></process-card>
    </block-radius>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import ProcessCard from "@/components/process-card";
import TableUm from "@/components/table/table-um";
import InfoList from "@/components/infoList";
import helper from "@/services/helper.js";
export default {
  components: {
    BlockRadius,
    ProcessCard,
    TableUm,
    InfoList
  },
  data: () => ({
    helper: helper,
    visible: false,
    colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    serviceRate: 0,
    textarea: "",
    orderDetail: {},
    orderUser: {},
    showMsgBox: false,
    approval_arr1: [
      {
        title: "一级审批",
        result: "",
        arr: [
          {
            title: "审批时间：",
            info: ""
          },
          {
            title: "审批单位：",
            info: ""
          },
          {
            title: "审批人：",
            info: ""
          },
          {
            title: "审批意见：",
            info: ""
          }
        ]
      },
      {
        title: "二级审批",
        result: "",
        arr: [
          {
            title: "审批时间：",
            info: ""
          },
          {
            title: "审批单位：",
            info: ""
          },
          {
            title: "审批人：",
            info: ""
          },
          {
            title: "审批意见：",
            info: ""
          }
        ]
      },
      {
        title: "三级审批",
        result: "",
        arr: [
          {
            title: "审批时间：",
            info: ""
          },
          {
            title: "审批单位：",
            info: ""
          },
          {
            title: "审批人：",
            info: ""
          },
          {
            title: "审批意见：",
            info: ""
          }
        ]
      }
    ],
    header_arr: [
      {
        prop: "name",
        label: "微服务名称",
        minWidth: "20%",
        align: "left"
      },
      {
        prop: "is_sensituve",
        label: "健康状态",
        width: "120px",
        align: "center"
      },
      {
        prop: "is_must",
        label: "接口链接",
        minWidth: "40%",
        align: "center"
      },
      {
        prop: "descript",
        label: "微服务描述",
        minWidth: "40%",
        align: "left"
      }
    ],
    list_arr: [
      {
        title: "申请人：",
        info: ""
      },
      {
        title: "联系方式：",
        info: ""
      },
      {
        title: "申请单位：",
        info: ""
      },
      {
        title: "申请文件：",
        info: "",
        url: "",
        type: "down"
      }
    ],
    data: []
  }),
  mounted() {
    this.getOrderDetail();
  },
  methods: {
    addEvaluation() {
      console.log(this.serviceRate, this.textarea);
      this.visible = false;
    },
    download() {},
    getOrderDetail() {
      this.$api.user
        .getOrderDetail({ order_id: this.$route.params.id })
        .then(response => {
          if (response.data.success == 1) {
            this.orderDetail = response.data.data;
            this.data = JSON.parse(this.orderDetail.res_fields);
            this.getOrderUser();
            this.getOrderApproval();
          } else {
            console.log(response.data.errMsg);
          }
        });
    },
    getOrderUser() {
      this.$api.user
        .getOrderUser({ order_id: this.$route.params.id })
        .then(response => {
          if (response.data.success == 1) {
            this.list_arr[0].info = response.data.data.name;
            this.list_arr[1].info = response.data.data.phone_number;
            this.list_arr[2].info = response.data.data.organization;
            this.list_arr[3].info = response.data.data.apply_file;
            this.list_arr[3].url = response.data.data.apply_file;
          } else {
            console.log(response.data.errMsg);
          }
        });
    },
    getOrderApproval() {
      this.$api.user
        .getOrderApproval({ apply_id: this.orderDetail.apply_id })
        .then(response => {
          if (response.data.success == 1) {
            let data = response.data.data;
            for (let i = 0; i < data.length; i++) {
              this.approval_arr1[i].result = data[i].apply_type_name;
              this.approval_arr1[i].arr[0].info = data[i].created;
              this.approval_arr1[i].arr[1].info = data[i].department_name;
              this.approval_arr1[i].arr[2].info = data[i].user_name;
              this.approval_arr1[i].arr[3].info = data[i].comments;
            }
            this.approval_arr1.splice(data.length);
          } else {
            console.log(response.data.errMsg);
          }
        });
    },
    nextApply() {
      let query = {};
      if (this.cellItem.order_type == 1) {
        query = {
          service_id: parseFloat(this.cellItem.service_id),
          spec_id: this.cellItem.svc_spec_id,
          duration: this.cellItem.duration,
          duration_unit: this.cellItem.duration_unit
        };
      } else if (this.cellItem.order_type == 2) {
        query = {
          app_id: parseFloat(this.cellItem.app_id),
          spec_id: this.cellItem.spec_app,
          duration: this.cellItem.duration,
          duration_unit: this.cellItem.duration_unit
        };
      }
      this.$router.push({
        path: "/shop/shop_car_apply",
        query: query
      });
    },
    cancelDetail() {
      this.$api.user
        .cancelOrder({ order_id: this.orderDetail.order_id })
        .then(response => {
          if (response.data.success == 1) {
            this.$message({
              message: "取消订单成功",
              type: "success"
            });
            this.$router.push({ name: "orderList" });
          } else {
            this.$message({
              message: "取消订单失败",
              type: "error"
            });
          }
        });
    }
  }
};
</script>
<style scoped>
.detail {
  margin: 0 20px;
}
.detail_head {
  width: 100%;
  background-color: #f6f7fb;
  border-radius: 8px;
  border: solid 2px #e3e5ef;
  padding: 22px 20px;
  position: relative;
  margin-bottom: 20px;
}
.detail_head_cell {
  display: inline-block;
  height: 50px;
  text-align: center;
}
.detail_head_status {
  width: 160px;
}
.detail_head_no {
  width: 360px;
}
.detail_head_time {
  width: 240px;
}
.border_right {
  border-right: 1px #e3e5ef solid;
}
.detail_head_cell_title {
  font-size: 14px;
  color: #8890a7;
  line-height: 22px;
}
.detail_head_cell_val {
  font-size: 16px;
  font-weight: 700;
  line-height: 28px;
  color: #242c43;
}
.blue {
  color: #515fe7;
}
.btn_group {
  position: absolute;
  right: 20px;
  top: 26px;
}
.evaluation {
  width: 100px;
  background-color: #c3caf8;
  color: #0f2683;
  margin-right: 20px;
}
.again {
  width: 100px;
  background-color: #0f2683;
  color: #f8f9fd;
}
.pop_rate {
  padding: 0 0 0 50px;
  margin: 15px 0;
}
.evaluation_text {
  padding: 15px 4px;
}
.pop_cancel {
  color: #58617a;
  margin-right: 20px;
}
.pop_submit {
  background-color: #e56600;
  border: 0;
}
.pop_btn_group {
  margin-top: 10px;
  text-align: center;
}
.detail_title {
  font-size: 18px;
  margin: 10px 0 20px;
  padding: 0 0 0 15px;
  position: relative;
  color: #58617a;
}
.detail_title::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 18px;
  background-color: #515fe7;
  border-radius: 2px;
  left: 0;
  top: 4px;
}
.detail_service {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 8px;
  border: solid 1px #ededed;
}
.detail_service_msg {
  height: 162px;
  padding: 20px 10px 20px 20px;
  display: flex;
  justify-content: space-between;
  border-right: 1px #ededed solid;
}
.detail_service_msg_img {
  width: 118px;
  height: 118px;
  border-radius: 8px;
}
.detail_service_msg_right {
  width: calc(100% - 140px);
  margin: 0 0 0 10px;
  position: relative;
}
.detail_service_name {
  width: 100%;
  line-height: 24px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
}
.detail_service_name_cloud {
  width: 100%;
  line-height: 24px;
  margin-top: 50px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 16px;
}
.detail_service_msg_other {
  position: absolute;
  bottom: 2px;
}
.detail_service_type {
  color: #8890a7;
  font-size: 14px;
  line-height: 22px;
}
.detail_service_creator {
  color: #8890a7;
  font-size: 14px;
  line-height: 22px;
}
.tags {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 8px 2px;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  border-radius: 4px;
  position: relative;
  top: -2px;
}
.map_service {
  background-color: #626de9;
  border: solid 1px #626de9;
  color: #fff;
}
.shared {
  background-color: #e7fdfc;
  border: solid 1px #8bd6d0;
  color: #25bdb1;
}
.restricted {
  background-color: #fffee8;
  border: solid 1px #e4c884;
  color: #ef9433;
}
.sensitive {
  background-color: #ffefef;
  border: solid 1px #d7a4a9;
  color: #e15260;
}
.detail_service_specification {
  height: 162px;
  color: #8890a7;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 30px;
  padding: 22px 20px;
  border-right: 1px #ededed solid;
}
.detail_service_specification_val {
  color: #242c43;
}
.detail_service_time {
  text-align: center;
  height: 162px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail_service_time_title {
  color: #8890a7;
}
.detail_s_title {
  color: #8890a7;
  margin: 20px 0 10px;
  padding: 0 0 0 20px;
}
.detail_app_scence {
  padding: 0 0 0 20px;
  color: #242c43;
  font-size: 14px;
  line-height: 22px;
}
.detail_s_val {
  padding: 0 0 0 20px;
}
.approval_status_btn {
  background-color: #e1e4fb;
  color: #626de9;
}
.params_block {
  background-color: #f8f9fd;
  border-radius: 8px;
  margin: 10px 0;
  padding: 20px;
  font-size: 14px;
  line-height: 22px;
}
.params_block_title {
  padding-left: 5px;
  color: #242c43;
}
.params_block_item {
  padding: 10px 0 0 0;
}
.params_block_item_in {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.params_block_item_title {
  color: #8890a7;
  width: 80px;
  text-align: right;
}
.params_block_item_val {
  color: #242c43;
  width: calc(100% - 82px);
}
.val_has_2 {
  margin-right: 20px;
}
.margin_top_20 {
  display: block;
  margin-top: 20px;
}
</style>
<style>
.pop_rate .el-rate__icon {
  font-size: 24px;
}
.pop_rate .el-rate__text {
  font-size: 20px;
  margin-left: 20px;
  position: relative;
  top: 1px;
  color: #58617a !important;
}
.evaluation_text .el-textarea__inner {
  border-radius: 8px;
}
</style>