<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.order_type != 3 &&
                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}"
                  disabled-void-color="#d9dce5"
                ></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"
                disabled-void-color="#d9dce5"
              ></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="8"
            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="8"
            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="8"
            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="6" class="detail_service_specification">
            <div v-if="orderDetail.order_type == 1">
              <div>
                <span class="detail_service_specification_gg">
                  {{ orderDetail.spcs_type == 0 ? "计次收费：" : "时长收费：" }}
                </span>
                <span class="detail_service_specification_val">
                  {{ orderDetail.single_money }}金币/
                  {{
                    orderDetail.spcs_type == 1
                      ? orderDetail.spcs_count + "次"
                      : "月"
                  }}
                </span>
              </div>
            </div>
            <div v-else-if="orderDetail.order_type == 2">
              <div>
                <span class="detail_service_specification_gg">
                  {{
                    orderDetail.spec_app == 0
                      ? "申请获取应用镜像部署权限："
                      : "申请获取应用镜像开发权限："
                  }}
                </span>
                <span class="detail_service_specification_val">
                  {{ orderDetail.single_money }}金币/月
                </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">{{
                  orderDetail.apply_type == 0
                    ? "申请新的工作区域"
                    : "升级现有工作区域"
                }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="5" class="detail_service_time">
            <div>
              <span class="detail_service_time_title">申请时长：</span>
              <span class="detail_service_specification_val">{{
                orderDetail.duration == 0
                  ? "不限"
                  : orderDetail.duration +
                    (orderDetail.duration_unit == 1 ? "个月" : "年")
              }}</span>
            </div>
          </el-col>
          <el-col :span="5" class="detail_service_money">
            <div>
              <span class="detail_service_money_title">总价：</span>
              <span class="detail_service_specification_val"
                >{{ orderDetail.total_money }}金币</span
              >
              <!-- <span
                v-if="
                  orderDetail.apply_type == 1 &&
                  orderDetail.amounts_payable - orderDetail.total_money > 0
                "
                class="adhekadwn"
              >
                （升级费用：
                {{ orderDetail.amounts_payable }}金币，原规格抵扣：
                {{ orderDetail.amounts_payable - orderDetail.total_money }}
                金币）
              </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.business_area }}</div>
      </div>
      <div v-if="orderDetail.order_type == 2">
        <div class="detail_s_title">上线时间：</div>
        <div class="detail_app_scence">{{ helper.dateStringTransform(orderDetail.app_create_date) }}</div>
      </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
            v-if="orderDetail.apply_type == 0 && orderDetail.disk_num != 0"
            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
            v-else-if="
              orderDetail.apply_type != 0 &&
              orderDetail.adjust_disk &&
              orderDetail.adjust_disk.length != 0
            "
            class="params_block_item_in"
          >
            <span class="params_block_item_title">数据盘：</span>
            <p class="params_block_item_val">
              <span
                v-for="(item, index) in orderDetail.adjust_disk"
                :key="'sjp' + index"
                class="val_has_2"
                >{{
                  "数据盘" +
                  item.disk_num +
                  "块，每块数据盘容量" +
                  item.disk_cap +
                  "GB；"
                }}</span
              >
            </p>
          </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">内存：</span>
            <p class="params_block_item_val">
              <span class="val_has_2"
                >最高&nbsp;{{ orderDetail.one_memory_max }}GB</span
              >
              <span class="val_has_2"
                >默认&nbsp;{{ orderDetail.one_memory_min }}GB</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>
      <div
        v-if="orderDetail.order_type != 3 && showApproval"
        class="detail_title"
      >
        审批信息
      </div>
      <process-card
        v-if="orderDetail.order_type != 3 && showApproval"
        :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: ["#fac266", "#fac266", "#fac266"],
    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: "",
          },
        ],
      },
    ],
    showApproval: false,
    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() {
      if (this.textarea == "" || this.serviceRate == null) {
        this.$message({
          message: "请先完善评价内容",
          type: "error",
        });
      } else {
        if (this.orderDetail.order_type == 1) {
          let query = {
            service_id: this.orderDetail.service_id,
            content: this.textarea,
            score: this.serviceRate,
            apply_id: this.orderDetail.apply_id,
          };
          this.$api.user.addServiceEvaluation(query).then((response) => {
            if (response.data.success == 1) {
              this.$message({
                message: "评价订单成功",
                type: "success",
              });
              this.visible = false;
              this.getOrderDetail();
            } else {
              this.$message({
                message: "评价订单失败",
                type: "error",
              });
            }
          });
        } else if (this.orderDetail.order_type == 2) {
          let query = {
            app_id: this.orderDetail.app_id,
            content: this.textarea,
            score: this.serviceRate,
            apply_id: this.orderDetail.apply_id,
          };
          this.$api.user.addAppEvaluation(query).then((response) => {
            if (response.data.success == 1) {
              this.$message({
                message: "评价订单成功",
                type: "success",
              });
              this.visible = false;
              this.getOrderDetail();
            } else {
              this.$message({
                message: "评价订单失败",
                type: "error",
              });
            }
          });
        }
      }
    },
    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 || [];
            if (data.length != 0) {
              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 {
              this.approval_arr1[0].result = "待审批";
              this.approval_arr1[0].arr = [];
              this.approval_arr1.splice(1);
            }
            this.showApproval = true;
            console.log(this.approval_arr1);
          } else {
            this.showApproval = false;
            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.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 == 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;
  border-right: 1px #ededed solid;
}

.detail_service_time_title {
  color: #8890a7;
}

.detail_service_money {
  text-align: center;
  height: 162px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.detail_service_money_title {
  color: #8890a7;
}
.adhekadwn {
  color: #8890a7;
  display: block;
  margin-top: 20px;
}

.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>
