<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    v-dialogDrag
    width="900px"
    :visible.sync="visible">
    <el-form size="small" :model="inputForm" ref="inputForm" @keyup.enter.native="doSubmit()"
             label-width="95px" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="method==='view'" @submit.native.prevent>
      <el-divider content-position="left"><i class="el-icon-document"></i> 活动信息</el-divider>
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="活动名称" :rules="[{required: true, message: '活动名称不能为空', trigger: 'blur'}]" prop="name">
            <el-input size="large" v-model="inputForm.name" placeholder="请输入活动名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="活动详情" :rules="[{required: true, message: '活动详情不能为空', trigger: 'blur'}]" prop="detail">
            <el-input size="large" v-model="inputForm.detail" :autosize="{minRows: 2, maxRows: 8}" type="textarea" maxlength="200" placeholder="请输入活动详情" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left"><i class="el-icon-document"></i>
        活动奖项
        <el-button style="margin-left: 20px" type="primary" :disabled="method==='view'" size="mini" @click="insertEvent()" plain>
          新增
        </el-button>
      </el-divider>
      <el-row  :gutter="15">
        <vxe-table
          border
          show-overflow
          show-footer
          ref="luckyTable"
          class="vxe-table-element"
          :data="inputForm.luckyDrawAwardsDTOList"
          style="margin-left: 1em"
          @cell-click=""
          @edit-closed=""
          :key="tableKey"
          highlight-current-row
          :edit-rules="validRules"
          :edit-config="{trigger: 'click', mode: 'row', showStatus: false, autoClear: true, icon: '#'}"
        >
          <vxe-table-column field="name" min-width="180" align="center" title="奖项名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.name" placeholder="奖项名称"></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="number" min-width="180" align="center" title="奖品数量" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.number" type="number" placeholder="奖品数量"></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column field="prizeName" min-width="180" align="center" title="奖品名称" :edit-render="{}">
            <template v-slot:edit="scope">
              <vxe-input v-model="scope.row.prizeName" placeholder="奖品名称"></vxe-input>
            </template>
          </vxe-table-column>
          <vxe-table-column title="操作" width="100" align="center">
            <template v-slot="scope">
              <el-button size="mini" type="danger" @click="removeEvent(scope.row,scope.$rowIndex)">删除</el-button>
            </template>
          </vxe-table-column>
        </vxe-table>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
      <el-button size="small" type="primary" v-if="method != 'view'" @click="doSubmit()" icon="el-icon-circle-check" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import LuckyDrawEventsService from '@/api/luckyDraw/LuckyDrawEventsService'
  export default {
    data () {
      return {
        visible: false,
        loading: false,
        title: '',
        method: '',
        inputForm: {
          id: '',
          name: '',
          detail: '',
          luckyDrawAwardsDTOList: []
        },
        tableKey: '',
        validRules: {
          name: [
            {required: true, message: '奖项类型不能为空'}
          ],
          number: [
            {required: true, message: '奖品数量不能为空'}
          ],
          prizeName: [
            {required: true, message: '奖品名称不能为空'}
          ]
        }
      }
    },
    luckyDrawEventsService: null,
    created () {
      this.luckyDrawEventsService = new LuckyDrawEventsService()
    },
    mounted () {
    },
    components: {
    },
    methods: {
      init (method, id) {
        this.method = method
        this.inputForm = {
          id: '',
          name: '',
          detail: '',
          luckyDrawAwardsDTOList: []
        }
        this.inputForm.id = id
        if (method === 'add') {
          this.title = `新建活动`
        } else if (method === 'edit') {
          this.title = '修改活动信息'
        } else if (method === 'view') {
          this.title = '查看活动详情'
        }
        this.visible = true
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.luckyDrawEventsService.queryById(this.inputForm.id).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data)
              if (this.commonJS.isEmpty(this.inputForm.luckyDrawAwardsDTOList)) {
                this.inputForm.luckyDrawAwardsDTOList = []
              }
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            if (this.commonJS.isEmpty(this.inputForm.luckyDrawAwardsDTOList)) {
              this.inputForm.luckyDrawAwardsDTOList = []
              this.$message.error('活动奖项未填写')
              this.loading = false
              throw new Error('活动奖项未填写')
            }
            this.inputForm.luckyDrawAwardsDTOList.forEach((item, index) => {
              if (this.commonJS.isEmpty(item.name)) {
                this.$message.error('活动奖项中第' + (index + 1) + '条数据的“奖项名称”未填写')
                this.loading = false
                throw new Error()
              }
              if (this.commonJS.isEmpty(item.number) || item.number === 0 || item.number === '0') {
                this.$message.error('活动奖项中第' + (index + 1) + '条数据的“奖品数量”不可以为空或“0”')
                this.loading = false
                throw new Error()
              }
              if (this.commonJS.isEmpty(item.prizeName)) {
                this.$message.error('活动奖项中第' + (index + 1) + '条数据的“奖品名称”未填写')
                this.loading = false
                throw new Error()
              }
            })
            this.luckyDrawEventsService.save(this.inputForm).then(({data}) => {
              this.$message.success(data)
              this.loading = false
              this.visible = false
              this.$emit('refreshDataList')
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      // 新增
      insertEvent () {
        let d = {
          name: '',
          number: '',
          prizeName: ''
        }
        if (this.commonJS.isEmpty(this.inputForm.luckyDrawAwardsDTOList)) {
          this.inputForm.luckyDrawAwardsDTOList = []
        }
        this.$refs.luckyTable.insertAt(d)
        this.inputForm.luckyDrawAwardsDTOList.push(d)
        this.tableKey = Math.random()
      },
      // 删除
      removeEvent (row, rowIndex) {
        this.$refs.luckyTable.remove(row)
        this.inputForm.luckyDrawAwardsDTOList.splice(rowIndex, 1)
      },
      close () {
        this.inputForm = {
          id: '',
          name: '',
          detail: '',
          luckyDrawAwardsDTOList: []
        }
        this.$refs.inputForm.resetFields()
        this.tableKey = Math.random()
        this.visible = false
        this.loading = false
      }
    }
  }
</script>
<style scoped>
  .avatar{
    height: 100px;
  }
  .el-divider__text {
    font-weight: bold;
    font-size: 16px;
  }
</style>
