<template>
  <div class="layout-no-cols right-list-toolbar right-list-panel-card" v-show="!showDetailPage">
    <el-row>
      <el-col :span="14">
        <el-toolbar>
        <el-button @click="addClickHandler" priv="VoteManage.Add">
          <i class="fa fa-plus"></i>新建
        </el-button>
        <!-- <el-button :disabled="selectedRows.length === 0" @click="publishClickHandler(selectedRows)"><i class="fa fa-share-square-o"></i>发布</el-button>
        <el-button :disabled="selectedRows.length === 0" @click="deleteClickHandler(selectedRows)"><i class="fa fa-remove"></i>删除</el-button> -->
      </el-toolbar>
    </el-col>
    <!--搜索栏-->
    <el-col :span="10"   class="dropdown-search-box-r search-bar-algin-toolbar search-bar-vote">
        <el-input v-model="search.title" placeholder="请输入名称或别名" @keyup.enter.native="searchClickHandler" size="medium">
            <el-select placeholder="" clearable slot="prepend" v-model="search.typeID" @change="searchClickHandler">
              <el-option v-for="type in Type" :key="type.key" :label="type.key" :value="type.value"></el-option>
            </el-select>
          </el-input>
          <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="查询"></i></span>
      </el-col>
    </el-row>
    <!--调查投票列表-->
    <el-list-view :data="vote" :data-read-url="getVoteDataGrid" ref="dataTable" :pageSize="10" @selection-change="onSelectionChange">
        <template slot-scope="row">
          <div class="panel-card">
            <el-row>
              <span class="over-flow-text" :title="row.title">
                <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(row.ID)">{{row.title}}</a>
              </span>
              <span class="gray over-flow-text" :title="row.code">
                别名：<a href="javascript:void(0)" @click.stop="gotoDetailPage(row.ID)">{{row.code}}</a>
              </span>
            </el-row>
            <el-row>
              <el-col :span="6"><span>是否限制IP：</span> <em>{{row.IPLimit === 'Y' ? '是' : '否'}}</em> </el-col>
              <el-col :span="6"><span>关联栏目：</span> <em>{{row.catalogName || '无'}}</em> </el-col>
              <el-col :span="6"><span>调查查看类型：</span> <em>{{row.viewTypeName || '无'}}</em> </el-col>
              <el-col :span="6"><span>是否需要验证码：</span> <em>{{row.verifyFlag === 'Y' ? '是' : '否'}}</em> </el-col>
            </el-row>
            <el-row>
              <el-col :span="6"><span>开始时间：</span> <em>{{row.startTime | fixDateTime}}</em> </el-col>
              <el-col :span="6"><span>终止时间：</span> <em>{{row.endTime | fixDateTime}}</em> </el-col>
              <el-col :span="12"><span>JSON路径：</span> <em>{{row.path || '无'}}</em> </el-col>
            </el-row>
            <el-row class="list-card-buttons">
              <el-col :span="10"><el-tag size="small">{{row.statusName}}</el-tag></el-col>
              <el-col :span="14" class="tar">
                <el-button @click.stop="publishClickHandler([row])" type="text" title="发布" :priv="'VoteManage.Publish.'+row.ID">
                  <i class="fa fa-share-square-o"></i>发布</el-button>
                <el-button @click.stop="previewClickHandler(row.ID)" type="text" title="预览"  priv="VoteManage">
                  <i class="fa fa-eye"></i>预览</el-button>
                <el-button @click.stop="gotoDetailPage(row.ID)" type="text" title="编辑" :priv="'VoteManage.Edit.'+row.ID">
                  <i class="fa fa-edit"></i>编辑</el-button>
                <el-button @click.stop="deleteClickHandler([row])" type="text" title="删除" :priv="'VoteManage.Delete.'+row.ID">
                  <i class="fa fa-times"></i>删除</el-button>
              </el-col>
            </el-row>
          </div>
        </template>
    </el-list-view>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import voteItem from './voteItem.vue'

