 <template>
  <div class="order_cell">
    <div class="order_cell_head">
      <div class="application_time">
        申请时间：{{ helper.dateStringTransform(cellItem.add_time) }}
      </div>
      <div class="order_number">订单编号：{{ cellItem.order_id }}</div>
      <div
        v-if="
          cellItem.approval_first_level == -1 ||
          cellItem.approval_second_level != 0 ||
          cellItem.pay_status == -1
        "
        class="cell_del_btn"
        @click="delOrder(cellItem.order_id)"
      >
        删除
      </div>
    </div>
    <el-row class="cell_row">
      <el-col :span="7" class="cell_msg">
        <img
          v-if="cellItem.order_type != 3"
          :src="cellItem.cover"
          class="cell_msg_img"
        />
        <img
          v-else
          :src="require('@/assets/imgs/img_yunziyuan.png')"
          class="cell_msg_img"
        />
        <div class="cell_msg_right">
          <div v-if="cellItem.order_type != 3" class="cell_name">
            <span>{{ cellItem.name }}</span>
            <span v-if="cellItem.mapService" class="tags map_service"
              >mapService</span
            >
            <span v-if="cellItem.openness == 1" class="tags shared">共享</span>
            <span v-else-if="cellItem.openness == 2" class="tags restricted"
              >受限</span
            >
            <span v-else-if="cellItem.openness == 3" class="tags sensitive"
              >敏感</span
            >
          </div>
          <div v-else class="cell_name">
            <span>云资源申请</span>
          </div>
          <div class="cell_msg_other">
            <div class="cell_type">
              {{
                cellItem.order_type == 1
                  ? cellItem.sector
                  : cellItem.order_type == 2
                  ? cellItem.app_type
                  : cellItem.namespace
              }}
            </div>
            <div v-if="cellItem.order_type != 3" class="cell_creator">
              {{ cellItem.src_organization }}
            </div>
            <div v-else class="cell_creator">
              {{
                cellItem.apply_type == 0
                  ? "申请新的工作区域"
                  : "升级现有工作区域"
              }}
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="cell_specification">
        <div v-if="cellItem.order_type == 1">
          <div>
            {{ cellItem.spec_type == 1 ? "计次收费" : "时长收费" }}：
            {{ cellItem.single_money }}金币/
            {{ cellItem.spec_type == 1 ? cellItem.spec_count + "次" : "月" }}
          </div>
        </div>
        <div v-else-if="cellItem.order_type == 2">
          <div>
            {{
              cellItem.spec_app == 0
                ? "申请获取应用镜像部署权限：" +
                  cellItem.single_money +
                  "金币/月"
                : "申请获取应用镜像开发权限：" +
                  cellItem.single_money +
                  "金币/月"
            }}
          </div>
        </div>
        <div v-else-if="cellItem.order_type == 3">
          <el-tooltip
            v-if="cellItem.apply_type == 0"
            class="item"
            effect="dark"
            placement="right"
          >
            <div slot="content" class="gg">
              CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组
              {{ cellItem.containers }}个；
              <br />
              数据盘 {{ cellItem.disk_num }}块，每块数据盘容量
              {{ cellItem.disk_cap }}GB；
            </div>
            <div class="specification_item">
              CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组
              {{ cellItem.containers }}个；
              <span v-if="cellItem.disk_num != 0"
                >数据盘 {{ cellItem.disk_num }}块，每块数据盘容量
                {{ cellItem.disk_cap }}GB；</span
              >
            </div>
          </el-tooltip>
          <el-tooltip v-else class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组
              {{ cellItem.containers }}个；
              <span
                class="gg_span"
                v-for="(item, index) in cellItem.adjust_disk"
                :key="'sjj' + index"
                >数据盘 {{ item.disk_num }}块，每块数据盘容量
                {{ item.disk_cap }}GB；</span
              >
            </div>
            <div class="specification_item">
              CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组
              {{ cellItem.containers }}个；
              <span>{{ thisDisks }}</span>
            </div>
          </el-tooltip>
          <div class="cell_specification_type">
            单个容器组：CPU最高 {{ cellItem.one_cpu_max }}核，默认
            {{ cellItem.one_cpu_min }}核；内存最高
            {{ cellItem.one_memory_max }}GB，默认
            {{ cellItem.one_memory_min }}GB；
          </div>
        </div>
      </el-col>
      <el-col :span="3" class="cell_specification">
        <div>
          {{
            cellItem.duration != 0 && cellItem.duration_unit == 1
              ? cellItem.duration + "个月"
              : cellItem.duration != 0 && cellItem.duration_unit == 2
              ? cellItem.duration + "年"
              : "不限时长"
          }}
        </div>
      </el-col>
      <el-col :span="3" class="cell_specification">
        <div>{{ cellItem.total_money }}金币</div>
      </el-col>
      <el-col :span="3" class="approval_status">
        <div>
          <div
            v-if="
              cellItem.approval_first_level == 0 && cellItem.pay_status != -1
            "
          >
            待审核
          </div>
          <div
            v-else-if="
              cellItem.approval_first_level == 1 &&
              cellItem.approval_second_level == 0 &&
              cellItem.pay_status != -1
            "
          >
            审核中
          </div>
          <div
            v-else-if="
              cellItem.approval_first_level == 1 &&
              cellItem.approval_second_level == 1 &&
              cellItem.pay_status != -1
            "
          >
            审核通过
          </div>
          <div
            v-else-if="
              (cellItem.approval_first_level == -1 ||
                cellItem.approval_second_level == -1) &&
              cellItem.pay_status != -1
            "
          >
            审核未通过
          </div>
          <div v-else-if="cellItem.pay_status == -1">订单已取消</div>
          <el-popover
            v-if="
              cellItem.approval_second_level == 1 &&
              cellItem.pay_status != -1 &&
              cellItem.is_estimated == 0
            "
            placement="left-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>
            <div class="approval_status_btn" slot="reference">服务评价</div>
          </el-popover>
          <div
            v-else-if="
              cellItem.order_type != 3 &&
              cellItem.approval_second_level == 1 &&
              cellItem.pay_status != -1 &&
              cellItem.is_estimated == 1 &&
              !showMsgBox
            "
            class="approval_status_btn"
            @click="getMessage"
          >
            查看评价
          </div>
          <div
            v-else-if="
              cellItem.order_type != 3 &&
              cellItem.approval_second_level == 1 &&
              cellItem.pay_status != -1 &&
              cellItem.is_estimated == 1 &&
              showMsgBox
            "
            class="approval_status_btn"
            @click="showMsgBox = false"
          >
            收起评价
          </div>
        </div>
      </el-col>
      <el-col :span="3" class="cell_option">
        <div>
          <el-button
            size="madium"
            class="cell_option_btn"
            @click="viewDetail(cellItem.order_id)"
            >查看详情</el-button
          >
          <div
            v-if="
              (cellItem.approval_second_level == 1 &&
                cellItem.pay_status != -1) ||
              cellItem.pay_status == -1
            "
            class="cell_option_spec"
            @click="nextApply"
          >
            再次申请
          </div>
          <div
            v-if="
              (cellItem.approval_first_level == 0 &&
                cellItem.pay_status != -1) ||
              (cellItem.approval_first_level == 1 &&
                cellItem.approval_second_level == 0 &&
                cellItem.pay_status != -1)
            "
            class="cell_option_spec"
            @click="cancelDetail"
          >
            取消申请
          </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="message.score"
              disabled
              :colors="colors"
            ></el-rate>
          </div>
          <div class="msg_title">评价详情：</div>
          <div class="msg_text">{{ message.content }}</div>
        </el-col>
      </el-collapse-transition>
    </el-row>
  </div>
