<template>
  <div class="container">
    <headers></headers>
    <right></right>
    <scrollpage></scrollpage>

    <div class="w box_sizing width_box my_wrap">
      <div class="left_position">
        <left></left>
      </div>
      <div class="question_list_wrap box_sizing">
        <div class="flex_box flex_align_center listtitle">
          <img src="../assets/images/words.png" alt="" />{{ title }}
        </div>
        <div class="flex_align_center flex_box flex_justify_between wordTip">
          <div class="flex_align_center flex_box">
            <input type="checkbox" @click="toall" />
            <div>全选</div>
            <div class="shengci" @click="toShuci(1)">全部标记生词</div>
            <div class="shuci" @click="toShuci(2)">全部标记熟词</div>
            <img src="../assets/images/del.png" alt="" />
          </div>
          <div class="flex_box flex_align_center">
            <div>排序：</div>
            <div class="flex_align_center flex_box all">
              全部<img src="../assets/images/xiajiantou.png" alt="" />
            </div>
            <div class="flex_align_center flex_box all" @click="addTime(1)">
              添加时间<img src="../assets/images/xiajiantou.png" alt="" />
            </div>
            <div class="flex_align_center flex_box all" @click="addTime(2)">
              背诵次数<img src="../assets/images/xiajiantou.png" alt="" />
            </div>
          </div>
        </div>

        <div style="padding-top: 24px">
          <div
            class="flex_align_center flex_box flex_justify_between wordTip"
            style="padding: 16px 0"
            v-for="(item, index) in words"
            :key="index"
          >
            <div class="flex_box flex_align_center">
              <input
                type="checkbox"
                :checked="item.flag"
                @click="tosigle(index)"
              />
              <div
                class="circle"
                :style="item.status == 2 ? 'background:#67ddbf' : ''"
              ></div>

              <!-- <div class="circle" v-if="item.status == 1"></div>
              <div class="f_c" v-if="item.status == 2"></div> -->

              <div>{{ item.word.word }}</div>
            </div>
            <div class="flex_align_center flex_box">
              <div>背诵{{ item.num }}次</div>
              <div
                class="shengci"
                @click="toShuci(1, $event)"
                :data-id="item.word_id"
                :data-word="item.word.word"
              >
                标记生词
              </div>
              <div
                class="shuci"
                @click="toShuci(2, $event)"
                :data-id="item.word_id"
                :data-word="item.word.word"
              >
                标记熟词
              </div>
              <img
                src="../assets/images/del.png"
                alt=""
                @click="toShuci(3, $event)"
                :data-id="item.word_id"
                v-if="id == 0"
              />
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            class="fenye"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="prev, pager, next,total"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <footers></footers>
  </div>
</template>

