<template>
  <div>
    <el-container style="padding: 30px">
      <el-descriptions class="margin-top" title="一级渠道信息" :column="4">
        <template slot="extra">
          <el-button type="primary" size="small" @click="oneTOEdit(id)"
            >编辑</el-button
          >
          <el-button type="primary" @click="value5 = true" size="small"
            >历史记录</el-button
          >
        </template>
        <el-descriptions-item label="渠道名称">
          <template slot="label"> 渠道名称 </template>
          {{ content.channelName }}
        </el-descriptions-item>
        <el-descriptions-item label="渠道编码">
          <template slot="label"> 渠道编码 </template>
          {{ content.channelCode }}
        </el-descriptions-item>
        <el-descriptions-item label="渠道类别">
          <template slot="label"> 渠道类别 </template>
          {{ content.channelType }}
        </el-descriptions-item>
        <el-descriptions-item label="生效日期">
          <template slot="label"> 生效日期 </template>
          {{ content.onlineTime }}
        </el-descriptions-item>
        <el-descriptions-item label="合作方">
          <template slot="label"> 合作方 </template>
          {{ content.channelPartner }}
        </el-descriptions-item>

        <el-descriptions-item label="联系人">
          <template slot="label"> 联系人 </template>
          {{ content.partnerContacts }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人电话">
          <template slot="label"> 联系人电话 </template>
          {{ content.partnerPhone }}
        </el-descriptions-item>
        <el-descriptions-item label="负责人">
          <template slot="label"> 负责人 </template>
          {{ content.unicomContacts }}
        </el-descriptions-item>
        <el-descriptions-item label="联系方式">
          <template slot="label"> 联系方式 </template>
          {{ content.partnerPhone }}
        </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <el-header class="searchBox">
        <el-form
          :inline="true"
          :model="searchForm"
          ref="searchForm"
          class="demo-form-inline"
        >
          <el-form-item label="渠道名称">
            <el-input
              v-model="searchForm.channelName"
              name="searchForm.channelName"
              placeholder="策略名称"
            />
          </el-form-item>
          <el-form-item label="合作方">
            <el-input
              v-model="searchForm.channelPartner"
              placeholder="合作方"
            />
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" size="mini" @click="search()"
              >搜索</el-button
            >
            <el-button type="danger" size="mini" @click="pushdata = true"
              >同步科创</el-button
            >
            <el-button size="mini" @click="reset('searchForm')">重置</el-button>
            <el-button size="mini" type="warning" @click="download()"
              >导出</el-button
            >
          </el-form-item>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="add({ id: content.id }, 'erji', content.channelName)"
                >新增</el-button
              >
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="info"
                icon="el-icon-upload2"
                size="mini"
                @click="init()"
                >刷新</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </el-header>
      <el-divider></el-divider>

      <el-dialog title="二维码下载" :visible.sync="dialogVisible" width="350px">
        <div style="text-align: center">
          <div id="qrcode"></div>
          <div style="height: 25px; line-height: 25px; margin-top: 30px">
            鼠标右键图片另存为
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>

      <vxe-modal v-model="value5" width="60%" title="历史记录">
        <template #default>
          <vxe-toolbar>
            <template #buttons>
              <vxe-input
                v-model="channelogParam.notes"
                type="search"
                clearable
                placeholder="搜索操作记录"
              ></vxe-input>
              <vxe-input
                v-model="channelogParam.userName"
                type="search"
                clearable
                placeholder="搜索操作人"
              ></vxe-input>
              <vxe-button @click="searchEvent" content="搜索"></vxe-button>
            </template>
          </vxe-toolbar>

          <vxe-table auto-resize height="600" :data="channelog">
            <vxe-table-column
              field="createTime"
              title="时间"
            ></vxe-table-column>
            <vxe-table-column field="notes" title="操作记录">
              <template slot-scope="props">
                <div v-html="props.row.notes"></div>
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="userName"
              title="操作人"
            ></vxe-table-column>
          </vxe-table>
          <vxe-pager
            :loading="loading"
            :current-page="channelogParam.pageNum"
            :page-size="channelogParam.pageSize"
            :total="channelogParam.totalResult"
            :layouts="[
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'FullJump',
              'Sizes',
              'Total',
            ]"
            @page-change="handlePageChangeChannelog"
          />
        </template>
      </vxe-modal>
      <!-- 同步 -->
      <vxe-modal title="同步" v-model="pushdata" width="600">
        <template #default>
          <el-form ref="form" label-width="80px">
            <el-form-item label="选择时间">
              <el-date-picker
                v-model="pushdataDate"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即同步</el-button>
              <el-button @click="pushdata = false">取消</el-button>
            </el-form-item>
          </el-form>
        </template>
      </vxe-modal>

      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="channelName" label="渠道名称" width="180">
        </el-table-column>
        <el-table-column prop="channelKey" label="渠道key" width="180">
        </el-table-column>
        <el-table-column prop="fullCode" label="完整渠道编码">
        </el-table-column>
        <el-table-column prop="address" label="渠道类别"> </el-table-column>
        <el-table-column prop="channelStatus" label="渠道形态">
        </el-table-column>
        <el-table-column prop="channelStatus" label="状态"> </el-table-column>

        <el-table-column prop="onlineTime" label="生效时间"> </el-table-column>
        <el-table-column prop="channelCode" label="操作">
          <template #default="{ row }">
            <el-button
              @click="toEdit(row.id, 'erji')"
              size="mini"
              type="text"
              icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              @click="checkpushdata(row)"
              size="mini"
              type="text"
              icon="el-icon-edit"
              >查询同步</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              @click="copy(row)"
              >复制链接</el-button
            >
            <el-button
              @click="giveShort(row)"
              size="mini"
              type="text"
              icon="el-icon-share"
              >短链接</el-button
            >
            <el-button
              @click="ewm(row)"
              size="mini"
              type="text"
              icon="el-icon-mobile-phone"
              >二维码</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-container>
  </div>
