<template>
  <LayoutContent :breads="[{title: '店铺列表'}]">
    <LayoutFilter @on-filter="onFilter" @on-clear="onClear">
      <i-form ref="filterForm" inline :model="filter">
        <i-form-item prop="uid">
          <i-input placeholder="输入uid" v-model="filter.uid"></i-input>
        </i-form-item>
        <i-form-item prop="certName">
          <i-input placeholder="商家名称" v-model="filter.certName"></i-input>
        </i-form-item>
        <i-form-item prop="mobile">
          <i-input placeholder="手机号" v-model="filter.mobile"></i-input>
        </i-form-item>
          <i-form-item>
              <i-input style="display: none" placeholder="招商人" v-model="filter.investName"></i-input>
          </i-form-item>
        <i-form-item prop="validStatus">
          <i-select placeholder="选择状态" v-model="filter.validStatus" style="width: 100px;">
            <i-option :value="1">已入驻</i-option>
            <i-option :value="9">已退驻</i-option>
          </i-select>
        </i-form-item>
          <i-form-item prop="entryType">
              <i-select placeholder="商家类型" v-model="filter.entryType" style="width: 100px">
                <i-option :value="1">入驻卖家</i-option>
                <i-option :value="2">超级入驻卖家</i-option>
                <i-option :value="4">普通卖家</i-option>
              </i-select>
          </i-form-item>
      </i-form>
    </LayoutFilter>
    <LayoutTable
      :page="page"
      :total="total"
      :columns="columns"
      :data="data"
      @on-page-change="onPageChange">
    </LayoutTable>
      <!--弹出框展示商家详情-->
      <div class="popup-detail-wrapper" :class="{ show: isShowDetail}">
        <i-card class="popup-detail-container">
            <p slot="title">商家详情</p>
            <i-button slot="extra" class="btn-close" @click="closePopup">X</i-button>
            <div class="pop-detail-content">
                <i-row>
                    <i-col span="4" class="detail-title">UID</i-col>
                    <i-col span="8">{{detail.uid || '&nbsp;'}}</i-col>
                    <i-col span="4" class="detail-title">商家类型</i-col>
                    <i-col span="8">{{['','入驻卖家', '超级入驻', '', '普通卖家'][detail.entryType]}}</i-col>
                </i-row>
                <i-row>
                    <i-col span="4" class="detail-title">商家名称</i-col>
                    <i-col span="8">{{detail.certName || '--'}}</i-col>
                    <i-col span="4" class="detail-title">手机号</i-col>
                    <i-col span="8">{{detail.mobile || '--'}}</i-col>
                </i-row>
                <i-row>
                    <i-col span="4" class="detail-title">招商人员</i-col>
                    <i-col span="8">{{detail.investName || '--'}}</i-col>
                    <i-col span="4" class="detail-title">违规次数</i-col>
                    <i-col span="8">{{detail.breakRuleTimes || '0'}}</i-col>
                </i-row>
                <i-row>
                    <i-col span="4" class="detail-title">账户余额</i-col>
                    <i-col span="8" style="color: red;">{{detail.money || '0.00'}}</i-col>
                    <i-col span="4" class="detail-title">入驻状态</i-col>
                    <i-col span="8">{{detail.validStatusDesc || '--'}}</i-col>
                </i-row>
                <i-row>
                    <i-col span="4" class="detail-title">入驻时间</i-col>
                    <i-col span="8">{{detail.enterTime || '--'}}</i-col>
                    <i-col span="4" class="detail-title">退出入驻时间</i-col>
                    <i-col span="8">{{detail.quitTime || '--'}}</i-col>
                </i-row>
                <i-row>
                    <i-col span="4" class="detail-title">身份证号</i-col>
                    <i-col span="20">{{detail.certNo || '--'}}</i-col>
                </i-row>
                <i-row>
                    <i-col span="4" class="detail-title no-border-right" style="min-height: 150px;line-height: 150px;">身份证照片</i-col>
                    <i-col span="20" class="border-left" style="min-height: 150px;">
                        <img v-if="detail.idCardFrontUrl" class="cert-image" :src="detail.idCardFrontUrl">
                        <img v-if="detail.idCardBackUrl" class="cert-image" :src="detail.idCardBackUrl">
                    </i-col>
                </i-row>
            </div>
        </i-card>
      </div>
      <!--弹出框绑定招商人员-->
      <div class="popup-invist-wrapper" :class="{ show: isShowInvest}">
          <i-card class="popup-invist-container">
              <p slot="title">绑定招商人</p>
              <i-button slot="extra" class="btn-close" @click="closePopup">X</i-button>
              <div class="popup-invist-content">
                  <i-row>
                      <i-col class="invist-title" span="8">招商人员</i-col>
                      <i-col span="16">
                          <input type="text" v-model="investInfo.investName" placeholder="请输入招商人" style="width: 80%">
                      </i-col>
                  </i-row>
                  <i-row>
                      <i-col span="24" style="text-align: center;">
                          <i-button type="success" @click="submitInvist">保存</i-button>
                      </i-col>
                  </i-row>
              </div>
          </i-card>
      </div>
  </LayoutContent>
