<template>
  <!-- 厂商账号管理 -->
  <div class="accounts_manage">
    <div class="search">
      <div class="input">
        <img src="../../img/search.png" />
        <input
          type="text"
          v-model="inputValue"
          placeholder="请输入要搜索的经销商或DLR Code"
        />
      </div>
      <div class="current_button" @click="search">搜索</div>
    </div>
    <div class="count">
      <div class="option">
        <div class="selectArea">
          <p>选择区域</p>
          <select v-model="areaValue">
            <option value="">请选择</option>
            <option v-for="(item, index) in areaList" :key="index">
              {{ item }}
            </option>
          </select>
        </div>
        <div class="selectPlate">
          <p>媒体平台</p>
          <select v-model="plateValue">
            <option value="">请选择</option>
            <option v-for="(item, index) in platesList" :key="index">
              {{ item.dictName }}
            </option>
          </select>
        </div>
        <div class="current_button" @click="submit">确定</div>
      </div>
      <Count :sum="sum" />
    </div>

    <Table :tableData="tableData" @edit_data="editData"> </Table>
    <div v-if="sum > 0">
      <TablePage
        :totalPage="totalPage"
        :currentPage="currentPage"
        @change_page="changePage"
        @jump_page="jumpPage"
      >
      </TablePage>
    </div>
  </div>
</template>

<script>
import Table from "./components/AccountTable";
import TablePage from "../../components/TablePage";
import Count from "../../components/Count";
export default {
  components: {
    Table,
    TablePage,
    Count,
  },
  data() {
    return {
      inputValue: "",
      areaList: [],
      platesList: [],
      areaValue: "",
      plateValue: "",
      tableData: [],
      dictList: [],
      currentPage: 1,
      sum: 0,
      pageSize: 20,
    };
  },
  computed: {
    // 表格总页数
    totalPage() {
      return Math.ceil(this.sum / this.pageSize);
    },
  },
  methods: {
    // 获取某一页面的数据，展示在表格
    changePage: function (page) {
      this.currentPage = page;
      let req = {
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDealerListRequest(req);
    },
    // 点击上一页，下一页，首页，尾页
    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 req = {
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDealerListRequest(req);
    },
    search: function () {
      //通过经销商或DLR CODE查询
      console.log(this.inputValue);
      let req = {
        queryParams: this.inputValue,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDealerListRequest(req);
    },
    plateOption: function (e) {
      let index = e.target.options.selectedIndex;
      console.log(index);
    },
    submit: function () {
      let req = {
        localArea: this.areaValue,
        platformName: this.plateValue,
        page: this.currentPage,
        rows: this.pageSize,
      };
      this.getDealerListRequest(req);
    },
    editData: function (i, isAttesta, fansNum, accountCode) {
      console.log("完成编辑", i, isAttesta, fansNum, accountCode);
      let req = {
        id: this.tableData[i]["id"],
        authentication: isAttesta === "是" ? true : false,
        fansCount: fansNum,
        accountCode,
      };
      this.updateMediaAccountInfo(req).then(() => {
        let dataObj = {
          page: this.currentPage,
          rows: this.pageSize,
        };
        this.getDealerListRequest(dataObj);
      });
    },
    //获取经销商列表
    getDealerListRequest(data = {}) {
      this.$http({
        method: "post",
        url: "/sys/mediaAccount/selectMediaAccountPage",
        data,
      })
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res);
            this.tableData = res.data.data;
            this.sum = res.data.count;
            // alert('success!')
          } else {
            console.log("message", res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // testSyncInterFace(){//测试同步接口
    //   this.$http({
    //     method: 'post',
    //     url: '/interface/loadBaseData',
    //     data: {
    //       user: '111'
    //     },
    //   }).then((res) => {
    //     console.log(res);
    //     if(res.status === 200){
    //       if(res.data.code === 200) {
    //         console.log(res.data, '200');
    //       }else {
    //         let message = res.data.message;
    //         console.log('message', message);
    //       }
    //     }
    //   }).catch((err) => {
    //     console.log(err);
    //   })
    // }
    // 获取 所有区域  接口
    getAreaList: function () {
      this.$http({
        method: "post",
        url: "/sys/agent/selectAgentAreaInfoList",
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.areaList = res.data.data;
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取内容分类、媒体平台、常用参数接口的标识，再调接口时需要用到
    selectSysDataDictList: function () {
      return new Promise((resolve, reject) => {
        this.$http({
          method: "post",
          url: "/sys/dataDict/selectSysDataDictList",
          data: {},
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              let dictCode = res.data.data[3]["dictCode"];
              let id = res.data.data[3]["id"];
              this.getMediaList(dictCode, id);
              resolve();
            } else {
              console.log(res);
              reject();
            }
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    // 获取列表数据   接口
    getMediaList: function (dictCode, parentId) {
      this.$http({
        method: "post",
        url: "/sys/dataDict/selectSysDataDictPage",
        data: {
          dictCode,
          parentId,
        },
      })
        .then((res) => {
          if (res.data && res.data.code === 200) {
            this.platesList = res.data.data;
          } else {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑  接口
    updateMediaAccountInfo: function (data) {
      return new Promise((resolve, reject) => {
        this.$http({
          url: "/sys/mediaAccount/updateMediaAccountInfo",
          method: "post",
          data,
        })
          .then((res) => {
            if (res.data && res.data.code === 200) {
              console.log(res);
              resolve();
            } else {
              alert("编辑失败，请重试");
              console.log(res);
            }
          })
          .catch((err) => {
            alert("编辑失败，请重试");
            reject(err);
          });
      });
    },
  },
  mounted() {
    this.selectSysDataDictList();
    this.getAreaList();
    let req = {
      page: this.currentPage,
      rows: this.pageSize,
    };
    this.getDealerListRequest(req);
  },
};
</script>

<style scoped lang="less">
.accounts_manage {
  .search {
    border: 1px solid #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    .input {
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 2px;
      display: flex;
      img {
        width: 28px;
        height: 28px;
        border: 1px solid #ccc;
      }
      input {
        background-color: #fff;
        border: 1px solid #ccc;
        width: 220px;
        margin-left: 3px;
        color: #555;
        font-size: 12px;
      }
    }
  }
  .option {
    display: flex;
    margin-top: 10px;
    .selectArea {
      display: flex;
      height: 28px;
      p {
        height: 28px;
        line-height: 28px;
        margin-right: 20px;
      }
      select {
        width: 144px;
        height: 28px;
        margin-right: 35px;
        border: 1px solid #ccc;
      }
    }
    .selectPlate {
      display: flex;
      height: 28px;
      p {
        height: 28px;
        line-height: 28px;
        margin-right: 20px;
      }
      select {
        width: 144px;
        height: 28px;
        margin-right: 20px;
        border: 1px solid #ccc;
      }
    }
  }
  .count{
    display: flex;
    justify-content: space-between;
  }
}
</style>
