 <template>
  <div class="order_cell">
    <div class="order_cell_head">
      <div class="application_time">申请时间：{{ cellItem.applicationTime }}</div>
      <div class="order_number">订单编号：{{ cellItem.orderNumber }}</div>
      <div class="cell_del_btn">删除</div>
    </div>
    <el-row class="cell_row">
      <el-col :span="10" class="cell_msg">
        <img
          src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
          class="cell_msg_img"
        />
        <div class="cell_msg_right">
          <div class="cell_name">
            <span>{{ cellItem.name }}</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="cell_msg_other">
            <div class="cell_type">{{ cellItem.type }}</div>
            <div class="cell_creator">{{ cellItem.creator }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="cell_specification">
        <div>
          <div>规格：访问次数：200/日，访问量：10000/日</div>
          <div class="cell_specification_type">申请方式：按月</div>
        </div>
      </el-col>
      <el-col :span="4" class="approval_status">
        <div>
          <div>已获取</div>
          <el-popover
            v-if="cellItem.getStatus == 1"
            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: 4, 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>
            <div class="approval_status_btn" slot="reference">服务评价</div>
          </el-popover>
          <div
            v-else-if="cellItem.getStatus == 2 && !showMsgBox"
            class="approval_status_btn"
            @click="showMsgBox = true"
          >查看评价</div>
          <div
            v-else-if="cellItem.getStatus == 2 && showMsgBox"
            class="approval_status_btn"
            @click="showMsgBox = false"
          >收起评价</div>
        </div>
      </el-col>
      <el-col :span="4" class="cell_option">
        <div>
          <el-button size="madium" class="cell_option_btn">查看详情</el-button>
          <div class="cell_option_spec">再次申请</div>
        </div>
      </el-col>
      <el-collapse-transition>
        <el-col v-if="showMsgBox" :span="24" class="evaluation_msg">
          <div class="msg_title">服务评分：</div>
          <div class="msg_rate">
            <el-rate
              v-model="cellItem.evaluationRate"
              disabled
              show-score
              text-color="#ff9900"
              score-template="{value}"
            ></el-rate>
          </div>
          <div class="msg_title">评价详情：</div>
          <div class="msg_text">{{ cellItem.evaluationText }}</div>
        </el-col>
      </el-collapse-transition>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    cellItem: {
      type: Object,
      default: () => {
        {
        }
      }
    }
  },
  data: () => ({
    visible: false,
    colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    serviceRate: 0,
    textarea: "",
    showMsgBox: false
  }),
  methods: {
    addEvaluation() {
      console.log(this.serviceRate, this.textarea);
      this.visible = false;
    }
  }
};
</script>

<style scoped>
.order_cell {
  border: solid 1px #ededed;
  border-radius: 8px;
  margin-bottom: 20px;
}
.order_cell_head {
  height: 48px;
  background-color: #e5f0ff;
  font-size: 14px;
  color: #242c43;
  line-height: 48px;
  border-radius: 8px 8px 0 0;
}
.application_time {
  display: inline-block;
  margin-left: 40px;
}
.order_number {
  display: inline-block;
  margin-left: 60px;
}
.cell_del_btn {
  color: #8390ee;
  display: flex;
  float: right;
  margin-right: 40px;
}
.cell_row {
}
.cell_msg {
  height: 162px;
  padding: 20px 10px 20px 20px;
  display: flex;
  justify-content: space-between;
  border-right: 1px #ededed solid;
}
.cell_msg_img {
  width: 118px;
  height: 118px;
  border-radius: 8px;
}
.cell_msg_right {
  width: calc(100% - 140px);
  margin: 0 0 0 10px;
  position: relative;
}
.cell_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;
}
.cell_msg_other {
  position: absolute;
  bottom: 2px;
}
.cell_type {
  color: #8890a7;
  font-size: 14px;
  line-height: 22px;
}
.cell_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;
}
.cell_specification {
  height: 162px;
  color: #8890a7;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 30px;
  padding: 22px 20px;
  border-right: 1px #ededed solid;
}
.cell_specification_type {
  margin-top: 15px;
}
.approval_status {
  height: 162px;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #8890a7;
  border-right: 1px #ededed solid;
}
.approval_status_btn {
  margin-top: 15px;
  cursor: pointer;
  color: #626de9;
}
.cell_option {
  height: 162px;
  padding: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cell_option_btn {
  background-color: #5362ee;
  color: #f4f7fc;
}
.cell_option_spec {
  margin-top: 15px;
}
.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;
}
.evaluation_msg {
  height: 100%;
  border-top: 1px #ededed solid;
  padding: 20px;
}
.msg_title {
  color: #8890a7;
  margin: 0 0 10px;
}
.msg_rate {
  margin: 0 0 10px 20px;
}
.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>