<template>
  <page-header-wrapper>
    <a-card :bordered="false" class="tableClass">
      <div class="table-page-search-wrapper ">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="12" :lg="5" :xs="12" class="mb-15">
              <a-input placeholder="模板标题" v-model="queryParam.Name" />
            </a-col>
            <a-col :md="12" :lg="12"   class="mb-15">
              <a-button type="primary" class="mr-15" @click="handleSubmit">查询 </a-button>
              <a href="#">
              <a-button type="primary" >公众号授权 </a-button>
              </a>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table  bordered :columns="columns" :data-source="data" :scroll="{ x: 1200,}">
        <span slot="type" slot-scope="text">
          <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
        </span>
        <span slot="realcount" slot-scope="text">
          <a>{{ text }}</a>
        </span>
        <a slot="PublicName" slot-scope="text,record">
          <a-tooltip placement="bottomRight">
            <template slot="title">
              <div class="img"><img :src="record.headimgurl" /></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: 'RealName',
      width: 120,
    },
    {
      title: '公众号',
      dataIndex: 'PublicName',
      scopedSlots: {
        customRender: 'PublicName'
      },
    },
    {
      title: '行业',
      dataIndex: 'primary_industry',
      ellipsis: true,
    },
    {
      title: '标题',
      dataIndex: 'title',
      needTotal: true,
      ellipsis: true,
    },
    {
      title: '内容',
      dataIndex: 'content',
      ellipsis: true,
    },
    {
      title: '示例',
      dataIndex: 'example',
      ellipsis: true,
    },
    {
      title: '绑定',
      dataIndex: 'type',
      scopedSlots: {
        customRender: 'type'
      },
      ellipsis: true,
    },
    {
      title: '添加时间',
      dataIndex: 'createtime',
      width:180
    },
    {
      title: '操作',
      key: 'action',
       fixed: 'right',
       width:100,
      scopedSlots: {
        customRender: 'action'
      },
    },
  ]
  const statusMap = {
    0: {
      status: 'default',
      text: '未绑定'
    },
    1: {
      status: 'processing',
      text: '测量模版'
    },
    2: {
      status: 'success',
      text: '绑定模版'
    },
    3: {
      status: 'error',
      text: '解绑模版'
    }
  }
  import data from '@/static/data.json'
  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) {
        for (var j in type) {
          return (statusMap[type[j]].text)
          }
        },
        statusTypeFilter(type) {
          for (var i in type) {
            return statusMap[type[i]].status
          }
        }
      },
      created() {
        this.data=data.data
      },
      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>
