<template>
  <div class="app-container">
    <el-row :gutter="16">
      <el-col :span="7">
        <el-dialog :title="infoDialog.title" :visible.sync="infoDialog.show" append-to-body width="500px">
          <el-form ref="infoDialogForm" :model="infoDialog.form" :rules="infoDialog.rules" label-width="80px">
            <el-form-item label="组织机构" prop="orgId">
              <el-select
                v-model="infoDialog.form.orgId"
                clearable
                placeholder="请选择机构"
              >
                <el-option
                  v-for="item in orgList"
                  :key="item.id"
                  :label="item.orgName"
                  :value="item.orgCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="院区" prop="yardId">
              <el-select
                v-model="infoDialog.form.yardId"
                clearable
                placeholder="请选择院区"
              >
                <el-option
                  v-for="item in yardList"
                  :key="item.id"
                  :label="item.yardName"
                  :value="item.yardCode"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="楼栋名称" prop="buildingName">
              <el-input v-model="infoDialog.form.buildingName" placeholder="请输入楼栋名称"/>
            </el-form-item>
            <el-form-item label="总楼层数" prop="floorNumber">
              <el-input v-model="infoDialog.form.floorNumber" placeholder="请输入总楼层数"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitInfoForm">确 定</el-button>
            <el-button @click="infoDialog.show = false">取 消</el-button>
          </div>
        </el-dialog>
        <div style="margin-bottom: 8px">
          <el-button icon="el-icon-refresh" size="mini" @click="resetInfoList">刷新</el-button>
          <el-button icon="el-icon-plus" size="mini" type="primary" @click="addInfo">新增</el-button>
          <el-button :disabled="!infoChecked.id" icon="el-icon-edit" size="mini" type="primary" @click="updateInfo">
            修改
          </el-button>
          <el-button :disabled="!infoChecked.id" icon="el-icon-delete" size="mini" type="danger" @click="deleteInfo">
            删除
          </el-button>
        </div>
        <el-table ref="infoTable" v-loading="infoLoading" :data="infoList" border highlight-current-row row-key="id"
                  stripe tooltip-effect="light" @row-click="infoHandleRowClick"
        >
          <el-table-column align="center" label="楼栋名称" prop="buildingName"/>
          <el-table-column align="center" label="总楼层数" prop="floorNumber"/>
        </el-table>

      </el-col>
      <el-col :span="17">
        <div style="margin-bottom: 8px">
          <el-button icon="el-icon-refresh" size="mini" @click="resetLocationList">刷新</el-button>
          <el-button :disabled="!infoChecked.id" icon="el-icon-plus" size="mini" type="primary" @click="addLocation">
            新增
          </el-button>
          <el-button :disabled="!locationChecked.id" icon="el-icon-edit" size="mini" type="primary"
                     @click="updateLocation"
          >
            修改
          </el-button>
          <el-button :disabled="!locationChecked.id" icon="el-icon-delete" size="mini" type="danger"
                     @click="deleteLocation"
          >
            删除
          </el-button>
        </div>
        <el-table ref="infoTable" v-loading="locationLoading" :data="locationList" border highlight-current-row row-key="id"
                  stripe tooltip-effect="light" @row-click="locationRowClick"
        >
          <el-table-column align="center" label="位置" prop="locationName"/>
          <el-table-column align="center" label="拼音码" prop="pyCode"/>
          <el-table-column align="center" label="层数" prop="floorNum"/>
          <el-table-column align="center" label="备注" prop="remarks"/>
        </el-table>
        <pagination
          :limit.sync="locationQueryForm.pageSize"
          :page.sync="locationQueryForm.pageNum"
          :total="locationQueryForm.total"
          @pagination="resetLocationList"
        />
        <el-dialog :title="locationDialog.title" :visible.sync="locationDialog.show" append-to-body width="500px">
          <el-form ref="locationDialogForm" :model="locationDialog.form" :rules="locationDialog.rules"
                   label-width="80px"
          >
            <el-form-item label="楼栋" prop="locationId">
              <el-select
                v-model="locationDialog.form.locationId"
                clearable
                placeholder="请选择楼栋"
              >
                <el-option
                  v-for="item in infoList"
                  :key="item.id"
                  :label="item.buildingName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="位置" prop="locationName">
              <el-input v-model="locationDialog.form.locationName" placeholder="请输入位置"/>
            </el-form-item>
            <el-form-item label="层数位置" prop="floorNum">
              <el-input v-model="locationDialog.form.floorNum" placeholder="请输入第几层"/>
            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="locationDialog.form.remarks" placeholder="请输入备注" type="textarea"/>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitLocationForm">确 定</el-button>
            <el-button @click="locationDialog.show = false">取 消</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addLocation,
  addLocationInfo, delLocation,
  delLocationInfo,
  listLocation,
  listLocationInfo, locationDict, updateLocation,
  updateLocationInfo
} from '@/api/basis/locationInfo'
import { listOrg } from '@/api/system/org'
import { listYard } from '@/api/basis/yard'
import vPinyin from '@/utils/vue-py'

