<template>
  <div>
    <div class="d-flex flex-right">
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="" >
          <el-select class="mr5" @change="getListData" clearable v-model="statusValue" placeholder="请选择督导任务">
            <el-option
              v-for="item in rwList"
              :key="item.jdd_id"
              :label="item.jdd_name"
              :value="item.jdd_id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keyword">
          <el-input
            placeholder="请输入搜索关键字"
            v-model="keyword"
            clearable
            @clear="getListData"
          >
          </el-input>
        </el-form-item>
        <el-button type="primary" class="ml5" @click="getListData"
          >搜索</el-button
        >
      </el-form>
    </div>
    <el-table
      :data="tableData"
      tooltip-effect="dark"
      v-loading="loading"
      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
        label="任务名称"
        show-overflow-tooltip
        prop="jdd_name_jddx_uo_name"
        width="auto"
      ></el-table-column>
      <el-table-column
        label="指标名称"
        show-overflow-tooltip
        prop="jddr_name"
        width="auto"
      ></el-table-column>
      <el-table-column
        label="指标内容"
        show-overflow-tooltip
        prop="jddr_content"
        width="auto"
      ></el-table-column>
      <el-table-column
        label="责任部门"
        show-overflow-tooltip
        prop="jddr_uo_name"
        width="auto"
      ></el-table-column>
      <el-table-column
        label="整改意见"
        show-overflow-tooltip
        prop="jddr_zgyj"
        width="auto"
      ></el-table-column>
      <el-table-column
        label="完成时间"
        show-overflow-tooltip
        prop="create_dateline"
        width="auto"
      ></el-table-column>
      <el-table-column label="佐证材料" width="auto">
        <template slot-scope="scope">
          <el-button type="text" @click="seeMaterial(scope.row)"
            >查看材料上传</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip width="auto">
        <template slot-scope="scope">
          <el-button type="text" @click="detailData(scope.row)"
            >详情
          </el-button>
        </template></el-table-column
      >
    </el-table>
    <footer
      class="flex-item-none"
      style="display: flex; justify-content: flex-end; margin-top: 30px"
    >
      <el-pagination
        background
        layout="total,prev, pager, next"
        :page-size="limit"
        :total="total"
        :current-page.sync="cur_page"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </footer>
    <el-dialog title="佐证材料" :visible.sync="fileVisible" width="700px">
      <ul v-if="files.length!=0" class="pb-10">
        <li v-for="(f, i) in files" :key="i" class="leading-relaxed">
         <div class="cursor-pointer" @click="fileDown(f)">{{ f.split("|")[1] }}</div>
        </li>
      </ul>
      <el-empty v-else description="暂无上传材料"></el-empty>
    </el-dialog>
  </div>
</template>
<script>
import { Empty } from "element-ui";
import { ddzg_list,ddrw_list } from "./api.js";
export default {
    name: "index",
    data() {
        return {
            https: window.globalVariables.api,
            statusValue: "",
            fileVisible: false,
            dialogFormVisible: false,
            keyword: "",
            loading: false,
            limit: 10,
            total: 1,
            cur_page: 1,
            dialogForm: {
                shfs: "",
                shyj: "",
            },
            rules: {
                shfs: [
                    { required: true, message: "请填写审核分数", trigger: "submit" },
                ],
                shyj: [
                    { required: true, message: "请填写审核意见", trigger: "submit" },
                ],
            },
            tableData: [],
            rwList: [],
            files: [],
        };
    },
    methods: {
        getListData() {
            this.loading = true;
            let data = {
                // site: "jnmf",
                page: this.cur_page,
                limit: this.limit,
                keyword: this.keyword,
                jdd_id: this.statusValue,
                jddr_zg_status:'1'
            };
            ddzg_list(data).then((res) => {
                if (res.code == "1") {
                    this.tableData = res.data.page_data;
                    this.cur_page = Number(res.data.page_now);
                    this.total = Number(res.data.total_rows);
                    this.loading = false;
                }
            });
        },
        getRw() {
            let data = {};
            ddrw_list(data).then((res) => {
                if (res.code == "1") {
                    // this.getListData();
                    this.rwList = res.data.page_data;
                }
            });
        },
        seeMaterial(item) {
            this.fileVisible = true;
            if (item.jddr_zzcl_json) {
                this.files = item.jddr_zzcl_json.split(";");
            }
            console.log(this.files);
        },
        fileDown(f) {
            window.open(this.https + f.split("|")[0], "_blank");
        },
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getListData();
        },
        detailData(item) {
            this.$router.push({
                name: "ddzg_detail",
                params: {
                    id: item.jddt_id,
                },
            });
        },
    },
    mounted() {
        this.getRw();
        this.getListData();
    },
    components: { Empty }
};
</script>