<template>
  <div class="mlt">
    <div>
      <el-form :inline="true" size="mini">
        <el-row>
          <el-form-item>
            <el-input v-model="tag" style="width: 250px" placeholder="请输入套餐标题" class="search_tag" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="btn_search()"><i class="el-icon-search"/> 查询</el-button>
            <el-button @click="btn_clear()"><i class="el-icon-remove-outline"/> 重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="addMemberPackage">添加</el-button>
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        ref="multipleTable"
        :data="tableData"
        :highlight-current-row="true"
        border>
        <el-table-column
          prop="id"
          label="编号"/>
        <el-table-column
          prop="title"
          label="套餐标题"/>
        <el-table-column
          prop="content"
          label="套餐描述"/>
        <el-table-column
          :formatter="formatType"
          prop="packageType"
          label="套餐类型"/>
        <el-table-column
          prop="oneYearPrice"
          label="一年价格"/>
        <el-table-column
          prop="twoYearPrice"
          label="两年价格"/>
        <el-table-column
          prop="threeYearPrice"
          label="三年价格"/>
        <el-table-column
          prop="currentPrice"
          label="现价/人年"/>
        <el-table-column
          prop="originalPrice"
          label="原价/人年"/>
        <el-table-column
          prop="createTime"
          label="创建时间"/>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editMemberPackage(scope.row, 1)">编辑</el-button>
            <el-button type="text" @click="deleteMemberPackageConfirm(scope.row)">删除</el-button>
            <el-button type="text" @click="editMemberPackage(scope.row, 2)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mydiv">
        <el-pagination
          :current-page.sync="pageNo"
          :page-sizes="[10, 50, 100, 300,1000]"
          :page-size="pageSize"
          :total="totalDataNumber"
          layout="sizes,total, prev, pager, next"
          class="table-pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>

    </div>
    <!--新建弹出框-->
    <el-dialog :visible.sync="dialogFormVisiable" title="添加套餐信息">
      <el-form :model="addForm" :rules="rules" :label-width="formLabelWidth" >
        <el-form-item label="套餐标题" prop="title">
          <el-input v-model="addForm.title" placeholder="请输入套餐标题" size="mini"/>
        </el-form-item>
        <el-form-item label="套餐内容" prop="content">
          <tinymce ref="myTinymce" v-model="addForm.content" :height="300" />
        </el-form-item>
        <el-form-item label="套餐类型" prop="caseType">
          <el-select v-model="addForm.packageType" multiple placeholder="请选择套餐类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="一年价格" >
          <el-input v-model="addForm.oneYearPrice" placeholder="请输入一年价格" size="mini"/>
        </el-form-item>
        <el-form-item label="两年价格" >
          <el-input v-model="addForm.twoYearPrice" placeholder="请输入两年价格" size="mini"/>
        </el-form-item>
        <el-form-item label="三年价格">
          <el-input v-model="addForm.threeYearPrice" placeholder="请输入三年价格" size="mini"/>
        </el-form-item>
        <el-form-item label="现价/人年">
          <el-input v-model="addForm.currentPrice" placeholder="请输入现价" size="mini"/>
        </el-form-item>
        <el-form-item label="原价/人年">
          <el-input v-model="addForm.originalPrice" placeholder="请输入原价" size="mini"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addMemberPackageCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="addMemberPackageSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑详情弹出框 :before-close="beforeClose" -->
    <el-dialog :visible.sync="dialogModifyVisiable" >
      <span class="tabtitle">完善套餐详情</span>
      <el-form :model="modifyForm" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="套餐标题" prop="title">
          <el-input :disabled="showDetail" v-model="modifyForm.title" placeholder="请输入套餐标题" size="mini"/>
        </el-form-item>
        <el-form-item label="套餐内容" prop="content">
          <tinymce ref="myTinymce" v-model="modifyForm.content" :height="300" />
        </el-form-item>
        <el-form-item label="套餐类型" prop="caseType">
          <el-select v-model="modifyForm.packageType" multiple placeholder="请选择套餐类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="一年价格" >
          <el-input v-model="modifyForm.oneYearPrice" placeholder="请输入一年价格" size="mini"/>
        </el-form-item>
        <el-form-item label="两年价格" >
          <el-input v-model="modifyForm.twoYearPrice" placeholder="请输入两年价格" size="mini"/>
        </el-form-item>
        <el-form-item label="三年价格">
          <el-input v-model="modifyForm.threeYearPrice" placeholder="请输入三年价格" size="mini"/>
        </el-form-item>
        <el-form-item label="现价/人年">
          <el-input v-model="modifyForm.currentPrice" placeholder="请输入现价" size="mini"/>
        </el-form-item>
        <el-form-item label="原价/人年">
          <el-input v-model="modifyForm.originalPrice" placeholder="请输入原价" size="mini"/>
        </el-form-item>
      </el-form>
      <div class="tabbutton">
        <el-button :disabled="showDetail" size="mini" @click="updateMemberPackageCancel">取 消</el-button>
        <el-button :disabled="showDetail" size="mini" type="primary" @click="updateMemberPackage">确 定</el-button>
      </div>

    </el-dialog>

    <!-- 点击删除套餐按钮，删除确认框-->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="提示"
      width="30%">
      <span>确定删除选择的套餐? </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickDelete">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'MemberPackage',
  components: { Tinymce },
  data() {
    return {
      rules: {
        title: [{ required: true, message: '请输入套餐标题', trigger: 'blur' }],
        content: [{ required: true, message: '请输入套餐内容', trigger: 'blur' }],
        packageType: [{ required: true, message: '请选择套餐类型', trigger: 'blur' }]
      },
      options: [{
        value: '1',
        label: '固定套餐'
      }, {
        value: '2',
        label: '自定义套餐'
      }],
      tag: '',
      allData: [], // 所有前端分页数据
      tableData: [], // 表格数据 仅展示当前页的数据
      pageNo: 1, // 当前页数
      totalDataNumber: 0, // 总记录数
      pageSize: 10,
      formLabelWidth: '150px', // 弹出框form宽
      dialogFormVisiable: false,
      dialogModifyVisiable: false,
      deleteDialogVisible: false,
      caseTypes: [],
      types: [],
      addForm: {
        title: '',
        content: '',
        packageType: '',
        oneYearPrice: '',
        twoYearPrice: '',
        threeYearPrice: '',
        currentPrice: '',
        originalPrice: ''
      },
      modifyForm: {
        id: '',
        title: '',
        content: '',
        packageType: '',
        oneYearPrice: '',
        twoYearPrice: '',
        threeYearPrice: '',
        currentPrice: '',
        originalPrice: ''
      },
      showDetail: false,
      dataModel: [],
      domains: [
        { type: '',
          valueOptions: [],
          relationId: '',
          info: ''
        }]
    }
  },
  created() {
    this.btn_search()
  },
  methods: {
    formatType(ob) {
      if (ob.packageType === undefined) {
        return ''
      } else if (ob.packageType === 1) {
        return '固定套餐'
      } else if (ob.packageType === 2) {
        return '自定义套餐'
      } else {
        return '未知'
      }
    },
    btn_search() {
      const vm = this
      axios.get(process.env.BASE_API + '/memberPackage/listpage', {
        params: {
          tag: this.tag,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
          vm.totalDataNumber = 0
          vm.allData = []
          vm.tableData = []
        } else {
          vm.totalDataNumber = parseInt(obj.data.totalElements)
          if (vm.totalDataNumber > 0) {
            vm.allData = obj.data.content
            vm.tableData = obj.data.content // obj.data.slice(0, vm.pageSize)
          } else {
            vm.allData = []
            vm.tableData = []
          }
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    btn_clear() {
      this.tag = ''
      this.pageNo = 1
      this.btn_search()
    },
    handleCurrentChange() {
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      this.btn_search()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.btn_search()
      // this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
    },
    addMemberPackage() {
      this.dialogFormVisiable = true
    },
    addMemberPackageCancel() {
      this.dialogFormVisiable = false
      this.clearForm()
    },
    clearForm() {
      this.addForm.title = ''
      this.addForm.content = ''
      this.addForm.packageType = ''
      this.addForm.oneYearPrice = ''
      this.addForm.twoYearPrice = ''
      this.addForm.threeYearPrice = ''
      this.addForm.currentPrice = ''
      this.addForm.originalPrice = ''
      this.modifyForm.id = ''
      this.modifyForm.title = ''
      this.modifyForm.content = ''
      this.modifyForm.packageType = ''
      this.modifyForm.oneYearPrice = ''
      this.modifyForm.twoYearPrice = ''
      this.modifyForm.threeYearPrice = ''
      this.modifyForm.currentPrice = ''
      this.modifyForm.originalPrice = ''
      this.showDetail = false
    },
    addMemberPackageSubmit() {
      const vm = this
      var params = new URLSearchParams()
      if (vm.addForm.title === '') {
        this.$message.error('请输入套餐标题')
        return
      }
      if (vm.addForm.packageType.length === 0) {
        this.$message.error('请选择套餐类型')
        return
      }
      params.append('title', vm.addForm.title)
      params.append('content', vm.addForm.content)
      params.append('packageType', vm.addForm.packageType)
      params.append('oneYearPrice', vm.addForm.oneYearPrice)
      params.append('threeYearPrice', vm.addForm.threeYearPrice)
      params.append('twoYearPrice', vm.addForm.twoYearPrice)
      params.append('currentPrice', vm.addForm.currentPrice)
      params.append('originalPrice', vm.addForm.originalPrice)
      axios.post(process.env.BASE_API + '/memberPackage/create', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.clearForm()
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.dialogFormVisiable = false
    },
    editMemberPackage(row, value) {
      this.dialogModifyVisiable = true
      this.modifyForm = row
      if (this.modifyForm.priceDescription === null) {
        this.modifyForm.priceDescription = ''
      }
      if (value === 2) {
        this.showDetail = true
      }
    },
    updateMemberPackageCancel() {
      this.dialogModifyVisiable = false
      this.clearForm()
      this.btn_search()
      this.showDetail = false
    },
    updateMemberPackage() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.modifyForm.id)
      params.append('title', vm.modifyForm.title)
      params.append('content', vm.modifyForm.content)
      params.append('packageType', vm.modifyForm.packageType)
      params.append('oneYearPrice', vm.modifyForm.oneYearPrice)
      params.append('threeYearPrice', vm.modifyForm.threeYearPrice)
      params.append('twoYearPrice', vm.modifyForm.twoYearPrice)
      params.append('currentPrice', vm.modifyForm.currentPrice)
      params.append('originalPrice', vm.modifyForm.originalPrice)
      axios.post(process.env.BASE_API + '/memberPackage/update', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
        vm.clearForm()
      }).catch(function(error) {
        alert(error)
      })
      this.dialogModifyVisiable = false
      this.showDetail = false
    },
    deleteMemberPackageConfirm(row) {
      this.deleteId = row.id
      this.deleteDialogVisible = true
    },
    handleClickDelete() {
      const vm = this
      var params = new URLSearchParams()
      params.append('id', vm.deleteId)
      axios.post(process.env.BASE_API + '/memberPackage/delete', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message(obj.message)
          vm.pageNo = 1
          vm.btn_search()
        }
      }).catch(function(error) {
        alert(error)
      })
      this.deleteDialogVisible = false
    },
    closeDialog() {
      this.logoList = []
      this.photoList = []
      this.showDetail = false
      this.activeName = 'first'
    },
    beforeClose() {
      if (this.showDetail === true) {
        this.updateMemberPackageCancel()
      } else {
        this.$confirm('确认保存并关闭窗口？')
          .then(_ => {
            this.updateMemberPackage()
          })
          .catch(_ => {
            this.updateMemberPackageCancel()
          })
      }
    }
  }
}
</script>

<style scoped>
  .mlt {
    margin-left: 20px;
    margin-top: 20px;
    margin-right: 20px;
  }
  .tabtitle {
    font-size: 24px;
    font-weight: bold;
  }
  .tabbutton {
    float: right;
  }
</style>
