<template>
  <ai-list class="villagecode">
    <template slot="title">
      <ai-title title="驻村辅警" isShowBottomBorder></ai-title>
    </template>
    <template #left>
      <div class="villagecode-left">
        <div class="villagecode-left__title">
          <h2>地区</h2>
        </div>
        <div class="addressBook-left__list">
          <div class="addressBook-left__list--title">
            <el-input
              class="addressBook-left__list--search"
              size="mini"
              clearable
              placeholder="请输入地区名称"
              v-model="unitName"
              suffix-icon="iconfont iconSearch">
            </el-input>
          </div>
          <el-tree
            :filter-node-method="filterNode"
            ref="tree"
            :props="defaultProps"
            node-key="id"
            :data="areaTree"
            highlight-current
            :current-node-key="search.areaId"
            :default-expanded-keys="defaultExpanded"
            :default-checked-keys="defaultChecked"
            @current-change="onTreeChange">
          </el-tree>
        </div>
      </div>
    </template>
    <template slot="content">
      <ai-search-bar class="search-bar">
        <template #left>
          <el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
        </template>
        <template slot="right">
          <el-input
            v-model="search.name"
            class="search-input"
            size="small"
            @keyup.enter.native="search.current = 1, getList()"
            placeholder="请输入姓名/电话"
            clearable
            @change="getList"
            @clear="search.current = 1, search.name = '', getList()"
            suffix-icon="iconfont iconSearch">
          </el-input>
        </template>
      </ai-search-bar>
      <ai-table
        :tableData="tableData"
        :col-configs="colConfigs"
        :total="total"
        style="margin-top: 6px;"
        :current.sync="search.current"
        :size.sync="search.size"
        @getList="getList">
        <el-table-column slot="isPublic" label="是否公开">
          <template slot-scope="{ row }">
            <el-switch
              v-model="row.isPublic"
              active-value="1"
              @change="e => onChange(row.id, e)"
              inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column slot="options" width="180px" fixed="right" label="操作" align="center">
          <template slot-scope="{ row }">
            <div class="table-options">
              <el-button type="text" @click="toAdd(row.id)">编辑</el-button>
              <el-button type="text" @click="remove(row.id)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </ai-table>
    </template>
  </ai-list>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'List',

    props: {
      instance: Function,
      dict: Object
    },

    data() {
      return {
        search: {
          current: 1,
          size: 10,
          name: '',
          areaId: ''
        },
        defaultExpanded: [],
        defaultChecked: [],
        areaTree: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        currIndex: -1,
        areaList: [],
        total: 10,
        colConfigs: [
          {prop: 'name', label: '姓名', align: 'left'},
          {prop: 'phone', label: '联系方式', align: 'center'},
          {prop: 'areaName', label: '服务区域', align: 'center'},
          {prop: 'createTime', label: '创建时间', align: 'center'},
          {slot: 'isPublic', label: '是否公开', align: 'center'},
          {slot: 'options', label: '操作'}
        ],
        areaName: '',
        unitName: '',
        tableData: []
      }
    },

    computed: {
      ...mapState(['user'])
    },

    watch: {
      unitName (val) {
        this.$refs.tree.filter(val)
      }
    },

    mounted() {
      this.search.areaId = this.user.info.areaId
      this.areaName = this.user.info.areaName
      this.getTree()
      this.getAreaList()
      this.getList()

      this.$nextTick(() => {
      })
    },

    methods: {
      getList() {
        this.instance.post(`/app/appvillageauxiliarypolice/list`, null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },

      onChange (id) {
        this.instance.post(`/app/appvillageauxiliarypolice/enable?id=${id}`).then(res => {
          if (res.code == 0) {
            this.$message.success('修改成功')
            this.getList()
          }
        })
      },

      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },

      onTreeChange (e) {
        this.search.areaId = e.id
        this.areaName = e.name
        this.search.current = 1

        this.$nextTick(() => {
          this.getList()
        })
      },

      getTree () {
        this.instance.post(`/admin/area/queryAllArea?id=${this.user.info.areaId}`).then(res => {
          if (res.code === 0) {
            let parent = res.data.map(v => {
              v.label = v.name
              v.children = []

              return v
            }).filter(e => !e.parentid)[0]
            this.defaultExpanded = [parent.id]
            this.defaultChecked = [parent.id]
            this.search.areaId = parent.id
            this.addChild(parent, res.data)
            this.areaTree = [parent]

            this.$nextTick(() => {
              this.$refs.tree.setCurrentKey(parent.id)
            })
          }
        })
      },

      addChild (parent, list) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].parentId === parent.id) {
            parent.children.push(list[i])
          }
        }

        if (list.length > 0) {
          parent['children'].map(v => this.addChild(v, list))
        }
      },

      getAreaList() {
        this.instance.post(`/admin/area/queryAreaByParentId?id=341021104000`).then(res => {
          if (res.code == 0) {
            this.areaList = res.data
          }
        })
      },

      remove(id) {
        this.$confirm('确定删除该数据？').then(() => {
          this.instance.post(`/app/appvillageauxiliarypolice/delete?ids=${id}`).then(res => {
            if (res.code == 0) {
              this.$message.success('删除成功！')
              this.getList()
            }
          })
        })
      },

      toAdd(id) {
        this.$emit('change', {
          type: 'Add',
          params: {
            areaName: this.areaName,
            id: id || '',
            areaId: this.search.areaId
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.villagecode {
  .table-tags {
    .el-tag {
      margin-right: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .addressBook-left__list {
    height: calc(100% - 40px);
    padding: 8px 8px;
    overflow: auto;

    .addressBook-left__tags--item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 40px;
      padding: 0 8px 0 16px;
      color: #222222;

      &.addressBook-left__tags--item-active, &:hover {
        background: #E8EFFF;
        color: #2266FF;

        i, span {
          color: #2266FF;
        }
      }

      span {
        font-size: 14px;
      }

      i {
        cursor: pointer;
        color: #8e9ebf;
        font-size: 16px;
      }
    }

    .addressBook-left__list--title {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .addressBook-left__list--search {
        flex: 1;
        ::v-deep input {
          width: 100%;
        }
      }

      .el-button {
        width: 84px;
        flex-shrink: 1;
        margin-right: 8px;
      }
    }

    span {
      color: #222222;
      font-size: 14px;
    }

    ::v-deep .el-tree {
      background: transparent;

      .el-tree-node__expand-icon.is-leaf {
        color: transparent!important;
      }

      .el-tree-node__content > .el-tree-node__expand-icon {
        padding: 4px;
      }

      .el-tree-node__content {
        height: 32px;
      }

      .el-tree__empty-text {
        color: #222;
        font-size: 14px;
      }

      .el-tree-node__children .el-tree-node__content {
        height: 32px;
      }

      .el-tree-node__content:hover {
        background: #E8EFFF;
        color: #222222;
        border-radius: 2px;
      }

      .is-current > .el-tree-node__content {
        &:hover {
          background: #2266FF;
          color: #fff;
        }

        background: #2266FF;
        
        span {
          color: #fff;
        }
      }
    }
  }

  ::v-deep .ai-list__content--left {
    margin-right: 2px;
  }

  .villagecode-left {
    width: 100%;
    height: auto;
    background: #FAFAFB;

    .villagecode-left__title {
      display: flex;
      align-items: center;
      height: 40px;
      padding: 0 16px;
      background: #fff;

      h2 {
        color: #222;
        font-size: 14px;
      }
    }

    .villagecode-left__list {
      height: calc(100% - 40px);
      padding: 8px 0;
      overflow: auto;

      span {
        display: block;
        height: 40px;
        line-height: 40px;
        padding: 0 24px;
        color: #222222;
        font-size: 14px;
        cursor: pointer;
        border-right: 2px solid transparent;
        background: transparent;

        &:hover {
          color: #2266FF;
          background: #E8EFFF;
        }

        &.left-active {
          color: #2266FF;
          border-color: #2266FF;
          background: #E8EFFF;
        }
      }
    }
  }

  ::v-deep .ai-list__content--right {

    .ai-list__content--right-wrapper {
      min-height: 100%;
    }
  }

}

.message-info__img {
  font-size: 0;
  width: 144px;
  height: 144px;
}
</style>
