<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_msg">
          <div class="detail_head_cell detail_head_status border_right">
            <p class="detail_head_cell_title">申请状态</p>
            <p
              class="detail_head_cell_val text_yellow"
              v-if="orderDetail.approval_first_level == 0 &&  orderDetail.pay_status != -1"
            >待审核</p>
            <p
              class="detail_head_cell_val text_yellow"
              v-else-if="orderDetail.approval_first_level == 1&& orderDetail.approval_second_level == 0 && orderDetail.pay_status != -1"
            >审核中</p>
            <p
              class="detail_head_cell_val text_blue"
              v-else-if="orderDetail.approval_first_level == 1 && orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1"
            >审核通过</p>
            <p
              class="detail_head_cell_val text_red"
              v-else-if="(orderDetail.approval_first_level == -1 || orderDetail.approval_second_level == -1) && orderDetail.pay_status != -1"
            >审核未通过</p>
            <p
              class="detail_head_cell_val text_blackblue"
              v-else-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
            v-if="orderDetail.pay_status == -1"
            class="detail_head_cell detail_head_time border_left"
          >
            <p class="detail_head_cell_title">取消时间</p>
            <p
              class="detail_head_cell_val"
            >{{ helper.dateStringTransform(orderDetail.cancel_time) }}</p>
          </div>
          <div class="btn_group">
            <el-popover
              v-if="orderDetail.is_estimated == 0 && orderDetail.approval_second_level == 1 && orderDetail.pay_status != -1"
              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="500"
                  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.order_type != 3 && 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.order_type != 3 && 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 || orderDetail.pay_status == -1"
              class="again"
              @click="nextApply"
            >再次申请</el-button>
            <el-button
              v-if="(orderDetail.approval_first_level == 0 &&  orderDetail.pay_status != -1) || (orderDetail.approval_first_level == 1 && orderDetail.approval_second_level == 0 && orderDetail.pay_status != -1)"
              class="again"
              @click="cancelDetail"
            >取消申请</el-button>
          </div>
        </div>
        <el-collapse-transition>
          <div v-if="showMsgBox" class="evaluation_msg">
            <div class="msg_title">服务评分：</div>
            <div class="msg_rate">
              <el-rate v-model="message.score" disabled :colors="colors"></el-rate>
            </div>
            <div class="msg_title">评价详情：</div>
            <div class="msg_text">{{ message.content }}</div>
          </div>
        </el-collapse-transition>
      </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="require('@/assets/imgs/img_yunziyuan.png')" class="detail_service_msg_img" />
            <div class="detail_service_msg_right">
              <div class="detail_service_name_cloud">
                <span>{{ orderDetail.namespace }}（{{ orderDetail.workplace }}）</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.app_desc }}</div>
      </div>
      <div v-if="orderDetail.order_type == 2">
        <div class="detail_s_title">功能简介：</div>
        <div class="detail_app_scence">{{ orderDetail.app_func }}</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 v-if="orderDetail.order_type != 3" :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: "审批时间：",
            type: "time",
            info: "",
          },
          {
            title: "审批单位：",
            info: "",
          },
          {
            title: "审批人：",
            info: "",
          },
          {
            title: "审批意见：",
            info: "",
          },
        ],
      },
      {
        title: "二级审批",
        result: "",
        arr: [
          {
            title: "审批时间：",
            type: "time",
            info: "",
          },
          {
            title: "审批单位：",
            info: "",
          },
          {
            title: "审批人：",
            info: "",
          },
          {
            title: "审批意见：",
            info: "",
          },
        ],
      },
      {
        title: "三级审批",
        result: "",
        arr: [
          {
            title: "审批时间：",
            type: "time",
            info: "",
          },
          {
            title: "审批单位：",
            info: "",
          },
          {
            title: "审批人：",
            info: "",
          },
          {
            title: "审批意见：",
            info: "",
          },
        ],
      },
    ],
    header_arr: [
      {
        prop: "name",
        label: "字段编码",
        minWidth: "10%",
        align: "center",
      },
      {
        prop: "show_type",
        label: "字段类型",
        width: "120px",
        align: "center",
      },
      {
        prop: "label",
        label: "字段名称",
        minWidth: "20%",
        align: "center",
      },
      {
        prop: "descript",
        label: "字段说明",
        minWidth: "40%",
        align: "center",
      },
      {
        prop: "example",
        label: "字段示例",
        minWidth: "20%",
        align: "center",
      },
    ],
    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;
            if (this.orderDetail.res_fields != "") {
              this.data = JSON.parse(this.orderDetail.res_fields);
            }
            console.log(this.data);
            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 = helper.downloadFileFormat(
              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,
          kind: this.orderDetail.order_type,
        })
        .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.orderDetail.order_type == 1) {
        query = {
          service_id: parseFloat(this.orderDetail.service_id),
          spec_id: this.orderDetail.svc_spec_id,
          duration: this.orderDetail.duration,
          duration_unit: this.orderDetail.duration_unit,
        };
        window.sessionStorage.setItem("shoppingCart", JSON.stringify(query));
        this.$router.push({
          path: "/shop/shop_car_apply",
          query: query,
        });
      } else if (this.orderDetail.order_type == 2) {
        query = {
          app_id: parseFloat(this.orderDetail.app_id),
          spec_id: this.orderDetail.spec_app++,
          duration: this.orderDetail.duration,
          duration_unit: this.orderDetail.duration_unit,
        };
        window.sessionStorage.setItem("shoppingCart", JSON.stringify(query));
        this.$router.push({
          path: "/shop/shop_car_apply",
          query: query,
        });
      } else if (this.orderDetail.order_type == 3) {
        this.$router.push({
          path: "/shop/cloud",
        });
      }
    },
    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",
            });
          }
        });
    },
    getMessage() {
      if (this.orderDetail.order_type == 1) {
        this.$api.user
          .getServiceEvaluation({ apply_id: this.orderDetail.apply_id })
          .then((response) => {
            if (response.data.success == 1) {
              this.message = response.data.data;
              this.showMsgBox = true;
            } else {
              this.$message({
                message: "获取评价失败",
                type: "error",
              });
            }
          });
      } else if (this.orderDetail.order_type == 2) {
        this.$api.user
          .getAppEvaluation({ apply_id: this.orderDetail.apply_id })
          .then((response) => {
            if (response.data.success == 1) {
              this.message = response.data.data;
              this.showMsgBox = true;
            } 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;
  position: relative;
  margin-bottom: 20px;
}
.detail_head_msg {
  padding: 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;
}
.border_left {
  border-left: 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;
}
.text_blue {
  color: #515fe7;
}
.text_yellow {
  color: #ef9433;
}
.text_blackblue {
  color: #242c43;
}
.text_red {
  color: #e15260;
}
.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;
  border: 3px #f4f7fc solid;
}
.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;
}
.evaluation_msg {
  height: 100%;
  border-top: solid 2px #e3e5ef;
  padding: 20px;
  background-color: #fff;
}
.msg_title {
  color: #8890a7;
  margin: 0 0 10px;
}
.msg_rate {
  margin: 0 0 20px 0;
}
.msg_text {
  /* margin-left: 20px; */
  color: #242c43;
}
</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>