<template>
  <div>
    <el-container class="app-container">
      <!--搜索-->
      <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="channelName" placeholder="渠道名称" size="mini" />
          </el-form-item>
          <el-form-item label="渠道key">
            <el-input v-model="searchForm.channelKey" name="channelKey" placeholder="渠道Key" size="mini" />
          </el-form-item>
          <el-form-item label="完整渠道编码">
            <el-input v-model="searchForm.fullCode" name="fullCode" placeholder="完整渠道编码" size="mini" />
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" @click="init()" size="mini">搜索</el-button>
            <el-button @click="reset('searchForm')" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>

      <!--表格-->

      <el-table :data="tableData">
        <el-table-column prop="channelName" label="二级渠道名称">
        </el-table-column>
        <el-table-column prop="channelCode" label="渠道key"> </el-table-column>
        <el-table-column prop="partnerContacts" label="合作方">
        </el-table-column>
        <el-table-column prop="fullCode" label="完整渠道编码">
        </el-table-column>
        <el-table-column prop="channelType" 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 label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="{ row }">
            <el-button @click="toEdit(row.id)" 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-delete">短链接</el-button>
            <el-button @click="ewm(row.id)" size="mini" type="text" icon="el-icon-delete">二维码</el-button>
          </template>
        </el-table-column>
      </el-table>

      <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" size="mini">取 消</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" :page="pageNo" :limit="pageSize" @pagination="pagination" />
    </el-container>
  </div>
</template>

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

export default {
  name: "SchemeEdit",
  data () {
    return {
      searchForm: {
        channelName: "",
        channelKey: "",
        fullCode: "",
        totalResult: 0,
        pageNo: 1,
        pageSize: 20,
      },
      pageNo: 1,
      total: 100,
      pageSize: 20,
      loading: false,
      tableData: [],
      content: {},
      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: "",
    };
  },

  created () {
    this.getSeconList();
  },

  methods: {
    //获取列表
    getSeconList () {
      Channelsecondd({ pageNo: this.pageNo, pageSize: this.pageSize }).then(
        (res) => {
          this.total = res.data.total;
          // console.log(res.data.list);
          let sesondlist = res.data.list.filter(function (item) {
            // console.log(item);
            return item.parentId != 0;
          });
          this.tableData = sesondlist;
          // console.log(this.tableData);
        }
      );
    },

    onSubmit () {
      post(
        "/channelInfo/pushdata?beginTime=" +
        this.pushdataDate[0] +
        "&endTime=" +
        this.pushdataDate[1],
        {}
      ).then((res) => {
        this.$message({
          message: res.message,
          type: "success",
        });
        this.pushdata = false;
      });
    },
    reset (formName) {
      // 重置
      this.searchForm = {};
    },
    checkpushdata (e) {
      get("/channelInfo/checkpushdata", { fullCode: e }).then((res) => {
        let data = JSON.parse(res.data)[0];
        if (data.resdesc == "ok") {
          this.$message({
            message: data.subchannelname + "已同步",
            type: "success",
          });
        } else {
          this.$message({
            message: data.subchannelname + "未同步",
            type: "error",
          });
        }
      });
    },
    init () {
      listChannel(this.searchForm).then((res) => {
        this.tableData = res.data.list;
        this.searchForm.totalResult = res.data.total;
      });
    },

    // 改变页码触发
    pagination (page) {
      this.pageNo = page.page;
      // 重新获取列表数据
      this.getSeconList();
    },
    editClosedEvent ({ row, column }) {
      const $table = this.$refs.xTable;
      const prop = column.property;
      const cellValue = row[prop];
      // 判断单元格值是否被修改
    },
    toEdit (id) {
      this.$router.push("/channel/channelEdit?ids=" + id);
    },
    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();
        });
      }
    },
    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}`,
        });
      });
    },
    handlePageChange ({ currentPage, pageSize }) {
      this.searchForm.pageNum = currentPage;
      this.searchForm.pageSize = pageSize;
      this.init();
    },
  },
};
</script>

<style lang="scss">
.searchBox {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;
  height: unset !important;
  padding: 10px 10px;

  form {
    margin: auto;

    .el-form-item {
      margin: 5px 5px;
    }
  }
}

.tableBox {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: #bfbfbf 0 0 2px;

  .block {
    .el-pagination {
      margin-top: 30px;
      float: right;
    }
  }
}
</style>
