<script>
import { Columns } from "./column";
export default {
  name: "BatchUpdate",
  props: {},
  components: {
    ElPopoverSelectV2: () => import("@/components/popover-select-v2/index.vue"),
  },
  data() {
    return {
      title: "批量修改",
      visible: false,
      params: {
        key: null,
        value: null,
      },
      Columns,
      rules: {
        key: [{ required: true, message: "修改项不能为空", trigger: "blur" }],
        value: [{ required: true, message: "修改值不能为空", trigger: "blur" }],
      },
    };
  },
  computed: {
    innerValue: {
      get() {
        const { Columns, params } = this;
        return Columns.filter(({ item, attr }) => item.key === params.key)[0];
      },
      set() {},
    },
  },
  methods: {
    open() {
      this.visible = true;
    },
    useConfirm(prop) {
      this.$refs[prop].validate((valid, obj) => {
        if (valid) {
          const { params } = this;
          if (params.key && params.key != "") {
            this.$emit("confirm", this.params);
            this.hide();
          }
        } else {
        }
      });
    },
    hide() {
      this.params = {
        key: null,
        value: null,
      };
      this.visible = false;
    },
  },
  created() {},
};
</script>

<template>
  <el-button v-on="$listeners" v-bind="$attrs" @click="open">
    {{ title }}
    <el-dialog
      :title="title"
      :show-close="false"
      :visible.sync="visible"
      width="50%"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        inline
        ref="form"
        :rules="rules"
        :model="params"
        label-width="80px"
        :size="$attrs.size"
      >
        <el-form-item label="修改项" prop="key">
          <el-select
            v-model="params.key"
            placeholder="请选择"
          >
            <el-option
              v-for="({ item, attr }, index) in Columns"
              :label="item.title"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="修改值" prop="value">
          <component
            v-if="innerValue"
            v-bind="innerValue.attr"
            v-model="params.value"
            :size="$attrs.size"
          >
          </component>
          <el-input v-else placeholder="请输入修改项" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :size="$attrs.size"
          @click="useConfirm('form')"
          >确 定</el-button
        >
        <el-button :size="$attrs.size" @click="hide">取 消</el-button>
      </div>
    </el-dialog>
  </el-button>
</template>
