<template>
  <Card>
    <div>
      <el-form class="count-form" ref="form" size="mini" inline :model="form">
        <el-form-item label="查询条件">
          <el-input
            v-model.trim="form.product"
            placeholder="产品名称/产品编号"
            :maxlength="inputMaxLength"
          >
            <i slot="prefix" class="el-icon-search"></i
          ></el-input>
        </el-form-item>
        <el-form-item label="产品类型">
          <el-select v-model="form.type">
            <el-option
              v-for="(item, index) of productTypes"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="险别">
          <el-select v-model="form.insurance">
            <el-option
              v-for="(item, index) of insuranceTypes"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上架状态">
          <el-select v-model="form.shelf">
            <el-option
              v-for="(item, index) of shelfType"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="产品渠道">
          <el-select v-model="form.channel">
            <el-option
              v-for="(item, index) of productChannel"
              :key="`option-${index}`"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-end mb10">
      <el-button type="primary" size="mini" @click="submit">查询</el-button>
      <el-button size="mini" @click="onReset">重置</el-button>
      <el-button size="mini" type="primary" plain @click="editOrAdd"
        >添加产品</el-button
      >
    </div>
    <el-table
      class="mb10"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column
        prop="index"
        align="center"
        label="产品编号"
        fixed
        width="90"
      ></el-table-column>
      <el-table-column
        prop="name"
        align="center"
        label="产品名称"
      ></el-table-column>
      <el-table-column
        prop="updateTime"
        align="center"
        label="更新时间"
      ></el-table-column>
      <el-table-column
        prop="prodType"
        align="center"
        label="产品类型"
      ></el-table-column>
      <el-table-column
        prop="insurance"
        align="center"
        label="险别"
      ></el-table-column>
      <el-table-column
        prop="channel"
        align="center"
        label="产品渠道"
      ></el-table-column>
      <el-table-column
        prop="index"
        align="center"
        label="文件类型"
      ></el-table-column>
      <el-table-column
        prop="status"
        align="center"
        label="上架状态"
      ></el-table-column>
      <el-table-column align="center" label="操作" fixed="right" width="130">
        <template slot-scope="scope">
          <el-button type="text" @click="editOrAdd(scope.row)">编辑</el-button>
          <el-button type="text" @click="putOnShelf">上架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPaginationfrom :pagination="pagination"></FooterPaginationfrom>
  </Card>
</template>

<script>
import { inputMaxLength } from '@/utils/mappingData'
import FooterPaginationfrom from './components/FooterPagination'

const productTypes = [
  {
    label: '全部',
    value: ''
  },
  {
    label: '团险',
    value: '1'
  }
]
const insuranceTypes = [
  {
    label: '全部',
    value: ''
  },
  {
    label: '主险',
    value: '1'
  },
  {
    label: '附加险',
    value: '2'
  }
]
const shelfType = [
  {
    label: '全部',
    value: ''
  },
  {
    label: '未上架',
    value: '1'
  },
  {
    label: '上架',
    value: '2'
  }
]

const productChannel = [
  {
    label: '全部',
    value: ''
  },
  {
    label: '产品说明书',
    value: '1'
  },
  {
    label: '产品条款',
    value: '2'
  },
  {
    label: '免责条款',
    value: '3'
  },
  {
    label: '产品投保链接',
    value: '4'
  }
]
export default {
  components: {
    FooterPaginationfrom
  },
  data() {
    return {
      inputMaxLength,
      productTypes,
      insuranceTypes,
      shelfType,
      productChannel,
      form: {
        product: '',
        type: '',
        insurance: '',
        shelf: '',
        channel: ''
      },
      pagination: { size: 10, total: 0, page: 1 },
      tableData: [{}],
      loading: false
    }
  },
  methods: {
    editOrAdd(row) {
      if (row) {
      }
      this.$router.push({
        path: 'edit-product'
      })
    },
    submit() {},
    onReset() {
      this.form = {
        product: '',
        type: '',
        insurance: '',
        shelf: '',
        channel: ''
      }
    },
    putOnShelf() {}
  }
}
</script>

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