<template>
  <div>
    <div class="topPart">
      <table class="Tb" width="100%" cellspacing="0" cellpadding="0">
        <tr>
          <td>项目名称</th>
          <td>{{tableFormData.xm_name}}</td>
        </tr>
        <tr>
          <td>项目类别</td>
          <td>{{tableFormData.lb_name}}</td>
        </tr>
        <tr>
          <td>项目理由</td>
          <td>{{tableFormData.xm_reason}}</td>
        </tr>
         <tr>
          <td>申请科室</td>
          <td>{{tableFormData.department_name}}</td>
        </tr>
        <tr>
          <td>项目预算</td>
          <td>{{tableFormData.xm_price}}</td>
        </tr>
        <tr>
          <td>申报时间</td>
          <td>{{tableFormData.xm_sbsj}}</td>
        </tr>
        <tr>
          <td>项目内容</td>
          <td>
            <div class="specialTd" v-html="tableFormData.xm_content"></div>
          </td>
        </tr>
        <tr>
          <td>项目方式</td>
          <td>{{tableFormData.xm_type}}</td>
        </tr>
        <tr>
          <td>项目附件</td>
          <td>
            <div class="singleD" v-for="(item,index) in fileFinalArr" :key="index">
              <a :href="item.fileUrl" target="_blank" >{{item.fileName}}</a>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="bottomPart">
      <h4 class="Htitle">流程处理</h4>
      <div class="table" style="width:100%;">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" align="center" width="55"></el-table-column>
          <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
          <el-table-column prop="sh_dept_name" label="审核部门" ></el-table-column>
          <el-table-column prop="sh_user_name" label="审核人" ></el-table-column>
          <el-table-column prop="create_dateline" label="审核时间"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div :class="{'red':scope.row.sh_status=='3' }">
                {{scope.row.sh_status==1 ? "未处理" : (scope.row.sh_status==2 ? '通过': '不通过') }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="clyj" label="处理意见" show-overflow-tooltip>
            <template slot-scope="scope">
              <div :class="{'red':scope.row.sh_status=='3'}">
                {{scope.row.sh_reason}}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import {  xmsq_detail,org_users } from "./itemApi";
import { useUserStore } from "@/stores/user";
const { real_name, user_id, dept_ids } = useUserStore();
export default {
  name: "xq",
  data() {
    return {
      tableFormData: '',
      tableData: [],
      fileFinalArr:[],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let transId = this.$route.params.id;
      let transObj = {
        xm_id:transId
      }
      xmsq_detail(transObj)
        .then(res => {
          if (res.code == "1") {
            this.tableFormData = res.data.one_info;
            this.tableData=res.data.one_info.shjl
            //判断是几个附件
            let ifOneB = res.data.one_info.xm_file.indexOf(",");
            if (ifOneB != '-1') {//能找到，不止一个附件
              let muilArr = res.data.one_info.xm_file.split(',');
              let flileArr=[]
              muilArr.forEach(item => {
                let secSpil = item.split('|');
                flileArr.push({
                  fileUrl:secSpil[0],
                  fileName: secSpil[1]
                })
              })
              this.fileFinalArr = flileArr;
            } else {
              let singleArr = res.data.one_info.xm_file.split('|');
              this.fileFinalArr = [{
                fileUrl:singleArr[0],
                  fileName: singleArr[1]
              }];
            }
            
          }
      })
      .catch(err=>{console.log(err)})
    }
  },
};
</script>

<style scoped>
.topPart {
  min-height: 450px;
  font-size: 14px;
  border-radius: 10px;
}
.Tb tr{
      line-height: 50px;
    }
.Tb td{ 
  height:30px; 
  border:#CCCCCC 1px solid;
  box-sizing: border-box;
  padding-left:1%;
}

.Htitle {
  font-size: 16px;
  font-family: Segoe UI, Segoe UI-Regular;
  font-weight: 400;
  text-align: left;
  color: #606266;
  border-left: 3px solid #265cd4;
  margin: 15px 0;
  box-sizing: border-box;
  padding-left: 10px;
}
.red{
  color:red;
}
.singleD{
  display:inline-block;
  margin:0 5px;
}
.singleD a{
  color:rgb(0, 149, 199);
}
::v-deep .specialTd table tbody tr td{
  border:1px #CCCCCC solid !important;
}
</style>
