<template>
  <PageWrapper>
    <el-tabs class="tabs" tab-position="top" v-model="currentTab">
      <el-tab-pane label="数据管理" name="a">
        <PageContentWrapper>
          <PageItemCard class="tabs-item" :title="'数据管理'">
            <template v-slot:header>
              <el-row size="small">
                <el-col :span="24" style="display: flex; justify-content: flex-end;">
                  <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 32px;">
                    <el-form-item label="审批人" style="margin-bottom: 0;">
                      <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域" style="margin-bottom: 0;">
                      <el-select v-model="formInline.region" placeholder="活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </template>
            <el-table
              :data="tableData1"
              style="width: 100%;">
              <el-table-column
                prop="date"
                label="日期">
              </el-table-column>
              <el-table-column label="配送信息">
                <el-table-column
                  prop="name"
                  label="姓名">
                </el-table-column>
                <el-table-column label="地址">
                  <el-table-column
                    prop="province"
                    label="省份">
                  </el-table-column>
                  <el-table-column
                    prop="city"
                    label="市区">
                  </el-table-column>
                  <el-table-column
                    prop="address"
                    label="地址">
                  </el-table-column>
                  <el-table-column
                    prop="zip"
                    label="邮编">
                  </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table>
          </PageItemCard>
        </PageContentWrapper>
      </el-tab-pane>
      <el-tab-pane label="成员管理" name="b">
        <page-content-wrapper>
          <page-item-card title="成员管理">
            <el-table
              :data="tableData"
              border
              style="width: 100%;">
              <el-table-column
                fixed
                prop="date"
                label="日期">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="province"
                label="省份">
              </el-table-column>
              <el-table-column
                prop="city"
                label="市区">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
                width="300">
              </el-table-column>
              <el-table-column
                prop="zip"
                label="邮编"
                width="120">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
          </page-item-card>
        </page-content-wrapper>
      </el-tab-pane>
    </el-tabs>
  </PageWrapper>
</template>

<script>
export default {
  name: 'TabForm',
  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData1: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      currentTab: 'a',
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    },
    handleClick (row) {
      console.log(row)
    }
  }
}
</script>

<style scoped lang="scss">
.tabs {
  box-sizing: border-box;
  border-top: 1px solid #f5f5f5;
  height: 50px;
  background: #fff;
}
</style>
