<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" :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.Name" />
            </a-col>
            <a-col :md="12" :xs="12" :lg="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>
            </a-col>
            <a-col :md="12" :xs="12" :lg="4" class="mb-15">
              <a-select v-model="age" @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>
            </a-col>
            <a-col :md="12" :xs="12" :lg="4" class="mb-15">
              <a-button type="primary" class="mr-15" @click="handleSubmit">查询 </a-button>
              <a-button type="primary" @click="handleAdd">新增 </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table bordered :columns="columns" :data-source="data" :scroll="{ x: 1200,}">
        <span slot="sex" slot-scope="text">{{ text==0?'其他':text==1?'男':'女' }}</span>
        <span slot="agent" slot-scope="text">{{ text==1?'安卓':'苹果' }}</span>
        <!-- <template slot="title">
					<a-row>
						<a-button type="primary" @click="handleAdd" class="mr-15">新增 </a-button>
					</a-row>
				</template> -->
        <span slot="action" slot-scope="text, record">
          <template>
            <!-- <a @click="handleDetails(record)" class="mr-15">详情</a> -->
            <a @click="handleEdit(record)" class="mr-15">编辑</a>
            <a @click="handleDelete(record)" class="mr-15">删除</a>
            <a @click="handlePublic(record)">同步公众号</a>
          </template>
        </span>
      </a-table>
      <!-- 新增 -->
      <create-form
        ref="createModal" 
        :visible="visible" 
        :loading="confirmLoading" 
        :model="mdl" 
        @cancel="handleCancel"
        @ok="handleOk" 
     />
    </a-card>
  </page-header-wrapper>
</template>

<script>
  const columns = [{
      title: '名称',
      dataIndex: 'tagname',
      width: 120,
    },
    {
      title: '公众号',
      dataIndex: 'PublicName',
    },
    {
      title: '绑定人数',
      dataIndex: 'bindcount',
      ellipsis: true,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      ellipsis: true,
      scopedSlots: {
        customRender: 'sex'
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      ellipsis: true,
    },
    {
      title: 'BMI',
      dataIndex: 'bmi',
      ellipsis: true,
    },
    {
      title: '终端',
      dataIndex: 'agent',
      ellipsis: true,
      scopedSlots: {
        customRender: 'agent'
      },
    },
    {
      title: '最近同步时间',
      dataIndex: 'createtime',
      width:180,
      ellipsis: true,
    },
    {
      title: '操作',
      key: 'action',
      scopedSlots: {
        customRender: 'action'
      },
      width: 200
    },
  ]



  import CreateForm from './components/CreateForm'
  import data from '@/static/data.json'
  export default {
    components: {
      CreateForm
    },
    data() {
      return {
        data: [],
        columns,
        advanced: false,
        queryParam: {},
        Type: '请选择类型',
        age:'请选择性别',
        // 新增
        visible: false,
        confirmLoading: false,
        mdl: null,
        // loadData: parameter => {
        //   const requestParameters = Object.assign({}, parameter, this.queryParam)
        //   console.log('loadData request parameters:', requestParameters)
        //   return getServiceList(requestParameters)
        //     .then(res => {
        //       return res.result
        //     })
        // },
      }
    },
    created() {
      this.data = data.data
    },
    methods: {
      //新增
      handleAdd() {
        this.mdl = null
        this.visible = true
        this.confirmLoading = false
      },
      handleEdit(record) {
        this.visible = true
        this.mdl = { ...record
        }
      },
      // 取消添加/编辑
      handleCancel() {
        console.log('取消')
        this.visible = false
        const form = this.$refs.createModal.form
        form.resetFields()
      },
      // 确定添加/编辑
      handleOk() {
        const that = this
        const form = that.$refs.createModal.form
        that.confirmLoading = true
        form.validateFields((errors, values) => {
          if (!errors) {
            console.log('values', values)
            if (values.id > 0) {
              // 修改 e.g.
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1000)
              }).then(res => {
                that.visible = false
                that.confirmLoading = false
                form.resetFields()
                that.$message.info('修改成功')
              })
            } else {
              // 新增
              new Promise((resolve, reject) => {
                setTimeout(() => {
                  resolve()
                }, 1000)
              }).then(res => {
                that.visible = false
                that.confirmLoading = false
                form.resetFields()
                that.$message.info('新增成功')
              })
            }
          } else {
            that.confirmLoading = false
          }
        })
      },
      //取消
      handlePublic() {
        this.$confirm({
          title: '提示',
          content: '确定同步公众号？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      },
      handleDelete() {
        this.$confirm({
          title: '提示',
          content: '确定删除该信息？',
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            console.log('OK')
          },
          onCancel() {
            console.log('Cancel')
          },
        })
      },
      // 详情
      handleDetails() {

      },
      //搜索
      handleSubmit() {
        console.log(this.queryParam)
      },
      // 状态选择
      handleChangeType() {

      }
    },
  }
</script>
<style scoped="scoped">
</style>