export default {
  name: 'LocationInfo',
  data() {
    return {
      infoList: [],
      infoLoading: false,
      infoDialog: {
        form: {},
        title: '',
        rules: {},
        show: false
      },
      //机构
      orgList: [],
      //院区
      yardList: [],
      infoChecked: {},
      locationQueryForm: {
        pageNum: 1,
        pageSize: 10,
        locationId: null,
        total: 0
      },
      locationChecked: {},
      locationList: [],
      locationLoading: false,
      locationDialog: {
        form: {},
        title: '',
        rules: {},
        show: false
      }
    }
  },
  methods: {
    locationRowClick(row) {
      this.locationChecked = row
    },
    resetInfoList() {
      this.infoLoading = true
      listLocationInfo().then(res => {
        this.infoList = res.data
        this.infoLoading = false
        let id = this.infoList[0].id
        let temp = this.infoList.find(item => item.id === this.infoChecked.id)
        if (temp) {
          id = temp.id
        }
        this.locationQueryForm.locationId = id
        this.resetLocationList()
      })
    },
    resetLocationList() {
      this.locationLoading = true
      listLocation(this.locationQueryForm)
        .then(res => {
          this.locationLoading = false
          this.locationList = res.rows
          this.locationQueryForm.total = res.total
        })
    },
    initDict() {
      listOrg({ isValid: 1 }).then(response => {
        this.orgList = response.rows
      })
      listYard({ isValid: 1 }).then(response => {
        this.yardList = response.rows
      })
    },
    addInfo() {
      this.infoDialog.form = {}
      this.infoDialog.title = '新增楼栋'
      this.infoDialog.show = true
    },
    addLocation() {
      this.locationDialog.form = {
        locationId: this.infoChecked.id
      }
      this.locationDialog.title = '新增位置信息'
      this.locationDialog.show = true
    },
    infoHandleRowClick(row) {
      this.infoChecked = row
      this.locationQueryForm.locationId = row.id
      this.resetLocationList()
    },
    updateInfo() {
      if (this.infoChecked.id) {
        this.infoDialog.form = {
          id: this.infoChecked.id,
          orgId: this.infoChecked.orgId,
          yardId: this.infoChecked.yardId,
          buildingName: this.infoChecked.buildingName,
          floorNumber: this.infoChecked.floorNumber
        }
        this.infoDialog.title = '修改楼栋信息'
        this.infoDialog.show = true
      }
    },
    updateLocation() {
      if (this.locationChecked.id) {
        this.locationDialog.form = {
          id: this.locationChecked.id,
          locationId: this.locationChecked.locationId,
          locationName: this.locationChecked.locationName,
          floorNum: this.locationChecked.floorNum,
          remarks: this.locationChecked.remarks
        }
        this.locationDialog.title = '修改位置信息'
        this.locationDialog.show = true
      }
    },
    submitInfoForm() {
      this.$refs['infoDialogForm'].validate(valid => {
        if (valid) {
          this.infoDialog.form.pyCode = vPinyin.chineseToPinYin(this.infoDialog.form.buildingName)
          if (this.infoDialog.form.id) {
            updateLocationInfo(this.infoDialog.form)
              .then(res => {
                this.infoDialog.show = false
                this.resetInfoList()
              })
          } else {
            addLocationInfo(this.infoDialog.form)
              .then(res => {
                this.infoDialog.show = false
                this.resetInfoList()
              })
          }
        }
      })
    },
    submitLocationForm() {
      this.$refs['locationDialogForm'].validate(valid => {
        if (valid) {
          this.locationDialog.form.pyCode = vPinyin.chineseToPinYin(this.locationDialog.form.locationName)
          if (this.locationDialog.form.id) {
            updateLocation(this.locationDialog.form)
              .then(res => {
                this.locationDialog.show = false
                this.resetLocationList()
              })
          } else {
            addLocation(this.locationDialog.form)
              .then(res => {
                this.locationDialog.show = false
                this.resetLocationList()
              })
          }
        }
      })
    },
    deleteInfo() {
      const ids = []
      ids.push(this.infoChecked.id)
      this.$confirm(`是否确认删除楼栋${this.infoChecked.buildingName}?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delLocationInfo(ids)
      }).then(() => {
        this.resetInfoList()
        this.msgSuccess('删除成功')
      })
    },
    deleteLocation() {
      const ids = []
      ids.push(this.locationChecked.id)
      this.$confirm(`是否确认删除位置${this.locationChecked.locationName}?`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return delLocation(ids)
      }).then(() => {
        this.resetLocationList()
        this.msgSuccess('删除成功')
      })
    }
  },
  created() {
    this.initDict()
    this.resetInfoList()
    locationDict().then(res => {
      console.log(123123131, res)
    })
  }
}
</script>

<style lang="scss" scoped>

</style>
