<template>
  <div>
    <div class="system-table-search">
      <div class="flex-h">
        <el-form ref="form"  :inline="true" :model="from" label-width="80px">
          <el-form-item label="">
            <el-input v-model="from.code" placeholder="楼盘编号"  style="width: 120px;"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="from.name" placeholder="楼盘名称"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
                    v-model="from.startDate"
                    type="datetime"
                    placeholder="开盘时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="from.buildingStatus" placeholder="楼盘状态"  style="width: 120px;">
              <el-option
                      v-for="item in statusOptions"
                      :key="item.buildingStatus"
                      :label="item.label"
                      :value="item.buildingStatus">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="from.marketStatus" placeholder="销售状态">
              <el-option
                      v-for="item in marketStatusOptions"
                      :key="item.marketStatus"
                      :label="item.label"
                      :value="item.marketStatus">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="from.cityId" filterable  placeholder="城市">
              <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="from.isMain" placeholder="首页推荐">
              <el-option
                      v-for="item in mainOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="mini" type="success" @click='addBuilding'>新增楼盘</el-button>
      </div>
      <div class="moreFilter"></div>
    </div>
    <el-table
      :data="buildings.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
        prop="code"
        label="楼盘编号">
      </el-table-column>
      <el-table-column
        prop="buildingName"
        label="楼盘名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="均价"
        width="180">
        <template slot-scope="scope">
          <span style="color:red">{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="openingDate"
        label="开盘时间">
        <template slot-scope="scope">
          <span>{{(scope.row.openingDate || '').split(' ')[0]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="项目地址">
      </el-table-column>
      <el-table-column
        prop="propertyType"
        label="物业类型">
        <template slot-scope="scope">
          <span>{{getPropertyType(scope.row.propertyType)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="tel"
        label="销售电话">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="录入时间">
        <template slot-scope="scope">
          <span>{{(scope.row.createDate || '').split(' ')[0]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发布状态">
        <template slot-scope="scope">
          <span>{{scope.row.status == 1 ? '已发布' : '未发布'}}</span>
        </template>
      </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="from.pageNum"
      :pageSize="from.pageSize"
      :total="buildings.total || 0"
      @current-change="getList"
    >
    </el-pagination>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const {mapState: mapBuildingState, mapActions: mapBuildingActions} = createNamespacedHelpers('building')
import { mapState } from 'vuex'

export default {
  data() {
    return {
      from: {
        pageSize: 20,
        pageNum: 1,
        code: '',
        name: '',
        startDate: '',
        buildingStatus: '',
        marketStatus: '',
        cityId: '',
        isMain: ''
      },
      cityList: [], // 城市列表
      mainOption: [ // 是否首页推荐
        {
          label: '首页推荐',
          value: 1
        },
        {
          label: '未首页推荐',
          value: 0
        }
      ],
      statusOptions: [
        {
          label: '已发布',
          buildingStatus: 1
        },
        {
          label: '未发布',
          buildingStatus: 0
        }
      ],
      marketStatusOptions: [
        {
          label: '已销售',
          marketStatus: 1
        },
        {
          label: '未销售',
          marketStatus: 0
        }
      ]
    }
  },
  computed: {
    ...mapBuildingState({
      buildings: x => x.buildings
    }),
    ...mapState({
      dicts: x =>  x.dicts,
    }),
  },
  methods: {
    ...mapBuildingActions([
      'setDetailNull',
      'getBuildings',
      'updateBuildingStatus',
      'delBuilding'
    ]),
    getPropertyType (types) {
      let typeNames = ''
      let typeArr = types.split(',')
      const _that = this
      typeArr.map(x => {
        const name = ((_that.dicts || []).filter(d => d.type === 'propertyType' && d.id == x)[0] || {}).name
        if (name) {
          typeNames = typeNames + (typeNames===''?'':',') + name
        }
      })
      return typeNames
    },
    GetIndex (inx) {
      return (this.currentPage - 1) * this.pageSize + inx + 1
    },
    // FormatDate (date) {
    //   if (date) {
    //     return date.split(' ')[0] === '0001-01-01' ? '' : date.split(' ')[0]
    //   } else {
    //     return ''
    //   }
    // },
    getList () {
      this.getBuildings(this.from)
    },
    search () {
      this.currentPage = 1
      this.getList()
    },
    addBuilding () {
      this.setDetailNull()
      this.$router.push({name: 'buildingedit'})
    },
    handleEdit (row) {
      this.setDetailNull()
      this.$router.push({name: 'buildingedit', query: {id: row.buildingId}})
    },
    handlePulic (row) {
      this.$confirm('确认发布此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateBuildingStatus({
          id: row.buildingId,
          status: 1
        }).then(() => {
          this.getList()
        })
      })
    },
    handleUnPulic (row) {
      this.$confirm('确认取消发布此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateBuildingStatus({
          id: row.buildingId,
          status: 0
        }).then(() => {
          this.getList()
        })
      })
    },
    handleDel (row) {
      this.$confirm('确认删除此数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.status === 1) {
          this.$message.error('当前楼盘处于发布状态，不允许删除！')
          return false
        }
        this.delBuilding({
          id: row.buildingId
        }).then(() => {
          this.getList()
        })
      })
    },
    getCityName() { // 查询城市
      this.$store.dispatch('building/getCityName').then((res) => {
        this.cityList = res
      }).catch((err) => {
        this.$notify.error(err.msg || err.message)
      })
    }
  },
  created () {
    this.getList()
    this.getCityName()
  }
}
</script>

<style lang="scss" scoped>
.list{
    .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>
