<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-18 15:34:55
-->
<template>
  <div class="plan-management" ref="plan">
    <div class="titleInput" ref="titleInput">
      <el-input
        placeholder="请输入活动名称"
        v-model="form.name"
        class="input-with-select"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="search"
        ></el-button>
      </el-input>
    </div>
    <div ref="elbtn">
      <el-button type="primary" plain @click="addActivity">新增活动</el-button>
    </div>
    <div class="plan-bottomBox">
      <div class="tables">
        <el-table
          :data="tableData"
          :border="false"
          :height="tableHeight"
          ref="table"
          v-loading="loading"
          tooltip-effect="light"
          :row-class-name="tableRowClassName"
          :cell-style="cellStyle"
        >
          <!-- <el-table-column
            label="序号"
            type="index"
            header-align="center"
            width="70"
          >
          </el-table-column> -->
          <el-table-column prop="id" label="ID" align="center" width="90">
          </el-table-column>
          <el-table-column prop="name" label="活动名称" align="center">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址"
            align="center"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="endTime" label="活动状态" align="center">
            <template slot-scope="scope">
              <div
                :class="
                  $moment().isAfter(scope.row.endTime) ? 'color1' : 'color2'
                "
              >
                {{ $moment().isAfter(scope.row.endTime) ? "停止" : "进行中" }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="tabs-btns">
                <div class="look" @click="look(scope.row)">
                  <span>查看</span>
                </div>
                <div class="look" @click="update(scope.row)">
                  <span>修改</span>
                </div>
                <div class="look" @click="deleteA(scope.row)">
                  <span>删除</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination" ref="pagination">
        <my-pagination
          :total="total"
          @pagesChange="pagesChange"
        ></my-pagination>
      </div>
    </div>
    <detailDialog ref="detailDialog"></detailDialog>
    <!-- 新增修改 -->
    <el-dialog
      :visible.sync="addShow"
      width="50%"
      @close="closeAdd"
      :destroy-on-close="true"
    >
      <div slot="title">
        <div class="titleText">{{ titleText }}</div>
      </div>
      <div class="center-content">
        <!-- 活动信息 -->
        <header>
          <div class="icons"></div>
          <span>活动信息</span>
        </header>
        <el-form
          :model="ruleForm1"
          :rules="rules1"
          ref="ruleForm1"
          label-width="90px"
          class="demo-ruleForm"
        >
          <div class="inputBox">
            <el-form-item label="活动名称:" prop="name">
              <el-input
                v-model="ruleForm1.name"
                placeholder="请输入活动名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动地址:" prop="address">
              <el-input
                v-model="ruleForm1.address"
                placeholder="请输入活动地址"
              ></el-input>
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="开始时间:" prop="activityTime">
              <el-date-picker
                v-model="ruleForm1.activityTime"
                type="datetime"
                placeholder="请选择活动开始时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="截止时间:" prop="endTime">
              <el-date-picker
                v-model="ruleForm1.endTime"
                type="datetime"
                placeholder="请选择活动截止时间"
                default-time="12:00:00"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <el-form-item label="活动内容:" prop="content">
            <el-input
              v-model="ruleForm1.content"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>

          <el-form-item label="活动举办方:" prop="publisher">
            <el-input
              v-model="ruleForm1.publisher"
              placeholder="请输入活动举办方"
            ></el-input>
          </el-form-item>
          <!-- 人员要求信息 -->
          <header>
            <div class="icons icons1"></div>
            <span>人员要求信息</span>
          </header>
          <div class="inputBox">
            <el-form-item label="小区:" prop="housingRange">
              <el-input
                v-model="ruleForm1.housingRange"
                placeholder="请输入小区"
              ></el-input>
            </el-form-item>
            <el-form-item label="文化程度:" prop="educationRange">
              <el-select
                v-model="ruleForm1.educationRange"
                placeholder="请选择文化程度"
              >
                <el-option
                  v-for="dict in dict.type.education_range"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="兴趣爱好:" prop="interestRange">
              <el-input
                v-model="ruleForm1.interestRange"
                placeholder="请输入兴趣爱好"
              ></el-input>
            </el-form-item>
            <el-form-item label="政治面貌:" prop="politicalRange">
              <el-select
                v-model="ruleForm1.politicalRange"
                placeholder="请选择政治面貌"
              >
                <el-option
                  v-for="dict in dict.type.political_range"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="性别:" prop="sexRange">
              <el-select v-model="ruleForm1.sexRange" placeholder="请选择性别">
                <el-option
                  v-for="dict in dict.type.sex_range"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄:" prop="ageRange">
              <el-select v-model="ruleForm1.ageRange" placeholder="请选择年龄">
                <el-option
                  v-for="dict in dict.type.age_range"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="inputBox">
            <el-form-item label="专业类型:" prop="professionalRange">
              <el-input
                v-model="ruleForm1.professionalRange"
                placeholder="请输入专业类型"
              ></el-input>
            </el-form-item>
            <el-form-item label="行业类型:" prop="industryRange">
              <el-input
                v-model="ruleForm1.industryRange"
                placeholder="请输入行业类型"
              ></el-input>
            </el-form-item>
          </div>

          <div class="inputBox">
            <el-form-item label="院校:" prop="schoolRange">
              <el-input
                v-model="ruleForm1.schoolRange"
                placeholder="请输入院校"
              ></el-input>
            </el-form-item>
            <el-form-item label="国籍:" prop="nationalityRange">
              <el-input
                v-model="ruleForm1.nationalityRange"
                placeholder="请输入国籍"
              ></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div class="footBtn">
          <el-button @click="submit">提交</el-button>
          <el-button @click="closeAdd">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
import {
  activityList,
  activityAdd,
  activityUpdate,
  activityDelete,
  activityGet,
} from "@/api/volunteer/hdgl";
import detailDialog from "../components/detailDialog.vue";
export default {
  components: { myPagination, detailDialog },
  dicts: ["education_range", "political_range", "sex_range", "age_range"],
  data() {
    return {
      form: {
        name: "",
      },
      tableData: [],
      input: "",
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      loading: false,
      //打开新增
      addShow: false,
      ruleForm1: {
        //活动名称
        name: "",
        //活动时间
        activityTime: "",
        //活动内容
        content: "",
        //活动地址
        address: "",
        //活动举办方
        publisher: "",
        //小区
        housingRange: "",
        //文化程度
        educationRange: "",
        //兴趣爱好
        interestRange: "",
        //政治面貌
        politicalRange: "",
        //性别
        sexRange: "",
        //国籍
        nationalityRange: "",
        //专业类型
        professionalRange: "",
        //行业类型
        industryRange: "",
        //院校
        schoolRange: "",
        //年龄
        ageRange: "",
        //截止时间
        endTime: "",
      },
      rules1: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        //活动开始时间
        activityTime: [
          { required: true, message: "请选择活动开始时间", trigger: "blur" },
        ],
        endTime: [
          { required: true, message: "请选择活动截至时间", trigger: "blur" },
        ],
        //活动内容
        content: [
          { required: true, message: "请输入活动内容", trigger: "blur" },
        ],
        //活动地址
        address: [
          { required: true, message: "请输入活动地址", trigger: "blur" },
        ],
        //活动举办方
        publisher: [
          { required: true, message: "请输入活动举办方", trigger: "blur" },
        ],
      },
      tableHeight: 0,
      //新增修改标题
      titleText: "",
    };
  },
  created() {
    this.getList();
  },
  methods: {
    search() {
      this.pages = { ...this.pages, ...this.form };
      this.getList();
    },
    getList() {
      this.loading = true;
      activityList(this.pages).then((res) => {
        this.total = res.total;
        this.tableData = res.rows;
        this.loading = false;
      });
    },
    //重置
    reset() {
      this.ruleForm1 = {
        name: "",
        activityTime: "",
        content: "",
        address: "",
        publisher: "",
        housingRange: "",
        educationRange: "",
        interestRange: "",
        politicalRange: "",
        sexRange: "",
        nationalityRange: "",
        professionalRange: "",
        industryRange: "",
        schoolRange: "",
        ageRange: "",
        endTime: "",
      };
    },
    //新增
    addActivity() {
      this.titleText = "新增信息";
      this.reset();
      this.addShow = true;
    },
    //修改
    update(e) {
      this.reset();
      this.titleText = "编辑信息";
      activityGet(e.id).then((res) => {
        this.ruleForm1 = res.data;
        this.addShow = true;
      });
    },
    closeAdd() {
      this.reset();
      this.addShow = false;
    },
    look(e) {
      this.$refs.detailDialog.open(e.id);
    },
    //删除
    deleteA(e) {
      this.$modal
        .confirm("是否确认删除该活动?")
        .then(function () {
          return activityDelete(e.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    //确定新增或者修改
    submit() {
      console.log(this.ruleForm1);
      this.$refs.ruleForm1.validate((valid) => {
        if (valid) {
          if (this.ruleForm1.id != undefined) {
            activityUpdate(this.ruleForm1).then((res) => {
              this.$modal.msgSuccess("修改成功");
              this.addShow = false;
              this.getList();
            });
          } else {
            activityAdd(this.ruleForm1).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.addShow = false;
              this.getList();
            });
          }
        }
      });
    },
    // 页码，当前页切换事件
    pagesChange(pages) {
      this.pages.pageNum = pages.pageNum;
      this.pages.pageSize = pages.pageSize;
      this.getList();
    },
    // tabs不同行给不同class
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 !== 0) {
        return "success-row";
      }
      return "";
    },
    // 单元格的 style 的回调方法
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return `text-align:center`;
      } else {
        return "";
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight =
        this.$refs.plan.offsetHeight -
        80 -
        this.$refs.titleInput.offsetHeight -
        this.$refs.elbtn.offsetHeight -
        this.$refs.pagination.offsetHeight;
    });
  },
};
</script>
<style lang="scss" scoped>
.color1 {
  color: #f71052;
}
.color2 {
  color: #23b06c;
}
.titlePagin {
  margin: 12px 0;
  display: flex;
  flex-direction: row-reverse;
}
::v-deep .titlePagin .el-pagination {
  padding: 0;
}
::v-deep .inputBox .el-date-editor {
  width: 100%;
}
::v-deep .titleInput .el-input__inner {
  border-right: none;
}
::v-deep .titleInput .el-input-group__append {
  background: #f8414d;
  border: none;
  color: #fff;
}
.titleInput {
  width: 30%;
  margin-bottom: 10px;
}
.plan-management {
  padding: 20px;
  background-color: #fff;
  height: 100%;
  width: 100%;
  border-radius: 10px 10px 0 0;
  box-shadow: 0px 0px 15px 0px rgba(229, 212, 212, 0.58);
  .plan-topBox {
    padding: 20px 0 0 0;
  }
  .plan-bottomBox {
    margin-top: 10px;
    .tables {
      ::v-deep .el-table {
        .success-row {
          background-color: rgba(250, 247, 247, 0.5);
        }
        .activity {
          div {
            text-align: left;
            &:nth-child(1) {
              font-size: 14px;
              font-family: "Alibaba-PuHuiTi-Regular";

              font-weight: 400;
              color: #4d4949;
            }
            &:nth-child(2) {
              width: 180px;
              font-size: 14px;
              font-family: "Alibaba-PuHuiTi-Regular";

              font-weight: 400;
              color: #999191;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        td {
          // height: 42px;
          box-sizing: border-box;
          // text-align: center;
          font-size: 14px;
          font-family: "Alibaba-PuHuiTi-Regular";
          font-weight: 400;
          color: #525966;
          // padding: 2px 0;
        }
        th {
          // height: 45px;
          background-color: #f7f5f5;
          font-size: 15px;
          font-family: "Alibaba-PuHuiTi-Regular";

          font-weight: bold;
          color: #4d4949;
          .el-checkbox {
            display: none;
          }
        }
      }
      ::v-deep .el-table::before {
        height: 0;
      }
      .tabs-btns {
        display: flex;
        align-items: center;
        justify-content: center;
        .look {
          display: flex;
          align-items: center;
          padding: 0 10px;
          // margin-right: 30px;
          cursor: pointer;
          // img {
          //   width: 20px;
          //   margin-right: 5px;
          // }
          span {
            font-size: 15px;
            font-family: "Alibaba-PuHuiTi-Regular";
            font-weight: 400;
            color: #045ffd;
          }
        }
      }
    }
    .pagination {
      margin-top: 20px;
    }
  }
}
.mainTag {
  display: flex;
  font-family: "Alibaba-PuHuiTi-Regular";
  & > div {
    margin-right: 5px;
    background-color: rgba(248, 65, 77, 0.06);
    padding: 3px 5px;
    color: #e16a70;
    border-radius: 4px;
  }
}
::v-deep .el-dialog {
  border-radius: 10px;
  margin-bottom: 20px;
}
::v-deep .el-dialog__header {
  padding: 10px;
  padding-left: 15px;
  background: #f7f5f5;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__footer {
  padding: 0;
}
::v-deep .el-dialog__headerbtn {
  top: 12px;
}
.titleText {
  font-family: "Alibaba-PuHuiTi-Regular";
  font-weight: bold;
  color: #4c4949;
  padding-left: 15px;
  font-size: 16px;
  position: relative;
  &::before {
    position: absolute;
    top: 3.8px;
    left: 0;
    content: "";
    width: 5px;
    height: 15px;
    background: #f8414d;
  }
}
.center-content {
  padding: 20px 30px;
  header {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    .icons {
      height: 14px;
      width: 14px;
      background-image: url("../../../../assets/images/hdxx.png");
      background-size: 100% 100%;
    }
    .icons1 {
      background-image: url("../../../../assets/images/rypp.png");
    }
    .icons2 {
      background-image: url("../../../../assets/images/baoming1.png");
    }
    span {
      margin-left: 10px;
      color: #4c4949;
      font-weight: bold;
      font-family: "Alibaba-PuHuiTi-Regular";
    }
  }
  .mainsEvents {
    // height: 35px;
    display: flex;
    align-items: center;
    font-family: "Alibaba-PuHuiTi-Regular";
    margin-bottom: 12px;

    .itemE {
      width: 50%;
      display: flex;
      & > div:nth-of-type(1) {
        display: flex;
        // align-items: center;
        color: #4c4949;
        width: 24%;
      }
      & > div:nth-last-of-type(2) {
        color: #807a7a;
      }
    }
  }
  .mainsTitle {
    margin-bottom: 12px;
    display: flex;
    font-family: "Alibaba-PuHuiTi-Regular";
    & > div:nth-of-type(1) {
      color: #807a7a;
      width: 12%;
    }
    & > div:nth-of-type(2) {
      width: 88%;
      color: #606266;
    }
  }
  .noneStyle {
    height: 200px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Alibaba-PuHuiTi-Medium.otf";
    color: #606266;
    font-size: 14px;
  }
  .mainPeople {
    overflow: auto;
    height: 200px;
    box-sizing: border-box;
    margin-bottom: 12px;
    .subMan {
      width: 100%;
      height: 95px;
      background: #fafafa;
      border: 1px solid #f5edeb;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 15px;
      margin-bottom: 10px;
      .leftSub {
        width: 84%;
        height: 100%;
        display: flex;
        align-items: center;
        .leftAvatar {
          height: 65px;
          width: 65px;
          background-size: 100% 100%;
          border-radius: 10px;
        }
        .leftName {
          margin-left: 15px;
          & > div:nth-of-type(1) {
            font-family: "Alibaba-PuHuiTi-Medium.otf";
            color: #4c4949;
            font-size: 18px;
            margin-bottom: 18px;
          }
        }
      }
      .rightSub {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .numPercen {
          display: flex;
          //   align-items: flex-end;
          align-items: center;
          & > span:nth-of-type(1) {
            font-family: "Alibaba-PuHuiTi-Regular";
            font-weight: 400;
            color: #8a8585;
            margin-right: 10px;
          }
          & > span:nth-of-type(2) {
            font-family: "youshebiaotihei";
            color: #49b28f;
            font-size: 20px;
          }
        }
        .itemBtn {
          display: flex;
          justify-content: space-between;
          .look {
            background: #fff;
            border-radius: 4px;
            color: #188ffe;
            font-family: "Alibaba-PuHuiTi-Regular";
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
          }
          .looks {
            background: #fff;
            border-radius: 4px;
            color: #49b28f;
            font-family: "Alibaba-PuHuiTi-Regular";
            padding: 5px 10px;
            cursor: pointer;
            user-select: none;
          }
        }
      }
    }
  }
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-thumb {
  background: #e5d3d4;
}
::-webkit-scrollbar-track {
  background: #f4f1f1;
}
.inputBox {
  display: flex;
  justify-content: space-between;
  & > div {
    width: 47%;
  }
}
::v-deep .el-select {
  width: 100%;
}
::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: "Alibaba-PuHuiTi-Regular";
  font-weight: 400;
  color: #4c4949;
  text-align: left;
  padding-right: 0;
}
.footBtn {
  display: flex;
  flex-direction: row-reverse;
}
::v-deep .footBtn .el-button {
  margin-left: 10px;
  font-family: "Alibaba-PuHuiTi-Regular";
}
</style>
