<template>
  <div class="type-container">
    <el-dialog
      title="抽奖类型"
      :visible.sync="innerShowDialog"
      class="common-dialog"
      width="950px"
      @close="handleClose"
      destroy-on-close
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        size="small"
        :inline="true"
      >
        <el-row>
          <el-form-item label="类型名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入类型名称"
              clearable
              style="width: 200px"
              @keyup.enter.native="getTypeList"
            />
          </el-form-item>
          <el-form-item label="类型编码" prop="code">
            <el-input
              v-model="form.code"
              placeholder="请输入类型编码"
              clearable
              style="width: 200px"
              @keyup.enter.native="getTypeList"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" placeholder="状态" clearable>
              <el-option key="A" label="启用" value="A" />
              <el-option key="N" label="禁用" value="N" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getTypeList"
            >查询</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-plus"
              plain
              size="mini"
              @click="addType"
            >新增类型</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>

      <el-table ref="tables" v-loading="loading" :data="typeList">
        <el-table-column label="ID" prop="id" width="80" />
        <el-table-column label="类型名称" prop="name" />
        <el-table-column label="类型编码" prop="code" />
        <el-table-column label="排序" align="center" prop="sort" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.sort }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createTime" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="更新时间" align="center" prop="updateTime" width="160">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-value="A"
              inactive-value="N"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
          width="140"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getTypeList"
      />
    </el-dialog>
    <raffleTypeForm
      :showDialog="openTypeDialog"
      :raffleTypeInfo="raffleTypeInfo"
      :storeList="storeList"
      @closeDialog="closeDialog"
    ></raffleTypeForm>
  </div>
</template>

<script>
import raffleTypeForm from './raffleTypeForm'
import {
  getRaffleTypeList,
  getRaffleTypeInfo,
  updateRaffleTypeStatus,
} from '@/api/raffle'

export default {
  name: 'raffleType',
  components: {
    raffleTypeForm,
  },
  props: {
    showDialog: {
      type: [Boolean],
      default: () => false,
    },
  },
  data() {
    return {
      innerShowDialog: this.showDialog,
      loading: false,
      openTypeDialog: false,
      raffleTypeInfo: null,
      page: 1,
      pageSize: 10,
      total: 0,
      form: { page: 1, pageSize: 10 },
      storeList: [],
      typeList: [],
    }
  },
  watch: {
    showDialog(newVal) {
      this.innerShowDialog = newVal
      if (newVal) {
        this.getTypeList()
      }
    },
    innerShowDialog(newVal) {
      if (!newVal) {
        this.$emit('closeDialog', 'typeDialog')
      }
    },
  },
  methods: {
    handleClose() {
      this.innerShowDialog = false
    },
    handleStatusChange(row) {
      const text = row.status == 'A' ? '启用' : '禁用'
      this.$modal
        .confirm('确认要' + text + '"' + row.name + '"吗？')
        .then(function () {
          return updateRaffleTypeStatus(row.id, row.status)
        })
        .then(() => {
          this.$modal.msgSuccess(text + '成功')
        })
        .catch(function () {
          row.status = row.status === 'N' ? 'A' : 'N'
        })
    },
    getTypeList() {
      const app = this
      app.loading = true
      const params = {
        page: app.page,
        pageSize: app.pageSize,
        name: app.form.name || '',
        code: app.form.code || '',
        status: app.form.status || '',
      }
      getRaffleTypeList(params)
        .then((response) => {
          if (response.data) {
            app.typeList = response.data.dataList.content || []
            app.total = response.data.dataList.totalElements || 0
            app.storeList = response.data.storeList || []
          }
          app.loading = false
        })
        .catch(() => {
          app.loading = false
        })
    },
    addType() {
      this.openTypeDialog = true
      this.raffleTypeInfo = null
    },
    handleUpdate(row) {
      const id = row.id
      this.raffleTypeInfo = null
      getRaffleTypeInfo(id).then((response) => {
        this.raffleTypeInfo = response.data.raffleTypeInfo
        this.openTypeDialog = true
      })
    },
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除' + row.name + '"吗？')
        .then(function () {
          return updateRaffleTypeStatus(row.id, 'D')
        })
        .then(() => {
          this.getTypeList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {})
    },
    closeDialog() {
      this.openTypeDialog = false
      this.getTypeList()
    },
  },
}
</script>
