<template>
  <div class="app-container">
        <div >
            <div class="filter-container" >
                <!-- <div class="container_item" style="margin-bottm:4px;">
                    <span class="item_text" style="padding-left: 26px;">{{$t('table.status')}}：</span>
                    <p class="status_span">
                        <span :class="status==1?'cur':''" @click="statusClick(1)">全部</span>
                        <span :class="status==2?'cur':''" @click="statusClick(2)">流转中</span>
                        <span :class="status==3?'cur':''" @click="statusClick(3)">已完成</span>
                    </p>
                </div> -->

                <div class="filter-container">
                  <div class="container_item" style="margin-bottm:4px;">
                    <span class="item_text">{{$t('workflow.busNumber')}}：</span>
                    <el-input v-model="query.businessId"  class="filter-item input_item"  />
                  </div>
                  <div class="container_item">
                      <span class="item_text">{{$t('workflow.functionName')}}：</span>
                      <el-select  v-model="query.typeName"  placeholder="请选择">
                          <el-option
                          v-for="item in nameList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code">
                          </el-option>
                      </el-select>
                      <!-- <el-input v-model="query.typeName"  class="filter-item input_item"  /> -->
                  </div>
                  <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
                      {{ $t('table.search') }}
                  </el-button>
                  <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="query={};handleSearch()">
                      {{ $t('table.reset') }}
                  </el-button>
                </div>
              </div>
        </div>
        <div class="wrapper_table">
            <el-table
                :data="tableData"
                stripe
                highlight-current-row
                style="width: 100%;"
                :header-cell-class-name="headerStyle"
                :max-height="tableHeight"
            >
                <el-table-column prop="draftCode" :label="$t('workflow.busNumber')" width="200" show-overflow-tooltip align="left"></el-table-column>
                <el-table-column prop="typeModel" :label="$t('workflow.modular')" align="left"></el-table-column>
                <el-table-column prop="typeName" :label="$t('workflow.functionName')"  align="left"></el-table-column>
                <el-table-column prop="procState" :label="$t('workflow.state')"  align="left" width="120">
                  <template slot-scope="scope">
                        <div v-if="scope.row.procState==2" style="display: flex;align-items: center;">
                            <img style="width:16px;hiegh:16px;margin-right:5px;" src="@/assets/images/wancheng.png" alt="">
                            <span>已完成</span>
                        </div>
                        <div v-else style="display: flex;align-items: center;">
                            <img style="width:16px;hiegh:16px;margin-right:5px;" src="@/assets/images/liuzhuanzhong.png" alt="">
                            <span>流转中</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="procPass" :label="$t('workflow.reviewStatus')" align="left" width="130">
                  <template slot-scope="scope">
                    <span v-if="scope.row.procState === 2">{{scope.row.procPass === '3' ?'审核未通过':'审核通过'}}</span>
                    <span v-else>审核中</span>
                    <!-- <span>{{scope.row.procState==2?scope.row.procPass === 3 ?'审核未通过':'审核通过':'审核中'}}</span> -->
                  </template>
                </el-table-column>
                <el-table-column prop="procUser" :label="$t('workflow.userName')" align="left" width="120"> </el-table-column>
                <el-table-column prop="createTime" :label="$t('workflow.saveTime')"  align="left" width="180"></el-table-column>
                <el-table-column prop="muDate" :label="$t('workflow.courseTime')" align="left" width="100"> </el-table-column>
                <el-table-column prop="name" :label="$t('workflow.node')" align="left" width="180">
                  <template slot-scope="scope">
                    <div class="flex_d">
                       <el-button v-if="permission.includes('start_tasks_view')" v-waves class="" type="text" icon="el-icon-my-xiangqing" @click="seeBut(scope.row)">
                      {{$t('table.processView')}}
                    </el-button>
                    <el-button  v-if="permission.includes('start_tasks_opinion')"  v-waves class="" type="text" icon="el-icon-my-approval" @click="viewOpinion(scope.row)">
                      {{$t('table.auditOpinion')}}
                    </el-button>
                    </div>
                  </template>
                </el-table-column>
            </el-table>
        </div>
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
        <el-dialog
          :title="$t('workflow.lookflow')"
          :visible.sync="lookVisible"
          v-el-drag-dialog
          :close-on-click-modal="false"
          width="480px">
            <el-form ref="dataForm" :model="form" label-position="right" style="margin-top:20px" label-width="100px" >
              <el-form-item :label="$t('workflow.busNumber')+'：'" class="unabled">
                <el-input disabled v-model="form.draftCode"  style="width:294px"  />
              </el-form-item>
              <el-form-item :label="$t('workflow.functionName')+'：'" class="unabled">
                <el-input disabled v-model="form.typeName"   style="width:294px"  />
              </el-form-item>
              <el-form-item :label="$t('workflow.userName')+'：'" class="unabled">
                <el-input disabled v-model="form.procUser"    style="width:294px"  />
              </el-form-item>
              <el-form-item :label="$t('workflow.saveTime')+'：'" class="unabled">
                <el-input disabled v-model="form.createTime"   style="width:294px"  />
              </el-form-item>
            </el-form>
            <div class="fl_img">
                <!-- <div v-html="svgUrl"></div> -->
                <!-- <object data="rect.svg" width="300" height="100" type="image/svg+xml" :codebase="imgsrc" /> -->
                <!-- <img :src="imgsrc" alt=""> -->
                <iframe id="template-iframe" frameborder=0; width="100%" height="272px" ref="iframe" :src="imgsrc"  ></iframe>
            </div>
        </el-dialog>
        <el-dialog
          :title="$t('table.auditOpinion')"
          :visible.sync="opinionVisible"
          v-el-drag-dialog
          :close-on-click-modal="false"
          width="480px">
           <div class="opinion">{{opinion ? opinion :'无'}}</div>
        </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from "vuex";
