<template>
  <el-row>
    <el-row>
      <el-form ref="searchForm" :model="searchForm" label-width="80px">
        <search-white-board @search="list">
          <div slot="base">
            <el-row style="line-height: 40px; text-align: right;">
              <!-- <el-col :span="2"><label class="search-label">机构</label></el-col>
              <el-col :span="5">
                <select-organ v-model="searchForm.organIds" />
              </el-col> -->
              <el-col :span="2" :offset="1"><label class="search-label">课程名称</label></el-col>
              <el-col :span="5"><el-input v-model.trim="searchForm.name" placeholder="请输入课程名称" clearable /></el-col>
            </el-row>
          </div>
          <div slot="more">
            <el-row style="line-height: 40px; text-align: right;">
              <el-col :span="2"><label class="search-label">是否删除</label></el-col>
              <el-col :span="5" style="text-align: left;">
                <el-switch v-model="searchForm.isDel" active-color="#13ce66" inactive-color="#ff4949" @change="list" />
              </el-col>
            </el-row>
          </div>
        </search-white-board>
      </el-form>
    </el-row>

    <el-row>
      <white-board>
        <el-row>
          <el-col :span="2" :offset="22" style="text-align: right;">
            <el-button icon="el-icon-plus" type="success" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>

        <el-row style="padding: 10px 0px;">
          <el-table :data="tableData" style="width: 100%;" highlight-current-row stripe>
            <el-table-column prop="organName" label="机构名称" show-overflow-tooltip />
            <el-table-column prop="name" label="课程名称" show-overflow-tooltip />
            <el-table-column prop="type" label="课程类型" width="70" show-overflow-tooltip />
            <el-table-column label="课程价格" width="100">
              <template slot-scope="scope">
                <el-tag type="warning">{{ scope.row.price | moneyFormat }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" show-overflow-tooltip />
            <el-table-column label="更新时间" width="135">
              <template slot-scope="scope">
                <el-row>{{ scope.row.updateByName }}</el-row>
                <el-row>{{ scope.row.updateAt }}</el-row>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button v-if="scope.row.isDel" type="success" plain @click="handleIsDel(scope.$index, scope.row)">启用</el-button>
                <el-button v-if="!scope.row.isDel" type="danger" plain @click="handleIsDel(scope.$index, scope.row)">停用</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>

        <el-row>
          <el-pagination :current-page="searchForm.page" :page-sizes="[10, 20, 50, 100]" :page-size="50" layout="total, sizes, prev, pager, next, jumper" :total="total" small @size-change="changeSizeChange" @current-change="changeCurrentChange" />
        </el-row>
      </white-board>
    </el-row>

    <el-dialog :visible.sync="dialogVisible">
      <el-divider />
      <label slot="title" style="float: left;">{{ dialogTitle }}</label>

      <el-row style="text-align: left;">
        <el-col :span="20" :offset="2">
          <el-form ref="form" :model="form" :rules="formRules" label-width="80px">
            <el-form-item label="机构" prop="organId">
              <select-organ v-model="form.organId" :multiple="false" />
            </el-form-item>
            <el-form-item label="课程名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入课程名称" maxlength="64" show-word-limit clearable />
            </el-form-item>
            <el-form-item label="课程类型" prop="type">
              <select-course-type v-model="form.type" clearable filterable />
            </el-form-item>
            <el-form-item label="课程价格" prop="price">
              <el-input v-model.trim="form.price" type="number" placeholder="请输入课程价格" clearable />
            </el-form-item>
            <!-- <el-form-item label="缩略图" prop="thumbnail"><upload-img v-model="form.thumbnail" /></el-form-item>
            <el-form-item label="横幅" prop="banner"><upload-img v-model="form.banner" /></el-form-item>
            <el-form-item label="课程介绍" prop="introduceUrl"><upload-img v-model="form.introduceUrl" /></el-form-item> -->
            <el-form-item label="备注">
              <el-input v-model.trim="form.remarks" type="textarea" placeholder="请输入备注" rows="3" maxlength="255" show-word-limit clearable />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-divider />
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
/* import UploadImg from '@/components/common/upload/upload-img' */
import { SelectOrgan } from '@/components/organ'
import { SelectCourseType } from '@/components/course'
import courseApi from '@/api/basics/courseApi'

export default {
  name: 'BasicsCourse',
  components: {
    'select-organ': SelectOrgan,
    /* 'upload-img': UploadImg, */
    'select-course-type': SelectCourseType
  },
  data() {
    const validatePrice = (rule, value, callback) => {
      if (!Number.isInteger(Number(value))) {
        callback(new Error('请输入正确的数字'))
      }
      if (value === '' || value <= 0) {
        callback(new Error('请输入课程价格'))
      }
      callback()
    }
    return {
      typeList: [{
        value: '430课程',
        label: '430课程'
      }],
      searchForm: {
        name: '',
        isDel: false,
        page: 1,
        organIds: [],
        size: 50
      },

      total: 0,
      tableData: [],
      dialogTitle: '',
      dialogVisible: false,
      form: {
        id: '', // 标识
        name: '', // 课程名称
        price: '', // 课程价格
        thumbnail: '1', // 缩略图
        banner: '1', // 横幅
        type: '', // 课程类型
        introduceUrl: '', // 课程介绍
        remarks: '', // 备注
        organId: '' // 机构
      },

      formRules: {
        name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入课程类型', trigger: 'blur' }],
        price: [{ required: true, validator: validatePrice, trigger: 'blur' }],
/*         thumbnail: [{ required: true, message: '请上传缩略图', trigger: 'blur' }],
        banner: [{ required: true, message: '请上传横幅', trigger: 'blur' }], */
        introduceUrl: [{ required: true, message: '请上传课程介绍', trigger: 'blur' }],
        organId: [{ required: true, message: '请选择机构', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.list()
  },
  methods: {
    handleAdd() {
      /* 重置表单 */
      this.form['id'] = '' // 标识
      this.form['name'] = '' // 课程名称
      this.form['price'] = '' // 课程价格
/*       this.form['thumbnail'] = '' // 缩略图
      this.form['banner'] = '' // 横幅 */
      this.form['type'] = '' // 课程类型
      this.form['introduceUrl'] = '' // 课程介绍
      this.form['remarks'] = '' // 备注
      this.form['organId'] = '' // 机构
      this.dialogTitle = '新增'
      this.dialogVisible = true
    },
    handleEdit(index, row) {
      /* 重置表单 */
      this.form['id'] = row.id // 标识
      this.form['name'] = row.name // 课程名称
      this.form['price'] = row.price // 课程价格
/*       this.form['thumbnail'] = row.thumbnail // 缩略图
      this.form['banner'] = row.banner // 横幅 */
      this.form['type'] = row.type // 课程类型
      this.form['introduceUrl'] = row.introduceUrl // 课程介绍
      this.form['remarks'] = row.remarks // 备注
      this.form['organId'] = '' // 机构
      this.dialogTitle = '编辑'
      this.dialogVisible = true
    },
    handleIsDel(index, row) {
      courseApi.handleIsDel(row.id).then(data => {
        this.list()
      })
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }

        courseApi.saveOrUpdate(this.form).then(data => {
          this.list()

          this.dialogVisible = false
          this.$refs['form'].resetFields()
        })
      })
    },
    change() {
      this.list()
    },
    list() {
      this.tableData = []
      courseApi.page(this.searchForm).then(data => {
        this.total = data.total
        this.tableData = data.data
      })
    },
    changeSizeChange(val) {
      this.searchForm.size = val
      this.list()
    },
    changeCurrentChange(val) {
      this.searchForm.page = val
      this.list()
    }
  }
}
</script>

<style scoped>
</style>
