<template>
  <div class="appealBox">
    <div class="top">
      <Head :headText="headText"></Head>
    </div>
    <div class="bottom">
      <div class="appealContainer">
        <div class="appeal-left">
          <div class="appeal-left-top">
            <span class="appeal-left-top-span Micbold">待审核</span>
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in appealOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="appeal-left-box">
            <p class="date MicrYaHei">{{'--'}}</p>
            <div
              class="appeal-left-div"
              v-for="(item,index) in auditArr"
              :key="index"
              @click="appealClick(item,index)"
              :class="{border:index==isactive}"
            >
              <div class="time">
                <span>{{item.pushTime?formatter(item.pushTime):'--'}} {{item.title||'--'}}</span>
                <span>
                  <img src="../../assets/tp.png" alt />
                  {{item.pics.length}}
                </span>
              </div>
              <div class="content">
                <span>申请人：{{'--'}}</span>
                <span>申请时间：{{item.updateTime?formatter1(item.updateTime):'--'}}</span>
                <span>申请原因：{{item.reasonType||'--'}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="appeal-right">
          <div class="title Micbold">未执行申诉单</div>
          <div class="detailContainer">
            <div class="nav MicrYaHei">
              <span>项目名称：{{'--'}}</span>
              <span>申请人：{{auditObj.applyUser||'--'}}</span>
              <span>申请时间：{{auditObj.updateTime?formatter1(auditObj.updateTime):'--'}}</span>
            </div>
            <div class="cont1 MicrYaHei">申诉未执行指令：{{auditObj.title||'--'}}</div>
            <div class="cont2">
              <audit-table :tableList="tableList"></audit-table>
            </div>
            <div class="cont3">
              <span class="Micbold">策略评价</span>
              <span class="MicrYaHei">{{auditObj.judgement||'--'}}</span>
            </div>
            <div class="cont4">
              <span class="Micbold">申请原因</span>
              <span>
                <el-select size="mini" v-model="auditObj.reasonType" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </span>
              <span>
                <textarea placeholder="填写申请原因" v-model="auditObj.reason"></textarea>
              </span>
            </div>
            <div>
              <upload-img :souseArr="auditObj.pics || []"></upload-img>
            </div>
          </div>
          <div class="opinion">
            <span class="opinion-title Micbold">审批意见</span>
            <div class="opinion-bottom MicrYaHei">
              <input type="text" v-model="comment" />
              <span @click="approvalOpinion(auditObj,'reject')">不同意</span>
              <span @click="approvalOpinion(auditObj,'approve')">同意</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Head from "../main/index";
import AuditTable from "./auditTable";
import uploadImg from "../../components/uploadImg";
import { queryWorkflow, queryChillerExecuteInfo } from "@/api/appeal/appeal.js";
import { updateWorkflow } from "@/api/audit/audit.js";
import { querySimpleInfo } from "@/api/appeal/appeal.js";

var moment = require("moment");
import "moment/locale/zh-cn";

export default {
  data() {
    return {
      headText: "申诉审核",
      isactive: 0, //默认第一个
      appealOptions: [
        {
          value: "0",
          label: "按未执行策略的时间"
        }
      ],
      resonOptions: [
        {
          value: "1",
          label: "策略原因"
        }
      ],
      resonValue: "1",
      options: [
        {
          value: "0",
          label: "策略原因"
        },
        {
          value: "1",
          label: "设备原因"
        },
        {
          value: "2",
          label: "其他"
        }
      ],
      auditArr: [],
      auditObj: {},
      value: "0",
      comment: "",
      souseArr: [],
      tableList: []
    };
  },
  components: {
    Head,
    AuditTable,
    uploadImg
  },
  mounted() {
    this.query();
  },
  methods: {
    quertName(id) {
      querySimpleInfo(id, {}).then(res => {
        this.auditObj.applyUser = res.realname;
      });
    },
    approvalOpinion(item, type) {
      let params = {
        postParams: {
          id: item.id,
          commit: type,
          comment: this.comment,
          roles: [1002],
          updateUser: "594e95e50abc4b6c9bdda985d313c1b9"
        }
      };
      updateWorkflow(params).then(res => {
        if (res.result == "success") {
          this.$message.success("操作成功");
        } else {
          this.$message.error("操作失败: " + res.message);
        }
        this.query();
      });
    },
    formatter(date) {
      return moment.unix(date / 1000).format("YYYY.MM.DD hh:mm");
    },
    formatter1(date) {
      return moment.unix(date / 1000).format("YYYY.MM.DD");
    },
    appealClick(item, index) {
      this.auditObj = item;
      this.quertName(item.applyUser);
      this.isactive = index;
      let params = {
        postParams: {
          criteria: {
            id: item.commandId
          }
        }
      };
      queryChillerExecuteInfo(params).then(res => {
        const list = res.data || [{}, {}, {}]
        this.tableList = Object.values(list[0]).map(i => i || {})
        this.tableList[0].title = '当前运行状态'
        this.tableList[1].title = '推送策略'
        this.tableList[2].title = '执行策略'
      });
    },
    query() {
      let params = {
        postParams: {
          criteria: {
            projectId: this.$store.state.projectId,
            trackerId: 3,
            status: 302
          },
          withColumns: ["customAttribute"]
        }
      };
      queryWorkflow(params).then(res => {
        this.auditArr = res.content ? res.content : [];
        if (this.auditArr.length > 0) {
          this.auditObj = this.auditArr[0];
          this.quertName(this.auditObj.applyUser);
          this.appealClick(this.auditObj,0)
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.appealBox {
  height: 100%;
  display: flex;
  .top {
    height: 100px;
  }
  .bottom {
    flex: 1;
    .appealContainer {
      height: 100%;
      display: flex;
      background: rgba(247, 249, 250, 1);
      border-top: 1px solid #e4e5e7;
      margin-top: 5px;
      .appeal-left {
        // flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        max-width: 460px;
        min-width: 350px;
        padding-left: 24px;
        .appeal-left-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;
          padding-top: 112px;
          .appeal-left-top-span {
            height: 24px;
            font-size: 16px;
            color: rgba(31, 36, 41, 1);
            line-height: 21px;
          }
        }
        .appeal-left-box {
          flex: 1;
          overflow: scroll;
          margin-bottom: 24px;
          .date {
            height: 18px;
            font-size: 12px;
            color: rgba(141, 147, 153, 1);
            line-height: 16px;
            text-align: center;
          }

          .appeal-left-div {
            margin-bottom: 8px;
            padding: 16px 20px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            border: 1px solid rgba(228, 230, 231, 1);
            .time {
              display: flex;
              justify-content: space-between;
              margin-bottom: 12px;
              span:nth-of-type(1) {
                height: 24px;
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(31, 36, 41, 1);
                line-height: 22px;
              }
              span:nth-of-type(2) {
                display: flex;
                align-items: center;
                height: 22px;
                font-size: 14px;
                font-family: ArialMT;
                color: rgba(31, 36, 41, 1);
                line-height: 16px;
                img {
                  width: 16px;
                  height: 16px;
                  margin-right: 6px;
                }
              }
              .content {
                span {
                  display: block;
                  height: 22px;
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: rgba(100, 108, 115, 1);
                  line-height: 20px;
                }
                span:nth-of-type(2) {
                  margin: 4px 0;
                }
              }
            }
          }
          .border {
            border: 1px solid rgba(0, 145, 255, 1);
          }
        }
      }
      .appeal-right {
        flex: 1;
        margin-left: 28px;
        height: 100%;
        display: flex;
        flex-direction: column;
        background: #fff;
        .title {
          height: 32px;
          font-size: 24px;
          color: rgba(31, 36, 41, 1);
          line-height: 32px;
          padding-top: 148px;
          text-align: center;
        }
        .detailContainer {
          flex: 1;
          overflow: scroll;
          min-width: 762px;
          padding: 0 100px;
          margin: 0 auto;
          padding-bottom: 24px;
          background: rgba(255, 255, 255, 1);
          margin-bottom: 100px;

          .nav {
            display: flex;
            justify-content: space-between;
            margin-top: 40px;
            margin-bottom: 12px;
            span {
              height: 22px;
              font-size: 14px;
              color: rgba(31, 36, 41, 1);
              line-height: 19px;
            }
          }
          .cont1 {
            height: 22px;
            font-size: 14px;
            color: rgba(31, 36, 41, 1);
            line-height: 19px;
            margin-bottom: 16px;
          }
          .cont2 {
            margin-bottom: 24px;
            height: 180px;
          }
          .cont3 {
            margin-bottom: 24px;
            span {
              display: block;
            }
            span:nth-of-type(1) {
              height: 24px;
              font-size: 16px;
              color: rgba(31, 36, 41, 1);
              line-height: 21px;
              margin-bottom: 8px;
            }
            span:nth-of-type(2) {
              height: 22px;
              font-size: 14px;
              color: rgba(100, 108, 115, 1);
              line-height: 19px;
            }
          }
          .cont4 {
            margin-bottom: 8px;
            span {
              display: block;
            }
            span:nth-of-type(1) {
              height: 24px;
              font-size: 16px;
              color: rgba(31, 36, 41, 1);
              line-height: 21px;
            }
            span:nth-of-type(2) {
              margin: 8px 0;
            }
            span:nth-of-type(3) {
              textarea {
                width: 762px;
                height: 64px;
                border-radius: 4px;
                border: 1px solid rgba(195, 199, 203, 1);
                color: rgba(195, 199, 203, 1);
              }
            }
          }
        }
        .opinion {
          box-sizing: border-box;
          background: rgba(247, 249, 250, 1);
          box-shadow: 0px -1px 8px 0px rgba(0, 0, 0, 0.08);
          position: absolute;
          bottom: 0px;
          padding: 16px 32px;
          .opinion-title {
            height: 24px;
            font-size: 16px;
            color: rgba(31, 36, 41, 1);
            line-height: 21px;
            margin-bottom: 8px;
            display: block;
          }
          .opinion-bottom {
            display: flex;
            align-items: center;
            input {
              width: 697px;
              height: 32px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(195, 199, 203, 1);
              margin-right: 32px;
            }
            span {
              display: inline-block;
              width: 80px;
              height: 32px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(195, 199, 203, 1);
              font-size: 14px;
              color: rgba(31, 35, 41, 1);
              line-height: 32px;
              text-align: center;
              cursor: pointer;
            }
            span:nth-of-type(1) {
              margin-right: 12px;
            }
          }
        }
      }
    }
  }
}
</style>