</template>

<script>
import dayjs from 'dayjs';
import Api from '@/api/api';
import qs from 'qs';
import {Button} from 'iview'; //eslint-disable-line

const api = new Api();

export default {
  components: {},
  name: 'SendRecordPage',
  data() {
    return {
      filter: {
        certName: '',
        mobile: '',
        uid: '',
        investName: '',
        validStatus: '',
        entryType: ''
      },
      page: 1,
      total: 0,
      data: [],
      detail: {},
      investInfo: {},
      nowSelectedRow: {},
      isShowDetail: false, // 显示详情弹框
      isShowInvest: false, // 显示绑定招商人员
      columns: [{
        title: 'UID',
        key: 'uid',
        align: 'center',
        width: 100
      },
      {
        title: '商家类型',
        align: 'center',
        render(h, {row}) {
          return h('span', {}, ['','入驻卖家', '超级入驻卖家', '', '普通卖家'][row.entryType]);
        },
        width: 90
      },
      {
        title: '商家名称',
        key: 'certName',
        align: 'center',
        width: 100
      }, {
        title: '手机号',
        align: 'center',
        key: 'mobile',
        width: 120
      }, {
        title: '身份证',
        align: 'center',
        key: 'certNo',
        width: 140
      }, {
        title: '上架SKUP',
        align: 'center',
        key: 'selfSkuNum',
        width: 95
      }, {
        title: '违规次数',
        key: 'breakRuleTimes',
        width: 90
      },
      {
        title: '账户余额',
        align: 'center',
        render(h, {row}) {
          let color = parseInt(row.money, 10) > 999 ? 'inherit' : 'red';
          return h('span', {style: {color: color}}, row.money);
        },
        width: 90
      },
      {
        title: '入驻时间',
        align: 'center',
        render(h, {row}) {
          return (
            <span>{row.enterTime ? dayjs(row.enterTime).format('YYYY-MM-DD') : '--'}</span>
          );
        },
        width: 100
      }, {
        title: '退出入驻时间',
        align: 'center',
        render(h, {row}) {
          return (
            <span>{row.quitTime ? dayjs(row.quitTime).format('YYYY-MM-DD') : '--'}</span>
          );
        },
        width: 100
      }, {
        title: '入驻状态',
        align: 'center',
        key: 'validStatusDesc',
      }, /*{
        title: '招商人员',
        align: 'center',
        key: 'investName',
      }, {
        title: '操作',
        align: 'center',
        width: 150,
        render:(h, {row}) => {
          return (
            <div>
              <i-button type="primary" size="small" onClick={() => this.onShowDetail(row)} style="display:none">查看</i-button>
              {(row.investName) ?
                (<i-button type="primary" size="small" onClick={() => this.onEditInvest(row)}>修改招商人</i-button>) :
                <i-button type="success" size="small" onClick={() => this.onEditInvest(row)}>绑定招商人</i-button>}
            </div>
          );
        }
      }*/
      ]
    };
  },
  created() {
    this.$nextTick(() => {
      const {page, certName, investName, mobile, uid, validStatus} = qs.parse(location.search ? location.search.slice(1) : '');

      this.filter.certName = certName ? decodeURIComponent(certName) : this.filter.certName;
      this.filter.mobile = mobile || this.filter.mobile;
      this.filter.uid = uid || this.filter.uid;
      this.filter.validStatus = validStatus ? parseInt(validStatus) : this.filter.validStatus;
      this.filter.investName = investName ? decodeURIComponent(investName) : this.filter.investName;
      this.page = page ? parseInt(page) : 1;

      this.fetchData(this.filter, this.page);
    });
  },
  methods: {
    onFilter() {
      this.fetchData(this.filter);
    },
    onClear() {
      this.$refs.filterForm.resetFields();
      this.fetchData(this.filter);
    },
    onPageChange(page) {
      this.fetchData(this.filter, page);
    },
    async fetchData(params, page = 1) {
      this.page = page;
      this.$Loading.start();
      const result = await api._get('/ufoPlatform/storedSeller/queryStoredSeller', Object.assign({
        page,
      }, this.getParams(params)));
        console.log(result);
      if (result.code === 200) {
        this.total = result.data.total;
        this.data = result.data.list;
        this.$Loading.finish();
      } else {
        result.message && this.$Message.warning(result.message);
        this.$Loading.error();
      }
    },
    async onShowDetail(row) {
      let detail = Object.assign({}, row);
      detail.enterTime = row.enterTime ? dayjs(row.enterTime).format('YYYY-MM-DD HH:mm:ss') : '--';
      detail.quitTime = row.quitTime ? dayjs(row.quitTime).format('YYYY-MM-DD HH:mm:ss') : '--';


      this.detail = Object.assign({}, detail);
      if (detail.idCardFrontUrl) {
        this.detail.idCardFrontUrl = '';
      }

      this.isShowDetail = true;

      if(detail.idCardFrontUrl) {
        this.detail.idCardFrontUrl = await this.drawMask(detail.idCardFrontUrl);
      }
    },
    async drawMask(imgUrl) {
      let canvas = document.createElement('canvas');
      let _canvas = document.createElement('canvas');
      let context = canvas.getContext('2d');
      let _context = _canvas.getContext('2d');
      let image = new Image();

      image.src = imgUrl;
      image.setAttribute('crossOrigin', 'anonymous');
      return new Promise((resolve, reject) => {
        image.onload = () => {
          let imageData;

          /**
           * 图片大小与_canvas匹配
           */
          _canvas.width = image.width;
          _canvas.height = image.height;

          /**
           * 重置canvas大小
           */
          canvas.width = image.width;
          canvas.height = image.height;

          _context.drawImage(image, 0, 0);
          imageData = _context.getImageData(0, 0, _canvas.width, _canvas.height);
          let mosaicSize = 12; // 马赛克块的大小
          this.createMosaic(_context, _canvas.width, _canvas.height, mosaicSize, imageData);
          context.drawImage(_canvas, 0, 0);
          return resolve(canvas.toDataURL('image/jpeg'));
        };
        image.onerror = () => {
          return resolve(imgUrl);
        };
      });

    },
    createMosaic(context, width, height, size, data) { // 根据图片填充马赛克块
      for(let y = 0; y < height; y+= size) {
        for(let x = 0; x < width; x+= size) {
          //取出像素的r,g,b,a值
          let cR= data.data[(y * width + x) * 4];
          let cG = data.data[(y * width + x) * 4 + 1];
          let cB = data.data[(y * width + x) * 4 + 2];
          let cA = data.data[(y * width + x) * 4 + 3];

          context.fillStyle = `rgba(${cR},${cG},${cB},${cA})`;
          context.fillRect(x, y,  x + size,  y + size);
        }
      }
    },
    onEditInvest(row) {
      this.nowSelectedRow = row;
      this.isShowInvest = true;
      this.investInfo = {
        uid: row.uid,
        investName: row.investName || ''
      };
    },
    submitInvist() {
      if(this.investInfo.uid) {
        api._post('/ufoPlatform/storedSeller/saveInvestUser', this.investInfo).then(result => {

          if (result.code === 200) {
//            this.nowSelectedRow.investName = this.investInfo.investName;
            this.closePopup();
            this.fetchData(this.filter, this.page);
            this.$Modal.info({
              title: '提示',
              content: result.message
            });
          } else {
            this.closePopup();
            this.$Modal.info({
              title: '提示',
              content: '保存失败'
            });
          }
        });
      }
    },
    closePopup() {
      this.detail = {};
      this.investInfo = {};
      this.isShowDetail = false;
      this.isShowInvest = false;
    },

    getParams(params) {
      return {
        certName: params.certName,
        mobile: params.mobile,
        uid: params.uid,
        investName: params.investName,
        validStatus: parseInt(params.validStatus) >= 0 ? params.validStatus : void 0,
        entryType: parseInt(params.entryType) >= 0 ? params.entryType : void 0,
      };
    }
  },
};
</script>

