<template>
  <div class="content">
    <div class="topSearch">
      <div class="left">
        <Input
          style="width:280px"
          search
          enter-button
          placeholder=""
          @on-search="onSearch"
        />
        <span class="lable">
          场景
        </span>
        <Select
          clearable
          v-model="seleted"
          style="width:80px"
          @on-change="selectChange"
        >
          <Option v-for="item in types" :value="item.id" :key="item.id">{{
            item.name
          }}</Option>
        </Select>
      </div>
      <div class="right">
        <Button class="success-btn" type="success" @click="seq">排序</Button>
        <Button @click="add" type="primary">新增</Button>
        <Button type="error" @click="del">删除</Button>
      </div>
    </div>
    <Stable :data="data" @edit="edit" @select="select" />
    <Forms :visible.sync="visible" :search="search" :row="row" />
    <draggableList :visible.sync="draggableVisible" :list="data" @ok="ok" />
  </div>
</template>

<script>
import Stable from "@/view/components/theme/table.vue";
import Forms from "@/view/components/theme/form.vue";
import draggableList from "@/view/common/draggable.vue";
import { getThemes, delThemes, editThemes } from "@/api/themes";
export default {
  components: {
    Stable,
    Forms,
    draggableList
  },
  data() {
    return {
      types: [{id:0,name:'留言'},{id:1,name:'评论'}],
      seleted: null,
      selectList: [],
      visible: false,
      draggableVisible: false,
      row: {},
      data: []
    };
  },
  methods: {
    edit(row) {
      this.visible = true;
      this.row = row;
    },
    add() {
      this.visible = true;
      this.row = {
        id: "add"
      };
    },
    selectChange(p) {
      console.log(p);
      this.search({
        scene: p
      });
    },
    select(val) {
      this.selectList = val;
    },
    seq() {
      this.draggableVisible = true;
    },
    ok(list) {
      editThemes(list).then(res => {
        if (res.code === 200 && res.data.length > 0) {
          this.$Message.success("操作成功");
          this.draggableVisible = false;
          this.search();
        }
      });
    },
    del() {
      delThemes(this.selectList).then(res => {
        if (res.code === 200) {
          this.$Message.success("删除成功");
          this.search();
        } else {
          this.$Message.error("删除失败");
        }
      });
    },
    onSearch(p) {
      this.search({
        keyword: p
      });
    },
    search(p) {
      getThemes(p).then(res => {
        this.data = res.data;
      });
    }
  },
  mounted() {
    this.seleted = this.$route.query.row && this.$route.query.row.id;
    let parmas = {
      scene: this.seleted
    };
    if (parmas) {
      this.search(parmas);
    } else {
      this.search({});
    }
  }
};
</script>

<style lang="less"></style>
