<!--
 * @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="input3"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div ref="elbtn">
      <el-button type="primary" plain @click="addDist">新增标签字典</el-button>
    </div>
    <div class="plan-bottomBox">
      <div class="tables">
        <el-table
          :data="tableData"
          :border="false"
          :height="tableHeight"
          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="content" label="字典名称" align="center">
            <template slot-scope="scope">
              {{ scope.row.content.split(" ")[0] }}
            </template>
          </el-table-column>
          <el-table-column prop="duration" label="字典类型" align="center">
          </el-table-column>
          <el-table-column prop="duration" label="状态" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <div class="tabs-btns">
                <!-- <div class="look" @click="look(scope.row)">
                  <img src="@/assets/images/look.png" alt="" />
                  <span>查看</span>
                </div> -->
                <div class="look" @click="update(scope.row)">
                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
                  <span>修改</span>
                </div>
                <div class="look" @click="deleteA(scope.row)">
                  <!-- <img src="@/assets/images/look.png" alt="" /> -->
                  <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>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      @close="closeD"
    >
      <div slot="title">
        <div class="titleText">查看详情</div>
      </div>
      <div class="center-content">
        <el-form
          :model="ruleForm"
          :rules="rules1"
          ref="ruleForm"
          label-width="90px"
          class="demo-ruleForm"
        >
          <el-form-item label="字典名称:" prop="name">
            <el-input v-model="ruleForm.a5" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="字典类型:" prop="name">
            <el-input v-model="ruleForm.a5" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="状态:" prop="name">
            <el-radio-group v-model="ruleForm.a1">
              <el-radio label="正常"></el-radio>
              <el-radio label="停用"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="footBtn">
          <el-button>提交</el-button>
          <el-button>取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
export default {
  components: { myPagination, },
  data() {
    return {
      input3: "",
      tableData: [
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
        {
          content: "志愿活动协助指挥交通 我参加的志愿者活动，指挥交通",
          person: "吴加好",
          duration: "10",
          time: "2023-08-14",
        },
      ],
      ruleForm: {
        a5: "",
        a1: "",
      },
      input: "",
      pages: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      loading: false,
      rules1: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      dialogVisible: false,
      tableHeight:0,
    };
  },

  methods: {
    closeD() {
      this.dialogVisible = false;
    },
    addDist() {
      this.dialogVisible = true;
    },
    //修改
    update() {
      this.upShow = true;
    },
    //删除
    deleteA() {},
    //查看
    look() {
      this.dialogVisible = true;
    },
    // 页码，当前页切换事件
    pagesChange(pages) {
      // console.log(pages)
      this.getList(pages);
    },
    // 输入框的值
    changeInput(value) {
      this.input = value;
    },
    // 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>
::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;
    }
  }
}
::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;
  }
}
.footBtn {
  display: flex;
  flex-direction: row-reverse;
}
::v-deep .footBtn .el-button {
  margin-left: 10px;
  font-family: "Alibaba-PuHuiTi-Regular";
}
.center-content {
  padding: 20px;
}
::v-deep .center-content .el-form-item__label {
  font-size: 14px;
  font-family: "Alibaba-PuHuiTi-Regular";
  font-weight: 400;
  color: #4c4949;
  text-align: right;
}
</style>
