<!--
 * @Date: 2024-03-21 09:36:01
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-03-21 14:20:43
 * @FilePath: /custom_dashboard/src/components/filterInput.vue
 * @Description: 文件描述
-->
<template>
  <div :class="['edit-tag-wrapper', hoverInFilter ? 'hover' : '']">
    <p style="margin-bottom: 10px">过滤：</p>
    <div id="filter" style="flex: 1; height: 100%; display: flex">
      <!-- <el-tag
        :key="index"
        v-for="(item, index) in filter_list"
        closable
        effect="plain"
        type="success"
        :disable-transitions="false"
        @close="handleFilterClose(item, index)">
        {{ item.name }}<span style="font-size: 0.7rem;"> ( 求和 )</span>
      </el-tag> -->
      <div
        :key="index"
        v-for="(item, index) in filter_list"
        class="filter-wrapper"
      >
        <VDropdown placement="bottom">
          <span class="filter-item">
            <i class="el-icon-arrow-down el-icon--right"></i>&nbsp;<span
              style="font-size: 0.8rem"
              >{{ item.name }}</span
            >
          </span>

          <template #popper>
            <!-- <VMenu v-for="n in 5" :key="n" placement="right-start" instant-move>
              <div style="padding: 0.5rem">修改显示名</div>

              <template #popper>
                <VMenu v-for="n in 5" :key="n" placement="right-start" instant-move>
                  <div class="rounded hover:bg-green-100 px-4 py-2">Option {{ n }}</div>
                </VMenu>
              </template>
            </VMenu> -->
            <div style="padding: 0.5rem;">
              <div class="filter-handle-item">修改筛选条件</div>
              <div class="filter-handle-item">删除筛选条件</div>
            </div>
          </template>
        </VDropdown>
      </div>
    </div>

    <el-dialog
      title="设置过滤条件"
      :visible.sync="dialogVisible"
      width="30%"
      :append-to-body="true"
      :before-close="handleClose">
      <div>
        <el-row :gutter="5">
          <el-col :span="16">
            <el-input v-model="field_input" :disabled="true">
            </el-input>
          </el-col>
          <el-col :span="8">
            <el-select v-model="op_value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="margin-top: 0.5rem;">
          <el-col :span="24">
            <el-input placeholder="请输入内容" v-model="filter_input">
            </el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "common/mixin";

const TEXT_OPTIONS = [{
  value: '1',
  label: '等于'
}, {
  value: '2',
  label: '不等于'
}, {
  value: '3',
  label: '等于任意一个'
}, {
  value: '4',
  label: '不等于任意一个'
}, {
  value: '5',
  label: '包含'
}, {
  value: '6',
  label: '不包含'
}, {
  value: '7',
  label: '为空'
}, {
  value: '8',
  label: '不为空'
}];

const DATE_OPTIONS = [{
  value: '1',
  label: '等于'
}, {
  value: '2',
  label: '不等于'
}, {
  value: '3',
  label: '大于等于'
}, {
  value: '4',
  label: '小于等于'
}, {
  value: '5',
  label: '选择范围'
}, {
  value: '6',
  label: '动态筛选'
}, {
  value: '7',
  label: '为空'
}, {
  value: '8',
  label: '不为空'
}];

const NUM_OPTIONS = [{
  value: '1',
  label: '等于'
}, {
  value: '2',
  label: '不等于'
}, {
  value: '3',
  label: '大于'
}, {
  value: '4',
  label: '大于等于'
}, {
  value: '5',
  label: '小于'
}, {
  value: '6',
  label: '小于等于'
}, {
  value: '7',
  label: '选择范围'
}, {
  value: '8',
  label: '为空'
}, {
  value: '9',
  label: '不为空'
}];

export default {
  mixins: [mixin.init],
  props: {
    hover: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    filterItem: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  watch: {
    hover(v) {
      this.hoverInFilter = v;
    },
    list(v) {
      this.filter_list = v;
    },
    filterItem(v) {
      if (v) {
        this.dialogVisible = true;
      }
    }
  },
  data() {
    return {
      filter_list: [],
      hoverInFilter: false,
      dialogVisible: false,
      options: [],
      op_value: '1',
      field_input: '测试字段',
      filter_input: '',
    };
  },
  mounted() {
    this.options = TEXT_OPTIONS;
  },
  methods: {
    handleFilterClose() {
      // this.filter_list.splice(index, 1);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
    },
  },
};
</script>

<style lang="less" scoped>
.edit-tag-wrapper {
  border: 1px dashed #d7d9dc;
  border-radius: 3px;
  padding: 10px;
  padding-bottom: 0;
  height: auto;
  min-height: 42px;
  background: #fff;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  // width: 100%;
  &.hover {
    border: 1px dashed green;
    background: rgb(208 249 208 / 34%);
  }

  .filter-wrapper {
    margin-right: 10px;
    margin-bottom: 10px;
    .filter-item {
      background-color: #fff;
      border-color: #d9ecff;
      height: 32px;
      padding: 7px 10px 10px 0;
      line-height: 1;
      color: #409eff;
      border-width: 1px;
      border-style: solid;
      border-radius: 4px;
      box-sizing: border-box;
      white-space: nowrap;
      display: inline-block;
      cursor: pointer;
    }
  }
}

.filter-handle-item {
  padding: 0.5rem 1rem;
  &:hover {
    background-color: #f5f5f5;
    cursor: pointer;
  }
}
</style>