import waves from "@/directive/waves"; // waves directive
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import http from "@/api/http";
// import axios from 'axios'

export default {
  name: "",
  components: { Pagination },
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      total: 0,
      query: {
        procState: "",
        // startUserId: Number(localStorage.getItem('ADMIN_UID')),
      },
      tableHeight: 0,
      tableData: [],
      pageNum: 1,
      pageSize: 20,
      lookVisible: false,
      form: {},
      svgUrl: "",
      imgsrc: "",
      opinionVisible:false,//审批弹窗
      opinion:'',//审批意见
      nameList: [
        { code: "COLLATERAL", name: "抵(质)押品基础库" },
        { code: "COLLECY", name: "抵(质)押品管理" },
        { code: "INVENTORY", name: "抵(质)押品盘点" },
        { code: "LIABILITY", name: "额度设置管理" },
        { code: "LIABILITYOPERATE", name: "额度使用管理" },
        { code: "LIMITOCCUPY", name: "额度虚占" },
      ],
    };
  },
  watch: {
    $route() {
      this.getClassify();
    },
  },
  created() {
    this.getClassify();
  },

  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
  },
  methods: {
    getClassify() {
      this.getData();
    },
    getData(paging) {
      if (paging) {
        this.pageSize = paging.pageSize;
        this.pageNum = paging.pageNum;
      }
      http
        .post("/act/getStartTasks", {
          cpage: this.pageNum,
          pageSize: this.pageSize,
          ...this.query,
        })
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total || 0;
        })
        .catch((err) => {});
    },
    seeBut(row) {
      this.form = row;
      // axios.get(`/act/trace/photo/${row.processDefinitionId}/${row.processId}`).then((response)=>{
      //     this.svgUrl = response
      //     this.lookVisible = true
      // },(error)=>{});
      // http.get(`/act/trace/photo/${row.processDefinitionId}/${row.processId}`).then((res)=>{
      //   const blob = new Blob([res.data], {
      //     type: 'application/png;charset=utf-8',
      //   });
      //   const url = window.URL.createObjectURL(blob);
      //   this.imgsrc = url;
      //   this.lookVisible = true
      // }).catch(err=>{});
      let host = window.location.host
      let uUrl = host.includes('8091') ? host + `/lmee-web` : '10.20.20.249:8100/lmee-dev'
      this.imgsrc =
        window.location.protocol +
        "//" +
        `${uUrl}/act/trace/photo/${row.processDefinitionId}/${row.processId}`;
      // this.imgsrc = `http://10.20.20.249:8090/act/trace/photo/${row.processDefinitionId}/${row.processId}`
      this.lookVisible = true;
    },
    handleSearch() {
      this.pageNum = 1;
      this.getData();
    },
    headerStyle() {
      return "tableStyle";
    },
    handleDelete() {},
    statusClick(a) {
      this.status = a;
    },
    viewOpinion(row){
      this.opinionVisible = true
      this.opinion = row.procAudit
    }
  },
};
</script>
<style scoped lang='scss'>
.but_list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .but-item {
    display: flex;
    align-items: center;
    margin-right: 6px;
    cursor: pointer;
    img {
      width: 12px;
      height: 14px;
    }
    span {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3d5596;
      margin-left: 2px;
    }
  }
}
.status_span {
  span {
    display: inline-block;
    width: 64px;
    height: 24px;
    text-align: center;
    line-height: 24px;
    // background: #227CC8;
    // border-radius: 2px;
    font-size: 13px;
    font-family: "SourceHanSansCN";
    font-weight: bold;
    color: #0b4d8f;
  }
  span.cur {
    background: #227cc8;
    border-radius: 2px;
    color: #ffffff;
  }
}
.tab_title_span {
  width: 100%;
  padding-left: 150px;
  padding-right: 250px;
  margin: 0;
  span {
    display: inline-block;
    width: 25%;
    font-size: 14px;
    font-family: "SourceHanSansCN";
    font-weight: 500;
    color: #212121;
  }
}
.list_tab {
  .list_item {
    margin-top: 10px;
    display: flex;
    height: 70px;
    background: #ffffff;
    border-radius: 4px;
    .item_left {
      padding: 0;
      margin: 0;
      width: 80px;
      margin-right: 70px;
      height: 70px;
      // line-height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background: rgba(228, 81, 65, 0.1);
      span {
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #e45141;
      }
    }
    .item_span {
      flex: 1;
      span {
        width: 25%;
        display: inline-block;
        line-height: 70px;
      }
    }
    .item_but {
      width: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
      .span1 {
        width: 68px;
        height: 24px;
        background: rgba(86, 131, 211, 0.16);
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        font-family: "SourceHanSansCN";
        font-weight: bold;
        color: #5683d3;
      }
      .span2 {
        width: 68px;
        height: 24px;
        background: rgba(228, 81, 65, 0.2);
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        line-height: 24px;
        color: #e45141;
        font-size: 12px;
        font-family: "SourceHanSansCN";
        font-weight: bold;
        margin-left: 20px;
      }
    }
  }
}
.fl_img {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 30px 0;
  img {
    width: 410px;
    height: 91px;
    background: rgba(85, 129, 209, 0.03);
    border: 1px solid #90b4f7;
    border-radius: 2px;
  }
}
</style>
<style lang="css" scoped>
.dialog_top .el-input__inner {
  width: 184px !important;
  box-shadow: 0px -1px 2px 0px rgb(0 0 0 / 40%) !important;
  border-radius: 2px !important;
}
.opinion{
  font-size: 14px;
  padding:20px;
  font-family: "SourceHanSansCN";
}
</style>
