<template>
    <div class="channelcodeList page-body">
      <div class="page-search row items-center">
        <div class="col row wrap q-mr-lg q-col-gutter-md">
          <div class="col-3">
            <q-input @keyup.enter.native="changePage(1)" clearable standout="bg-primary text-white" v-model="msg.Name"
                        label="渠道码名称" @clear="changePage(1)" maxlength="20" />
          </div>
          <div class="col-3">
            <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name" v-model="msg.Type"
              ref="Id" :options="typeList" label="类型" :dense="false" emit-value map-options />
          </div>
          <div class="col-3">
            <q-select filled stack-label @input="changePage(1)" option-value="Id" option-label="Name" v-model="msg.Type"
              ref="Id" :options="GroupList" label="分组" :dense="false" emit-value map-options />
          </div>
  
        </div>
      </div>
      <div class="page-content">
        <q-table :pagination="msg" :loading="loading" no-data-label="暂无相关数据" flat class="sticky-column-table"
          separator="none" title="" :data="data" :columns="columns" row-key="name">
          <template v-slot:top="props">
            <div class="col-2 q-table__title" >渠道码</div>
            <q-space />
            <q-btn color="accent" style="float:right;margin-right:0;" size="sm" class="q-mr-md" icon="add" label="新建"
              @click="goadd()"></q-btn>
          </template>
          <template v-slot:body-cell-WXQRCode="props">
            <q-td :props="props">
                <q-img v-if="props.row.WXQRCode && props.row.WXQRCode!=''" :src="props.row.WXQRCode" @click="viewDetails(props.row)"
                    style="width: 90px;height: 90px;display: flex;">
                    
                </q-img>
                
            </q-td>
          </template>
          <template v-slot:body-cell-Type="props">
            <q-td :props="props">
                <div>{{props.row.Type==1?'单人':'多人'}}</div>
            </q-td>
          </template>
          <template v-slot:body-cell-LabelList="props">
            <q-td :props="props">
              <div style="max-width: 300px;white-space:	normal;word-break:break-all" v-if="props.row.LabelList.length>0">
                <span v-for="(x,y) in props.row.LabelList" :key='y'>
                    {{x}}{{props.row.LabelList.length!=y+1?'、':''}}
                </span>
              </div>
            </q-td>
          </template>
          <template v-slot:body-cell-SkipVerify="props">
            <q-td :props="props">
              <div>{{props.row.SkipVerify==1?'需要验证':'自动通过'}}</div>
            </q-td>
          </template>
  
          <template v-slot:body-cell-UpdateByName="props">
            <q-td :props="props">
              <div>{{props.row.UpdateByName}}</div>
              <div>{{props.row.UpdateTime}}</div>
            </q-td>
          </template>
          <template v-slot:body-cell-optioned="props">
            <q-td :props="props">
              <q-btn flat size="xs" icon="edit" style="font-weight:400;color: #3FC4FF" class="q-mr-xs" label="编辑"
                @click="goedit(props.row)" />
              <q-btn-dropdown flat size="xs" color="dark" label="更多" style="margin-left: 10px">
                <q-list>
                  <q-item clickable v-close-popup @click="showcustomer(props.row)">
                    <q-item-section>
                      <q-item-label>客户</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="downs(props.row)">
                    <q-item-section>
                      <q-item-label>下载</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-close-popup @click="statistics(props.row)">
                    <q-item-section>
                      <q-item-label>统计</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
              </q-btn-dropdown>
            </q-td>
          </template>
          <template v-slot:bottom>
            <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
              :input="true" @input="changePage" />
          </template>
        </q-table>
      </div>
      <q-dialog v-model="isDetails">
        <q-card style="width: 450px;"  v-if="Detailsobj && Detailsobj.WXQRCode">
          <q-card-section class="row items-center q-pb-none">
            <div class="text-h6">{{Detailsobj.Name}}</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>
  
          <q-card-section >
            <q-img :src="Detailsobj.WXQRCode" style="width:400px;height: 400px;margin-left: 9px;"></q-img>
          </q-card-section>
        </q-card>
      </q-dialog>

      <q-dialog v-model="isCustom">
        <q-card style="width: 850px;max-width: 80vw;">
          <q-card-section class="row items-center q-pb-none">
            <div class="text-h6">扫码客户</div>
            <q-space />
            <q-btn icon="close" flat round dense v-close-popup />
          </q-card-section>
  
          <q-card-section >
            <q-table
              title=""
              :pagination="customMsg"
              :data="customdata"
              :columns="columns2"
              row-key="name"
              :loading="loading" no-data-label="暂无相关数据"
            >
            <template v-slot:bottom>
              <q-pagination class="full-width justify-end" v-model="customMsg.pageIndex" color="primary" :max="custompageCount"
                :input="true" @input="changePage2" />
            </template>
          </q-table>
          </q-card-section>
        </q-card>
      </q-dialog>
      
  
    </div>
  </template>
  
  <script>
    import {
      

      getWeChatChannelPageList,
      getWeChatChannelGroupList,
      getWeChatChannelCoustomerPageList
    } from '../../api/system/wechat';
    import {
      queryEmployee
    } from '../../api/users/user'
  
    export default {
      meta: {
        title: "渠道码"
      },
      name: "channelcodeList",
      data() {
        return {
          loading: false,
          ISsystem: false,
          isCustom:false,
          data: [],
          pageCount: 0,
          customdata:[],
          custompageCount:0,
          msg: {
            pageIndex: 1,
            pageSize: 15,
            rowsPerPage: 15,
            ChannelGroupId:0,
            Name:'',
            Type: 0,
          },
          customMsg:{
            pageIndex: 1,
            pageSize: 10,
            rowsPerPage: 10,
            ChannelId:0
          },
          typeList: [
            { Id: 0, Name: '不限' },
            { Id: 1, Name: '单人' },
            { Id: 2, Name: '多人' },
           
          ],
          //公告column
          columns: [{
            name: 'WXQRCode',
            label: '二维码',
            field: 'WXQRCode',
            align: 'left'
          },
          {
            name: 'Name',
            field: 'Name',
            label: '名称',
            align: 'left',
          },
          {
            name: 'ChannelGroupName',
            field: 'ChannelGroupName',
            label: '分组',
            align: 'left'
          },
          {
            name: 'Type',
            field: 'Type',
            label: '类型',
            align: 'left'
          },
          {
            name: 'CustomerNum',
            field: 'CustomerNum',
            label: '客户数',
            align: 'left'
          },
          {
            name: 'LabelList',
            field: 'LabelList',
            label: '标签',
            align: 'left'
          },
          {
            name: 'SkipVerify',
            field: 'SkipVerify',
            label: '自动添加好友',
            align: 'left'
          },
          {
            name: 'UpdateByName',
            field: 'UpdateByName',
            label: '操作人',
            align: 'left'
          },
          {
            name: 'optioned',
            label: '操作',
            field: 'DeptId'
          }
          ],
          columns2:[
            {
              name: 'DeptName',
              label: '部门',
              field: 'DeptName',
              align: 'left'
            },
            {
              name: 'EmpName',
              label: '归属成员',
              field: 'EmpName',
              align: 'left'
            },
            {
              name: 'CustomerName',
              label: '客户名称',
              field: 'CustomerName',
              align: 'left'
            },
            {
              name: 'CreateTime',
              label: '添加时间',
              field: 'CreateTime',
              align: 'left'
            },
          ],
          GroupList: [],
          isDetails: false,
          Detailsobj: null
        }
      },
      created() {
        this.getChannelGroupList()//分租列表
        this.getList()
      },
      methods: {
        getChannelGroupList() {
          
            getWeChatChannelGroupList({}).then(res => {
                if (res.Code == 1) {
                this.GroupList = res.Data;
                let obj={Id:0,Name:'不限'}
                this.GroupList.unshift(obj)
                }
            }).catch(() => {
    
            })
  
        },
        changePage(e) {
          this.msg.pageIndex = e
          this.getList()
        },
        changePage2(e){
          this.msg.pageIndex = e
          this.getcustomerList()
        },
        getList() {
          this.loading = true
          getWeChatChannelPageList(this.msg).then(res => {
            this.loading = false
            this.data = res.Data.PageData;
            this.pageCount = res.Data.PageCount
          })
        },
        goadd() {
          this.$router.push({
            path: '/enterprise/addchannelcode',
          });
        },
        goedit(row) {//编辑
          this.$router.push({
            path: '/enterprise/addchannelcode',
            query: {
                Id: row.Id
              }
          });
        },
        goDetailed(row) {//删除
          this.$q.dialog({
            title: '提示信息',
            message: '是否确定删除所此欢迎语？',
            cancel: true,
            persistent: true,
            ok: "确定",
            cancel: "取消",
          }).onOk(() => {
            delWechatWelcomesInfo({ WelcomesId: row.Id }).then(res => {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: res.Message,
                position: 'top'
              })
              this.getList()
  
            })
          }).onCancel(() => {
  
          });
        },
        showcustomer(row){//客户
          this.customMsg.ChannelId = row.Id
          this.getcustomerList()
        },
        getcustomerList(){
          getWeChatChannelCoustomerPageList(this.customMsg).then(res => {
            this.loading = false
            this.customdata = res.Data.PageData;
            this.custompageCount = res.Data.PageCount
            this.isCustom = true
          })
        },
        viewDetails(row) {
          this.Detailsobj = row
          this.isDetails = true
        },
        downs(row){//二维码下载
          this.downloadIamge(row.WXQRCode, row.Name)
        },
        downloadIamge(imgsrc, name) {//下载图片地址和图片名
          var image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function() {
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
          
            var a = document.createElement("a"); // 生成一个a元素
            var event = new MouseEvent("click"); // 创建一个单击事件
            a.download = name || "photo"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = imgsrc;
        },
        statistics(row){//统计
          this.$router.push({
            path: '/enterprise/channelCodeStatistics',
            query: {
                Id: row.Id
              }
          });
        }
  
      }
    }
  
  </script>
  
  <style>
    .channelcodeList .Sysuser_Date .el-input--prefix .el-input__inner {
      background-color: red;
      border: 0;
    }
  
    .channelcodeList .state-item {
      padding: 2px 5px;
      border-radius: 3px;
      text-align: center;
      font-size: 10px;
    }
  
    .channelcodeList .frIdlist {
      padding: 3px 10px;
      border-radius: 3px;
      background: #EEEEEF;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
      margin-bottom: 5px;
      cursor: pointer;
    }
  
    .class-popover .q-pr-lg {
      padding-right: 0;
      margin-top: 20px;
    }
  
    .channelcodeList .el-date-editor.el-input {
      width: 100%;
    }
  
    .channelcodeList .el-date-editor.el-input input {
      background-color: transparent !important;
    }
  
    .channelcodeList .el-range-editor .el-range-input {
      background: none;
    }
  
    .Sysuser_Date .el-input__inner {
      background: transparent !important;
      border: 0 !important;
    }
  
    .channelcodeList .el-drawer.rtl {
      overflow: inherit;
    }
  
    .channelcodeList .box_l {
      width: 400px;
      border-radius: 6px;
      margin-right: 15px;
      background: #fff;
      margin-top:20px;margin-left: 10px;
      box-shadow: 0px 0px 10px rgba(191, 191, 191, 0.7);
  
    }
  
    .channelcodeList .boxl_title {
      width: 100%;
      height: 56px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e8e8e8;
    }
  </style>