<template>
  <div>
    <div class="d-flex flex-right">
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="ob_value">
          <el-select class="mr5" clearable v-model="statusValue" placeholder="">
            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="keyword">
          <el-input placeholder="请输入搜索关键字" v-model="keyword" clearable>
          </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="ddrw_name"></el-table-column>
      <el-table-column label="督导类型" show-overflow-tooltip prop="jdd_ddlx"></el-table-column>
      <el-table-column label="反馈对象" show-overflow-tooltip prop="ddjh_fkdx" width="auto"></el-table-column>
      <el-table-column label="任务内容" show-overflow-tooltip prop="ddqk_content" width="auto"></el-table-column>
      <el-table-column label="自评分" show-overflow-tooltip prop="ddqk_zpf" width="auto"></el-table-column>
      <el-table-column label="审核分数" width="auto">
        <template slot-scope="scope">
          <div v-if="scope.row.ddqk_shfs">{{ scope.row.ddqk_shfs }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column label="附件完成情况" show-overflow-tooltip prop="ddqk_name" width="auto"></el-table-column>
      <el-table-column label="任务状态" width="auto">
        <template slot-scope="scope">
          <div v-if="scope.row.ddrw_zt == '1'">进行中</div>
          <div v-if="scope.row.ddrw_zt == '2'">已结束</div>
        </template>
      </el-table-column>
      <el-table-column label="审核人" prop="ddrw_shr" width="auto">
        <template slot-scope="scope">
          <div v-if="scope.row.ddrw_shr">{{ scope.row.ddrw_shr }}</div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column label="佐证材料" prop="ddqk_zzcl" width="auto">
        <template slot-scope="scope">
          <el-button type="text" @click="seeFiles(scope.row)">查看材料上传
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" show-overflow-tooltip width="auto">
        <template slot-scope="scope">
          <el-popover placement="right-start" :width="150" trigger="click">
            <i style="transform: rotate(90deg); cursor: pointer" slot="reference" class="el-icon-more"></i>
            <el-button type="text" @click="detailData(scope.row)">详情
            </el-button>
            <el-button type="text" @click="auditData(scope.row)">审核
            </el-button>
          </el-popover>
        </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="dialogFormVisible" width="700px">
      <el-form :model="dialogForm" :rules="rules" :ref="dialogForm" label-width="80px">
        <el-form-item label="审核分数" prop="shfs">
          <el-input v-model="dialogForm.shfs" />
        </el-form-item>
        <el-form-item label="审核意见" prop="shyj">
          <Tinymce v-model="dialogForm.shyj"></Tinymce>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditSubmit(dialogForm)">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="佐证材料" :visible.sync="fileVisible" width="700px">
      <ul class="pb40 ">
        <li v-for="(f, i) in files" :key="i" class="lh35">
          <a :href="https + f.split('|')[0]">{{ f.split("|")[1] }}</a>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
<script>
import Tinymce from "../../../components/TinymceVue/index.vue";
import PreviewAttach from "@/components/PreviewAttach/index.vue";
import { rwfk_list } from "./api.js";
export default {
  name: "index",
  data() {
    return {
      https: window.globalVariables.api,
      statusValue: "",
      dialogVisible: false,
      fileVisible: false,
      commonUrl: "",
      suffix: "",
      dialogFormVisible: false,
      statusList: [
        {
          value: undefined,
          label: "全部",
        },
        {
          value: "2",
          label: "进行中",
        },
        {
          value: "3",
          label: "已结束",
        },
      ],
      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: [],
      files: [],
    };
  },
  methods: {
    getListData() {
      let data = {
        site: "jnmf",
        page: this.cur_page,
        limit: 999,
        ptype: "3",
      };
      rwfk_list(data).then((res) => {
        if (res.code == "1") {
          this.tableData = res.data.page_data;
        }
      });
    },
    auditData(item) {
      this.dialogFormVisible = true;
      this.dialogForm = {
        shfs: "",
        shyj: "",
      };
    },
    auditSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
        }
      });
    },
    seeFiles(item) {
      this.fileVisible = true;
      this.files = item.sczl.split(";");
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    detailData(item) {
      this.$router.push({
        name: "ddrwfk_detail",
        params: {
          // id: item.jddx_id,
          id: 1,
        },
      });
    },
  },
  mounted() {
    this.getListData();
  },
  components: { Tinymce, PreviewAttach },
};
</script>
