<template>
  <div>
    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
      <el-table-column v-for="(item, index) in columnData" :key="index" :label="item.name" show-overflow-tooltip :prop="item.key" width="auto"></el-table-column>
      <el-table-column label="佐证材料">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.fileList" :key="index">
            <el-link type="primary" :underline="false" @click="showDetail(item)">{{item.name}}</el-link>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="90">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.is_upload==2 && scope.row.uo_id==userInfo.uo_id" @click="handleUpload(scope.row)">上传</el-button>
          <el-button type="text" v-if="scope.row.is_upload==1" @click="lookDetail(scope.row)">查看</el-button>
          <el-button type="text" v-if="scope.row.is_upload==1 && scope.row.uo_id==userInfo.uo_id" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="上传" :visible.sync="dialogFormVisible" width="800px" :close-on-click-modal="false" @close="handleClose">
      <indicator-upload v-if="dialogType==1" ref="indicatorUpload" :parentId="parentId" :xfId="xfId" :detailId="detailId" :dialogFormVisible="dialogFormVisible" @close="handleClose" />
      <indicator-show v-if="dialogType==2" :detailId="detailId" />
      <div slot="footer" v-if="dialogType==1">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="formSubmit" :loading="btnLoading">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog width="80%" :visible.sync="dialogVisible" title="查看" append-to-body @close="handleClose">
      <preview-attach :commonUrl="commonUrl" :filename="filename" style="width: 100%; height: 300px;"></preview-attach>
    </el-dialog>
  </div>
</template>

<script>
import { ddrwSend, ddrwDetail } from "../api";
import IndicatorUpload from "./IndicatorUpload.vue";
import IndicatorShow from "./IndicatorShow.vue";
import { useUserStore } from "@/stores/user";
import PreviewAttach from "@/components/PreviewAttach/index.vue";
export default {
  data() {
    return {
      userInfo: useUserStore(),
      parentId: "",
      xfId: "",
      detailId: "",
      isEdit: false,
      btnLoading: false,
      columnData: [
        {
          name: "责任部门",
          key: "uo_name"
        },
        {
          name: "自评分",
          key: "jddr_zp_score"
        },
        {
          name: "自评",
          key: "jddr_zp_content"
        }
      ],
      tableData: [],
      dialogFormVisible: false,
      dialogType: "",

      dialogVisible: false,
      commonUrl: "",
      filename: "",
    }
  },
  components: { IndicatorUpload, IndicatorShow, PreviewAttach },
  methods: {
    async initDetailInfo() {
      let res1 = await ddrwSend({ jdd_id: this.parentId });
      let arr = [];
      if (res1) {
        for (let key in res1) {
          arr.push({
            uo_id: key,
            uo_name: res1[key],
            is_upload: "2"
          })
        }
        // 除督导科外只能看自己的评价数据
        arr = this.userInfo.uo_id == 386 || this.userInfo.userInfo.user_group_id == 100 ? arr : arr.filter(item => item.uo_id == this.userInfo.uo_id);

        let obj = {
          jdd_id: this.parentId,
          jddt_uo_id: this.userInfo.uo_id,
          ptype: "2",
        }
        let res = await ddrwDetail(obj);
        this.detailForm = res.one_info;
        arr.map(item => {
          this.detailForm.jdbg_dddx_ddrw_tjjl.map(value => {
            if (item.uo_id == value.jddt_uo_id) {
              let fileList = value.jddr_zzcl_json.split(";");
              value.fileList = [];
              fileList.map((item) => {
                let arr = item.split("|");
                value.fileList.push({
                  name: arr[1],
                  url: arr[0]
                });
              })
              item = Object.assign(item, value);
            }
          })
        })
        this.tableData = [...arr];
      }
    },
    formSubmit() {
      this.btnLoading = true;
      this.$refs.indicatorUpload.commitData();
    },
    handleClose(type) {
      this.initDetailInfo();
      this.btnLoading = false;
      this.isEdit = false;
      this.dialogFormVisible = false;
      this.$refs.indicatorUpload && this.$refs.indicatorUpload.resetForm();
      this.detailId = "";
      this.dialogType = "";
      this.commonUrl = "";
      this.filename = "";
      if (type == 1) {
        this.initDetailInfo();
      }
    },
    handleUpload(data) {
      this.dialogType = 1;
      this.dialogFormVisible = true;
    },
    handleEdit(data) {
      this.dialogType = 1;
      this.dialogFormVisible = true;
      this.detailId = data.jddt_id;
    },
    lookDetail(data) {
      this.dialogType = 2;
      this.dialogFormVisible = true;
      this.detailId = data.jddt_id;
    },
    showDetail(data) {
      this.commonUrl = data.url;
      this.filename = data.name;
      this.dialogVisible = true;
    },
  },
  created() {
    this.parentId = this.$route.params.id;
    this.xfId = this.$route.params.xfId;
    this.initDetailInfo();
  }
}
</script>

<style>
</style>