<!--组卷审核信息-->
<style>
.backbill-Dialog .drawerTop {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  background-color: #f0f5fb;
  padding: 5px 10px;
  align-items: center;
}

.backbill-Dialog .classFirst {
  color: #000000;
  font-weight: bold;
}

.backbill-Dialog .className {
  margin-left: 10px;
}

.backbill-Dialog .classStatus {
  padding: 3px 8px;
  background-color: #c8d7fc;
  color: #2961fe;
  font-size: 12px;
  border-radius: 2px;
  margin-left: 20px;
}

.backbill-Dialog .normalName {
  color: #999999;
}

.backbill-Dialog .normalInner {
  color: #111111;
}

.drop_NameDown {
  margin-top: 20px;
  width: 300px;
}

.backinfoContent .replayReason {
  width: 100%;
  min-height: 100px;
  background-color: #f7f7f7;
  border-radius: 3px;
  padding: 20px;
  margin: 20px 0;
}

.backinfoContent .replay_Title {
  font-weight: 700;
  color: #111;
}

.backinfoContent .baseInfo_Item {
  margin-bottom: 20px;
}

.backinfoContent .EmpList {
  background-color: #f7f7f7;
  min-height: 70px;
  margin-right: 15px;
  border-radius: 3px;
  padding: 15px;
}

.backinfoContent .EmpList:last-child {
  margin-right: 0;
}

.backinfoContent .normalName {
  color: #999999;
  font-size: 12px;
}

.backinfoContent .normalInner {
  color: #111111;
  font-weight: bold;
  font-size: 13px;
  margin-top: 5px;
}

.changeBTable th {
  font-size: 12px;
  font-weight: 400;
  background-color: rgba(0, 0, 0, 0.12);
  height: 40px;
  line-height: 40px;
}

.changeBTable td {
  text-align: center;
  height: 30px;
}

.BillredClass {
  color: red;
}
._addUpload_box {
  display: block;
  margin-top: 15px;
}

._addUpload_box img {
  width: 100%;
}

._addUpload_box > div {
  float: left;
  width: 138px;
  height: 92px;
  border: 1px dashed rgba(210, 210, 210, 1);
  border-radius: 2px;
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px;
  margin-right: 10px;
  position: relative;
  text-align: center;
}

._addUpload_box > div:hover {
  background-color: #f5f5f5;
}

