<template>
  <ai-detail showFooter class="add-detail">
    <template slot="title">
      <ai-title :title="isEdit ? '编辑小区信息' : '添加小区'" :isShowBack="true" @onBackClick="cancel()"
                :isShowBottomBorder="true"></ai-title>
    </template>
    <template slot="content">
      <div class="add-form">
        <ai-bar title="基础信息"></ai-bar>
        <el-form label-width="110px" style="padding-bottom: 80px;" :model="form" ref="form">
          <el-form-item label="小区名称" prop="communityName"
                        :rules="[{ required: true, message: '请输入小区名称', trigger: 'blur' }]">
            <el-input size="small" v-model="form.communityName" :maxlength="50" placeholder="请输入小区名称"></el-input>
          </el-form-item>
          <el-form-item label="行政归属" prop="areaId" :rules="[
              { required: true, message: '请选择行政归属', trigger: 'blur' },
              { pattern:/[^0]0{0,2}$/g, message: '请选择到村/社区' }]">
            <ai-area-get :instance="instance" v-model="form.areaId" :root="user.info.areaId"
                         @select="handleAreaSelect"/>
          </el-form-item>
          <el-form-item label="小区地址" prop="address" :rules="[{ required: true, message: '请输入小区地址', trigger: 'blur' }]">
            <el-input size="small" v-model="form.address" placeholder="请输入小区地址" clearable/>
          </el-form-item>

          <el-form-item label="所属网格" prop="girdInfoList" style="margin-top: 8px;"
                        :rules="[{ required: true, message: '请选择所属网格', trigger: 'blur' }]">
            <el-tag
                :key="index"
                v-for="(tag,index) in form.girdInfoList"
                closable
                style="margin-right: 16px;"
                :disable-transitions="false"
                @close="handleClose(tag)">
              {{ tag.girdName }}
            </el-tag>
            <el-button size="small" @click="showGrid=true">选择网格</el-button>
          </el-form-item>
        </el-form>
      </div>
      <ai-dialog title="选择网格" :visible.sync="showGrid" :customFooter="true" :destroyOnClose="true" border width="720px">
        <div class="grid">
          <el-tree
            :data="treeObj.treeList"
            :props="treeObj.defaultProps"
            node-key="id"
            ref="tree"
            :check-strictly="true"
            show-checkbox
            :default-checked-keys="treeObj.checkedKeys"
            :default-expanded-keys="treeObj.checkedKeys"
            @check="onCheckChange">
            <template slot-scope="{node}">
              <div class="el-tree-node__label" :title="node.label" v-text="node.label"/>
            </template>
          </el-tree>
        </div>
        <div class="dialog-footer" slot="footer">
          <el-button size="medium" @click="showGrid=false">取消</el-button>
          <el-button type="primary" size="medium" @click="getCheckedTree()">确认</el-button>
        </div>
      </ai-dialog>
    </template>
    <template slot="footer" class="footer">
      <el-button class="delete-btn footer-btn" @click="cancel(false)">取消</el-button>
      <el-button class="footer-btn" type="primary" @click="onSubmit('0')">保存</el-button>
    </template>
  </ai-detail>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'Add',

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

  data() {
    return {
      gridList: [],
      girdId: '',
      subGridId: '',
      subGridList: [],
      sonGridList: [],
      form: {
        communityName: '',
        areaName: '',
        areaId: '',
        girdId: '',
        dealOpinion: '',
        recordUser: '',
        address: '',
        girdInfoList: [],
        girdName: '',
      },
      showGrid: false,
      treeObj: {
        treeList: [],
        defaultProps: {
          children: "children",
          label: "girdName",
        },
        checkedKeys: [],
      },
    }
  },

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

    isEdit() {
      return !!this.params.id
    },
  },

  created() {
    this.beforeSelectTree()
    this.dict.load('cardType', 'sex', 'nation').then(() => {
      if (this.params && this.params.id) {
        this.getInfo(this.params.id)
      }
    })
  },
  methods: {
    beforeSelectTree() {
      this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
        if (res.code == 0) {
          this.treeObj.checkedKeys = []
          if (this.form.girdInfoList.length) {
            this.form.girdInfoList.map((e) => {
              this.treeObj.checkedKeys.push(e.id);
            });
          }
          this.treeObj.treeList = res.data.filter(e => !e.parentGirdId)
          this.treeObj.treeList.map(p => this.addChild(p, res.data.map(v => {

            return {
              ...v
            }
          }), {
            parent: 'parentGirdId'
          }))
        }
      });
    },

    onCheckChange(e) {
      this.$nextTick(() => {
        this.$refs.tree.getCheckedKeys().forEach(v => {
          this.$refs.tree.setChecked(v, false)
        })
        this.$refs.tree.setChecked(e.id, true)
      })
    },

    format(list) {
      return list.map(item => {
        if (item.girdList && item.girdList.length) {
          item.girdList = this.format(item.girdList)
        }

        return item
      })
    },
    getCheckedTree() {
      if (this.$refs.tree.getCheckedNodes().length > 1) {
        return this.$message.error('不能绑定多个网格')
      }
      this.form.girdInfoList = this.$refs.tree.getCheckedNodes();
      this.showGrid = false;
    },
    handleClose(tag) {
      this.form.girdInfoList.splice(this.form.girdInfoList.indexOf(tag), 1);
    },
    getInfo(id) {
      this.instance.post(`/app/appcommunityinfo/queryDetailById?id=${id}`).then((res) => {
        if (res.code === 0) {
          this.girdId = res.data.girdId0
          this.form.communityName = res.data.communityName
          this.form.address = res.data.address
          this.form.areaName = res.data.areaName
          this.form.girdId = res.data.girdId
          this.form.girdName = res.data.girdName
          this.form.girdInfoList = [{id: res.data.girdId, girdName: res.data.girdName}]
          this.$set(this.form, 'areaId', res.data.areaId)
        }
      })
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.girdInfoList.length > 1) {
            return this.$message.error('不能绑定多个网格')
          }

          this.form.girdName = this.form.girdInfoList[0].girdName
          this.form.girdId = this.form.girdInfoList[0].id
          this.instance
          .post(`/app/appcommunityinfo/addOrUpdate`, {
            ...this.form,
            id: this.params ? this.params.id : '',
          })
          .then((res) => {
            if (res.code === 0) {
              this.$message.success('提交成功')
              setTimeout(() => {
                this.cancel(true)
              }, 800)
            }
          })
        }
      })
    },

    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh,
      })
    },
    handleAreaSelect(v) {
      this.form.areaName = v?.[0]?.label
    },
  },
}
</script>

<style lang="scss" scoped>
.add-detail {
  height: 100%;
  overflow: hidden;
  background: #f2f4f6 !important;

  .add-form__item {
    display: flex;
    align-items: center;
  }

  :deep( .el-form-item__label ){
    padding-right: 40px;
  }

  :deep( .ai-detail__footer ){
    background: #fff !important;
  }

  :deep( .ai-detail__content--active ){
    padding: 20px;

    .ai-detail__content--wrapper {
      width: 100%;
    }

    .aibar {
      padding: 0 16px;
    }

    .el-form {
      padding: 0 96px 0 50px;
    }

    .add-form {
      background: #fff;
    }
  }

  :deep( .ai-wrapper ){
    align-items: inherit !important;
  }

  .user-wrapper {
    display: flex;
    justify-content: space-between;
  }

  .avatar {
    width: 100px;
    height: 100px;
    object-fit: contain;
    border-radius: 10px;
  }

  .footer-btn {
    width: 130px;
  }

  .el-form {
    padding-bottom: 80px;
  }
}
</style>
