<script>
import { Columns } from "./colums";
export default {
  name: "Inquire",
  components: {
    Sizer: () => import("./sizer/index.vue"),
  },
  props: {
    size: {
      type: String,
      default: "mini",
    },
    // 候选条件
    candidate: {
      type: Array,
      default: () => [],
    },
    // candidate: [
    //   {
    //     item: {
    //       key: "orderCode",
    //       title: "订单编号",
    //     },
    //     attr: {
    //       clearable: true,
    //       is: "el-input",
    //       placeholder: "请输入订单编号，多个使用,隔开",
    //     },
    //   },
    //   {
    //     item: {
    //       key: "materialCode",
    //       title: "物料编码",
    //     },
    //     attr: {
    //       clearable: true,
    //       is: "el-input",
    //       placeholder: "请输入物料编码，多个使用,隔开",
    //       // is: "el-popover-multiple-select-v2",
    //       // valueKey: "code",
    //       // referName: "MATERIAL_PARAM",
    //     },
    //   },
    //   {
    //     item: {
    //       key: "date",
    //       title: "订单日期",
    //     },
    //     attr: {
    //       clearable: true,
    //       is: "el-date-picker",
    //       type: "daterange",
    //       unlinkPanels: true,
    //       rangeSeparator: "至",
    //       valueFormat: "yyyy-MM-dd",
    //       endPlaceholder: "结束日期",
    //       startPlaceholder: "开始日期",
    //       value: [],
    //     },
    //   },
    //   {
    //     item: {
    //       key: "puOrgIds",
    //       title: "采购组织",
    //     },
    //     attr: {
    //       clearable: true,
    //       is: "el-popover-multiple-select-v2",
    //       valueKey: "id",
    //       referName: "ORG_PARAM",
    //     },
    //   },
    //   {
    //     item: {
    //       key: "source",
    //       title: "订单来源",
    //     },
    //     attr: {
    //       clearable: true,
    //       is: "el-select",
    //       dictName: "order_source",
    //     },
    //   },
    // ],
  },
  data() {
    return {
      title: "查询方案",
      visible: false,
      menuVisible: false,
      testModeCode: {},
      CurrentRow: {},
      schemeData: [
        {
          id: 1,
          name: "方案1",
        },
        {
          id: 2,
          name: "方案2",
        },
        {
          id: 3,
          name: "方案3",
        },
        {
          id: 4,
          name: "方案4",
        },
      ],
      tableData: [
        {
          candidate: "orderCode",
          options: "like",
          value: "12315465416546",
          operators: [
            { label: "等于", value: "eq" },
            { label: "模糊", value: "like" },
          ],
          attr: { is: "el-input" },
        },
        {
          candidate: "date",
          options: "range",
          value: "3333",
          operators: [{ label: "范围", value: "range" }],
          attr: { is: "el-input" },
        },
      ],
    };
  },
  computed: {
    $dicts: {
      get() {
        console.log(this.tableData, "tableData");
        console.log(this.candidate, "candidate");
        return [];
      },
      set() {},
    },
  },
  methods: {
    open() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    // 清空值
    onReset() {
      this.tableData = this.tableData.map((item) => {
        return {
          ...item,
          value: "",
        };
      });
    },
    // 新增方案
    addCase() {
      this.$prompt("请输入方案名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\s*\S+?/,
        inputErrorMessage: "方案名称不能为空",
      })
        .then(({ value }) => {
          let caseData = this.tableData.map((item) => {
            return {
              ...item,
              value: "",
            };
          });
          console.log(value, caseData, "caseData");
        })
        .catch(() => {});
    },
    // 重命名
    renameRow(prop) {
      console.log(prop, "renameRow");
      this.$prompt("请输入新方案名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /\s*\S+?/,
        inputErrorMessage: "方案名称不能为空",
      })
        .then(({ value }) => {})
        .catch(() => {});
    },
    // 删除方案
    deleteRow(prop) {
      console.log(prop, "deleteRow");
    },
    // 设置为默认方案
    setRow(prop) {
      console.log(prop, "setRow");
    },
    onClick(row) {
      console.log(row);
    },
    // 方案右键
    rightClick(row, column, event) {
      this.testModeCode = row.testModeCode;

      // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
      this.menuVisible = false;
      // 显示模态窗口，跳出自定义菜单栏
      this.menuVisible = true;
      //关闭浏览器右键默认事件
      event.preventDefault();

      this.CurrentRow = row;

      var menu = document.querySelector(".menu");

      this.styleMenu(menu, event);
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;

      // 关掉监听
      document.removeEventListener("click", this.foo);
    },
    styleMenu(menu) {
      menu.style.left = event.offsetX + 18 + "px";

      menu.style.top = event.clientY - 50 + "px";

      // 给整个document新增监听鼠标事件，点击任何位置执行foo方法
      document.addEventListener("click", this.foo);
    },
  },
  created() {},
};
</script>

