<template>
  <div class="app-container calendar-list-container">
     <el-table :key='tableKey' stripe :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
                          highlight-current-row
                          style="width: 100%;margin-top:10px;">
         <el-table-column type="index" align="center" :label="$t('table.seq')">
            </el-table-column>
         <el-table-column  align="center" :label="$t('college.presentname')"  >
        <template slot-scope="scope">
          <el-input placeholder="请输入内容"  v-model="scope.row.name"></el-input>
        </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('college.level')" >
          <template slot-scope="scope">
          <el-select class="filter-item" v-model="scope.row.level" >
            <el-option v-for="item in LevelOptions" :key="item.id" :label="item.desc" :value="item.id">
            </el-option>
          </el-select>
        </template>
        </el-table-column>
        <el-table-column  align="center" :label="$t('college.customtype')"  >
        <template slot-scope="scope">
          <el-select class="filter-item" v-model="scope.row.type" >
            <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('college.desc')" >
        <template slot-scope="scope">
          <el-input placeholder="请输入内容"  v-model="scope.row.desc"></el-input>
        </template>
        </el-table-column>

         <el-table-column align="center" :label="$t('college.coupon')" >
           <template slot-scope="scope">
          <el-select class="filter-item" v-model="scope.row.coupon_id" >
            <el-option v-for="item in couponOptions" :key="item.id" :label="item.cb_name" :value="item.id">
            </el-option>
          </el-select>
           </template>
        </el-table-column>         
        <el-table-column  align="center" :label="$t('college.scholarships')"  >
        <template slot-scope="scope">
          <el-input-number placeholder="请输入内容" controls-position="right" v-model="scope.row.scholarships"></el-input-number>
        </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('table.actions')" >
        <template slot-scope="scope">
          <el-button type="primary" @click='saveBanner(scope.row)' size="small" icon="el-icon-edit">保存</el-button>
        </template>
      </el-table-column>
      </el-table>
    <el-dialog title="Reading statistics" :visible.sync="dialogPvVisible">
      <el-table :data="pvData" border fit highlight-current-row >
        <el-table-column prop="key" label="Channel"></el-table-column>
        <el-table-column prop="pv" label="Pv"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="dialogPvVisible = false">{{$t('table.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'
  import { getCollegePresentScholarships, getUserLevels, updateCollegePresentScholarship } from '@/api/college'
  import { queryCollegeCoupon } from '@/api/couponapi'
  // arr to obj ,such as { CN : "China", US : "USA" }
  export default {
    name: 'useredit1222333',
    directives: {
      waves
    },
    data() {
      return {
        tableKey: 0,
        dialogVisible: false,
        dialogImageUrl: null,
        listLoading: false,
        typeOptions: [{ label: '优惠券', value: 1 }, { label: '到店领取', value: 2 }, { label: '邮寄', value: 3 }, { label: '电子卡', value: 4 }],
        LevelOptions: [],
        couponOptions: [],
        dialogFormVisible: false,
        dialogStatus: '',
        dialogPvVisible: false,
        pvData: [],
        list: [],
        downloadLoading: false,
        updateBanner: {
          value: null,
          name: null,
          id: null,
          type: null,
          coupon_cid: null,
          present_name: null
        },
        datacomment: {
          id: 1
        },
        view: {
          name: undefined,
          path: undefined,
          title: undefined
        }
      }
    },
    destroyed() {
      this.view.name = 'useredit'
      this.view.path = '/user/user_edit'
      this.view.title = 'useredit'
      this.$store.dispatch('delVisitedViews', this.view)
    },
    created() {
      queryCollegeCoupon().then(response => {
        this.couponOptions = response.data
      })
      getUserLevels().then(response => {
        this.LevelOptions = response.data
      })
      this.getList()
    },
    methods: {
      getList() {
        this.list = []
        getCollegePresentScholarships().then(response => {
          this.list = response.data
        })
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleRemove(file, fileList) {
        return null
      },
      saveBanner(row) {
        this.updateBanner.id = row.id
        this.updateBanner.name = row.name
        this.updateBanner.level = row.level
        this.updateBanner.type = row.type
        this.updateBanner.desc = row.desc
        this.updateBanner.coupon_id = row.coupon_id
        this.updateBanner.scholarships = row.scholarships
        updateCollegePresentScholarship(this.updateBanner).then(response => {
          if (response.data === 1) {
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          } else {
            this.$notify({
              title: '错误',
              message: '更新失败',
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      handleSuccess() {
        this.list = []
        this.$refs['upload'].clearFiles()
        this.getList()
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        }))
      }
    }
  }
</script>
<style>
.el-form--label-left .el-form-item__label{
  text-align:right
}
.el-rate{
  line-height: 0;
  margin-top:8px;
}
.el-checkbox.el-checkbox {
    margin-left: 30px;
}
.imgControl{
  display: flex;
  flex-direction: row;
  align-items:center;
  
}
.upload-demo {
  display: flex;
  flex-direction:row-reverse;
  margin-left: 20px;
}
.uploadbutton {
  margin-left: 10px;
}
.el-upload-list__item-thumbnail .el-upload-list--picture  {
  border: 0px;
}
</style>