<template>
  <div class="app-container calendar-list-container">
    <span style="color:red;font-size:16px;">小程序Banner图片尺寸为735px*225px,更新图片会把之前的图片覆盖掉,请确认后操作！</span>
     <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中......" border fit
                          highlight-current-row
                          style="width: 100%;margin-top:10px;">
        <el-table-column align="center" :label="$t('wxmini.seq')" width="70">
          <template slot-scope="scope">
            <span>{{scope.row.wb_seq}}</span>
          </template>
        </el-table-column>
        <!--edit line-->
        <el-table-column align="center" :label="$t('wxmini.url')" width="370">
          <template slot-scope="scope">
            <el-upload v-if="scope.row.wb_file != null"
              class="upload-demo"
              :action="url"
              ref="upload"
              :data="scope.row.dataUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :file-list="[scope.row.wb_file]"
              list-type="picture">
              <el-button  size="small" class = "uploadbutton" type="primary" style="margin-top:10px;">更新图片</el-button>
            </el-upload>
            <el-upload v-else
              class="upload-demo"
              :action="url"
              ref="upload"
              :data="scope.row.dataUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              list-type="picture">
              <el-button  size="small" class = "uploadbutton" type="primary" style="margin-top:10px;">点击上传</el-button>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </template>
        </el-table-column>
        <el-table-column  align="center" :label="$t('wxmini.heft_type')">
        <template slot-scope="scope">
          <el-select class="filter-item" v-model="scope.row.wb_href_type">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" >
            </el-option>
          </el-select>
        </template>
        </el-table-column>
        <el-table-column  align="center" :label="$t('wxmini.web_href')"  >
        <template slot-scope="scope">
          <el-input  type="textarea"   :rows="2"   placeholder="请输入内容"  v-model="scope.row.wb_href"></el-input>
        </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>
          <el-button size="small" type="primary"  icon="el-icon-delete" @click="deletemmTrains(scope.row.id)">{{$t('table.delete')}}</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 style="width: 100%">
        <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 { createArticle } from '@/api/article'
  import waves from '@/directive/waves' // 水波纹指令
  import { parseTime } from '@/utils'
  import { getChangBanners, cleanBanner, updateBanner } from '@/api/wxmini'
  import config from '@/utils/config'
  // arr to obj ,such as { CN : "China", US : "USA" }
  export default {
    name: 'useredit1222333',
    directives: {
      waves
    },
    data() {
      return {
        url: config.BASE_URL + '/uploadMiniImg',
        tableKey: 0,
        dialogVisible: false,
        dialogImageUrl: null,
        listLoading: false,
        statusOptions: [{ label: '外部连接', value: 1 }, { label: '小程序页面链接', value: 2 }, { label: '无', value: 0 }],
        dialogFormVisible: false,
        dialogStatus: '',
        dialogPvVisible: false,
        pvData: [],
        list: [],
        downloadLoading: false,
        updateBanner: {
          wb_href_type: null,
          wb_href: null,
          id: 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() {
      this.getList()
    },
    methods: {
      getList() {
        this.list = []
        getChangBanners().then(response => {
          for (var i = 0; i < response.data.length; i++) {
            var imgpath = {
              name: null,
              url: null
            }
            var dataUploadTemp = {
              id: null
            }
            var listFor = {
              id: null,
              wb_seq: null,
              wb_url: null,
              wb_href: null,
              wb_href_type: null,
              wb_file: [],
              dataUpload: {}
            }
            listFor.id = response.data[i].id
            listFor.wb_seq = response.data[i].wb_seq
            listFor.wb_url = response.data[i].wb_url
            listFor.wb_href = response.data[i].wb_href
            listFor.wb_href_type = response.data[i].wb_href_type
            var url = null
            var num = null
            var name = null
            if (response.data[i].wb_url !== null) {
              url = response.data[i].wb_url
              num = url.lastIndexOf('/') + 1
              name = url.substring(num)
              imgpath.name = name
              imgpath.url = response.data[i].wb_url
              listFor.wb_file = imgpath
            } else {
              listFor.wb_file = null
            }
            dataUploadTemp.id = response.data[i].id
            listFor.dataUpload = dataUploadTemp
            this.list.push(listFor)
          }
        })
      },
      handlePreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      handleRemove(file, fileList) {
        return null
      },
      saveBanner(row) {
        if (row.wb_href_type === 1 && row.wb_href.substring(0, 4) !== 'http') {
          this.$notify({
            title: '警告',
            message: '连接地址错误！',
            type: 'error',
            duration: 2000
          })
          return null
        }
        if (row.wb_href_type === 2 && row.wb_href.substring(0, 5) !== '/page') {
          this.$notify({
            title: '警告',
            message: '连接地址错误！',
            type: 'error',
            duration: 2000
          })
          return null
        }
        if (row.wb_url == null) {
          this.$notify({
            title: '警告',
            message: '请先确认图片已经上传',
            type: 'error',
            duration: 2000
          })
          return null
        } else {
          this.updateBanner.wb_href = row.wb_href
          this.updateBanner.wb_href_type = row.wb_href_type
          this.updateBanner.id = row.id
          updateBanner(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
              })
            }
          })
        }
      },
      deletemmTrains(id) {
        createArticle(this.temp).then(() => {
          this.$confirm('此操作将永久删除该, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var clearQuery = {
              id: null
            }
            clearQuery.id = id
            cleanBanner(clearQuery).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
                })
              }
            })
          }).catch(() => {})
        })
      },
      handleSuccess() {
        this.list = []
        this.$refs['upload'].clearFiles()
        this.getList()
      },
      handleref() {
        this.JlAdminUser.username = this.JlAdminUserCancel.username
        this.JlAdminUser.name = this.JlAdminUserCancel.name
        this.JlAdminUser.role = this.JlAdminUserCancel.role
        this.JlAdminUser.city = this.JlAdminUserCancel.city
        this.JlAdminUser.status = this.JlAdminUserCancel.status
        this.JlAdminUser.phone = this.JlAdminUserCancel.phone
      },
      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>