<template>
  <div>
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click='addDynamic'>新增项目动态</el-button>
        </div>
        <ul>
          <li>
            <el-input v-model="name" placeholder="标题"></el-input>
          </li>
          <li>
            <el-select v-model="buildingId" placeholder="楼盘">
              <el-option
                v-for="item in buildings.list || []"
                :key="item.buildingId"
                :label="item.buildingName"
                :value="item.buildingId">
              </el-option>
            </el-select>
          </li>
        </ul>
        <el-button
          size="mini"
          type="primary" @click="search">搜索</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <el-table
      :data="dynamics.list || []"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
        <template slot-scope="scope">
          <span>{{ GetIndex(scope.$index) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目动态主图">
        <template slot-scope="scope">
          <div class="header">
            <img :src="scope.row.imgUrl" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述">
      </el-table-column>
      <!-- <el-table-column
        label="链接地址"
        prop="url"
      >
      </el-table-column> -->
      <el-table-column
        label="发布状态"
        width="150"
        >
        <template slot-scope="scope">
          <span>{{scope.row.status == 1 ? '已发布' : '未发布'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布时间"
        width="150"
        prop="publishDate"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)" size="small">编辑</el-button>
          <el-button type="text" @click="handlePulic(scope.row)" size="small" v-if="scope.row.status === 0">发布</el-button>
          <el-button type="text" @click="handleUnPulic(scope.row)" size="small" v-if="scope.row.status === 1">取消发布</el-button>
          <el-button @click="handleDel(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      style="margin-top:10px;"
      layout="prev, pager, next"
      :current-page.sync="currentPage"
      :pageSize="pageSize"
      :total="dynamics.total || 0"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';

const {mapState: mapDynamicState, mapActions: mapDynamicActions} = createNamespacedHelpers('dynamic')
const {mapState: mapBuildingState, mapActions: mapBuildingActions} = createNamespacedHelpers('building')

export default {
  data() {
    return {
      pageSize: 20,
      currentPage: 1,
      name: '',
      buildingId: '',
    }
  },
  computed: {
    ...mapDynamicState({
      dynamics: x => x.dynamics
    }),
    ...mapBuildingState({
      buildings: x => x.buildings
    })
  },
  methods: {
    ...mapDynamicActions([
      'getDynamics',
      'setDetailNull',
      'deleteDynamics',
      'publicDynamic',
      'cancelDynamic'
    ]),
    ...mapBuildingActions([
      'getBuildings',
    ]),
    GetIndex (inx) {
      return (this.currentPage - 1) * this.pageSize + inx + 1
    },
    FormatDate (date) {
      if (date) {
        return dayjs(date).formate('yyyy-MM-DD HH:mm:ss')
      } else {
        return ''
      }
    },
    getList () {
      this.getDynamics({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        name: this.name,
        buildingId: this.buildingId
      })
    },
    getBuildingName (id) {
      return ((this.buildings.list || []).filter(x => x.buildingId === id)[0] || {}).buildingName || ''
    },
    search () {
      this.currentPage = 1
      this.getList()
    },
    handleEdit (row) {
      this.setDetailNull()
      this.$router.push({name: 'dynamicedit', query: {id: row.dynamicId}})
    },
    handlePulic (row) {
      this.$confirm('确认发布此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.publicDynamic({
          id: row.dynamicId
        }).then(() => {
          this.getList()
        })
      })
    },
    handleUnPulic (row) {
      this.$confirm('确认取消发布此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelDynamic({
          id: row.dynamicId}).then(() => {
          this.getList()
        })
      })
    },
    handleDel (row) {
      this.$confirm('确认删除此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.status === 1) {
          this.$message.error('当前活动处于发布状态，不允许删除！')
          return false
        }
        this.deleteDynamics({
          id: row.dynamicId
        }).then(() => {
          this.getList()
        })
      })
    },
    addDynamic () {
      this.setDetailNull()
      this.$router.push({name: 'dynamicedit'})
    }
  },
  created () {
    this.getBuildings({
      pageNum: 1,
      pageSize: 100,
    }).then(() => {
      this.getList()
    })
  }
}
</script>

<style lang="scss" scoped>
.header{
  width: 50px;
  height: 50px;
  img{
    width: 100%;
    height: 100%;
  }
}

.system-table-search{
  width: calc(100% - 40px);
  margin: 20px auto 0;
}

.system-table-search li{
  margin-right: 20px;
}

.system-table-search ul{
  font-size: 0;
  white-space: nowrap;
}

.system-table-search ul>li{
  display: inline-block;
}

.flex-h {
  display: flex;
  display: -webkit-flex;
}

.flex-item {
  flex: 1;
  -webkit-flex: 1;
  position: relative;
  overflow: hidden;
}
</style>
