<template>
  <div>
    <!-- 选取文案弹出框 -->
    <el-popover
      class="select-text-popover"
      placement="top-start"
      width="520"
      v-model="visible"
    >
      <!-- 全选按钮 -->
      <el-checkbox
        style="margin-bottom: 20px"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选当前文案</el-checkbox
      >
      <!-- 选择文案 -->
      <el-checkbox-group v-model="checkedText">
        <!-- 这里面的v-model 绑定的就是已经被选中的label 的值 -->

        <el-checkbox
          v-for="(inText, index) in newGetText"
          style="margin-bottom: 20px; width: 100%"
          :key="index"
          :label="inText.text"
          @change="handleCheckedTextChange"
        >
        </el-checkbox>
      </el-checkbox-group>

      <el-button slot="reference" size="small" @click="removeCheck"
        >选文案</el-button
      >
      <!-- 分页 -->
      <el-pagination
        background
        :total="copyWriting.total"
        :page-size="copyWriting.size"
        :page-sizes="pageSizes"
        :current-page="copyWriting.page"
        style="text-align: right; margin-top: 10px"
        layout="total, prev, pager, next, sizes"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        @prev-click="prevPageData"
        @next-click="nextPageData"
      ></el-pagination>
      <div style="text-align: center; margin-top: 20px">
        <el-button size="mini" type="text" @click="cancelClick">取消</el-button>
        <el-button type="primary" size="mini" @click="submitClick(checkedText)"
          >确定</el-button
        >
      </div>
    </el-popover>
  </div>
</template>

<script>
import { getBusinText } from "@/api/cloud";
export default {
  props: {
    appId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visible: false, // 控制弹出框
      /* 获取文案列表 */
      textBusinessCondition: {
        appCategory: "",
        startDate: "",
        endDate: "",
        dateRange: [],
      },
      copyWriting: {
        page: 1,
        size: 10,
        total: null,
      },
      pageSizes: [5, 10, 15],
      /****************/
      newGetText: [], // 获取到的文案数据保存到这里面
      textOptions: [],
      checkedText: [], // 全选时 将全部的文案保存到这里 这里是复选框组双向绑定的 将这个里面的值传递到父组件中
      checkAll: false,
      isIndeterminate: false,
    };
  },
  created() {
    this.APIgetBusinText();
  },
  mounted() {},
  methods: {
    /* 获取文案列表*/
    APIgetBusinText() {
      let params = {
        appId: this.appId,
        page: this.copyWriting.page,
        size: this.copyWriting.size,
      };
      getBusinText(params).then((res) => {
        console.log("文案库列表", res);
        this.newGetText = res.result.data.content;
        this.copyWriting.total = res.result.data.total;
      });
    },

    /* 选中某个文案时将这个文案信息存入数据中 */
    handleCheckedTextChange() {
      console.log(this.checkedText);
    },

    /* 全选按钮 */
    handleCheckAllChange(val) {
      // 当选中这个全选复选框时 将文案放到checkedText 中 这个数据是个el-checkedbox-group 双向绑定的 可以做到全部选中
      console.log(val);
      this.checkedText = [];
      if (this.checkAll) {
        this.newGetText.forEach((item) => {
          this.checkedText.push(item.text);
        });
      } else {
        this.checkedText = [];
      }
    },

    /* 分页*/
    handleCurrentChange(val) {
      this.copyWriting.page = val;
      this.APIgetBusinText();
    },
    handleSizeChange(val) {
      this.copyWriting.size = val;
      this.APIgetBusinText();
    },
    prevPageData() {
      this.copyWriting.page--;
    },
    nextPageData() {
      this.copyWriting.page++;
    },
    /**************/

    /* 取消按钮 */
    cancelClick() {
      this.visible = false;
      this.checkedText = [];
    },

    /* 确定按钮 */
    submitClick(data) {
      this.visible = false;
      // this.$emit('submitData', )
      console.log("数据", data);
      this.$emit("selectData", data);
    },

    removeCheck() {
      this.checkedText = [];
      this.checkAll = false;
      this.APIgetBusinText();
    },
  },
};
</script>

<style>
#el-popover-9923 {
  position: relative !important;
  right: 100px !important;
  top: 100px !important;
}
</style>