._addFile_name {
  padding-left: 15px;
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._addUpload_box .icon-guanbi1 {
  font-size: 12px;
  color: white;
  display: inline-block;
  margin-left: 15px;
  position: absolute;
  right: -6px;
  top: -9px;
  background-color: #f56c6c;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  text-align: center;
  line-height: 20px;
}

._addUpload_box .icon-guanbi1:hover {
  font-size: 12px;
  color: #c94052;
}

._addUpload_box .icon-excel,
._addUpload_box .icon-pdf,
._addUpload_box .icon-txt,
._addUpload_box .icon-wenjian,
._addUpload_box .icon-yasuobao,
._addUpload_box .icon-shipin,
._addUpload_box .icon-word {
  text-align: center;
  font-size: 38px;
  color: green;
  line-height: 75px;
}
._addUpload_box .icon-yasuobao {
  color: gray;
}

._show_img_box {
  position: fixed;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  text-align: center;
}

._addUpload_tips {
  font-size: 12px;
  color: #999999;
}

._jump_page {
  cursor: pointer;
  text-decoration: underline;
}

._jump_page:hover {
  color: #c94052;
}
.tougao_ImgList{
    width: 130px;
    height: 130px;
    margin: 0 5px 10px;
}

.tougaohtml td{
  padding: 5px 10px ;
  border:1px solid #DDD;
}
.tougaohtml table{
  border-collapse: collapse;
    
}
.left_width{
  width: 80px;
}

</style>
<template>
  <q-dialog
    v-model="persistent"
    maximized
    full-height
    seamless
    position="right"
    @hide="closeShenheForm"
  >
    <q-card
      style="margin-top: 61px; width: 850px"
      class="no-border-radius backbill-Dialog"
    >
      <div class="drawerTop">
        <div style="display: flex; align-items: center">
          <div class="className">
            <div class="classFirst">{{ changeTitle }}</div>
          </div>
        </div>
      </div>
      <q-tabs
        style="margin: 15px"
        v-model="tabCheck"
        narrow-indicator
        dense
        align="left"
        class="text-primary"
      >
        <q-tab :ripple="false" name="first" label="详细信息" />
        <q-tab :ripple="false" name="second" label="审批记录" />
      </q-tabs>
      <div v-if="tabCheck == 'first'" style="margin: 0 15px">
        <div class="backinfoContent">
          <div>
            <div class="topBaseInfo">
              <div class="backinfo_Item">
                <span class="role_Line"></span>基本信息
              </div>
              <div class="row backInfo_One">
                <div class="col-6">
                  <span class="backInfo_Title">编号:</span>
                  <span class="backOtherInfo" v-if="setingObj.DataObj">
                    {{ setingObj.DataObj.Id }}
                  </span>
                </div>
                <div class="col-6">
                  <span class="backInfo_Title">申请人:</span>
                  <span class="backOtherInfo">{{
                    setingObj.CreateByName
                  }}</span>
                </div>
              </div>
              <div class="row backInfo_One">
                <div class="col-12">
                  <span class="backInfo_Title">申请时间:</span>
                  <span class="backOtherInfo">{{ setingObj.CreateTime }}</span>
                </div>
              </div>
            </div>
            <div class="topBaseInfo">
              <div class="backinfo_Item">
                <span class="role_Line"></span>详细信息
              </div>
              <div class="backInfo_One">
                <template v-if="setingObj.DataObj.Type==1">
                    <div>
                        <el-tag>写新图文</el-tag>
                    </div>
                    <div style="margin:20px 0;display:flex;">
                        <div style="flex-shrink:0;"  class="left_width">标题：</div>
                        <div class="backOtherInfo" v-if="setingObj.DataObj">
                            {{ setingObj.DataObj.Title }}
                        </div>
                    </div>
                    <div style="display: flex;">
                        <div  class="left_width">作者：</div>
                        <span class="backOtherInfo" v-if="setingObj.DataObj">
                            {{ setingObj.DataObj.Author }}
                        </span>
                    </div>
                    <div style="display: flex;margin:20px 0;width: 100%;">
                      <div style="flex-shrink:0"  class="left_width">图文内容：</div>
                      <div class="tougaohtml" style="border:1px solid rgb(235, 235, 235);padding: 10px;flex:1" v-html="setingObj.DataObj.Content"></div>

                    </div>
                    <div style="margin-top:20px;display:flex;">
                        <div style="margin-bottom:10px;"  class="left_width">封面图：</div>
                        <div class="tougao_ImgList" style="width: 210px;height: 90px;">
                            <el-image v-if="setingObj.DataObj.CoverImagePath && setingObj.DataObj.CoverImagePath!=''" style="width: 100%; height: 100%" :src="setingObj.DataObj.CoverImagePath" fit="cover"></el-image>
                        </div>
                    </div>
                    <div style="margin-top:20px;display:flex;">
                        <div style="margin-bottom:10px;flex-shrink:0;width:60px;" class="left_width">描述：</div>
                        <div>{{setingObj.DataObj.Description}}</div>
                    </div>
                </template>
                <template v-if="setingObj.DataObj.Type==2">
                    <div>
                        <el-tag>文本消息</el-tag>
                    </div>
                    <div style="display: flex;margin-top: 20px;">
                      <div class="left_width">文本内容:</div>
                      <div  v-html="setingObj.DataObj.Content"></div>
                    </div>
                    
                </template>
                <template v-if="setingObj.DataObj.Type==4">
                    <div>
                        <el-tag>音频消息</el-tag>
                    </div>
                    <div style="margin:20px 0;display:flex;">
                        <div style="flex-shrink:0">标题：</div>
                        <div class="backOtherInfo" v-if="setingObj.DataObj">
                            {{ setingObj.DataObj.Title }}
                        </div>
                    </div>
                    <div style="display:flex;">
                      <div style="flex-shrink:0">推荐语：</div>
                      <div class="backOtherInfo" v-if="setingObj.DataObj">
                            {{ setingObj.DataObj.Description }}
                        </div>
                    </div>
                   
                    <div style="margin-top:20px;width:300px;" v-if="setingObj.DataObj.VideoMediumPath">
                        <audio :src="setingObj.DataObj.VideoMediumPath" controls="controls"></audio>
                    </div>
                </template>
                <template v-if="setingObj.DataObj.Type==5">
                    <div>
                        <el-tag>图片消息</el-tag>
                    </div>
                    <div style="margin:20px 0;display:flex;">
                        <div style="flex-shrink:0" class="left_width">推荐语：</div>
                        <div class="backOtherInfo" v-if="setingObj.DataObj" style="margin-left: 5px;">
                            {{ setingObj.DataObj.Description }}
                        </div>
                    </div>
                    <!-- <div style="margin:20px 0;">
                        {{setingObj.DataObj.Description}}
                    </div> -->
                    <div style="display: flex;">
                      <div style="flex-shrink:0" class="left_width">图片列表：</div>
                      <div style="display:flex;flex-wrap: wrap;">
                          <div class="tougao_ImgList" v-for="(x,y) in setingObj.DataObj.ImageList" :key='y'>
                              <el-image style="width: 100%; height: 100%" :src="x.ImageUrl" fit="cover"></el-image>
                          </div> 
                      </div>
                    </div>
                  
                   
                </template>
              </div>
            </div>
            <div v-if="showType == 2">
              <div
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-top: 20px;
                "
              >
                <div>审批意见</div>
                <div>
                  <q-radio
                    v-model="changeBillMsg.AuditStatus"
                    :val="2"
                    label="通过"
                  />
                  <q-radio
                    v-model="changeBillMsg.AuditStatus"
                    :val="3"
                    label="驳回"
                  />
                </div>
              </div>
              <q-input
                filled
                stack-label
                :dense="false"
                v-model="changeBillMsg.Description"
                type="textarea"
                label="审批意见"
              />
            </div>
            <div style="margin-top: 20px">
              <div class="row">
                <div class="col-6" style="display: flex; align-items: top">
                  <template v-if="tempPeople.length > 0">
                    <div style="display: inline-block; width: 45px">抄送:</div>

                    <div
                      style="
                        display: inline-block;
                        margin-left: 5px;
                        width: 340px;
                      "
                    >
                      <span
                        class="chaosong_Peo"
                        v-for="(childItem, cindex) in tempPeople"
                      >
                        {{ getName(childItem) }}
                      </span>
                    </div>
                  </template>
                </div>
                <div
                  class="col-6"
                  style="
                    justify-content: flex-end;
                    display: flex;
                    align-items: center;
                  "
                >
                  <i
                    class="iconfont icon-aite"
                    style="
                      font-size: 20px;
                      margin: 7px 20px 0 0;
                      cursor: pointer;
                    "
                    v-if="showType == 2"
                  >
                    <q-popup-proxy>
                      <q-banner>
                        <div style="width: 350px">
                          <div style="margin: 10px 0 15px 0">抄送</div>
                          <q-select
                            class="col-6 q-pb-lg q-pr-lg"
                            multiple
                            clearable
                            filled
                            stack-label
                            use-input
                            option-value="Id"
                            option-label="EmployeeName"
                            v-model="tempPeople"
                            ref="ManagerId"
                            :options="EmployeeList"
                            label="选择人员"
                            :dense="false"
                            emit-value
                            map-options
                            @filter="filterFn"
                          >
                            <template v-slot:no-option>
                              <q-item>
                                <q-item-section class="text-grey">
                                  未找到相关数据
                                </q-item-section>
                              </q-item>
                            </template>
                          </q-select>
                        </div>
                      </q-banner>
                    </q-popup-proxy>
                  </i>
                  <q-btn class="q-mr-md" label="关闭" @click="closeBackInfo" />
                  <q-btn
                    v-if="showType == 2"
                    color="accent q-px-md"
                    label="确认"
                    @click="saveBackClassInfo()"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="tabCheck == 'second'">
         <flowinfoForm
          :seting-obj="setingObj"
          :showType="showType"
          @close="closeShenheForm"
          @success="refreshPage"
        >
        </flowinfoForm>
      </div>
    </q-card>
    <div
      class="dialog-out-close"
      @click="closeShenheForm"
      style="
        height: 40px !important;
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
      "
    >
      <q-icon name="iconfont icon-jujue1" size="26px" />
    </div>
    <div
      v-if="picIsShow"
      class="_show_img_box"
      @click="(picIsShow = false), (picObj = [])"
    >
      <div
        style="
          position: absolute;
          max-width: 800px;
          height: auto;
          left: 50%;
          top: 50%;
          margin-left: -400px;
          transform: translateY(-50%);
        "
      >
        <el-image
          style="width: 100%; height: 100%"
          fit="cover"
          v-for="(item, index) in picObj"
          :key="index"
          :src="item"
          :preview-src-list="picObj"
        >
        </el-image>
      </div>
    </div>
  </q-dialog>
</template>

<script>
import flowinfoForm from "../sale/flowinfo-form";
import { saveBackBillAduit } from "../../api/sale/bill";
import { queryEmployee } from "../../api/users/user";
export default {
  props: {
    setingObj: {
      type: Object,
      default: null,
    },
    showType: {
      type: Number,
      default: 1,
    },
  },
  components: {
    flowinfoForm,
  },
  data() {
    return {
      persistent: true,
      tabCheck: "first", //默认选第一个
      loading: false,
      changeBillMsg: {
        Id: 0,
        Description: "", //审批意见
        AuditStatus: 2, //审核状态
        SpecialNode: 0, //是否特殊节点
        RecipientIds: "", //抄送人
      },
      classPriceObj: {}, //课程价格信息
      EmployeeList: [],
      AllemployeeList: [],
      tempPeople: [], //抄送人数组
      changeTitle: "投稿审批",
      dataList: [],
      picIsShow: false,
      picObj: [],
      initialIndex: 0,
    };
  },
  computed: {
    fj() {
      let arr = [];
      let fjlist = this.setingObj.ReceiptFileList;
      fjlist.map((item) => {
        let suffix = item.split(".")[item.split(".").length - 1].toUpperCase();
        if ("DOCX|DOC|XLSX|XLS|PPT|PPTX|PDF|TXT".indexOf(suffix) != "-1") {
          let obj = {
            url: item,
            type: 1,
            suffix: suffix,
          };
          arr.push(obj);
        } else if ("GIF|JPG|JPEG|PNG|BMP|WEBP".indexOf(suffix) != "-1") {
          let obj = {
            url: item,
            type: 2,
            suffix: suffix,
          };
          arr.push(obj);
        } else if ("ZIP|RAR|7Z|TAR".indexOf(suffix) != "-1") {
          let obj = {
            url: item,
            type: 3,
            suffix: suffix,
          };
          arr.push(obj);
        } else if (
          "MP4|3GP|AVI|MOV|WMV|RMVB|MKV|M4V|FLV".indexOf(suffix) != "-1"
        ) {
          let obj = {
            url: item,
            type: 4,
            suffix: suffix,
          };
          arr.push(obj);
        } else {
          let obj = {
            url: item,
            type: 5,
            suffix: suffix,
          };
          arr.push(obj);
        }
      });
      return arr;
    },
  },
  created() {
    this.getEmployee();
  },
  mounted() {
    this.changeBillMsg.Id = this.setingObj.Id;
    this.changeBillMsg.SpecialNode = this.setingObj.SpecialNode;
  },
  methods: {
    closeBackInfo() {
      this.persistent = false;
      this.$emit("close");
    },
    //退课单据审核
    saveBackClassInfo() {
      var str = "";
      if (this.tempPeople && this.tempPeople.length > 0) {
        this.tempPeople.forEach((item) => {
          str += "," + item;
        });
      }
      if (str && str != "") {
        str = str.substr(1);
      }
      this.changeBillMsg.RecipientIds = str;
      if (this.changeBillMsg.AuditStatus == 3) {
        if (
          this.changeBillMsg.Description == "" ||
          !this.changeBillMsg.Description
        ) {
          this.$q.notify({
            type: "negative",
            message: "请填写驳回理由",
            position: "top",
            timeout: 2000,
          });
          return;
        }
        this.$q
          .dialog({
            title: "提示信息",
            message: "确定要驳回吗？",
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          })
          .onOk(() => {
            saveBackBillAduit(this.changeBillMsg).then((res) => {
              if (res.Code == 1) {
                this.$q.notify({
                  icon: "iconfont icon-chenggong",
                  color: "accent",
                  timeout: 2000,
                  message: "审核成功!",
                  position: "top",
                });
                //调用父页面成功方法
                this.$emit("success");
                this.$emit("close");
              }
            });
          })
          .onCancel(() => {});
      } else {
        saveBackBillAduit(this.changeBillMsg).then((res) => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: "iconfont icon-chenggong",
              color: "accent",
              timeout: 2000,
              message: "审核成功!",
              position: "top",
            });
            //调用父页面成功方法
            this.$emit("success");
            this.$emit("close");
          }
        });
      }
    },
    //获取员工列表
    getEmployee() {
      var qMsg = {
        EmployeeName: "",
      };
      queryEmployee(qMsg).then((res) => {
        if (res.Code == 1) {
          var jsonData = res.Data;
          if (jsonData && jsonData.length > 0) {
            this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
            this.EmployeeList = JSON.parse(JSON.stringify(jsonData));
          }
        }
      });
    },
    //筛选员工
    filterFn(val, update) {
      update(() => {
        if (val === "") {
          this.EmployeeList = JSON.parse(JSON.stringify(this.AllemployeeList));
        } else {
          const needle = val.toLowerCase();
          this.EmployeeList = this.AllemployeeList.filter(
            (v) => v.EmployeeName.toLowerCase().indexOf(needle) > -1
          );
        }
      });
    },
    //获取员工姓名
    getName(id) {
      let str = "";
      this.EmployeeList.forEach((x) => {
        if (id == x.Id) {
          str = x.EmployeeName;
        }
      });
      return str;
    },
    refreshPage() {
      this.persistent = false;
      this.$emit("success");
    },
    closeShenheForm() {
      this.persistent = false;
      this.$emit("close");
    },
  },
};
</script>
