<template>
  <div>
    <el-container>
      <!--搜索-->
      <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="channelName" placeholder="渠道名称" />
          </el-form-item>
          <el-form-item label="渠道key">
            <el-input v-model="searchForm.channelKey" name="channelKey" placeholder="渠道Key" />
          </el-form-item>
          <el-form-item label="完整渠道编码">
            <el-input v-model="searchForm.fullCode" name="fullCode" placeholder="完整渠道编码" />
          </el-form-item>
          <el-form-item style="float: right">
            <el-button type="primary" @click="init()">搜索</el-button>
            <el-button @click="reset('searchForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <!--表格-->
      <el-main class="tableBox">
        <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="渠道类别" />
          <vxe-table-column title="渠道形态" width="100">
            <!-- <template #default="{ row,_columnIndex}">
                            {{ patnerList[row.channelPattern*1].label }}
                        </template> -->
            <template #default="{ row }">
              <span v-if="row.onOffStatus === 1">新版本</span>
              <span v-else style="color:#F56C6C">旧版本</span>
            </template>
          </vxe-table-column>
          <vxe-table-column title="状态" width="80">
            <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="onlineTime" title="生效时间" />
          <vxe-table-column title="操作" fixed="right" width="360">
            <template #default="{ row }">
              <vxe-button @click="toEdit(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>
        <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-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-main>
    </el-container>
  </div>
</template>

<script>
import { post, get } from '@/api/common'
import QRCode from 'qrcodejs2'
import XEUtils from 'xe-utils'

export default {
  name: 'SchemeEdit',
  data () {
    return {
      searchForm: {
        channelName: '',
        channelPartner: '',
        channelKey: '',
        fullCode: '',
        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 () {
    this.searchForm.parentId = this.$route.query.id ? this.$route.query.id : null
    get('/channelInfo/detail', { id: this.$route.query.id }).then(res => {
      this.content = res.data
    })
    this.init()
    document.title = '所有二级渠道'
  },
  methods: {
    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 = {}
      get('/channelInfo/listChannelslistChannels', {}).then(res => {
        this.tableData = res.data.list
      })
    },
    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 () {
      console.log(this.searchForm)
      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 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>