<style>
    .ivu-btn {
        margin: 0 2px;
    }

    .ivu-table-cell {
        padding: 10px;
    }
    
    .show {
        display: block !important;
    }

    .btn-close {
        width: 30px;
        height: 30px;
        border: none;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        text-align: center;
        padding: 0;
        color: red;
    }

    .popup-detail-wrapper,
    .popup-invist-wrapper {
        display: none;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 99;
    }

    .popup-detail-container {
        width: 900px;
        min-height: 500px;
        margin: 100px auto;
    }

    .popup-invist-container {
        width: 500px;
        height: 200px;
        margin: 100px auto;
    }

    .ivu-row:hover {
        background-color: lightblue;
    }

    .ivu-row, .ivu-col {
        overflow: hidden;
    }

    .detail-title, .invist-title {
        color: #2db7f5;
    }

    .cert-image {
        width: 200px;
        min-height: 126px;
        margin: 4px 10px;
    }

    .popup-detail-container .ivu-row {
        border-left: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
    }
    
    .popup-detail-container .ivu-col{
        border: 1px solid lightgray;
        padding: 8px 0;
        text-align: center;
        border-bottom: none;
        border-left: none;
    }

    .no-border-right {
        border-right: none !important;
    }

    .border-left {
        border-left: 1px solid lightgray !important;
    }

    .popup-invist-container .ivu-row {
        padding: 10px 0;
        text-align: center;
    }

    input {
        width: 80%;
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
</style>