<template>
  <div>
    <div class="d-flex flex-row">
      <div>
        <el-button @click="createNew" type="success" icon="el-icon-plus"
          >新建督导培训</el-button
        >
        <el-button
          type="danger"
          size="medium"
          :disabled="multipleSelection.length == 0"
          @click="delData"
          >删除</el-button
        >
      </div>
      <el-form label-width="100px" :inline="true">
        <el-form-item prop="" @change="getListData">
          <el-select
            style="width: 200px"
            class="mr5"
            clearable
            v-model="statusValue"
            @change="getListData"
            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
            style="width: 200px"
            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"
      @selection-change="handleSelectionChange"
      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"
      ></el-table-column>
      <el-table-column
        label="督导对象"
        show-overflow-tooltip
        prop="jdd_dddx"
      ></el-table-column>
      <el-table-column
        label="督导类型"
        show-overflow-tooltip
        prop="jdd_ddlx"
      ></el-table-column>
      <el-table-column
        label="任务内容"
        show-overflow-tooltip
        prop="jdd_content"
      ></el-table-column>
      <el-table-column label="培训人员" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="scope.row.jddp_pxry_json">
            <span
            v-for="i in JSON.parse(scope.row.jddp_pxry_json)"
            :key="i.user_id"
          >
            {{ i.user_realname }}
          </span>
          </div>
          
        </template></el-table-column
      >
      <el-table-column
        label="培训内容"
        show-overflow-tooltip
        prop="jddp_pxnr"
      ></el-table-column>
      <el-table-column
        label="完成时间"
        show-overflow-tooltip
        prop="jddp_wcrq"
      ></el-table-column>
      <el-table-column label="佐证材料" prop="ddqk_zzcl" 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="editData(scope.row)">编辑 </el-button>
          <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="title" :visible.sync="dialogFormVisible" width="700px">
      <el-form
        :model="dialogForm"
        :ref="dialogForm"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item label="任务名称" prop="rw_name">
          <el-select @change="selectChange" v-model="dialogForm.rw_name">
            <el-option
              v-for="n in rwList"
              :key="n.jdd_id"
              :label="n.jdd_name"
              :value="n.jdd_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="督导对象" prop="dddx">
          <el-input
            disabled
            v-model="dialogForm.dddx"
            placeholder="请输入督导对象"
          />
        </el-form-item>
        <el-form-item label="督导类型" prop="dd_type">
          <el-select disabled v-model="dialogForm.dd_type">
            <el-option
              v-for="t in rwList"
              :key="t.jdd_id"
              :label="t.jdd_ddlx"
              :value="t.jdd_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="任务内容" prop="jdd_content">
          <el-input
            disabled
            type="textarea"
            v-model="dialogForm.jdd_content"
            placeholder="请输入任务内容"
          />
        </el-form-item>
        <el-form-item label="培训人员" prop="ddpx_ry">
          <el-select
            @change="selectUser"
            multiple
            filterable
            v-model="dialogForm.ddpx_ry"
          >
            <el-option
              v-for="p in userList"
              :key="p.user_id"
              :label="p.user_realname"
              :value="{ value: p.user_id, label: p.user_realname }"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="培训内容" prop="ddpx_content">
          <el-input type="textarea" v-model="dialogForm.ddpx_content" />
        </el-form-item>
        <el-form-item label="完成日期" prop="jddp_wcrq">
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="dialogForm.jddp_wcrq" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="佐证材料" prop="zzcl">
          <FileUpload
            :full.sync="dialogForm.zzcl"
            :key="timestamp"
            v-model="dialogForm.zzcl"
          ></FileUpload>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="formSubmit(dialogForm)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
     <el-dialog title="佐证材料" :visible.sync="fileVisible" width="700px">
      <ul v-if="files.length!=0" class="pb40">
        <li v-for="(f, i) in files" :key="i" class="lh35">
          <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 FileUpload from "../../../components/FileUpload/index.vue";
