<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="toEdit(content)">编辑</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" @click="init()">搜索</el-button>
            <el-button type="danger" @click="pushdata = true">同步科创</el-button>
            <el-button @click="reset('searchForm')">重置</el-button>
            <el-button type="warning" @click="download()">导出</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-divider></el-divider>
      <el-main class="">
        <vxe-toolbar>
          <template #buttons>
            <vxe-button icon="fa fa-plus" @click="toEdit({id:content.id},'erji')">新增二级渠道</vxe-button>
            <vxe-button @click="init()">刷新</vxe-button>
          </template>
        </vxe-toolbar>
        <vxe-table border resizable keep-source highlight-hover-row ref="xTable" :data="tableData">
          <vxe-table-column field="channelName" title="渠道名称" />
          <vxe-table-column field="channelKey" title="渠道Key" width="120" />
          <vxe-table-column field="fullCode" title="完整渠道编码" width="120" />
          <vxe-table-column field="channelType" title="渠道类别" width="160" />
          <vxe-table-column title="渠道形态" width="100">
            <template #default="{ row }">
              <span v-if="row.onOffStatus === 1">新版本</span>
              <span v-else style="color:#F56C6C">旧版本</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="channelPartner" title="合作方" width="120" />
          <vxe-table-column title="状态">
            <template #default="{ row }">
              <span v-if="row.channelStatus === 1" style="color:#67C23A">生效中</span>
              <span v-else-if="row.channelStatus ===0" style="color:#F56C6C">未生效</span>
            </template>
          </vxe-table-column>
          <!-- <vxe-table-column field="wotv" title="wo186域名" width="120" :formatter="formatterWotv" /> -->
          <vxe-table-column field="onlineTime" title="生效时间" />
          <vxe-table-column title="操作" width="460">
            <template #default="{ row }">
              <vxe-button @click="toEdit(row)">编辑</vxe-button>
              <vxe-button @click="checkpushdata(row)">查询同步</vxe-button>
              <vxe-button @click="copy(row)">复制链接</vxe-button>
              <vxe-button @click="giveShort(row)">短连接</vxe-button>
              <vxe-button @click="ewm(row)">二维码</vxe-button>
            </template>
          </vxe-table-column>
        </vxe-table>
        <vxe-pager :loading="loading" :current-page="searchForm.pageNum" :page-size="searchForm.pageSize" :total="searchForm.totalResult" :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange" />
        <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-main>
    </el-container>
  </div>
</template>

<script>
import {
  post,
  get
} 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 {
      searchForm: {
        channelName: '',
        channelPartner: '',
        parentId: 0,
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
      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: '',
      channelogParam: {
        channelId: this.$route.query.id,
        pageNum: 1,
        pageSize: 10,
        totalResult: 0
      },
    }
  },
  watch: {
    value5 (val) {
      if (val) {
        get('/channelInfo/channelogpage', this.channelogParam).then(res => {
          this.channelog = res.data.list
          this.channelogParam.totalResult = res.data.total
        })
        this.channelogParam.pageSize = 100
        get('/channelInfo/channelogpage', this.channelogParam).then(res => {
          this.channelogList = JSON.parse(JSON.stringify(res.data.list))
        })
      }
    }
  },
  created () {
    document.title = '一级渠道详情'
    this.searchForm.parentId = this.$route.query.id
    get('/channelInfo/detail', {
      id: this.$route.query.id
    }).then(res => {
      this.content = res.data
    })
    this.init()
  },
  methods: {
    formatterWotv ({
      cellValue
    }) {
      return cellValue !== '1' ? '关闭' : '开启'
    },
    //导出
    download () {
      let formData = new FormData();
      formData.append("channelName", this.content.channelName);
      formData.append("channelStatus", 1);
      formData.append("parentId", this.searchForm.parentId);
      let loading = this.$loading({
        lock: true,
        text: "下载量较大,请耐心等待",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      axios({
        method: "post",
        url: process.env.VUE_APP_BASE_API + "/channelInfo/download",
        data: formData,
        responseType: "blob",
        headers: {
          "Content-Type": "multipart/form-data",
          token: getToken(),
        },
      }).then((res) => {
        if (res.data) {
          loading.close();
          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", "渠道数据.xlsx");
          a.click();
          URL.revokeObjectURL(a.objectUrl);
        }
      });
    },

    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 => {
        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;
    },
    init () {
      get('/channelInfo/listChannels', this.searchForm).then(res => {
        this.tableData = res.data.list
        this.searchForm.totalResult = res.data.total
      })
    },
    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)
      }
    },
    toEdit (e, type) {
      const routeUrl = this.$router.resolve({
        path: '/schemeV2/channelEdit',
        query: {
          id: e.id,
          'type': type
        }
      })
      window.open(routeUrl.href, '_blank')
    },
    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 updata = {
          channel: row.channelKey,
          longUrl: `https://operation.mige.tv/a/#/${row.channelKey}`
        }
        post('/channelInfo/shorturl', updata).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()
    },
    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
      })
    },
    searchEvent () {
      get('/channelInfo/channelogpage', this.channelogParam).then(res => {
        this.channelog = res.data.list
        this.channelogParam.totalResult = res.data.total
      })
    }
  }
}

</script>

<style scoped>
</style>
