<template>
  <div>
    <el-dialog :title="'管理'+name" width="550px" :visible.sync="visible">
      <el-form label-width="90px" size="small">
        <div class="main-item main-item-input main-item-clear">
          <div class="main-item-content">
            <el-form-item :label="name">
              <input v-model="keyword" @keyup="search" placeholder="分类搜索" class="el-input__inner" />
            </el-form-item>
          </div>
          <div class="ml10">
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="add">新增
            </el-button>
          </div>
        </div>
      </el-form>
      <div class="main-layer-type" style="min-height: 200px;">
        <ul class="edit-type">
          <li v-for="(item,index) of resultList">
            <div class="line content">
              {{item.label}}
              <div class="main-layer-handle">
                <div class="handle-box">
                  <div class="btn" @click="edit(item)"><i class="el-icon-edit" title="编辑"></i></div>
                  <div class="btn" @click="remove(item,index)"><i class="el-icon-delete" title="删除"></i></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false" size="small">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="(value===0?'添加':'修改')+name" width="260px" :visible.sync="editMode">
      <div>
        <el-input v-model="label"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editMode = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
    import Ajax from '../math/ajax';

  export default {
    name: "type-manger",
    props: {
      name: {
        type: String,
        default: '类别'
      },
      labelKey: {
        type: String,
        default: 'label'
      },
      valueKey: {
        type: String,
        default: 'value'
      },
      opt: {
        type: Object
      }
    },
    data() {
      return {
        visible: false,
        editMode: false,
        label: '',
        value: 0,
        dataList: [],
        resultList: [],
        keyword: ''
      }
    },
    methods: {
      /**
       * 组件入口
       */
      init() {
        this.visible = true;
        this.editMode = false;
        this.loadList();
      },
      /**
       *添加分类
       */
      add() {
        this.editMode = true;
        this.label = '';
        this.value = 0;
      },
      /**
       * 编辑分类
       */
      edit(item) {
        this.editMode = true;
        this.label = item.label;
        this.value = item.value;
      },
      submit() {
        if (!this.label) {
          this.$message.error('请输入分类名称');
          return;
        }
        const data = {
          [this.labelKey]: this.label,
          [this.valueKey]: this.value
        };
        Ajax.get(this.opt.setApi, data).then(() => {
          this.$message.success('添加成功');
          this.editMode = false;
          this.loadList();
        });
      },
      /**
       * 加载分类
       */
      loadList() {
        this.dataList = [];
        Ajax.get(this.opt.listApi, {}).then(data => {
          data.forEach(item => {
            this.dataList.push({
              label: item[this.labelKey],
              value: item[this.valueKey]
            });
            this.search();
          });
          this.trigger();
        });

      },
      /**
       * 删除分类
       * @param item
       * @param index
       */
      remove(item, index) {
        this.$confirm('删除后不可恢复', '确实要删除该分类吗', {
          type: 'warning'
        }).then(() => {
          Ajax.get(this.opt.delApi, {
            id: this.value,
            value: this.value
          }).then(() => {
            this.dataList.splice(index, 1);
            this.search();
            this.trigger();
          });
        }).catch(() => {
        });
      },
      /**
       * 数据更新后冒泡事件
       */
      trigger() {
        this.$emit('on-update', this.dataList);
      },
      search() {
        if (this.keyword) {
          this.resultList = this.dataList.filter((item) => {
            return item.label.indexOf(this.keyword) > -1;
          });
        } else {
          this.resultList = this.dataList;
        }
      }
    }
  }
</script>

<style scoped>

</style>
