<template>
  <div>
    <header>
      <div class="flex title">
        <h3>申请科室名称 {{ detailMsg.department_name }}</h3>
        <div>
          <span v-if="detailMsg.status == 1">未开始</span>
          <span v-if="detailMsg.status == 2">进行中</span>
          <span v-if="detailMsg.status == 3">已结束</span>
        </div>
      </div>
      <p><span class="blank">项目名称:</span> {{ detailMsg.xm_name }}</p>
      <p><span class="blank">申请人:</span> {{ detailMsg.xm_user_name }}</p>
      <p><span class="blank">理由依据:</span> {{ detailMsg.xm_lyyj }}</p>
      <p><span class="blank">采购金额:</span> {{ detailMsg.xm_price }}</p>
      <div>
        <span class="blank">采购清单:</span>
        <div class="specialTd" v-html="detailMsg.xm_qd"></div>
      </div>
    </header>
    <nav>
      <h3>审核进度</h3>
      <!-- 我审核的 -->
      <el-table
        v-if="isSh"
        :data="detailMsg.shjl"
        style="width: 100%; min-height: 700px"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="sh_dept_name" label="审核部门" width="200" />
        <el-table-column prop="sh_user_name" label="审核人" width="150" />
        <el-table-column prop="modify_dateline" label="审核时间" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.modify_dateline != 0">{{
              scope.row.modify_dateline
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="scope" label="操作" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.sh_status == 1">待处理</span>
            <span v-if="scope.row.sh_status == 2">通过</span>
            <span v-if="scope.row.sh_status == 3">未通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="sh_reason" label="处理意见" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.sh_status != 1">
              <span v-if="scope.row.sh_reason == ''">无</span>
              <span v-else>{{ scope.row.sh_reason }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="scope" label="操作" width="auto">
          <template slot-scope="scope">
            <span
              class="audit"
              @click="audit(scope.row)"
              v-if="scope.row.isSh && scope.row.status == 1"
              >审核</span
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 我申请的 -->
      <el-table
        v-else
        :data="detailMsg.shjl"
        style="width: 100%; min-height: 700px"
      >
        <el-table-column type="selection" align="center" width="55">
        </el-table-column>
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column prop="sh_dept_name" label="审核部门" width="200" />
        <el-table-column prop="sh_user_name" label="审核人" width="150" />
        <el-table-column prop="modify_dateline" label="审核时间" width="200">
          <template slot-scope="scope">
            <span v-if="scope.row.modify_dateline != 0">{{
              scope.row.modify_dateline
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="scope" label="操作" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.sh_status == 1">未处理</span>
            <span v-if="scope.row.sh_status == 2">通过</span>
            <span v-if="scope.row.sh_status == 3">未通过</span>
          </template>
        </el-table-column>
        <el-table-column prop="sh_reason" label="处理意见" width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.sh_status != 1">
              <span v-if="scope.row.sh_reason == ''">无</span>
              <span v-else>{{ scope.row.sh_reason }}</span>
            </span>
          </template>
        </el-table-column>
      </el-table>
    </nav>
    <el-dialog title="审核" :visible.sync="auditVisible" width="581px">
      <el-form :model="dialogForm" label-width="70px">
        <el-form-item prop="isPass">
          <el-radio-group v-model="dialogForm.isPass">
            <el-radio label="不通过" />
            <el-radio label="通过" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处理意见" prop="clyj">
          <el-input type="textarea" v-model="dialogForm.clyj"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="auditVisible = false">取 消</el-button>
        <el-button type="primary" @click="audioSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cgxm_detail, cgxm_audit } from "./api";
import { useUserStore } from "@/stores/user";
const { user_id } = useUserStore();
export default {
  data() {
    return {
      detailMsg: {},
      auditVisible: false,
      dialogForm: {
        isPass: "",
        clyj: "",
      },
      isSh: false,
    };
  },
  methods: {
    audit(item) {
      this.auditVisible = true;
    },
    getDetail() {
      let data = {
        site: "jnmf",
        xm_id: this.$route.params.id,
      };
      cgxm_detail(data).then((res) => {
        this.detailMsg = res.data.one_info;
        this.isSh = false;
        res.data.one_info.shjl.forEach((item) => {
          if (item.sh_user_id === user_id) {
            this.isSh = true;
          }
        });
      });
    },
    audioSubmit() {
      let data = {
        sh_id: this.$route.params.id,
        sh_status: this.dialogForm.isPass == "通过" ? "2" : "3",
        sh_reason: this.dialogForm.clyj,
      };
      if (!sh_status) {
        alert("请选择审核状态");
        return false;
      } else {
        cgxm_audit(data).then((res) => {
          if (res.code == 1) {
            this.getDetail();
          }
        });
      }
    },
  },
  mounted() {
    this.getDetail();
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
header {
  padding: 15px 20px;
  font-family: PingFangSC-Regular;
  box-sizing: border-box;
  color: #969696;
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  .title {
    justify-content: space-between;
    h3 {
      color: #000;
      font-size: 16px;
    }
  }
}
nav {
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
.blank {
  display: inline-block;
  color: #000;
  width: 90px;
}
.imgs {
  img {
    width: 160px;
    height: 90px;
    background: rgba(0, 0, 0, 0);
    margin-right: 23px;
  }
}
.audit {
  color: #265cd4;
  cursor: pointer;
}
::v-deep img{
  width: 360px;
}
::v-deep .specialTd table tbody tr td{
  border:1px #CCCCCC solid !important;
}
</style>