<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="tableClass">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="18">
            <a-col :md="12" :xs="12"  :xl="4" class="mb-15">
              <a-input placeholder="公众号名称" v-model="queryParam.Name" />
            </a-col>
            <a-col :md="12" :xs="12"  :xl="4" class="mb-15">
                <a-select  v-model="Type" @change="handleChangeType" placeholder="请选择">
                  <a-select-option value="0">全部</a-select-option>
                  <a-select-option value="1">未激活</a-select-option>
                  <a-select-option value="2">正常</a-select-option>
                  <a-select-option value="3">销毁</a-select-option>
                  <a-select-option value="4">已撤销</a-select-option>
                  <a-select-option value="5">已销毁</a-select-option>
                </a-select>
            </a-col>
            <a-col :md="12" :xs="12"  :xl="4" class="mb-15">
              <a-input placeholder="客户名称" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :xs="12"  :xl="3" class="mb-15">
              <a-button type="primary" class="f-r" @click="handleSubmit">查询 </a-button>
            </a-col>
            <!-- <a-col :span="3">
              <a-button type="primary" class="f-r">公众号授权 </a-button>
            </a-col> -->
          </a-row>
        </a-form>
      </div>

      <a-table ref="table" bordered :columns="columns" :data-source="data" :scroll="{ x: 1200,}">
        <span slot="status" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="realcount" slot-scope="text">
          <a>{{ text }}</a>
        </span>
        <a slot="Name" slot-scope="text,record">
          <a-tooltip placement="bottomRight">
            <template slot="title">
              <div class="img"><img :src="record.head_img" /></div>
            </template>
            {{ text }}
          </a-tooltip>
        </a>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">模板同步</a>
          </template>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '渠道',
      dataIndex: 'BusinessName',
    },
    {
      title: '名称',
      dataIndex: 'Name',
      scopedSlots: {
        customRender: 'Name'
      },
    },
    {
      title: '账号类型',
      dataIndex: 'PublicName',
    },
    {
      title: '授权状态',
      dataIndex: 'status',
      needTotal: true,
      scopedSlots: {
        customRender: 'status'
      }
    },
    {
      title: '授权时间',
      dataIndex: 'CreateTime',
    },
    {
      title: '标签数',
      dataIndex: 'measurecount',
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: {
        customRender: 'action'
      },
    },
  ]


  const data = [{
      Id: '1',
      BusinessName: '北京张小姐',
      Name: '保迪秀',
      PublicName: 'Bodyshow保迪秀',
      status: 0,
      head_img: 'http://wx.qlogo.cn/mmopen/s0AtJGCBXo9Z9HOv6Fo8lvAsC2LicuthE8yDIFIWu6cVnfNjFxQqOcwoJvWLeojgmFnTbh0Ck6F0UUv7s3sqUIGfHaFWZlHeic/0',
      measurecount: '3',
      CreateTime: '2020-09-09 15:04:08'
    },
    {
      Id: '1',
      BusinessName: '北京张小姐',
      Name: '保迪秀',
      PublicName: 'Bodyshow保迪秀',
      status: 2,
      realcount: '2',
      head_img: 'http://wx.qlogo.cn/mmopen/1CHHx9Yq4nFLntKcqSPJ1LPsapuQibZNqHUiarMZFtfLzOW3fsabMtnna0XRYZtBFAs1KXUicaicKiau2OKaXzI5eWbXiaUpw3oWH2/0',
      measurecount: '3',
      todaymeasurecount: '0',
      CreateTime: '2020-09-09 15:04:08'
    },
  ]
  const statusMap = {
    0: {
      status: 'default',
      text: '关闭'
    },
    1: {
      status: 'processing',
      text: '运行中'
    },
    2: {
      status: 'success',
      text: '正常'
    },
    3: {
      status: 'error',
      text: '异常'
    }
  }
  export default {
    data() {
      return {
        data,
        columns,
        visible: false,
        confirmLoading: false,
        mdl: null,
        advanced: false,
        queryParam: {},
        Type: '状态选择',
        selectedRowKeys: [],
        // loadData: parameter => {
        //   const requestParameters = Object.assign({}, parameter, this.queryParam)
        //   console.log('loadData request parameters:', requestParameters)
        //   return getServiceList(requestParameters)
        //     .then(res => {
        //       return res.result
        //     })
        // },
      }
    },
    filters: {
      statusFilter(type) {
        return statusMap[type].text
      },
      statusTypeFilter(type) {
        return statusMap[type].status
      }
    },

    methods: {
      //取消
      handleEdit() {
        this.$confirm({
          title: '提示',
          content: '确定开始同步模板？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      },
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },
      // 状态
      handleChangeType(value) {
        console.log(`selected ${value}`)
        this.queryParam.Type = value
      }
    },
  }
</script>
<style scoped="scoped">
  /deep/.ant-tooltip-inner {
    width: 100px;
    height: 100px;
  }
  img{
    width: 100%;
    height: 100%;
  }
</style>