</template>

<script>
import { post, get, getExport } from "@/api/common";
import QRCode from "qrcodejs2";
import axios from "axios";
import { getToken } from "../../utils/auth";
import XEUtils from "xe-utils";

export default {
  name: "SchemeEdit",
  data() {
    return {
      id: this.$route.query.id,
      searchForm: {
        channelName: "",
        channelPartner: "",
        parentId: 0,
        pageNum: 1,
        pageNo: 1,
        pageSize: 10,
        totalResult: 0,
      },
      pageNo: 1,
      total: 100,
      pageSizes: 20,
      initfrom: {
        channelName: "",
        pageNo: 1,
        pageSizes: 10,
      },
      loading: false,
      tableData: [],
      content: {
        id: this.$route.query.id,
      },
      strategyStatus: [
        {
          label: "生效中",
          value: "1",
        },
        {
          label: "未生效",
          value: "0",
        },
      ],
      typeList: [
        {
          value: "集团渠道",
          label: "集团渠道",
        },
        {
          value: "省分线下渠道",
          label: "省分线下渠道",
        },
        {
          value: "省分线上渠道",
          label: "省分线上渠道",
        },
        {
          value: "互联网渠道",
          label: "互联网渠道",
        },
        {
          value: "自有线上渠道",
          label: "自有线上渠道",
        },
        {
          value: "社会代理和其他渠道",
          label: "社会代理和其他渠道",
        },
      ],
      patnerList: [
        {
          value: "0",
          label: "V1",
        },
        {
          value: "1",
          label: "V2",
        },
      ],

      dialogVisible: false,

      value5: false,
      pushdata: false,
      pushdataDate: "",
      channelog: [],
      channelogList: [],
      filterName1: "",
      channelogParam: {
        channelId: this.$route.query.id,
        pageNo: 1,
        pageSize: 10,
      },
      oldform: {},
    };
  },
  watch: {
    value5(val) {
      if (val) {
        console.log(val, "val");
        get("/channel/log/page", this.channelogParam).then((res) => {
          // console.log(this.channelogParam, "历史记录");
          // console.log(res, "历史记录");
          this.channelog = res.data.list;
          this.channelogParam.totalResult = res.data.total;
        });
        this.channelogParam.pageSize = 100;
        get("/channel/log/page", this.channelogParam).then((res) => {
          this.channelogList = JSON.parse(JSON.stringify(res.data.list));
        });
      }
    },
  },
  created() {
    // console.log(this.initfrom);
    // 在哪呢？
    this.getSecondList();
  },
  methods: {
    //获取列表
    getSecondList() {
      document.title = "一级渠道详情";
      this.searchForm.parentId = this.$route.query.id;
      get("/channel/info/get", {
        id: this.$route.query.id,
      }).then((res) => {
        // console.log(res, "一级列表详情");
        this.content = res.data;
        this.total = res.data.total;
      });
      this.init();
      // console.log(this.$route.query.id);
    },

    pagination(page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.getSecondList();
    },
    search() {
      get("/channel/info/page", thissearchForm).then((res) => {
        console.log(res);
      });
    },

    // 一级编辑
    oneTOEdit(id) {
      this.$router.push("/channel/channelEdit?ids=" + id);
    },
    //二级编辑
    toEdit(id, type) {
      this.$router.push("/channel/channelEdit?ids=" + id);
    },

    formatterWotv({ cellValue }) {
      return cellValue !== "1" ? "关闭" : "开启";
    },
    //复制链接
    copy(row) {
      let oInput = document.createElement("input");
      oInput.value = `https://operation.mige.tv/a/#/${row.channelKey}`;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
      oInput.remove();
    },
    //短链接
    giveShort(row) {
      let stUrl = row.shortUrl;
      // console.log(row);
      if (stUrl) {
        // console.log(111);
        let oInput = document.createElement("input");
        oInput.value = `http://v.mige.tv/${stUrl}`;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: "复制成功",
          type: "success",
        });
        oInput.remove();
      } else {
        // console.log(222);
        let data = {
          channel: row.channelKey,
          longUrl: `https://operation.mige.tv/a/#/${row.channelKey}`,
        };
        // console.log(data);
        post("/channel/info/shorturl", data).then((res) => {
          // console.log(res);
          let resUrl = res.data.shortCode;
          let oInput = document.createElement("input");
          oInput.value = `http://v.mige.tv/${resUrl}`;
          document.body.appendChild(oInput);
          oInput.select(); // 选择对象;
          document.execCommand("Copy"); // 执行浏览器复制命令
          this.$message({
            message: "复制成功",
            type: "success",
          });
          oInput.remove();
        });
      }
    },

    //导出
    download() {
      getExport("/channel/info/export-excel").then((res) => {
        // let loading = this.$loading({
        //   lock: true,
        //   text: "下载量较大,请耐心等待",
        //   spinner: "el-icon-loading",
        //   background: "rgba(0, 0, 0, 0.7)",
        // });
        // 导出成功
        if (res) {
          // 关闭提示
          // loading.close();
          // excle配置;
          let a = document.createElement("a");
          let blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let objectUrl = URL.createObjectURL(blob);
          a.setAttribute("href", objectUrl);
          a.setAttribute("download", "渠道数据.xls");
          a.click();
          URL.revokeObjectURL(a.objectUrl);
        }
      });
    },
    handlePageChange({ currentPage, pageSize }) {
      this.searchForm.pageNum = currentPage;
      this.searchForm.pageSize = pageSize;
      this.init();
    },
    handlePageChangeChannelog({ currentPage, pageSize }) {
      this.channelogParam.pageNum = currentPage;
      this.channelogParam.pageSize = pageSize;
      get("/channelInfo/channelogpage", this.channelogParam).then((res) => {
        this.channelog = res.data.list;
        this.channelogParam.totalResult = res.data.total;
      });
    },
    init() {
      get("/channel/info/listChannels", this.initfrom).then((res) => {
        // console.log(this.$route.query.id);
        let secondList = res.data.list.filter((item) => {
          return item.parentId == this.$route.query.id;
        });
        this.tableData = secondList;
        this.total = res.data.total;
        this.oldform = secondList;
        // console.log(this.tableData, "一级下的二级");
      });
    },

    searchEvent() {
      get("/channelInfo/channelogpage", this.channelogParam).then((res) => {
        this.channelog = res.data.list;
        this.channelogParam.totalResult = res.data.total;
      });
    },
    ewm(row) {
      this.dialogVisible = true;
      this.$nextTick(function () {
        document.getElementById("qrcode").innerHTML = "";
        let qrcode = new QRCode("qrcode", {
          width: 300,
          height: 300,
          text: `https://operation.mige.tv/a/#/${row.channelKey}`,
        });
      });
    },
    // onSubmit() {
    //   post(
    //     "/channelInfo/pushdata?beginTime=" +
    //       this.pushdataDate[0] +
    //       "&endTime=" +
    //       this.pushdataDate[1],
    //     {}
    //   ).then((res) => {
    //     this.$message({
    //       message: res.message,
    //       type: "success",
    //     });
    //     this.pushdata = false;
    //   });
    // },
    checkpushdata(e) {
      get("/channelInfo/detail", {
        id: e.id,
      }).then((res1) => {
        id;
        let channel = res1.data;
        get("/channelInfo/checkpushdata", {
          fullCode: channel.fullCode,
        }).then((res) => {
          let data = JSON.parse(res.data)[0];
          if (data.resdesc == "ok" && data.subchannelkey !== "null") {
            this.$message({
              message: data.subchannelname + "已同步",
              type: "success",
            });
          } else {
            let bigentime = channel.createTime;
            let endtime = this.dateNew(new Date(bigentime).getTime() + 3600000);
            this.pushdataDate = [bigentime, endtime];
            post(
              "/channelInfo/pushdata?beginTime=" +
                this.pushdataDate[0] +
                "&endTime=" +
                this.pushdataDate[1],
              {}
            ).then((res) => {
              // console.log(res);
              this.$message({
                message: channel.channelName + "同步成功",
                type: "success",
              });
              // console.log("success");
            });
          }
        });
      });
    },
    // dateNew(timestamp) {
    //   var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    //   var Y = date.getFullYear() + "-";
    //   var M =
    //     (date.getMonth() + 1 < 10
    //       ? "0" + (date.getMonth() + 1)
    //       : date.getMonth() + 1) + "-";
    //   // var D = date.getDate() + ' ';
    //   var D =
    //     (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
    //   var h = date.getHours() + ":";
    //   var m = date.getMinutes() + ":";
    //   var s = date.getSeconds();
    //   return Y + M + D + h + m + s;
    // },

    // editClosedEvent({ row, column }) {
    //   const $table = this.$refs.xTable;
    //   const field = column.property;
    //   const cellValue = row[field];
    //   // 判断单元格值是否被修改
    //   if ($table.isUpdateByRow(row, field)) {
    //     setTimeout(() => {
    //       let param = {};
    //       param[field] = cellValue;
    //       post("/channelInfo/update/" + row.id, row).then((res) => {
    //         this.$message({
    //           message: res.message,
    //           type: "success",
    //         });
    //       });
    //       // 局部更新单元格为已保存状态
    //       $table.reloadRow(row, null, field);
    //     }, 300);
    //   }
    // },

    add(e, type, channelName) {
      this.$router.push(
        "/channel/channelEdit?id=" +
          e.id +
          "&type=" +
          type +
          "&firstChannelName=" +
          channelName
      );
    },
  },
};
</script>

<style scoped></style>
