<template>
  <div class="app-container">
    <el-form
      border
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-form-item label="项目类型">
        <el-radio v-model="ruleForm.classify" :label="1" border size="medium"
          >人文项目</el-radio
        >
        <el-radio v-model="ruleForm.classify" :label="2" border size="medium"
          >医教项目</el-radio
        >
        <el-radio v-model="ruleForm.classify" :label="3" border size="medium"
          >患教项目</el-radio
        >
      </el-form-item>
      <el-form-item label="报名项目名称" prop="name">
        <el-input
          style="width: 500px"
          v-model.trim="ruleForm.name"
          @input="(e) => (ruleForm.name = validForbid(e))"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目简介" prop="synopsis">
        <el-input
          style="width: 500px"
          type="textarea"
          :rows="5"
          v-model.trim="ruleForm.synopsis"
          @input="(e) => (ruleForm.synopsis = validForbid(e))"
        ></el-input>
      </el-form-item>
      <el-form-item label="项目时间">
        <el-date-picker
          v-model="ruleForm.time1"
          type="daterange"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          range-separator="至"
          @input="daterangeChange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="报名截止时间">
        <el-date-picker
          v-model="ruleForm.time2"
          type="daterange"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          range-separator="至"
          @input="daterangeChange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目长图封面">
        <el-upload
          :action="uploadUrl"
          class="avatar-uploader"
          accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF"
          :show-file-list="false"
          :on-success="handok"
        >
          <img
            v-if="ruleForm.coverBig"
            :src="ruleForm.coverBig"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="项目小图封面">
        <el-upload
          :action="uploadUrl"
          class="avatar-uploader"
          :show-file-list="false"
          accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF"
          :on-success="handokiocn"
        >
          <img
            v-if="ruleForm.coverSmall"
            :src="ruleForm.coverSmall"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="精彩瞬间">
        <el-upload
          :action="uploadUrl"
          list-type="picture-card"
          class="avatar-uploader"
          :on-remove="handleRemove"
          :file-list="ruleForm.wonderfulImgs"
          accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG,.PBG,.GIF"
          :on-success="handokWonderfulImgs"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="审批人" required="">
        <el-button type="primary" @click="hanshow">添加审批人</el-button>
      </el-form-item>
      <el-form-item>
        <el-tag
          style="margin-right: 10px"
          closable
          :type="tag.type"
          v-for="tag in newList"
          :key="tag.userId"
          @close="getCloseTab(tag)"
        >
          {
   
   { tag.userName }}
        </el-tag>
      </el-form-item>
      <!-- <el-form-item label="审核状态" prop="examineStatus">
        <el-radio
          v-model="ruleForm.examineStatus"
          style="margin-right: 10px"
          :label="1"
          >未通过</el-radio
        >
        <el-radio v-model="ruleForm.examineStatus" :label="2">通过</el-radio>
      </el-form-item>
      <el-form-item label="上线状态" prop="status">
        <el-switch
          v-model="ruleForm.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-form-item> -->
      <el-form-item>
        <el-button @click="handBack">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 添加审批人 -->
    <div>
      <el-dialog title="添加审核人" @close="handSeClose" :close-on-click-modal="false" :visible.sync="dialogTableVisible">
        <div style="margin-bottom: 10px">
          <el-tag
            style="margin-right: 10px"
            :type="tag.type"
            v-for="tag in newList"
            closable
            :key="tag.userId"
            @close="getCloseTab(tag)"
          >
            {
   
   { tag.userName }}
          </el-tag>
        </div>
        <div>
          <el-cascader
            v-model="listQuery.deptId"
            :options="addressList"
            placeholder="请选择部门"
            style="margin-bottom: 10px"
            :props="{ children: 'childrens' }"
            @change="handleChange"
          ></el-cascader>
          <el-input
            v-model="listQuery.name"
            placeholder="请输入姓名搜索"
            style="margin-left: 15px; width: 30%"
            class="filter-item"
            @input="getSelect"
          />
          <el-table
            ref="singleTable"
            :data="tableData"
            highlight-current-row
            border
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"> </el-table-column>
            <el-table-column label="姓名">
              <template slot-scope="scope">{
   
   { scope.row.nickName }}</template>
            </el-table-column>
            <el-table-column label="性别">
              <template slot-scope="scope">{
   
   {
                scope.row.sex == 0 ? "男" : "女"
              }}</template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" show-overflow-tooltip>
            </el-table-column>
          </el-table>
          <div style="margin:10px 0px;" v-if="total!=0">
       <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :current-page="param.page"
        :total="total"
        :page-size="param.rows"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
          </div>
          <div style="margin-top: 10px; text-align: right">
            <el-button @click="handSeClose">取消</el-button>
            <el-button type="primary" @click="onSubmit()">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import config from "../../api/config";
