<template>
  <div>
    <Head :headText="headText"></Head>
    <div class="appealBox">
      <div class="left">
        <div class="title">
          <span>可申诉的未执行策略</span>
          <span>{{data.length}}</span>
        </div>
        <div class="execute" v-for="(item,index) in data" :key="index" @click="menu">
          <p class="date">{{item.date}}</p>
          <div class="card-box">
            <div class="card" v-for="(item2,index) in item.info" :key="index+'i'">
              <div class="time">执行时间：{{item2.time}}</div>
              <div class="advice">
                <span>策略建议</span>
                <span>冷机台数</span>
                <span>{{item2.ad1}}大{{item2.ad2}}小</span>
                <span>冷机出水温度</span>
                <span>{{item2.temp1}}°C</span>
              </div>
              <div class="advice">
                <span>实际执行</span>
                <span>冷机台数</span>
                <span>{{item2.re1}}大{{item2.re2}}小</span>
                <span>冷机出水温度</span>
                <span>{{item2.temp2}}°C</span>
              </div>
              <div class="remark">备注：{{item2.remark}}</div>
              <div class="btn">
                <el-button size="mini">查看快照</el-button>
                <el-button size="mini" type="primary">申诉</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="title">
          <span>审核中</span>
          <span>{{review.length}}</span>
        </div>
        <div class="card" v-for="(item,index) in review" :key="index" @click="menu">
          <div class="time">
            {{item.date}} {{item.title}}
            <span class="backout">
              <img src="../../assets/backout.png" />撤销申请
            </span>
          </div>
          <div class="remark">申请原因：{{item.reason}}</div>
          <div class="remark">{{item.advice}}</div>
        </div>
      </div>
      <div class="right">
        <div class="title">审核完成/超时未申诉</div>
        <div class="card" v-for="(item,index) in complete" :key="index" @click="menu">
          <div class="remark">
            <div class="remark-left">审批时间：{{item.time}}</div>
            <div class="remark-right">
              <span :class="item.sign>5?'backout':(item.sign>2?'backout1':'backout2')">
                <img :src="item.img" />
                {{item.text}}
              </span>
            </div>
          </div>
          <div class="time">
            <span>{{item.time}}</span>
            <span>{{item.date}}</span>
            <span>{{item.title}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Head from "../main/index";
import {
  queryAppeals,
  queryAuditCompleted,
  queryInAudit
} from "@/api/appeal/appeal.js";

export default {
  data() {
    return {
      headText: "申诉",
      appealsArr: [],
      InAuditArr: [],
      auditCompletedArr: [],
      data: [
        {
          date: "20202.01.13",
          info: [
            {
              time: "08:30",
              ad1: 1,
              ad2: 1,
              temp1: "8.0",
              re1: 1,
              re2: 0,
              temp2: "10.0",
              remark: "冷水温度过高，没有及时按策略执行"
            },
            {
              time: "08:30",
              ad1: 1,
              ad2: 1,
              temp1: "8.0",
              re1: 1,
              re2: 0,
              temp2: "10.0",
              remark: "冷水温度过高，没有及时按策略执行"
            },
            {
              time: "08:30",
              ad1: 1,
              ad2: 1,
              temp1: "8.0",
              re1: 1,
              re2: 0,
              temp2: "10.0",
              remark: "冷水温度过高，没有及时按策略执行"
            }
          ]
        },
        {
          date: "20202.01.13",
          info: [
            {
              time: "08:30",
              ad1: 1,
              ad2: 1,
              temp1: "8.0",
              re1: 1,
              re2: 0,
              temp2: "10.0",
              remark: "冷水温度过高，没有及时按策略执行"
            },
            {
              time: "08:30",
              ad1: 1,
              ad2: 1,
              temp1: "8.0",
              re1: 1,
              re2: 0,
              temp2: "10.0",
              remark: "冷水温度过高，没有及时按策略执行"
            }
          ]
        }
      ],
      review: [
        {
          date: "2020.02.12 08:30",
          title: "策略未执行申诉",
          reason: "策略原因",
          advice: "冷水温度过高，没有及时按策略执行"
        },
        {
          date: "2020.02.12 08:30",
          title: "策略未执行申诉",
          reason: "策略原因",
          advice: "冷水温度过高，没有及时按策略执行"
        }
      ],
      complete: [
        {
          date: "08:30",
          title: "策略未执行申诉",
          time: "2020.01.30",
          sign: 7,
          img: require("../../assets/completed.png"),
          text: "申诉成功"
        },
        {
          date: "08:30",
          title: "策略未执行申诉",
          time: "2020.01.30",
          sign: 5,
          img: require("../../assets/gray.png"),
          text: "未申诉"
        },
        {
          date: "08:30",
          title: "策略未执行申诉",
          time: "2020.01.30",
          sign: 2,
          img: require("../../assets/error.png"),
          text: "申诉失败"
        }
      ]
    };
  },
  components: {
    Head
  },
  mounted() {
    this.init();
  },
  methods: {
    menu() {
      this.$router.push("/appeal/appealDetail");
    },
    init() {
      this.appealsIng();
      this.auditCompletedIng();
      this.InAuditIng();
    },
    appealsIng() {
      let params = {
        postParams: {
          criteria: {
            projectId: "Pj4419000005",
            date: {
              $gte: "20200216"
            },
            isExecuted: false,
            appealStatus: [1, 5]
          }
        }
      };

      queryAppeals(params).then(res => {
        this.appealsArr = res.content ? res.content : [];
      });
    },
    auditCompletedIng() {
      this.appealsArr = [];
      let params = {
        postParams: {
          criteria: {
            projectId: "Pj4419000005",
            date: {
              $gte: "20200216"
            },
            isExecuted: false,
            appealStatus: [3, 4, 6]
          }
        }
      };
      queryAuditCompleted(params).then(res => {
        this.auditCompletedArr = res.content ? res.content : [];
      });
    },
    InAuditIng() {
      let params = {
        postParams: {
          criteria: {
            projectId: "Pj1101080002",
            trackerId: 3,
            status: 301
          },
          withColumns: ["customAttribute"]
        }
      };
      queryInAudit(params).then(res => {
        this.InAuditArr = res.content ? res.content : [];
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.appealBox {
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 20px;
  .left {
    flex: 1;
    min-width: 420px;
    .title {
      display: flex;
      align-items: center;
      span:nth-of-type(1) {
        height: 24px;
        font-size: 16px;
        font-family: MicrosoftYaHeiSemibold;
        color: rgba(31, 36, 41, 1);
        line-height: 21px;
        margin-right: 8px;
      }
      span:nth-of-type(2) {
        width: 18px;
        height: 18px;
        background: rgba(245, 74, 69, 1);
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, 1);
        font-size: 12px;
        font-family: ArialMT;
        color: rgba(255, 255, 255, 1);
        line-height: 18px;
        text-align: center;
      }
    }
    .execute {
      .date {
        height: 18px;
        font-size: 12px;
        font-family: MicrosoftYaHei;
        color: rgba(141, 147, 153, 1);
        line-height: 16px;
        margin: 0;
        text-align: center;
      }
      .card-box {
        height: 500px;
        overflow: scroll;
        margin-bottom: 24px;
        .card {
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          border: 1px solid rgba(228, 230, 231, 1);
          margin-top: 8px;
          padding: 16px 20px;
          cursor: pointer;
          .time {
            height: 24px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(31, 36, 41, 1);
            line-height: 22px;
            margin-bottom: 8px;
          }
          .advice {
            margin-top: 4px;
            height: 40px;
            background: rgba(245, 246, 247, 1);
            border-radius: 1px;
            display: flex;
            justify-content: space-between;
            padding-left: 16px;
            padding-right: 20px;
            align-items: center;
            span {
              font-family: MicrosoftYaHei;
            }
            span:nth-of-type(1),
            span:nth-of-type(3),
            span:nth-of-type(5) {
              height: 22px;
              font-size: 14px;
              color: rgba(31, 36, 41, 1);
            }
            span:nth-of-type(2),
            span:nth-of-type(4) {
              height: 18px;
              font-size: 12px;
              color: rgba(141, 147, 153, 1);
            }
            span:nth-of-type(1) {
              width: 56px;
              margin-right: 36px;
            }
            span:nth-of-type(2) {
              margin-right: 8px;
            }
            span:nth-of-type(3) {
              margin-right: 24px;
            }
            span:nth-of-type(4) {
              margin-right: 8px;
            }
          }
          .remark {
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(100, 108, 115, 1);
            line-height: 20px;
            margin-top: 16px;
            margin-bottom: 24px;
          }
          .btn {
            display: flex;
            justify-content: flex-end;
            .el-button {
              width: 80px;
              height: 28px;
            }
          }
        }
      }

      .card:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
      }
    }
  }
  .center {
    flex: 1;
    margin: 0 18px;
    min-width: 410px;

    .title {
      display: flex;
      margin-bottom: 16px;
      span:nth-of-type(1) {
        height: 24px;
        font-size: 16px;
        font-family: MicrosoftYaHeiSemibold;
        color: rgba(31, 36, 41, 1);
        line-height: 21px;
        margin-right: 8px;
      }
      span:nth-of-type(2) {
        text-align: center;
        line-height: 18px;
        width: 18px;
        height: 18px;
        background: rgba(245, 74, 69, 1);
        border-radius: 9px;
        border: 1px solid rgba(255, 255, 255, 1);
        font-size: 12px;
        font-family: ArialMT;
        color: rgba(255, 255, 255, 1);
      }
    }
    .card {
      margin-top: 8px;
      cursor: pointer;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(228, 230, 231, 1);
      padding: 16px 20px;

      .time {
        margin-bottom: 6px;
        height: 24px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(31, 36, 41, 1);
        line-height: 22px;
        .backout {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: MicrosoftYaHei;
          color: rgba(0, 145, 255, 1);
          float: right;
          margin-right: 20px;
          display: none;
          img {
            height: 15px;
            width: 18px;
          }
        }
      }
      .remark {
        margin-top: 4px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(100, 108, 115, 1);
        line-height: 20px;
      }
    }
    .card:hover {
      border: 1px solid rgba(0, 145, 255, 1);
    }
    .card:hover .backout {
      display: block;
    }
  }

  .right {
    flex: 1;
    min-width: 310px;
    .title {
      margin-bottom: 16px;
    }
    .card {
      margin-bottom: 8px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(228, 230, 231, 1);
      padding: 16px 20px;
      cursor: pointer;
      .remark {
        margin-bottom: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .remark-left {
          height: 22px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(100, 108, 115, 1);
          line-height: 20px;
        }
        .remark-right {
          height: 24px;
          height: 22px;
          font-size: 14px;
          font-family: MicrosoftYaHeiSemibold;
          line-height: 22px;

          img {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
          .backout {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 12px;
            padding-right: 14px;
            background: rgba(217, 245, 214, 1);
            color: rgba(52, 199, 36, 1);
            border-radius: 12px;
          }
          .backout1 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 12px;
            padding-right: 14px;
            background: rgba(239, 240, 241, 1);
            color: rgba(141, 147, 153, 1);
            border-radius: 12px;
          }
          .backout2 {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-left: 12px;
            padding-right: 14px;
            background: rgba(253, 227, 226, 1);
            color: rgba(245, 78, 69, 1);
            border-radius: 12px;
          }
        }
      }
      .time {
        padding: 8px 12px;
        background: rgba(248, 249, 250, 1);
        border-radius: 1px;
        height: 22px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(31, 36, 41, 1);
        line-height: 20px;
        span:nth-of-type(2) {
          margin-left: 10px;
          margin-right: 5px;
        }
      }
    }
  }
}
</style>