<template>
  <div>
    <el-table
      :data="dynamics.list || []"
      >
      <el-table-column
        type="index">
        <template slot-scope="scope">
          <span>{{ GetIndex(scope.$index) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题">
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="提示内容">
      </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>
        </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>
    <el-dialog title="编辑" :modal-append-to-body='false' :visible.sync="dialogFormVisible">
          <el-form :model="form"  >
              <el-form-item label="所属项目：" :label-width="formLabelWidth">
                <el-select v-model="form.region" placeholder="请选择所属项目">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="标题：" :label-width="formLabelWidth">
                <p>用户来访提醒</p>
              </el-form-item>
            <el-form-item label="提示内容：" :label-width="formLabelWidth">
                <el-input v-model="form.name" auto-complete="off"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">保 存</el-button>
            <el-button @click="dialogFormVisible = false">取 消</el-button>
          </div>
      </el-dialog>
  </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: "",
      dialogFormVisible:false,//编辑弹框
      form: {
          name: '',
          region: ''
        },
        formLabelWidth: '150px'
    };
  },
  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.dialogFormVisible = true;
    },
    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();
        });
      });
    }
  },
  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%;
  }
}

.el-dialog{
  z-index: 9999!important;
  .el-form-item__content{
    p{
      margin: 0;
    }
  }
}


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

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