export default {
  filters: {
    fixDateTime: function(val) {
      if (val) {
        return util.formatDate(val, 'yyyy-MM-dd HH:mm')
      } else {
        return '无'
      }
    }
  },
  data() {
    return {
      Type: [
        { key: '所有', value: '' },
        { key: '我创建的', value: 'add' },
        { key: '初稿', value: 'drafter' },
        { key: '编辑', value: 'edit' },
        { key: '重新编辑', value: 'editagain' },
        { key: '审核中', value: 'auditing' },
        { key: '审核通过', value: 'passed' },
        { key: '审核未通过', value: 'notpass' },
        { key: '已发布', value: 'published' },
        { key: '已终止', value: 'stop' }
      ], // 调查状态数据
      search: {
        sortName: '',
        typeID: '',
        title: ''
      }, // 条件查询
      vote: [], // "投票调查"集合
      selectedRows: [], // 选中行
      voteItemID: '',
      showDetailPage: false, // 是否显示详细页
      voteItemChange: false // 调查投票数据是否改变
    }
  },
  watch: {
    showDetailPage(val) {
      if (val) {
        this.voteItemChange = false
      }
      if (!val && this.voteItemChange) {
        this.$refs.dataTable.getData()
      }
    }
  },
  methods: {
    // 点击发布投票调查
    async publishClickHandler(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录！', '提示', {
          type: 'info'
        })
        return
      }
      try {
        await this.$confirm('确定要发布调查吗？', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
        let rowIds = rows.map(row => row.ID)
        let strIDs = rowIds.join(',')
        let publishResult = await axios.put(`/ui/votes/${strIDs}/publish`)
        util.showResponseMessage(publishResult.data)
        if (publishResult.data.status === 1) {
          this.$refs.dataTable.getData(1)
        }
      } catch (e) {

      }
    },

    // 点击添加投票调查
    addClickHandler() {
      this.$router.push(`${this.$route.path}/new`)
    },

    // 预览
    previewClickHandler(id) {
      let voteID = id
      if (!voteID || voteID === null) {
        this.$alert('数据异常,请重新选择', '提示', {
          type: 'warning'
        })
        return
      }
      window.open(`preview.html?ID=${voteID}&type=Vote`)
    },

    // 点击删除投票调查
    async deleteClickHandler(rows) {
      if (rows.length === 0) {
        this.$alert('请先选择一条记录！', '提示', {
          type: 'info'
        })
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let rowIds = []
        rows.forEach(function(row) {
          rowIds.push(row.ID)
        })
        if (!rowIds.length) {
          return
        }
        let strIDs = rowIds.join(',')
        let deleteVote = await axios.delete(`/ui/votes/${strIDs}`)
        util.showResponseMessage(deleteVote.data)
        if (deleteVote.data.status === 1) {
          this.$refs.dataTable.getData()
        }
      } catch (e) {

      }
    },

    // 初始化数据
    getVoteDataGrid() {
      return [
        '/ui/votes',
        {
          params: {
            typeID: this.search.typeID,
            title: encodeURI(encodeURI(this.search.title)),
            sortType: this.search.sortName
          }
        }
      ]
    },

    // 条件查询
    searchClickHandler() {
      this.$refs.dataTable.getData(1)
    },
    // 点击名称进入详情页
    gotoDetailPage(id) {
      this.$router.push(`${this.$route.path}/${id}`)
    },
    // 选中行
    onSelectionChange(selection) {
      this.selectedRows = selection
      // 取消选中
      if (this.selectedRows.length === 0) {
        this.voteItemID = -1
      } else {
        // 选中项
        if (this.selectedRows.length === 1) {
          this.voteItemID = this.selectedRows[0].ID
        }
      }
    },

    // 选中行状态发生变化
    voteItemCallback() {
      this.voteItemChange = true
    }

  },
  components: {
    'vote-item': voteItem
  }
}
</script>

<style scoped>
.over-flow-text{
  max-width: 50%;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  float: left;
}
.pageBar {
  text-align: right;
  padding: 5px 2px 0 0;
  background-color: #f5f5f5;
}

.search-box {
  padding: 6px;
}

.selfIcon {
  font-size: 20px;
  padding: 0 5px;
  cursor: pointer;
}
.search-bar {
  padding: 10px 0 10px 0;
}
</style>
