<template>
  <div class="app-container">
    <el-form ref="searchForm" :model="queryParams" inline label-width="100px">
      <el-form-item :label="$t('ec.table.name')" prop="name">
        <el-input v-model="queryParams.name" type="text" :placeholder="$t('ec.table.name')" />
      </el-form-item>
      <el-form-item :label="$t('ec.area.cityCode')" prop="cityCode">
        <el-input v-model="queryParams.cityCode" type="text" :placeholder="$t('ec.area.cityCode')" />
      </el-form-item>
      <el-form-item :label="$t('ec.area.zipCode')" prop="zipCode">
        <el-input v-model="queryParams.zipCode" type="text" :placeholder="$t('ec.area.zipCode')" />
      </el-form-item>
      <el-form-item class="searchItem" :label-width="'50px'">
        <el-button type="primary" @click="getData">{{ $t('ec.table.query') }}</el-button>
        <el-button type="default" @click="handleReset">{{ $t('ec.table.reset') }}</el-button>
      </el-form-item>
    </el-form>

    <vxe-virtual-tree
      ref="vxe"
      row-key
      row-id="id"
      show-overflow
      show-header-overflow
      border
      highlight-hover-row
      max-height="1000"
      class="vxe-table-element"
      resizable
      sync-resize
      auto-resize
      :loading="loading"
      :toolbar="tableToolbar"
      :columns="columns"
      :tree-config="{children: 'children'}"
      :data="gridData"
    >
      <!--      :checkbox-config="{ checkStrictly: !checkStrictly, checkField: 'checked', halfField: 'indeterminate'}"-->

      <template v-slot:toolbar_btns>
        <el-button :disabled="gridData.length === 0" @click="toggleTree">{{ $t('ec.table.expandCollapse') }}</el-button>
        <el-button v-permission="['area:add']" type="primary" @click="add()">{{ $t('ec.table.add') }}</el-button>
<!--        <el-button @click="getData">{{ $t('ec.table.refresh') }}</el-button>-->
        <!-- todo 导入的时候传递一个download权限字符串进去 -->
      </template>

      <template v-slot:sort_operation="{ row }">
        <el-input-number v-model="row.sort" :disabled="!checkPermission(['area:edit'])" @change="updateSort(row)" />
      </template>

      <template v-slot:operation="{ row }">
        <el-button type="text" @click="view(row)">{{ $t('ec.table.add') }}</el-button>
        <el-button v-permission="['area:add']" type="text" @click="add(row)">{{ $t('ec.table.addSubordinate') }}</el-button>
        <el-button v-permission="['area:edit']" type="text" @click="edit(row)">{{ $t('ec.table.edit') }}</el-button>
        <el-button v-permission="['area:delete']" type="text" @click="deleteById(row.id)">{{ $t('ec.table.del') }}</el-button>
      </template>
    </vxe-virtual-tree>

    <detail ref="areaEditDialog" @refreshData="getData" />
  </div>
</template>

<script>
import mixin from 'ecip-web/utils/common-mixin'
import Detail from './components/detail'
import { getData, deleteByIds, updateSort } from 'ecip-web/api/vue/area/sysrAreaApi'
import { treeEach } from 'ecip-web/utils/tableUtil'

export default {
  name: 'VueAreaSysrAreaView',
  components: { Detail },
  mixins: [...mixin],
  data() {
    return {
      loading: false,
      expand: false,
      gridData: [],
      queryParams: {
        name: '',
        cityCode: '',
        zipCode: ''
      },
      tableToolbar: {
        id: 'modules.system.sysrAreaView-toolbar',
        custom: true,
        slots: {
          buttons: 'toolbar_btns'
        },
        zoom: true, // 最大化按钮
        // 列宽操作记录
        resizable: {
          storage: true
        },
        // 列操作记录
        setting: {
          storage: true
        }
      },
      columns: [
        // { type: 'checkbox', width: 40, fixed: 'left', align: 'center' },
        { title: 'ec.table.name', field: 'name', treeNode: true, minWidth: 120, showOverflow: true },
        { title: 'ec.table.shortName', field: 'mergerShortName', minWidth: 180, showOverflow: true },
        { title: 'ec.area.pinyin', field: 'pinyin', minWidth: 120, showOverflow: true },
        { title: 'ec.area.shortPinyin', field: 'jianpin', minWidth: 80, showOverflow: true },
        { title: 'ec.area.cityCode', field: 'cityCode', minWidth: 120, showOverflow: true },
        { title: 'ec.area.zipCode', field: 'zipCode', minWidth: 120, showOverflow: true },
        { title: 'ec.area.lng', field: 'lng', minWidth: 120, showOverflow: true },
        { title: 'ec.area.lat', field: 'lat', minWidth: 120, showOverflow: true },
        { title: 'ec.area.type', field: 'type', minWidth: 120, showOverflow: true, formatter: ['dict', 'areaType'] },
        { title: 'ec.table.sort', minWidth: 180, slots: { default: 'sort_operation' }},
        { title: 'ec.table.actions', width: 240, fixed: 'right', align: 'center', slots: { default: 'operation' }}
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async updateSort(row) {
      try {
        this.loading = true
        const { message } = await updateSort(row.id, { sort: row.sort })
        this.$notify.success(message)
        await this.getData()
      } finally {
        this.loading = false
      }
    },
    async getData() {
      let expands
      this.$nextTick(() => {
        expands = this.$refs.vxe.getTreeExpandRecords().map(item => item.id)
      })
      try {
        this.loading = true
        const { data } = await getData({}, this.queryParams)
        this.gridData = data
        this.$nextTick(() => {
          const result = []
          treeEach(this.gridData, node => {
            if (expands.includes(node.id)) {
              result.push(node)
            }
          })
          this.$refs.vxe.setTreeExpand(result, true)
        })
      } finally {
        this.loading = false
      }
    },
    view(record) {
      this.$refs.areaEditDialog.init('view', record)
    },
    add(parent) {
      this.$refs.areaEditDialog.init('add', {}, parent)
    },
    edit(record) {
      this.$refs.areaEditDialog.init('edit', record)
    },
    deleteById(id) {
      this.$confirm(this.$t('ec.message.delNodeConfirm'), this.$t('ec.message.prompt'), {
        confirmButtonText: this.$t('ec.message.confirm'),
        cancelButtonText: this.$t('ec.message.cancel'),
        type: 'warning'
      }).then(async() => {
        await deleteByIds([id])
        this.$notify.success(this.$t('ec.message.delSuccess'))
        this.getData()
      })
    },
    async toggleTree() {
      this.expand = !this.expand
      this.loading = true
      await this.$refs.vxe.setAllTreeExpand(this.expand)
      this.loading = false
    },
    handleReset() {
      Object.assign(this.$data.queryParams, this.$options.data().queryParams)
      this.getData()
    }
  }
}
</script>

<style scoped>

</style>
