<template>
  <page-header-wrapper>
    <div class="container mb-25">
      <a-alert message="温馨提示" description="授权的公众号需为认证的服务号！" type="info" show-icon />
    </div>
    <a-card :bordered="false" class='tableClass'>
      <div class="table-page-search-wrapper ">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="12" :xs="12" :lg="4" class="mb-15">
              <a-input placeholder="公众号名称" v-model="queryParam.Name" />
            </a-col>
            <a-col :md="12" :xs="12" :lg="4" class="mb-15">
              <a-input placeholder="计划名称" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :xs="12" :lg="4" class="mb-15">
              <a-input placeholder="渠道名称" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :xs="12" :lg="4" class="mb-15">
              <a-input placeholder="设备号" v-model="queryParam.TelPhone" />
            </a-col>
            <a-col :md="12" :xs="12" :lg="4"  class="mb-15">
              <a-range-picker >
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-col>
            <a-col :md="12" :lg="2" class="mb-15">
              <a-button type="primary" class="f-r" @click="handleSubmit">查询 </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, record">
          <a @click="handleSB(record)">{{text}}</a>
        </span>
        <template slot="title">
          <a-row>
            <a-button type="primary" @click="handleAdd" class="mr-15">新增 </a-button>
            <a-button type="primary" @click="handleList">公众号授权列表</a-button>
          </a-row>
        </template>
        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)" class="mr-15">编辑</a>
            <a @click="handleSuspend(record)" class="mr-15">暂停</a>
            <a @click="handleCancelT(record)">取消</a>
          </template>
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '渠道',
      dataIndex: 'BusinessName',
    },
    {
      title: '名称',
      dataIndex: 'Name',
    },
    {
      title: '公众号',
      dataIndex: 'PublicName',
      width:160
    },
    {
      title: '状态',
      dataIndex: 'status',
      needTotal: true,
      scopedSlots: {
        customRender: 'status'
      }
    },
    {
      title: '绑定设备数',
      dataIndex: 'realcount',
      scopedSlots: {
        customRender: 'realcount'
      },
    },
    {
      title: '总测量数',
      dataIndex: 'measurecount',
    },
    {
      title: '今日测量数',
      dataIndex: 'todaymeasurecount',
    },
    {
      title: '创建时间',
      dataIndex: 'CreateTime',
      width:160
    },
    {
      title: '操作',
      key: 'action',
      width:140,
      fixed: 'right',
      scopedSlots: {
        customRender: 'action'
      },
    },
  ]


  const data = [{
      Id: '1',
      BusinessName: '北京张小姐',
      Name: '保迪秀',
      PublicName: 'Bodyshow保迪秀',
      status: 0,
      realcount: '2',
      measurecount: '3',
      todaymeasurecount: '0',
      CreateTime: '2020-09-09 15:04:08'
    },
    {
      Id: '1',
      BusinessName: '北京张小姐',
      Name: '保迪秀',
      PublicName: 'Bodyshow保迪秀',
      status: 2,
      realcount: '2',
      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,
        advanced: false,
        queryParam: {},
        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: {
      //暂停
      handleSuspend(record) {
        this.$confirm({
          title: '提示',
          content: '确定暂停？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      },
      //取消
      handleCancelT(record) {
        this.$confirm({
          title: '提示',
          content: '确定取消？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      },
      //新增
      handleAdd() {
        this.$router.push('/official/components/addList')
      },
      handleList() {
        this.$router.push('/official/empower')
      },
      handleSB(record){
        console.log(record)
        this.$router.push('/official/deviceList?id='+record.Id)
      },
      //编辑
      handleEdit(record) {
        this.visible = true
        this.$router.push('/official/components/addList?item='+JSON.stringify(record))
      },
      handleOk() {
        const form = this.$refs.createModal.form
        this.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            console.log('values', values)
            new Promise((resolve, reject) => {
              setTimeout(() => {
                resolve()
              }, 1000)
            }).then(res => {
              this.visible = false
              this.confirmLoading = false
              form.resetFields()
              this.$refs.table.refresh()
              this.$message.info('修改成功')
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      handleCancel() {
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields()
      },
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },
      resetSearchForm() {
        this.queryParam = {
          date: moment(new Date())
        }
      }
    },
  }
</script>
<style scoped="scoped">
 .tableClass{
   height: calc(65vh)!important
 }
 .container{
   background-color: #fff;
   padding: 20px;
 }
</style>