<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div class="form-item">
          <div class="form-item-label">状态: </div>
          <div class="form-item-content">
            <el-button :type="selectedValue===1?'primary':'default'" @click="handleSelected(1)">全部</el-button>
            <el-button :type="selectedValue===2?'primary':'default'" @click="handleSelected(2)">已注册完成</el-button>
            <el-button :type="selectedValue===3?'primary':'default'" @click="handleSelected(3)">未通过审核</el-button>
          </div>
        </div>  
        <div class="form-item">
          <div class="form-item-label">订单号: </div>
          <div class="form-item-content">
            <el-input />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">客服代表: </div>
          <div class="form-item-content">
            <el-select multiple v-model="clientList">
              <el-option value="1" label="客户01" />
              <el-option value="2" label="客户02" />
              <el-option value="3" label="客户03" />
            </el-select>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">销售代表: </div>
          <div class="form-item-content">
            <el-input>
              <el-dropdown slot="prepend" v-model="selectedUser" style="width: 70px;height:30px;vertical-align: middle;">
                <span slot="content" slot-scope="data">{{data.data.label}}</span>
                <el-dropdown-item v-for="(item, index) in userList" :key="index" :label="item.label" :value="item.value" />
              </el-dropdown>
            </el-input>
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label"> </div>
          <div class="form-item-content">
            <el-button type="primary">搜索</el-button>
            <el-button type="primary">重置</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-table stripe :data="dataList" :columns="columns">
      <template slot="status" slot-scope="scope">
        {{scope.row.status===1?'通过审核':'审核不通过'}}
      </template>
      <template slot="freeze" slot-scope="scope">
        {{scope.row.freeze===1?'已冻结':'未冻结'}}
      </template>
      <template slot="subscribe" slot-scope="scope">
        {{scope.row.subscribe===1?'已订阅':'未订阅'}}
      </template>
    </el-table>
    <el-page style="margin-top:10px" background :total="100" layout="total, prev, pager, next" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectedUser: 1,
      selectedValue: 1,
      userList: [
        {
          label: '全部',
          value: 1,
        },
        {
          label: '小王',
          value: 2,
        },
        {
          label: '小陈',
          value: 3,
        }
      ],
      clientList: [],
      columns: [{
        type: 'index',
        label: 'No'
      },{
        prop: 'code',
        label: '客户代码',
      },{
        prop: 'company',
        label: '公司名称',
      },{
        prop: 'status',
        label: '状态',
        renderIcon(row) {
          if (row.status === 1) {
            return 'success';
          } else {
            return 'error';
          }
        }
      },{
        prop: 'freeze',
        label: '客户冻结',
        renderIcon(row) {
          if (row.freeze === 1) {
            return 'success';
          } else {
            return 'error';
          }
        }
      },{
        prop: 'subscribe',
        label: '消息订阅',
      },{
        prop: 'sales',
        label: '销售代表',
      },{
        prop: 'service',
        label: '客服代表',
        setColumn: true
      }],
      dataList: [
        {
          code: '231231231',
          company: '测试公司01',
          status: 1,
          freeze: 2,
          subscribe: 2,
          sales: '小陈01',
          service: '小王01'
        },
        {
          code: '24514151',
          company: '测试公司02',
          status: 0,
          freeze: 1,
          subscribe: 2,
          sales: '小陈02',
          service: '小王02'
        },
        {
          code: '24514151',
          company: '测试公司03',
          status: 1,
          freeze: 1,
          subscribe: 1,
          sales: '小陈03',
          service: '小王03'
        },
        {
          code: '24514151',
          company: '测试公司04',
          status: 2,
          freeze: 1,
          subscribe: 1,
          sales: '小陈04',
          service: '小王04'
        },
      ]
    }
  },
  methods: {
    handleSelected(i) {
      this.selectedValue = i;
    }
  }
}
</script>
<style lang="scss" scoped>
.form {
  &-item {
    display: inline-table;
    width: 100%;
    box-sizing: border-box;
    &-label {
      display: table-cell;
      white-space: nowrap;
      vertical-align: middle;
      padding-top: 0px!important;
      box-sizing: border-box;
      width: 120px;
    }
    * {
      font-size: 12px!important;
    }
    &-content {
      display:  table-cell;
      padding: 0px;
      vertical-align: middle;
    }
  }
}
</style>