<template>
  <div>
    <div class="head-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="" prop="orderId">
          <el-input
            v-model="newTag"
            clearable
            placeholder="客户昵称"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="" prop="orderId">
          <el-input
            v-model="newTag"
            clearable
            placeholder="客户手机号"
            style="width: 200px;"
          />
        </el-form-item>
        <el-form-item label="" prop="customRiskLevel">
          <el-select
            placeholder="是否参与评论"
            clearable
            :fit-input-width="true"
            style="width: 150px"
          >
            <el-option label="否" :value="1" />
            <el-option label="是" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="customRiskLevel">
          <el-select
            placeholder="是否领取了优惠券"
            clearable
            :fit-input-width="true"
            style="width: 150px"
          >
            <el-option label="否" :value="1" />
            <el-option label="是" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="customRiskLevel">
          <el-select
            placeholder="是否提交了订单"
            clearable
            :fit-input-width="true"
            style="width: 150px"
          >
            <el-option label="否" :value="1" />
            <el-option label="是" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="customRiskLevel">
          <el-select
            placeholder="是否订阅了产品"
            clearable
            :fit-input-width="true"
            style="width: 150px"
          >
            <el-option label="否" :value="1" />
            <el-option label="是" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="success" size="mini">查询</el-button>
          <el-button
            size="mini"
            type="primary"
            :loading="downloadLoading"
            @click="toExport"
            >导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      v-loading="loading"
      :data="data"
      size="small"
      style="width: 100%;"
    >
      <el-table-column label="序号" align="center" type="index" fixed />
      <el-table-column prop="name" align="center" label="视频名称">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="封面">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="标签">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="投顾名称">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="所属分公司">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="所属营业部">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="播放类型">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="是否为专栏直播">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="专栏名称">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="风险等级">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="直播开始时间">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="直播结束时间">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="创建时间">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="审核时间">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="直播状态">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="观看限制">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="是否推荐">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="备注">
        <template slot-scope="scope"> </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            text
            @click="
              tag.id = scope.row.id;
              tag.name = scope.row.name;
              dialog = true;
              dialogTitle = '修改专栏';
            "
            >审核</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="备注">
        <template slot-scope="scope"> </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="收货地址"
      :visible.sync="dialogTableVisible"
      :modal-append-to-body="false"
    >
      <el-table :data="gridData">
        <el-table-column type="index" width="150"></el-table-column>
        <el-table-column
          property="name"
          label="产品名称"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="产品类型"></el-table-column>
        <el-table-column property="address" label="投顾名称"></el-table-column>
        <el-table-column
          property="address"
          label="本场直播点击数"
        ></el-table-column>
        <el-table-column
          property="address"
          label="本场直播订阅数"
        ></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        }
      ],
      value: '',
      value1: '',
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '1'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '2'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '3'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '4'
        }
      ],
      buttonText: ['直播观看用户数榜单', '直播订单数榜单', '直播订单金额榜单'],
      selectedButton: 0,
      gridData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      dialogTableVisible: false
    }
  },
  computed: {},
  mounted() {},

  methods: {
    selected(index) {
      this.selectedButton = index
    },
    openProduct() {
      this.$router.push('/liveBroadcast/liveBroadcastDetail')
      // this.dialogTableVisible = !this.dialogTableVisible
    }
  }
}
</script>

<style scoped lang="scss"></style>