<template>
  <el-button :size="size" @click="open">
    {{ title }}
    <el-dialog
      width="850px"
      class="inquire"
      append-to-body
      :visible.sync="visible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" style="display: flex; justify-content: space-between">
        <h4 style="margin: 0">{{ title }}</h4>
        <div>
          <el-button
            type="primary"
            :size="size"
            icon="el-icon-search"
            @click.native.prevent="$emit('submit', tableData)"
            >筛 选</el-button
          >
          <el-button
            :size="size"
            icon="el-icon-refresh-right"
            @click.native.prevent="onReset"
            >清 空</el-button
          >
          <el-button :size="size" @click.native.prevent="onClose"
            >取 消</el-button
          >
        </div>
      </div>
      <el-container>
        <el-aside
          width="220px"
          style="
            height: 350px;
            border-right: 1px solid rgb(228, 228, 228);
            background-color: rgb(255, 255, 255);
          "
        >
          <el-table
            :data="schemeData"
            :show-header="false"
            :height="320"
            empty-text=" "
            show-overflow-tooltip
            highlight-current-row
            @cell-click="onClick"
            @row-contextmenu="rightClick"
          >
            <el-table-column prop="name">
              <template slot-scope="scope">
                <i class="el-icon-document"></i>
                {{ scope.row.name }}
              </template>
            </el-table-column>
          </el-table>

          <div id="contextmenu" class="menu" v-show="menuVisible">
            <div class="contextmenu__item" @click="renameRow(CurrentRow)">
              重命名
            </div>
            <div class="contextmenu__item" @click="deleteRow(CurrentRow)">
              删除
            </div>
            <div class="contextmenu__item" @click="setRow(CurrentRow)">
              设置为默认方案
            </div>
          </div>

          <el-row style="position: absolute; bottom: 16px; left: 10">
            <el-col>
              <el-button
                type="primary"
                :size="size"
                @click.native.prevent="addCase"
                >保存方案
              </el-button>
            </el-col>
          </el-row>
        </el-aside>

        <Sizer v-model="tableData" :size="size" :candidate="candidate"></Sizer>
      </el-container>
    </el-dialog>
  </el-button>
</template>

<style lang="scss" scoped>
::v-deep.inquire .el-dialog__header {
  padding: 15px 15px 10px;
}
::v-deep.inquire .el-dialog__body {
  padding: 5px;
  .el-aside,
  .el-main {
    padding: 0 10px;
  }
}

::v-deep.el-table::before {
  display: none;
}

::v-deep.el-table {
  th,
  td,
  th.is-leaf {
    border: none;
  }

  .el-table__cell {
    padding: 2px 0;
  }
}

// 菜单样式
.contextmenu__item {
  display: block;
  line-height: 28px;
  text-align: center;
}
.contextmenu__item:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  /*height: 106px;*/
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.contextmenu__item:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>