import {
  ddpx_list,
  ddpx_add,
  ddpx_edit,
  ddpx_del,
  ddrw_list,
  org_user,
} from "./api";
export default {
  name: "index",
  data() {
    return {
      https: window.globalVariables.api,
      timestamp: Date.now(),
      isEdit: false,
      title: "",
      statusValue: "",
      fileVisible: false,
      dialogFormVisible: false,
      statusList: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "进行中",
        },
        {
          value: "3",
          label: "已结束",
        },
      ],
      keyword: "",
      loading: false,
      limit: 10,
      total: 1,
      cur_page: 1,
      rwList: [],
      ddType: [],
      userList: [],
      user_list: [],
      user_json: "",
      dialogForm: {
        rw_name: "",
        dddx: "",
        dd_type: "",
        ddpx_content: "",
        ddpx_ry: {},
        jdd_content: "",
        zzcl: "",
        jddp_wcrq:undefined,
      },
      rules: {
        rw_name: [
          { required: true, message: "请选择任务名称", trigger: "submit" },
        ],
        dddx: [
          { required: true, message: "请填写学校名称", trigger: "submit" },
        ],
        dd_type: [
          { required: true, message: "请选择督导类型", trigger: "submit" },
        ],
        jdd_content: [
          { required: true, message: "请填写任务内容", trigger: "submit" },
        ],
        ddpx_ry: [
          { required: true, message: "请选择培训人员", trigger: "submit" },
        ],
        ddpx_content: [
          { required: true, message: "请填写培训内容", trigger: "submit" },
        ],
        zzcl: [
          { required: true, message: "请上传佐证材料", trigger: "submit" },
        ],
      },
      jddp_id: "",
      tableData: [],
      multipleSelection: [],
      files:[],
    };
  },
  methods: {
    getListData() {
      this.loading = true;
      let data = {
        site: "jnmf",
        keyword: this.keyword,
        jdd_id: this.statusValue
      };
      ddpx_list(data).then((res) => {
        if (res.code == "1") {
          this.tableData = res.data.page_data;
          res.data.page_data.forEach((item) => {
            // console.log(item.jddp_pxry_json);
            console.log(item);
            // this.rwList.forEach((el) => {
            //   if (el.jdd_id === item.jdd_id) {
            //     item.ddrw_name = el.jdd_name;
            //     item.ddlx = el.jdd_ddlx;
            //     item.dddx = el.jdd_dddx;
            //     item.rwnr = el.jdd_content;
            //   }
            // });
          });
          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;
        }
      });
    },
    selectChange(e) {
      this.rwList.forEach((item) => {
        if (item.jdd_id === e) {
          this.dialogForm.dd_type = item.jdd_ddlx;
          this.dialogForm.dddx = item.jdd_dddx;
          this.dialogForm.jdd_content = item.jdd_content;
        }
      });
    },
    seeMaterial(item) {
      this.fileVisible = true;
      this.files = item.jddp_zzcl.split(";");
    },
    fileDown(f) {     
      window.open(this.https + f.split('|')[0], '_blank');
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getListData();
    },
    getUser() {
      let data = {};
      org_user(data).then((res) => {
        if (res.code == "1") {
          this.userList = res.data.page_data;
        }
      });
    },
    createNew() {
      this.getUser();
      this.getRw();
      this.title = "新建督导培训";
      this.dialogFormVisible = true;
      this.isEdit = false;
      Object.keys(this.dialogForm).forEach((key) => {
        this.dialogForm[key] = "";
      });
      this.dialogForm.ddpx_ry = [];
    },
    editData(item) {
      this.getUser();
      this.getRw();
      this.jddp_id = item.jddp_id;
      let pxry = item.jddp_pxry_json;
      pxry = JSON.parse(pxry);
      let list = [];
      pxry.forEach((el) => {
        list.push({
          value: el.user_id,
          label: el.user_realname,
        });
      });
      this.dialogFormVisible = true;
      this.isEdit = true;
      this.dialogForm = {
        rw_name: item.jdd_name,
        dddx: item.jdd_dddx,
        dd_type: item.jdd_ddlx,
        jdd_content: item.jdd_content,
        ddpx_content: item.jddp_pxnr,
        zzcl: item.jddp_zzcl,
        ddpx_ry: {},
        jddp_wcrq: item.jddp_wcrq
      };
      this.dialogForm.ddpx_ry = list;
      this.user_json = item.jddp_pxry_json;
      this.user_list = item.jddp_pxry;
      this.timestamp = Date.now();
      this.title = "编辑督导培训";
    },
    selectUser(e) {
      this.user_list = e.map(({ value, label }) => ({
        user_id: value,
        user_realname: label,
      }));
      this.user_json = JSON.stringify(this.user_list);
    },
    formSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            site: "jnmf",
            issubmit: "1",
            jdbg_dddx_ddpx: {
              jddp_pxry: this.user_json,
              jddp_pxry_json: this.user_json,
              jddp_pxnr: this.dialogForm.ddpx_content,
              jddp_zzcl: this.dialogForm.zzcl,
              jdd_id: this.dialogForm.rw_name,
              jddp_wcrq: this.dialogForm.jddp_wcrq,
            },
          };
          if (!this.isEdit) {
            ddpx_add(data).then((res) => {
              if (res.code == "1") {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.getListData();
                this.dialogFormVisible = false;
              }
            });
          } else {
            Object.assign(data, { jddp_id: this.jddp_id });
            ddpx_edit(data).then((res) => {
              if (res.code == "1") {
                this.$message({
                  type: "success",
                  message: "编辑成功!",
                });
                this.getListData();
                this.dialogFormVisible = false;
              }
            });
          }
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i in val) {
        this.multipleSelection.push(val[i].jddp_id);
      }
    },
    delData() {
      this.$confirm("确认删除这些督导培训?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            site: "jnmf",
            jddp_id: this.multipleSelection,
          };
          ddpx_del(data).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "删除成功！",
                type: "success",
              });
              this.getListData();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          });
        })
        .catch(() => {});
    },
    detailData(item) {
      this.$router.push({
        name: "ddpx_detail",
        params: {
          id: item.jddp_id,
        },
      });
    },
  },
  mounted() {
    // this.getRw();
    // this.delData()
    this.getListData();
  },
  components: { FileUpload },
};
</script>
<style scoped>
.el-select,
.el-input,
.el-textarea {
  width: 500px;
}
</style>