</template>

<script>
import helper from "@/services/helper";
export default {
  props: {
    cellItem: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  data: () => ({
    visible: false,
    colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
    serviceRate: null,
    textarea: "",
    showMsgBox: false,
    helper: helper,
    message: {},
  }),
  watch: {
    cellItem: {
      handler() {
        this.showMsgBox = false;
      },
    },
  },
  computed: {
    thisDisks() {
      let strings = "";
      if (this.cellItem.adjust_disk) {
        this.cellItem.adjust_disk.forEach((item) => {
          strings += `数据盘 ${item.disk_num}块，每块数据盘容量 ${item.disk_cap}GB；`;
        });
      }
      return strings;
    },
  },
  methods: {
    addEvaluation() {
      if (this.textarea == "" && this.serviceRate == null) {
        this.$message({
          message: "请先完善评价内容",
          type: "error",
        });
      } else {
        if (this.cellItem.order_type == 1) {
          let query = {
            service_id: this.cellItem.service_id,
            content: this.textarea,
            score: this.serviceRate,
            apply_id: this.cellItem.apply_id,
          };
          this.$api.user.addServiceEvaluation(query).then((response) => {
            if (response.data.success == 1) {
              this.$message({
                message: "评价订单成功",
                type: "success",
              });
              this.visible = false;
              this.$emit("updateList");
            } else {
              this.$message({
                message: "评价订单失败",
                type: "error",
              });
            }
          });
        } else if (this.cellItem.order_type == 2) {
          let query = {
            app: this.cellItem.app_id,
            content: this.textarea,
            score: this.serviceRate,
            apply_id: this.cellItem.apply_id,
          };
          this.$api.user.addServiceEvaluation(query).then((response) => {
            if (response.data.success == 1) {
              this.$message({
                message: "评价订单成功",
                type: "success",
              });
              this.visible = false;
              this.$emit("updateList");
            } else {
              this.$message({
                message: "评价订单失败",
                type: "error",
              });
            }
          });
        }
      }
    },
    viewDetail(val) {
      this.$router.push("/user/order_list/detail/" + val);
    },
    delOrder() {
      this.$api.user
        .delOrder({ id: this.cellItem.order_id })
        .then((response) => {
          if (response.data.success == 1) {
            this.$message({
              message: "删除订单成功",
              type: "success",
            });
            this.$emit("updateList");
          } else {
            this.$message({
              message: "删除订单失败",
              type: "error",
            });
          }
        });
    },
    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,
        };
        this.$router.push({
          path: "/shop/shop_car_apply",
          query: query,
        });
      } 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,
        });
      } else if (this.cellItem.order_type == 3) {
        this.$router.push({
          path: "/shop/cloud",
        });
      }
    },
    getMessage() {
      if (this.cellItem.order_type == 1) {
        this.$api.user
          .getServiceEvaluation({ apply_id: this.cellItem.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.cellItem.order_type == 2) {
        this.$api.user
          .getAppEvaluation({ apply_id: this.cellItem.apply_id })
          .then((response) => {
            if (response.data.success == 1) {
              this.message = response.data.data;
              this.showMsgBox = true;
            } else {
              this.$message({
                message: "获取评价失败",
                type: "error",
              });
            }
          });
      }
    },
    cancelDetail() {
      this.$api.user
        .cancelOrder({ order_id: this.cellItem.order_id })
        .then((response) => {
          if (response.data.success == 1) {
            this.$message({
              message: "取消订单成功",
              type: "success",
            });
            this.$emit("updateList");
          } else {
            this.$message({
              message: "取消订单失败",
              type: "error",
            });
          }
        });
    },
  },
};
</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;
  cursor: pointer;
}
.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;
  border: 3px #f4f7fc solid;
}
.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;
  cursor: pointer;
}
.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 20px 0;
}
.msg_text {
  /* margin-left: 20px; */
  color: #242c43;
}
.specification_item {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gg {
  /* max-width: 200px; */
  word-wrap: break-word;
}
.gg_span {
  display: block;
}
</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>