<!--
 * @Descripttion: 
 * @version: 
 * @Author: JC9527
 * @Date: 2023-09-18 10:08:30
 * @LastEditors: JC9527
 * @LastEditTime: 2023-09-22 14:18:25
-->
<template>
  <div class="plan-management">
    <div class="plan-topBox">
      <my-input
        @changeInput="changeInput"
        placeholder="请输入活动内容"
        @changeValue="changeValue"
      ></my-input>
    </div>
    <div class="plan-bottomBox">
      <div class="tables">
        <el-table
          :data="tableData"
          :border="false"
          :height="505"
          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="参与活动" width="280">
            <template slot-scope="scope">
              <div class="activity">
                <div>{{ scope.row.content.split(" ")[0] }}</div>
                <div>{{ scope.row.content.split(" ")[1] }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="person"
            label="参与人员"
            show-overflow-tooltip
            width="180"
          >
          </el-table-column>
          <el-table-column prop="duration" label="状态"> </el-table-column>
          <el-table-column prop="time" label="兑换时间"> </el-table-column>
          <el-table-column label="操作" width="250">
            <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>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <my-pagination
          :total="total"
          @pagesChange="pagesChange"
        ></my-pagination>
      </div>
    </div>
    <my-dialog ref="conversion">
      <div class="conversionInfo">
        <div class="basicInfo">
          <div class="title">
            <img src="@/assets/images/huodong.png" alt="" />
            <span>活动详情</span>
          </div>
          <div class="info">
            <div class="lists">
              <div class="list-left">
                <div>活动名称：</div>
                <div>交通指挥</div>
              </div>
              <div class="list-right">
                <div>活动参与日期：</div>
                <div>2023年7月9日</div>
              </div>
            </div>
            <div class="lists">
              <div class="list-left">
                <div>活动地址：</div>
                <div>苏州</div>
              </div>
              <div class="list-right">
                <div>服务时长：</div>
                <div>10h</div>
              </div>
            </div>
            <div class="lists">
              <div class="list-left">
                <div>证书状态：</div>
                <div>已发放</div>
              </div>
            </div>
          </div>
        </div>
        <div class="logisticsInfo">
          <div class="title">
            <img src="@/assets/images/huodong.png" alt="" />
            <span>物流信息</span>
          </div>
          <div class="info">
            <div class="lists">
              <div class="list-left">
                <div>快递公司：</div>
                <div>XXXXXXXXX</div>
              </div>
              <div class="list-right">
                <div>快递单号：</div>
                <div>XXXXXXXXXXX</div>
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <div class="btn" @click="close">关闭</div>
        </div>
      </div>
    </my-dialog>
  </div>
</template>
<script>
import myPagination from "@/views/components/myPagination/index.vue";
import myInput from "@/views/components/myInput/index.vue";
import myDialog from "@/views/components/dialog/index.vue";
export default {
  components: { myPagination, myInput, myDialog },
  data() {
    return {
      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",
        },
      ],
      input: {
        name: "",
      },
      pages: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      loading: false,
      isClick: false,
    };
  },
  methods: {
    // 页码，当前页切换事件
    pagesChange(pages) {
      // console.log(pages)
      this.getList(pages);
    },
    // 输入框的值
    changeInput(value) {
      this.input.name = value;
      this.isClick = true;
      this.pages = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
    // 监听输入框是否清空
    changeValue(value) {
      if (this.isClick && value == "") {
        this.input.name = "";
        this.pages = {
          pageNum: 1,
          pageSize: 10,
        };
        this.getList();
        this.isClick = false;
      }
    },
    // 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 "";
      }
    },
    getList() {},
    // 查看详情
    look(item) {
      this.$refs.conversion.open();
    },
    // 关闭
    close() {
      this.$refs.conversion.Close();
    },
  },
  async created() {},
};
</script>
<style lang="scss" scoped>
.plan-management {
  padding: 0 20px 10px 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: 30px 0 0 0;
  }
  .plan-bottomBox {
    margin-top: 20px;
    .tables {
      ::v-deep .el-table {
        .success-row {
          background-color: rgba(250, 247, 247, 0.5);
        }
        .activity {
          div {
            text-align: left;
            line-height: 20px;
            &:nth-child(1) {
              font-size: 14px;
              font-family: "Alibaba PuHuiTi";
              font-weight: 400;
              color: #4d4949;
            }
            &:nth-child(2) {
              width: 180px;
              font-size: 14px;
              font-family: "Alibaba PuHuiTi";
              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";
          font-weight: 400;
          color: #525966;
          padding: 2px 0;
        }
        th {
          height: 45px;
          background-color: #f7f5f5;
          font-size: 15px;
          font-family: "Alibaba PuHuiTi";
          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;
          margin-right: 30px;
          cursor: pointer;
          img {
            width: 20px;
            margin-right: 5px;
          }
          span {
            font-size: 15px;
            font-family: Alibaba PuHuiTi;
            font-weight: 400;
            color: #045ffd;
          }
        }
      }
    }
    .pagination {
      // margin-top: 10px;
    }
  }
}
::v-deep .conversionInfo {
  .basicInfo,
  .logisticsInfo {
    .title {
      display: flex;
      align-items: center;
      img {
        width: 14px;
        margin-right: 10px;
      }
      span {
        font-size: 16px;
        font-family: "Alibaba PuHuiTi";
        font-weight: bold;
        color: #4c4949;
      }
    }
    .info {
      margin-top: 20px;
      display: grid;
      grid-column: 1fr;
      grid-row-gap: 20px;
      .lists {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list-left,
        .list-right {
          flex: 1;
          display: flex;
          align-items: center;
          div {
            &:nth-child(1) {
              font-size: 14px;
              font-family: "Alibaba PuHuiTi";
              font-weight: 400;
              color: #4c4949;
            }
            &:nth-child(2) {
              font-size: 14px;
              font-family: "Alibaba PuHuiTi";
              font-weight: 400;
              color: #807a7a;
            }
          }
        }
      }
    }
  }
  .logisticsInfo {
    margin-top: 30px;
  }
  .btns {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
    div {
      width: 80px;
      height: 36px;
      border: 1px solid #f8414d;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: "Alibaba PuHuiTi";
      font-weight: 400;
      color: #f8414d;
      cursor: pointer;
    }
  }
}
</style>
