 <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="8" 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">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              规格：
              <br />
              日访问次数：{{cellItem.spec_svc_count}}次，日访问量：{{cellItem.spec_svc_pv }}
            </div>
            <div>规格：日访问次数：{{ cellItem.spec_svc_count }}次，日访问量：{{ cellItem.spec_svc_pv }}</div>
          </el-tooltip>
          <div
            class="cell_specification_type"
          >申请方式：{{ cellItem.duration_unit == 1 ? $t('lang.by_month') : $t('lang.by_year') }}</div>
        </div>
        <div v-else-if="cellItem.order_type == 2">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              规格：
              <br />
              {{ cellItem.spec_app == 0 ? '申请获取应用镜像部署权限' : '申请获取应用镜像开发权限' }}
            </div>
            <div>规格：{{ cellItem.spec_app == 0 ? "申请获取应用镜像部署权限" : "申请获取应用镜像开发权限" }}</div>
          </el-tooltip>
        </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">
              规格：
              <br />
              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">
              规格：
              <br />
              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 v-if="cellItem.order_type == 1">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              规格：
              <br />
              日访问次数：{{cellItem.spec_svc_count}}次，日访问量：{{cellItem.spec_svc_pv }}
            </div>
            <div>规格：日访问次数：{{ cellItem.spec_svc_count }}次，日访问量：{{ cellItem.spec_svc_pv }}</div>
          </el-tooltip>
          <div
            class="cell_specification_type"
          >申请方式：{{ cellItem.duration_unit == 1 ? $t('lang.by_month') : $t('lang.by_year') }}</div>
        </div>
        <div v-else-if="cellItem.order_type == 2">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              规格：
              <br />
              {{ cellItem.spec_app == 0 ? '申请获取应用镜像部署权限' : '申请获取应用镜像开发权限' }}
            </div>
            <div>规格：{{ cellItem.spec_app == 0 ? "申请获取应用镜像部署权限" : "申请获取应用镜像开发权限" }}</div>
          </el-tooltip>
        </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">
              规格：
              <br />
              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">
              规格：
              <br />
              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 v-if="cellItem.order_type == 1">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              规格：
              <br />
              日访问次数：{{cellItem.spec_svc_count}}次，日访问量：{{cellItem.spec_svc_pv }}
            </div>
            <div>规格：日访问次数：{{ cellItem.spec_svc_count }}次，日访问量：{{ cellItem.spec_svc_pv }}</div>
          </el-tooltip>
          <div
            class="cell_specification_type"
          >申请方式：{{ cellItem.duration_unit == 1 ? $t('lang.by_month') : $t('lang.by_year') }}</div>
        </div>
        <div v-else-if="cellItem.order_type == 2">
          <el-tooltip class="item" effect="dark" placement="right">
            <div slot="content" class="gg">
              规格：
              <br />
              {{ cellItem.spec_app == 0 ? '申请获取应用镜像部署权限' : '申请获取应用镜像开发权限' }}
            </div>
            <div>规格：{{ cellItem.spec_app == 0 ? "申请获取应用镜像部署权限" : "申请获取应用镜像开发权限" }}</div>
          </el-tooltip>
        </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">
              规格：
              <br />
              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">
              规格：
              <br />
              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="2" 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="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>
            <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>