export default {
  name: "moveList",
  data() {
    return {
      datas: {
        token: this.$store.getters.token,
      },
      dialogTableVisible: false,
      row: {},
      total:0,
      param:{
        page:1,
        rows:15
      },
      dialogEdit: false,
      listQuery: {},
      addressList: [],
      operateType: "创建",
      tablist: [],
      multipleSelection: [],
      uploadUrl: config.actionUrl,
      dialogVisible: false,
      ruleForm: {
        wonderfulImgs: [],
        coverSmall: "",
        coverBig: "",
        time1: [],
        time2: [],
        synopsis: "",
        name: "",
        multipleSelection: [],
      },
      newList: [],
      rules: {
        name: [
          { required: true, message: "请输入报名项目名称", trigger: "blur" },
        ],
        synopsis: [
          { required: true, message: "请输入项目简介", trigger: "blur" },
        ],
        status: [
          { required: true, message: "请选择上线状态", trigger: "blur" },
        ],
        examineStatus: [
          { required: true, message: "请选择审核状态", trigger: "blur" },
        ],
        multipleSelection: [
          { required: true, message: "请选择审批人", trigger: "blur" },
        ],
      },
      menberList: [],
      // 删除提示弹窗
      dialogDelete: false,
      page: 1,
      // 默认一页多少条
      limit: 15,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 0,
      total: 0,
      listQuery: {},
      ZwList: [],
      tableData: [],
      Mlist: [],
      multipleSelection: [],
    };
  },
  created() {},
  mounted() {
    var that = this;
    if (this.$route.query.id) {
      that.initData();
    }
    this.initSelectZyz();
    this.initDept();
  },
  methods: {
    /**
     * 初始化加载数据
     */
    initData() {
      var that = this;
      that.$network
        .post("/manage/item/detail", {
          id: this.$route.query.id,
        })
        .then((res) => {
          if (res.code == 200) {
            var array = [];
            if (res.data.wonderfulImgs.length > 0) {
              for (var i in res.data.wonderfulImgs) {
                array.push({
                  url: res.data.wonderfulImgs[i],
                });
              }
            }
            var time1 = [];
            var time2 = [];

            time1.push(res.data.startTime);
            time1.push(res.data.endTime);
            time2.push(res.data.signUpStartTime);
            time2.push(res.data.signUpEndTime);
            this.ruleForm = res.data;
            this.ruleForm.time1 = time1;
            this.ruleForm.time2 = time2;
            this.ruleForm.wonderfulImgs = array;

            if (res.data.examineFlows) {
              for (var i in res.data.examineFlows) {
                res.data.examineFlows[i].userId =
                  res.data.examineFlows[i].value;
                res.data.examineFlows[i].userName =
                  res.data.examineFlows[i].text;
              }
            }
            this.multipleSelection = res.data.examineFlows;
            this.newList = res.data.examineFlows;
          }
        })
        .catch((error) => {});
    },
    // 更新
    daterangeChange(e) {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
    /**
     * 获取职务
     */
    initSelectZyz() {
      var that = this;
      that.$store
        .dispatch("all/getDictSelect", {
          id: "yishengzhiyuanzhezhiwu",
        })
        .then((res) => {
          if (res.code == 200) {
            console.log("zrf", res);
            that.ZwList = res.data;
          }
        })
        .catch((error) => {});
    },
    getSelect(e) {
      this.initEvPro();
    },
    initEvPro() {
      var that = this;
      if (that.listQuery.deptId || that.listQuery.name) {
        var param = {};
        if (that.listQuery.deptId) {
          param.deptId = that.listQuery.deptId;
        }
        if (that.listQuery.name) {
          param.name = that.listQuery.name;
        }
        that.$network
          .post("/manage/user/listByDept", param)
          .then((res) => {
            if (res.code == 200) {
              console.log(res);

              for (var i in res.data.list) {
                for (var j in this.newList) {
                  if (res.data.list[i].userId == this.newList[j].userId) {
                    res.data.list.splice(i, 1);
                  }
                }
              }
              this.tableData = res.data.list;
              this.total=res.data.total
            }
          })
          .catch((error) => {});
      }
    },
    /**
     * 获取部门ID
     */
    handleChange(data) {
      var that = this;
      var len = data.length;
      that.listQuery.deptId = data[len - 1];
       var param = {};
        if (that.listQuery.deptId) {
          param.deptId = that.listQuery.deptId;
        }
        if (that.listQuery.name) {
          param.name = that.listQuery.name;
        }
        param.page=this.param.page;
        param.rows=this.param.rows;
      that.$network
        .post("/manage/user/listByDept",param)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);

            for (var i in res.data.list) {
              for (var j in this.newList) {
                if (res.data.list[i].userId == this.newList[j].userId) {
                  res.data.list.splice(i, 1);
                }
              }
            }
            this.tableData = res.data.list;
            this.total=res.data.total
          }
        })
        .catch((error) => {});
    },
    /**
     * 获取部门
     */
    initDept() {
      var that = this;
      that.$network
        .post("/manage/dept/deptSelectAll", {})
        .then((res) => {
          if (res.code == 200) {
            console.log("数据11===>", res.data);
            for (var i in res.data) {
              res.data[i].label = res.data[i].deptName;
              res.data[i].value = res.data[i].deptId;
              res.data[i].disabled = res.data[i].status == 0 ? true : false;
              for (var j in res.data[i].children) {
                if (res.data[i].children.length > 0) {
                  res.data[i].childrens = res.data[i].children;
                  res.data[i].childrens[j].label =
                    res.data[i].children[j].deptName;
                  res.data[i].childrens[j].value =
                    res.data[i].children[j].deptId;
                  res.data[i].children[j].disabled =
                    res.data[i].children[j].status == 0 ? true : false;
                }
                for (var k in res.data[i].children[j].children) {
                  if (res.data[i].children[j].children.length > 0) {
                    res.data[i].childrens[j].childrens =
                      res.data[i].children[j].children;
                    res.data[i].childrens[j].childrens[k].label =
                      res.data[i].children[j].children[k].deptName;
                    res.data[i].childrens[j].childrens[k].value =
                      res.data[i].children[j].children[k].deptId;
                    res.data[i].children[j].children[k].disabled =
                      res.data[i].children[j].children[k].status == 0
                        ? true
                        : false;
                  }
                }
              }
            }
            that.addressList = res.data;
          }
        })
        .catch((error) => {});
    },
    /**
     * 删除标签
     */
    getCloseTab(tab) {
      var that = this;
      console.log(tab);
      for (var i in this.newList) {
        if (tab.userId == this.newList[i].userId) {
          this.newList.splice(i, 1);
        }
      }
      for (var j in this.multipleSelection) {
        if (tab.userId == this.multipleSelection[j].userId) {
          this.multipleSelection.splice(j, 1);
        }
      }
      this.initEvPro();
      // for (var j in this.tableData) {
      //   if (tab.userId == this.tableData[j].userId) {
      //     console.log("111");
      //     if (this.tableData[j]) {
      //       this.$refs.singleTable.toggleRowSelection(this.tableData[j]);
      //     } else {
      //       this.$refs.singleTable.clearSelection();
      //     }
      //   }
      // }
      // this.$forceUpdate();
    },
    handSeClose(){
      this.listQuery.name="";
      this.listQuery.deptId=""
      this.dialogTableVisible=false;
      this.tableData=[];
    },
    onSubmit() {
      this.dialogTableVisible = false;

      console.log("数据===>", this.newList);
      this.listQuery.deptId = "";
      this.tableData = [];
    },
    handleSelectionChange(val) {
      var that = this;
      if (this.newList.length > 0) {
        for (var j in this.newList) {
          val.push(this.newList[j]);
        }
      }
      console.log("val.length", val.length);
      console.log("this.newList.length", this.newList.length);
      if (val.length > 4 || this.newList.length > 4) {
        this.$message({
          type: "error",
          message: "最多选四个标签哦!",
        });
        that.Mlist = [];
        this.$refs.singleTable.clearSelection();
        return false;
      } else {
        that.Mlist = val;
        for (var i in this.Mlist) {
          this.newList.push(this.Mlist[i]);
        }
        var result = [];
        var obj = {};
        for (var i = 0; i < this.newList.length; i++) {
          if (!obj[this.newList[i].userId]) {
            result.push(this.newList[i]);
            obj[this.newList[i].userId] = true;
          }
        }
        this.newList = result;
        // 最终结果
        for (var i in this.tableData) {
          for (var j in this.newList) {
            if (this.tableData[i].userId == this.newList[j].userId) {
              this.tableData.splice(i, 1);
            }
          }
        }
      }
    },
     // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      // 点击每页显示的条数时，显示第一页
      this.initEvPro();
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      var that = this;
      this.param.page = val;
      that.initEvPro();
    },
    hanshow() {
      this.dialogTableVisible = true;
      // this.tableData=[];
      //     this.listQuery.deptId="";
    },
    /**
     * 提交
     */
    submitForm(formName) {
      var that = this;
      console.log(this.ruleForm);
      var list = this.ruleForm.wonderfulImgs.map((item) => {
        return `${item.url}`;
      });
      var startTime;
      var lineTime;
      var endTime;
      var lineEndTime;
      if (this.ruleForm.time1 && this.ruleForm.time1 != "") {
        startTime = new Date(this.ruleForm.time1[0].replace(/-/g, "/"));
        endTime = new Date(this.ruleForm.time1[1].replace(/-/g, "/"));
      }
      if (this.ruleForm.time2 && this.ruleForm.time2 != "") {
        lineTime = new Date(this.ruleForm.time2[0].replace(/-/g, "/"));
        lineEndTime = new Date(this.ruleForm.time2[1].replace(/-/g, "/"));
      }
      if (lineTime < startTime || lineTime > endTime || lineEndTime > endTime) {
        this.$message({
          type: "error",
          message: "报名时间必须在项目时间范围内!",
        });
        return;
      }
      if (this.ruleForm.status == 1) {
        console.log("this.ruleForm.time1", this.ruleForm.time1);
        if (!this.ruleForm.time1 || this.ruleForm.time1 == "") {
          this.$message({
            type: "error",
            message: "请选择项目时间!",
          });
          return;
        }
      }
      var examineFlows = [];
      if (this.newList.length == 0) {
        this.$message({
          type: "error",
          message: "请选择审批人",
        });
        return;
      }
      for (var i in this.newList) {
        if (this.newList[i].userId) {
          examineFlows.push(this.newList[i].userId);
        } else {
          this.$message({
            type: "error",
            message: "根据部门id获取用户,后台未返回ID字段无法获取",
          });
          return;
        }
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.$route.query.id) {
            that.$network
              .post("/manage/item/updateSelf", {
                classify: this.ruleForm.classify,
                id: this.$route.query.id,
                coverBig: this.ruleForm.coverBig,
                coverSmall: this.ruleForm.coverSmall,
                name: this.ruleForm.name,
                startTime: this.ruleForm.time1 ? this.ruleForm.time1[0] : "",
                endTime: this.ruleForm.time1 ? this.ruleForm.time1[1] : "",
                signUpStartTime: this.ruleForm.time2
                  ? this.ruleForm.time2[0]
                  : "",
                signUpEndTime: this.ruleForm.time2
                  ? this.ruleForm.time2[1]
                  : "",
                status: this.ruleForm.status,
                synopsis: this.ruleForm.synopsis,
                examineFlows: examineFlows,
                wonderfulImgs: list,
                // canJoinPostIds: this.ruleForm.canJoinPostIds
              })
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "修改成功",
                  });
                  this.$router.go(-1);
                }
              })
              .catch((error) => {});
          } else {
            that.$network
              .post("/manage/item/saveSelf", {
                classify: this.ruleForm.classify,
                coverBig: this.ruleForm.coverBig,
                coverSmall: this.ruleForm.coverSmall,
                name: this.ruleForm.name,
                pubDate: this.ruleForm.pubDate,
                startTime: this.ruleForm.time1 ? this.ruleForm.time1[0] : "",
                endTime: this.ruleForm.time1 ? this.ruleForm.time1[1] : "",
                signUpStartTime: this.ruleForm.time2
                  ? this.ruleForm.time2[0]
                  : "",
                signUpEndTime: this.ruleForm.time2
                  ? this.ruleForm.time2[1]
                  : "",
                status: this.ruleForm.status,
                synopsis: this.ruleForm.synopsis,
                // canJoinPostIds: this.ruleForm.canJoinPostIds,
                wonderfulImgs: list,
                examineFlows: examineFlows,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "添加成功",
                  });
                  this.$router.go(-1);
                }
              })
              .catch((error) => {});
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handBack() {
      this.$router.go(-1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      console.log("链接地址==>");
      this.dialogVisible = true;
    },

    handok(file) {
      console.log("file", file);
      if (file.code != 200) {
        this.$message({
          type: "error",
          message: file.msg,
        });
      } else {
        this.ruleForm.coverBig = file.data;
      }
    },

    handokiocn(file) {
      console.log(file);
      if (file.code != 200) {
        this.$message({
          type: "error",
          message: file.msg,
        });
      } else {
        this.ruleForm.coverSmall = file.data;
      }
    },
    handokWonderfulImgs(response, file, fileList) {
      console.log("fileList", fileList);
      var that = this;
      var arrar = [];
      for (var i in fileList) {
        console.log("fileList[i].response", fileList[i]);
        if (fileList[i].response) {
          arrar.push({
            url: fileList[i].response.data,
          });
        } else {
          arrar.push({
            url: fileList[i].url,
          });
        }
      }
      that.ruleForm.wonderfulImgs = arrar;
    },
    handleRemove(file, fileList) {
      var that = this;
      console.log("删除", fileList);
      var arrar = [];
      for (var i in fileList) {
        arrar.push({
          name: 1,
          url: fileList[i].url,
        });
      }
      that.ruleForm.wonderfulImgs = arrar;
    },
    /**
     * 格式化json
     */
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};
</script>
<style>
@import url("../../styles/all.css");

.headbox {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #f5f5f5;
}
.headOperView {
  position: absolute;
  right: 15px;
}
.headOperViewText {
  position: absolute;
  left: 15px;
  font-size: 15px;
  font-weight: bolder;
  color: #333;
}
.headInputBox {
  position: relative;
  margin-top: 15px;
  margin-right: 10px;
}
.filter-container {
  position: relative;
  display: flex;
  text-align: left;
  flex: 1;
}
.operBox {
  position: relative;
  text-align: center;
}
.handBots {
  position: relative;
  width: 100%;
  height: 110px;
  background-color: #fff;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}
.checbox {
  width: 100%;
  padding-left: 15px;
  padding-top: 15px;
}
.oBtn {
  margin: 10px 0px;
  text-align: center;
}
.formOPery {
  position: relative;
  width: 100%;
  text-align: right;
}
.coverimg {
  width: 70%;
  height: 100px;
}
</style>