<template>
  <div class="app-container">
    <el-descriptions class="margin-top" title="一级渠道信息">
      <template slot="extra">
        <el-button type="primary" size="mini" @click="oneTOEdit(id)"
          >编辑</el-button
        >
        <el-button type="primary" @click="value5 = true" size="mini"
          >历史记录</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.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-header>
      <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="策略名称"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="合作方">
          <el-input
            v-model="searchForm.channelPartner"
            placeholder="合作方"
            size="mini"
          />
        </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-form>
    </el-header>

    <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-dialog title="二维码下载" :visible.sync="dialogVisible">
      <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.pageNo"
          :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" mini @click="onSubmit"
              >立即同步</el-button
            >
            <el-button @click="pushdata = false" mini>取消</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="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.channelStatus == 1" type="success"
            >生效</el-tag
          >
          <el-tag v-else type="warning">关闭</el-tag>
        </template>
      </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>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="tableData.pageNo"
      :limit.sync="tableData.pageSize"
      @pagination="pagination"
    />
  </div>
</template>

<script>
import {
  exportChannel,
  Channelsecondd,
  listChannel,
  listChanneGet,
} from "./api";
import { post, get } from "@/api/common";
import QRCode from "qrcodejs2";

export default {
  name: "SchemeEdit",
  data() {
    return {
      id: this.$route.query.id,
      searchForm: {
        channelName: "",
        channelPartner: "",
        parentId: 0,
        pageNo: 1,
        pageSize: 10,
        totalResult: 0,
      },
      pageNo: 1,
      total: 100,
      pageSizes: 10,
      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) {
        get("/channel/log/page", this.channelogParam).then((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() {
    this.getSecondList();
  },
  methods: {
    // 改变页码触发
    pagination(page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.init();
    },

    //重置
    reset() {
      this.searchForm = {};
    },

    //获取列表
    getSecondList() {
      document.title = "一级渠道详情";
      this.searchForm.parentId = this.$route.query.id;

      listChanneGet({
        id: this.$route.query.id,
      }).then((res) => {
        this.content = res.data;
        // console.log(res.data, " res.data.total");
        // this.total = res.data.total;
      });

      this.init();
    },

    pagination(page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.getSecondList();
    },
    //搜索按钮
    search() {
      if (!this.searchForm.channelName || !this.searchForm.channelPartner) {
        this.$message.error("请输入内容");
      } else {
        Channelsecondd(this.searchForm).then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.list.length;
        });
      }
    },

    // 一级编辑
    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;
      if (stUrl) {
        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 {
        let data = {
          channel: row.channelKey,
          longUrl: `https://operation.mige.tv/a/#/${row.channelKey}`,
        };
        post("/channel/info/shorturl", data).then((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() {
      this.$modal
        .confirm("是否确认导出所有渠道数据?")
        .then(function () {
          return exportChannel();
        })
        .then((response) => {
          this.$download.excel(response, "渠道数据.xlsx");
        });
    },

    //历史记录分页
    handlePageChangeChannelog({ currentPage, pageSize }) {
      this.channelogParam.pageNo = currentPage;
      this.channelogParam.pageSize = pageSize;

      listChannelHistory(this.channelogParam).then((res) => {
        this.channelog = res.data.list;
        console.log(res.data.total, "res.data.total");
        this.channelogParam.totalResult = res.data.total;
      });
      // get("/channelInfo/channelogpage", this.channelogParam).then((res) => {
      //   this.channelog = res.data.list;
      //   this.channelogParam.totalResult = res.data.total;
      // });
    },
    //获取二级列表
    init() {
      Channelsecondd(this.initfrom).then((res) => {
        let secondList = res.data.list.filter((item) => {
          return item.parentId == this.$route.query.id;
        });

        this.tableData = secondList;
        console.log(secondList.length, "secondList.length");
        this.total = secondList.length;
        this.oldform = secondList;
      });
    },
    //历史记录搜索
    searchEvent() {
      listChannelHistory(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}`,
        });
      });
    },

    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) => {
              this.$message({
                message: channel.channelName + "同步成功",
                type: "success",
              });
            });
          }
        });
      });
    },

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

<style scoped></style>
