<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" size="small" :inline="true" label-width="100px">
      <el-form-item label="集团名称" prop="name" >
        <el-input
          v-model="queryParams.name"
          placeholder="请输入集团名称"
          clearable
          @keyup.enter.native="localData"
        />
      </el-form-item>
      <el-form-item label="所在省市" >
        <area-cascader :province-id.sync="queryParams.provinceId" :city-id.sync="queryParams.cityId" :placeholder="'请选择所在省市'" :level="2" @areaOptions="areaOptions" ></area-cascader>
      </el-form-item>
      <el-form-item label="账号状态" prop="status">
        <el-select v-model="queryParams.accountStatus" filterable placeholder="请选择账号状态" clearable>
          <el-option
            v-for="dict in dict.type[DictType.group_account_status]"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 207px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="localData">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['system:garden:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="$refs.gardenDialogRef.handleOpen()"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="localData" />
    </el-row>

    <j-table
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :pagination.sync="pagination"
      :showSelection="false"
      @pagination-change="localData"
      @selection-change="handleSelectionChange"
    >
      <template slot="branchCountType" slot-scope="{ row }">
        <el-button type="text" :disabled="row.branchCount == 0" @click.stop="handleJumpPeople(row)">{{row.branchCount || 0}}个</el-button>
      </template>
      <template slot="cityIdType" slot-scope="{ row }">
        <span>{{ findProvinceCity(areaList,row.provinceId,row.cityId) }}</span>
      </template>
      <el-table-column label="操作" align="center" fixed="right" width="180px" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <el-button
            v-hasPermi="['system:garden:edit']"
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click.stop="$refs.gardenDialogRef.handleEdit(row)"
          >编辑
          </el-button>
          <el-button
            v-hasPermi="['system:garden:abandon']"
            size="mini"
            type="text"
            :disabled="Number(row.branchCount)>0"
            icon="el-icon-delete"
            @click.stop="handleRemove(row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </j-table>
    <garden-dialog ref="gardenDialogRef" @ok="localData" />
  </div>
</template>

<script>
import {
  listGarden,
  logicalDelete,
  listRepeatGardenName
} from '@/api/system/garden'
import JTable from '@/components/Table/index.vue'
import GardenDialog  from '@/views/system/group/modules/GardenDialog.vue'
import DictType from '@/utils/dict/DictType'
import options from '@/utils/dict/options'
import AreaCascader from '@/components/Cascader/AreaCascader.vue'
import { findProvinceCity } from '@/utils/index'


const initParams = {
  name: '',
  provinceId:'',
  cityId:'',
  accountStatus:''
}

export default {
  name: 'Group',
  dicts: [DictType.group_account_status],
  components: { AreaCascader, JTable, GardenDialog },
  data() {
    const nameValidator = (voteRule, value, callback) => {
      const { id } = this.form
      if (value && id) {
        listRepeatGardenName(value, id).then((res) => {
          if (res.data && res.data.length > 0) {
            callback(new Error('集团名称已存在'))
          } else {
            callback()
          }
        })
      } else {
        callback()
      }
    }
    return {
      options,
      DictType,
      loading: true,
      selected: [],
      showSearch: true,
      total: 0,
      tableData: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      areaList:[],
      dateRange:[],
      queryParams: Object.assign({}, initParams),
      rules: {
        name: [
          { required: true, message: '集团名称不能为空', trigger: 'blur' },
          { min: 2, max: 30, message: '集团名称长度必须介于 2 和 30 之间', trigger: 'blur' },
          { validator: nameValidator, trigger: 'blur' }
        ]
      },
      columns: [
        { prop: 'name', label: '集团名称', minWidth: 150, align: 'left' },
        { prop: 'branchCount', label: '幼儿园数量',minWidth: 120, customRender: 'branchCountType'},
        { prop: 'cityId', label: '所在省市', minWidth: 120, align: 'left',customRender: 'cityIdType' },
        { prop: 'accountStatus', label: '账号状态' },
        { prop: 'remark', label: '备注', minWidth: 100, align: 'center' },
        { prop: 'createTime', label: '创建时间', minWidth: 180 },
      ]
    }
  },
  computed: {
    isBatch() {
      return this.selected && this.selected.length > 0
    }
  },
  created() {
    // this.localData()
  },
  activated() {
    this.localData()
  },
  methods: {
    findProvinceCity,
    /** 查询幼儿园集团管理列表 */
    localData() {
      this.loading = true
       listGarden(this.addDateRange(Object.assign({}, this.pagination, this.queryParams), this.dateRange)).then(({ data, total }) => {
        this.tableData = data
        this.pagination.total = total
      }).finally(() => {
        this.loading = false
      })
    },
    /**
     * 获取省市数据
     */
    areaOptions(val){
      this.areaList = val
      this.localData()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.pagination.pageNum = 1
      this.queryParams = Object.assign({}, initParams)
      this.dateRange = []
      this.localData()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selected = selection
    },
    onRemove(id) {
      logicalDelete(id).then(() => {
        this.localData()
        this.$modal.msgSuccess('删除成功')
      })
    },
    /** 删除按钮操作 */
    handleRemove(row) {
      this.$modal.confirm('是否确认删除当前幼儿园集团管理数据项？').then(() => {
        this.onRemove(row.id)
      }).catch()
    },
    handleBatchRemove() {
      this.$modal.confirm('删除所选项？删除后不可恢复').then(() => {
        this.onRemove(this.selected.map(item => item.id))
      }).catch()
    },
    /**
     * 人员跳转
     */
    handleJumpPeople(row){
      this.$router.push({ path: '/information/branch', query: { groupName: row.name, groupId: row.id}})
    }
  }
}
</script>
