<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-table :data="tableData" stripe style="width: 100%;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="LEVEL_NAME" label="级别名称">
          <template slot-scope="scope">
            <el-tag type="warning" size="small" class="no-border">{{scope.row.LEVEL_NAME}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="PERF" label="所需业绩(BV)">
          <template slot-scope="scope">
            <el-tag type="danger" size="small" class="no-border">{{scope.row.PERF}}</el-tag>
          </template>
        </el-table-column>
        <!--<el-table-column fixed="right" label="是否可以调整礼包">-->
          <!--<template slot-scope="scope">-->
            <!--<el-tag :type="(scope.row.IS_ADJUST_GIFT==1?'success':'danger')">{{(scope.row.IS_ADJUST_GIFT==1?'是':'否')}}</el-tag>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column fixed="right" label="是否可以报单">-->
          <!--<template slot-scope="scope">-->
            <!--<el-tag :type="(scope.row.IS_DEC==1?'success':'danger')">{{(scope.row.IS_DEC==1?'是':'否')}}</el-tag>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column label="创建人">
          <template slot-scope="scope">
            {{scope.row.CREATE_ADMIN}}
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.CREATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column label="更新人">
          <template slot-scope="scope">
            {{scope.row.UPDATE_ADMIN}}
          </template>
        </el-table-column>
        <el-table-column label="更新时间">
          <template slot-scope="scope">
            {{tool.formatDate(scope.row.UPDATED_AT)}}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" plain size="small" @click="editHandle(scope.row)">Edit</el-button>
            <el-button type="danger" plain size="small" @click="delHandle(scope)" v-if="false">Delete</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="white-box-footer">
        <el-dropdown size="small" trigger="click" @command="muliDelHandle" v-if="false">
          <el-button type="primary" size="small">
            Selected data<!--所选数据--><i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="delete">Delete</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" size="small" @click="onAdd" v-if="false">添加级别</el-button>
      </div>

      <el-form ref="form" :model="form" label-width="150px">
      <el-form-item :label="form.monthLimitTITLE">
        <el-input  v-model="form.monthLimitVALUE" placeholder="请输入内容">
        </el-input>
      <div class="white-box-footer" style="line-height: 1.2;color: #999;">
        <p>注：</p>
        <p>(1) 请输入正整数数字；</p>
        <p>(2) 输入0代表无观察期，即全站升级单为全额升级；</p>
      </div>
      <div class="white-box-footer">
        <el-button type="primary" @click="onSubmit" :loading="submitButtonStat">更新观察期</el-button>
      </div></el-form-item>
      </el-form>
      <el-switch
        v-model="value1"
        :active-text="value1Text"
        @change="switchUpgrade"
      >
      </el-switch>
    </div>

  </div>
</template>

<script>
import Vue from 'vue'
import network from './../../utils/network'
import tool from './../../utils/tool'

export default {
  name: 'dec-level',
  created () {

  },
  mounted () {
    network.getData('config/dec-level').then(response => {
      this.tableData = response.list
      this.loading = false
    })

    network.getData('config/month-limit').then(response => {
      this.form.monthLimitTITLE = response.observe.TITLE
      this.form.monthLimitVALUE = response.observe.VALUE
      // 是否开启会员升级功能
      this.value1 = response.isOpenUpgrade.VALUE == 0 ? false : true
      this.value1Text = response.isOpenUpgrade.TITLE
    })
  },
  data () {
    return {
      value1:true,
      value1Text: '',
      submitButtonStat: false,
      form:{
        monthLimitTITLE:'',
        monthLimitVALUE:''
      },
      tableData: null,
      loading: true,
      tool: tool,
      multipleSelection: []
    }
  },
  methods: {
    // 切换开关
    switchUpgrade() {
      network.postData('config/open-upgrade', {
          isOpen: this.value1 === true ? 1 : 0, // 0关闭 1开启
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          this.submitButtonStat = false

        }).catch(response => {
          this.submitButtonStat = false

      })

      console.log('sss',this.value1)
    },
    onSubmit() {
      this.submitButtonStat = true
      network.postData('config/month-limit', {
        month: this.form.monthLimitVALUE,
      }).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        this.submitButtonStat = false

      }).catch(response => {
        this.submitButtonStat = false

      })
    },
    editHandle (row) {
      this.$router.push({path: `/config/dec-level-edit/${row.ID}`})
    },
    onAdd () {
      this.$router.push({path: `/config/dec-level-add`})
    },
    delHandle (scope) {
      network.getData(`config/dec-level-delete/${scope.row.ID}`).then(response => {
        this.$message({
          message: response,
          type: 'success'
        })
        Vue.delete(this.tableData, scope.$index)
      })
    },
    muliDelHandle (command) {
      if (command === 'delete') {
        let selectedIds = []
        for (let val of this.multipleSelection) {
          selectedIds.push(val.ID)
        }
        network.postData(`config/dec-level-delete`, {
          selected: selectedIds
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
          let tempNewTableData = []
          for (let i in this.tableData) {
            if (!tool.isInArray(selectedIds, this.tableData[i].ID)) {
              tempNewTableData.push(this.tableData[i])
            }
          }
          this.tableData = tempNewTableData
        })

      }

    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style scoped>
/deep/ .el-form-item__label {
  text-align: left !important;
}
</style>
