<template>
  <div>
    <el-dialog :visible.sync="dialogVisible">
      <template>
        <div class="select">
          <Select
            v-model="select.filter[0].key"
            style="width: 100px"
            placeholder="搜索条目"
          >
            <Option v-for="item in [{field:'changguanbianhao',name:'场馆编号'},{field:'name',name:'场馆名称'},{field:'lishuqishu',name:'隶属编号'}]" :key="item.id" :value="item.field">{{
                item.name
              }}</Option>
          </Select>
          <Select
            v-model="select.filter[0].op"
            style="width: 100px; margin-left: 10px"
            placeholder="搜索条件"
          >
            <Option v-for="item in op" :key="item.value" :value="item.value">{{
                item.label
              }}</Option>
          </Select>
          <template v-if="select.filter[0].op !== 'range'">
            <Input
              clearable
              v-model="select.filter[0].value"
              style="width: 150px; margin-left: 10px"
              placeholder="请填写关键词"
            />
          </template>
          <template v-else>
            <Input
              :value="select.filter[0].value.split(',')[0]"
              style="width: 150px; margin-left: 10px"
              placeholder="范围开始关键词"
              @input="(e) => inputStartHandler(e, select.filter[0])"
            />
            <span style="margin-left: 10px; display: flex; align-items: center"
            >至</span
            >
            <Input
              :value="select.filter[0].value.split(',')[1]"
              style="width: 150px; margin-left: 10px"
              placeholder="范围结束关键词"
              @input="(e) => inputEndHandler(e, select.filter[0])"
            />
          </template>
          <Button
            style="margin-left: 10px"
            type="primary"
            @click="getList"
          >查询</Button
          >
        </div>

        <el-tree ref="elTree" highlight-current :data="list" :props="{ children: 'id_venue_details_venue_id_relation', label: 'name' }"></el-tree>
      </template>
      <template #footer>
        <span>
          <el-button size="mini" @click="dialogVisible = false"
          >取 消</el-button
          >
          <el-button size="mini" type="primary" @click="confirm"
          >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { index } from "@/api/system/baseForm";
import { op } from '@/const/op';
export default {
  props: {
  },
  data() {
    return {
      op,
      dialogVisible: false,
      select: {
        table_name: "venues",
        filter: [
          {
            key: '',
            op: '',
            value: ''
          }
        ]
      },
      list: []
    };
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    hide() {
      this.dialogVisible = false;
    },

    //target要为内存地址引用类型
    inputStartHandler(e, target) {
      let temp = target?.value.split(",")[1];
      target.value = `${e},${temp ? temp : ""}`;
    },
    inputEndHandler(e, target) {
      let temp = target?.value.split(",")[0];
      target.value = `${temp ? temp : ""},${e}`;
    },

    async getList () {
      const res = await index(this.select)
      this.list = res.data;
    },
    confirm () {
      let node = this.$refs['elTree'].getCurrentNode()
      if (node.hasOwnProperty('venue_id')) {
        this.$emit('venueDetailPick',node)
        this.hide();
      } else {
        this.$message({
          type: 'warning',
          message: '请选择一个场馆楼层'
        })
      }
    }
  },
  computed: {},
  watch: {

  },
  created() {
    this.getList()
  }
};
</script>

<style scoped lang="scss">
.select {
  margin-bottom: 10px;
}
</style>