<script>
import headers from "@/components/headers";
import footers from "@/components/footders";
import left from "@/components/left";
import right from "@/components/right";
import scrollpage from "@/components/scrollpage";
var _this;
export default {
  components: {
    headers,
    footers,
    left,
    right,
    scrollpage,
  },
  data() {
    return {
      id: "", //单词本id
      title: "",
      words: [],
      status: "", //状态0全部,1=生词,2=熟词
      sort_field: "", //添加时间
      sort: "", //1升序，2降序
      page: 1,
      total: 0, //总条数

      word_id: "", //单词id
      //
      // orderList: [],
      // 全选装填
      selectAllStatus: false,
    };
  },
  created() {
    _this = this;
    _this.getParams();
  },
  methods: {
   

    // 获取传递过来的参数
    getParams() {
      _this.id = _this.$route.query.id;
      _this.title = _this.$route.query.title;
      _this.getList();
    },

    // 获取列表
    getList() {
      let params = {
          word_book_id: _this.id,
          status: _this.status,
          sort_field: _this.sort_field,
          sort: _this.sort,
          page: _this.page,
          per_page: 10,
        },
        url = "";
      if (_this.id == 0) {
        url = "word.user_word_book/lis";
      } else {
        url = "word.user_word_book/bookList";
        // params.word_book_id = _this.id;
      }
      _this.$axios
        .post(url, params)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            let list = res.data.data;

            list.forEach((el) => {
              el.flag = false;
            });

            _this.words = list;
            _this.total = res.data.total;
          } else {
            _this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加时间,背诵次数
    addTime(e) {
      _this.sort_field = e;

      _this.getList();
    },

    // // 标记，删除
    toShuci(num, e) {
      console.log(num);
      console.log(e.target.dataset.id);
      console.log(e.target.dataset.word);
      let type = num;
      _this.word_id = e.target.dataset.id;

      let url = "word.user_word_book/changeStatus";
      let params = {
        word_book_id: _this.id,
        word_id: _this.word_id,
        type: type,
        
      };

      console.log(params);

      var list = _this.words;
      _this.$axios
        .post(url, params)
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            list.forEach((item) => {
              if (item.word_id == _this.word_id) {
                if (type == 1) {
                  item.status = 1;
                  item.num = item.num + 1;
                } else if (type == 2) {
                  item.status = 2;
                  item.num = item.num + 1;
                }
              }
            });

            _this.words = list;

            if (type == 1 || type == 2) {
              _this.$message({
                message: "标记成功",
                type: "success",
              });
            } else if (type == 3) {
              _this.$message({
                message: "删除成功",
                type: "success",
              });
              _this.page = 1;
              _this.total = "";
              _this.words = [];
              _this.getList();
            }
          } else {
            _this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
     // 全选
    toall(e) {
      console.log(e);
      var list = this.words;
      var orderList = [];
      //全选按钮---取反
      this.selectAllStatus = !this.selectAllStatus;

      list.forEach((item) => {
        item.flag = this.selectAllStatus;
        if (this.selectAllStatus) {
          orderList.push(item.id);
        } else {
          orderList = [];
        }
      });
      //更新data中的数据
      this.words = list;
      this.word_id = orderList.join(",");
    },

    // 单选
    tosigle(e) {
      console.log(e);
      var list = this.words;
      var flag = list[e].flag;
      var orderList = [];
      list[e].flag = !flag;
      this.words = list;
      console.log(orderList);
      list.forEach((item) => {
        console.log(item);
        if (item.flag) {
          orderList.push(item.word_id);
        }
      });

      this.word_id = orderList.join(",");
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      _this.page = val;
      _this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      _this.page = val;
      _this.getList();
    },
  },
};
</script>


<style>
.listtitle {
  font-size: 16px;
  font-weight: 600;
  line-height: 44px;
  color: #b90038;
}
.listtitle img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.wordTip {
  border-bottom: 1px solid #eeeeee;
}
.wordTip input {
  width: 30px;
  height: 30px;
  transform: scale(0.6);
  border: 1px solid black;
  margin-right: 6px;
}
.wordTip img {
  width: 20px;
  height: 20px;
  margin-left: 22px;
}
.wordTip .shengci {
  width: 115px;
  height: 24px;
  background: linear-gradient(180deg, #f5a65c 0%, #fb9739 100%);
  opacity: 1;
  border-radius: 12px;
  color: #ffffff;
  text-align: center;
  line-height: 24px;
  margin: 0 16px 0 24px;
}
.wordTip .shuci {
  width: 115px;
  height: 24px;
  background: linear-gradient(180deg, #67ddbf 0%, #31b99e 100%);
  opacity: 1;
  border-radius: 12px;
  color: #ffffff;
  text-align: center;
  line-height: 24px;
}
.wordTip .all {
  font-style: 16px;
  color: #8c9198;
  margin-left: 30px;
}
.all img {
  width: 12px;
  height: 12px;
  margin-left: 6px;
}
.wordTip .circle {
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, #f5a65c 0%, #fb9739 100%);
  border-radius: 50%;
  opacity: 1;
  margin-right: 10px;
}
.f_c {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 1;
  margin-right: 10px;
  background: linear-gradient(180deg, #67ddbf, #31b99e);
}
.fenye {
  margin-top: 20px;
  width: 30%;
  margin-left: auto;
}
input[type="checkbox"]:checked {
  color: #31b99e;
  background: #31b99e;
}
</style>