<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="学习资料管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;align-items: center;">

            <div style="margin-right: 10px;">关键词</div>

            <el-input size="mini" placeholder="请输入关键词" v-model="select.keyword"
              style="width: 160px;margin-right: 10px;"></el-input>

            <el-button size="medium" type="primary" @click="getList" style="margin-left: 10px">查询</el-button>
            <el-button size="medium" type="primary"
              @click="$refs['addStudy'].isShow = true,$refs['addStudy'].type = 'add'" style="margin-left: 10px">新增
            </el-button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :table-item="table" :list="data" :total="total" :auths="['edit','delete']"
      @pageSizeChange="e => {select.page_size = e;select.page = 1;getList()}"
      @pageIndexChange="e => {select.page = e;getList()}" @delete="deleteRow" @editor="editorRow">
    </xy-table>
    <addStudy ref="addStudy" @refresh="getList"></addStudy>
  </div>
</template>

<script>
  import {
    getList,
    destroy
  } from '@/api/resource/study.js'
  import addStudy from '@/views/resource/component/addStudy'
  export default {
    components: {
      addStudy
    },
    data() {
      return {
        select: {
          page: 1,
          rows: 10,
          keyword: '',
        },
        total: 0,
        data: [],
        studyDates: [{
          id: 90,
          value: '三个月'
        }, {
          id: 180,
          value: '六个月'
        }, {
          id: 270,
          value: '九个月'
        }],
        table: [{
            label: '序号',
            type: "index",
          },
          {
            label: '学习内容名称',
            sortable: false,
            prop: 'name',
            width:240,
            align:'left'
          },
          {
            label: '面向对象',
            sortable: false,
            prop: 'type',
            formatter: (cell, data, value) => {
              return value=="1"?"普通访客":(value=="2"?"施工访客":"物流车辆")
            }
          },
          {
            label: '测验有效期',
            sortable: false,
            prop: 'expire_day',
            formatter: (cell, data, value) => {
              return `${value}天`
            }
          },

          {
            label: '最低学习分钟数',
            sortable: false,
            prop: 'minute'
          },
          {
            label: '测验通过需要正确率达',
            sortable: false,
            prop: 'rate',
            formatter: (cell, data, value) => {
              return `${value}%`
            }
          },
          {
            prop: 'created_at',
            label: '创建时间',
            sortable: false,
            width:180,
          },
          {
            label: '创建人',
            sortable: false,
            prop: 'state_name'
          }
        ]
      }
    },
    computed: {},
    mounted() {
      this.getList()
    },
    methods: {
      async getList() {
        let res = await getList(this.select)
        this.data = res.data
        this.total = res.total
      },
      deleteRow(row) {
        destroy({
          id: row.id
        }).then(res => {
          this.$successMessage('destroy', '学习资料')
          this.getList()
        })
      },
      editorRow(row) {
        this.$refs['addStudy'].id = row.id
        this.$refs['addStudy'].type = 'editor'
        this.$refs['addStudy'].isShow = true
      }
    },
  }
</script>

<style scoped lang="scss">
  //::v-deep .el-button + .el-button{
  //  margin-left: 0 !important;
  //}
  ::v-deep .el-button {
    padding: 5px 8px !important;
  }
</style>
