<template>
  <div>
    <div class="link_upload">
      <div class="count">
        <div class="select">
          <p>上传平台</p>
          <select @change="slectPlatForm($event)" v-model="selectedForm">
            <option
              v-for="(item, index) in optionList"
              :key="index"
              :data-index="index"
            >
              {{ item.platformName }}
            </option>
          </select>
        </div>
        <div @click="showModal" class="current_button">新增</div>
      </div>
      <div class="table">
        <Table
          :tableData="tableData"
          @edit="edit"
          @delet_data="deleteData"
          :pageSize="sum"
        ></Table>
      </div>
      <div class="page" v-if="sum !== 0">
        <Tablepage
          :totalPage="totalPage"
          :currentPage="currentPage"
          @change_page="changePage"
          @jump_page="jumpPage"
          :sum="sum"
        ></Tablepage>
        <Count :sum="sum"></Count>
      </div>
      <div class="modal" v-if="modalFlag">
        <Modal
          :modalFlag="modalFlag"
          @submit="submit"
          @hide_modal="showModal"
          :selectedplateForm="selectedplateForm"
        ></Modal>
      </div>
    </div>
  </div>
</template>

<script>
import Count from "../../components/Count";
import Tablepage from "../../components/TablePage";
import Table from "./components/LinkUpload/Table";
import Modal from "./components/LinkUpload/Modal";

export default {
  components: {
    Count,
    Table,
    Tablepage,
    Modal,
  },
  data() {
    return {
      sum: 0, // 一共有多少条数据
      pageSize: 20, // 每页展示的数据
      currentPage: 1,
      tableData: [],
      modalFlag: false, // 控制模态框展示
      optionList: [],
      selectedForm: "",
      selectedplateForm: {},
      plateFormId: "", // 平台的id
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
    // 获取路由参数
    queryTag() {
      console.log(111, this.$route.query);
      return this.$route.query && this.$route.query.tag ? 0 : 1;
    },
  },
  methods: {
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      let res = {
        publishPlatformId: this.plateFormId,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.selectMediaPublishList(res);
    },
    // 点击上一页，下一页，首页，尾页
    jumpPage: function (item) {
      switch (item) {
        case 1:
          this.currentPage = 1;
          break;
        case 2:
          this.currentPage = this.currentPage - 1;
          break;
        case 3:
          this.currentPage = this.currentPage + 1;
          break;
        case 4:
          this.currentPage = this.totalPage;
          break;
      }
      let res = {
        publishPlatformId: this.plateFormId,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.selectMediaPublishList(res);
    },
    // 展示、隐藏模态框
    showModal: function () {
      this.modalFlag = !this.modalFlag;
    },
    // 点击编辑
    edit(index, newCount) {
      let id = this.tableData[index]["id"];
      this.updateGroupInfo(id, newCount, this.plateFormId).then(() => {
        let res = {
          publishPlatformId: this.plateFormId,
          page: this.currentPage,
          rows: this.pageSize,
        };
        this.selectMediaPublishList(res);
      });
    },
    // 点击删除
    deleteData(index) {
      let id = this.tableData[index]["id"];
      let res = {
        id,
        publishPlatformId: this.plateFormId,
      };
      this.deleteMediaPublishInfo(res).then(() => {
        this.currentPage = Math.ceil((this.sum - 1) / this.pageSize);
        let dataObj = {
          publishPlatformId: this.plateFormId,
          page: this.currentPage,
          rows: this.pageSize,
        };
        this.selectMediaPublishList(dataObj);
      });
    },
    // 模态框保存
    submit: function (time, num, obj) {
      let addTime = time.replace("-", "/");
      this.addMediaPublishInfo(+num, addTime, obj.platformName, obj.id).then( () => {
          this.currentPage = Math.ceil((this.sum + 1) / this.pageSize);
          let req = {
            publishPlatformId: this.plateFormId,
            page: this.currentPage,
            rows: this.pageSize,
          };
          this.selectMediaPublishList(req);
        }
      );
      this.modalFlag = false;
    },
    // 选择上传平台
    slectPlatForm: function (e) {
      let index = e.target.options.selectedIndex;
      this.selectedplateForm = this.optionList[index];
      this.plateFormId = this.optionList[index]["id"];
      let req = {
        publishPlatformId: this.plateFormId,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.selectMediaPublishList(req);
    },
    // 新增 接口
    addMediaPublishInfo: function (
      publishCount,
      publishMonth,
      publishPlatformName,
      publishPlatformId
    ) {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/base/mediaPublishManager/addMediaPublishInfo",
          data: {
            publishCount,
            publishMonth,
            publishPlatformName,
            publishPlatformId,
          },
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else if (res.data && res.data.code === 400 && res.data.message === "该平台在该月份已经有值"){
              alert(res.data.message);
              console.log(res);
            } else {
              alert('新增失败，请重试');
              reject(res);
            }
          })
          .catch((err) => {
            console.log(err);
            reject(err);
          });
      });
    },
    // 获取列表 接口
    selectMediaPublishList: function (data) {
      this.$http({
        method: "post",
        url: "/base/mediaPublishManager/selectMediaPublishList",
        data,
      })
        .then((res) => {
          this.tableData = [];
          if (res.data && res.data.code === 200) {
            console.log(res, 2222);
            this.sum = res.data.count;
            this.tableData = res.data.data;
            console.log(this.tableData);
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑，接口
    updateGroupInfo: function (id, publishCount, publishPlatformId) {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/base/mediaPublishManager/updateMediaPublishInfo",
          data: {
            id,
            publishCount,
            publishPlatformId,
          },
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("编辑失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            alert("编辑失败，请重试");
            console.log(err);
            reject(err);
          });
      });
    },
    // 删除 接口
    deleteMediaPublishInfo: function (data) {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/base/mediaPublishManager/deleteMediaPublishInfo",
          data,
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("编辑失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            alert("编辑失败，请重试");
            console.log(err);
            reject(err);
          });
      });
    },
    // 获取平台列表 接口
    selectPublishPlatformPage: function () {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/base/publishPlatformManager/selectPublishPlatformPage",
          data: {},
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res, 111);
              this.optionList = res.data.data;
              this.selectedForm = this.optionList[0]["platformName"];
              this.selectedplateForm = this.optionList[0];
              resolve();
            } else {
              console.log(res);
              reject();
            }
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
  },
  mounted() {},
  created() {
    this.selectPublishPlatformPage()
      .then(() => {
        this.plateFormId = this.optionList[0]["id"];
        let req = {
          publishPlatformId: this.plateFormId,
          page: this.currentPage,
          rows: this.pageSize,
        };
        this.selectMediaPublishList(req);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped lang="less">
.link_upload {
  .count {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .select {
      display: flex;
      padding-left: 20px;
      p {
        height: 28px;
        line-height: 28px;
        width: 70px;
      }
      select {
        border: 1px solid #ccc;
        height: 28px;
        width: 144px;
        color: #555;
      }
    }
  }
  .page {
    display: flex;
  }
}
</style>
