<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">已获取</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">202004241502000001</p>
        </div>
        <div class="detail_head_cell detail_head_time">
          <p class="detail_head_cell_title">申请时间</p>
          <p class="detail_head_cell_val">2020-04-24 15:02:00</p>
        </div>
        <div class="btn_group">
          <el-popover placement="right-start" width="300" v-model="visible" trigger="click">
            <p>服务评价：</p>
            <div class="pop_rate">
              <el-rate
                v-model="serviceRate"
                :colors="colors"
                allow-half
                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 class="again" @click="goto('/user/order_list')">再次申请</el-button>
        </div>
      </div>
      <div class="detail_title">服务信息</div>
      <div class="detail_service">
        <el-row class="detail_service_row">
          <el-col :span="10" class="detail_service_msg">
            <img
              src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
              class="detail_service_msg_img"
            />
            <div class="detail_service_msg_right">
              <div class="detail_service_name">
                <span>水路货物周转量情况</span>
                <!-- <span v-if="cellItem.mapService" class="tags map_service">mapService</span>
                <span v-if="cellItem.state == 1" class="tags shared">共享</span>
                <span v-else-if="cellItem.state ==  2" class="tags restricted">受限</span>
                <span v-else class="tags sensitive">敏感</span>-->
              </div>
              <div class="detail_service_msg_other">
                <div class="detail_service_type">基础数据服务</div>
                <div class="detail_service_creator">贵州省交通运输厅</div>
              </div>
            </div>
          </el-col>
          <el-col :span="8" class="detail_service_specification">
            <div>
              <div>
                <span class="detail_service_specification_gg">规格：</span>
                <span class="detail_service_specification_val">访问次数：200/日，访问量：10000/日</span>
              </div>
              <div>
                <span class="detail_service_specification_type">申请方式：</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">5年</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="detail_s_title">应用场景：</div>
      <div
        class="detail_app_scence"
      >用于展示车辆位置，用于展示车辆位置，用于展示车辆位置，用于展示车辆位置，用于展示车辆位置，用于展示车辆位置，用于展示车辆位置，用于展示车辆位置，用于展示车辆位置。</div>
      <div class="detail_s_title">申请内容：</div>
      <table-um :headers="header_arr" url="min_service_params_arr"></table-um>
      <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/block-radius";
import ProcessCard from "@/components/process-card";
import TableUm from "@/components/table-um";
import InfoList from "@/components/infoList";
export default {
  components: {
    BlockRadius,
    ProcessCard,
    TableUm,
    InfoList
  },
  data: () => ({
    visible: false,
    colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    serviceRate: 0,
    textarea: "",
    approval_arr1: [
      {
        title: "一级审批",
        result: "审批通过",
        arr: [
          {
            title: "审批时间：",
            info: "2020-02-28 15:23:45"
          },
          {
            title: "审批单位：",
            info: "某某某城管局"
          },
          {
            title: "审批人：",
            info: "张先生"
          },
          {
            title: "审批意见：",
            info: "同意"
          }
        ]
      },
      {
        title: "二级审批",
        result: "审批通过",
        arr: [
          {
            title: "审批时间：",
            info: "2020-02-28 15:23:45"
          },
          {
            title: "审批单位：",
            info: "某某某城管局"
          },
          {
            title: "审批人：",
            info: "张先生"
          },
          {
            title: "审批意见：",
            info: "同意"
          }
        ]
      },
      {
        title: "三级审批",
        result: "审批未通过",
        arr: [
          {
            title: "审批时间：",
            info: "2020-02-28 15:23:45"
          },
          {
            title: "审批单位：",
            info: "某某某城管局"
          },
          {
            title: "审批人：",
            info: "张先生"
          },
          {
            title: "审批意见：",
            info: "不同意，驳回。"
          }
        ]
      }
    ],
    header_arr: [
      {
        prop: "wfwmc",
        label: "微服务名称",
        minWidth: "20%",
        align: "left"
      },
      {
        prop: "jkzt",
        label: "健康状态",
        width: "120px",
        align: "center"
      },
      {
        prop: "jklj",
        label: "接口链接",
        minWidth: "40%",
        align: "center"
      },
      {
        prop: "wfwms",
        label: "微服务描述",
        minWidth: "40%",
        align: "left"
      }
    ],
    list_arr: [
      
      {
        title: "申请人：",
        info: "李子维"
      },
      {
        title: "联系方式：",
        info: "18342803360"
      },
      {
        title: "申请单位：",
        info: "北京比格大数据有限公司"
      },
      {
        title: "申请文件：",
        info: "xxxx文件名称.txt",
        url: "www.baidu.com",
        type: "down"
      },
    ]
  }),
  mounted() {},
  methods: {
    addEvaluation() {
      console.log(this.serviceRate, this.textarea);
      this.visible = false;
    },
    download() {}
  }
};
</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: 180px;
}
.detail_head_no {
  width: 240px;
}
.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_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;
}
</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>