<template>
  <el-dialog title="查询设置" :visible.sync="visible" width="60%" v-dialogDrag :close-on-click-modal="false"
    :before-close="cancel">
    <div class="dia-box">
      <el-form ref="form" :model="form" label-suffix=":" label-width="80px">
        <el-form-item label="设置类型">
          <el-radio-group v-model="form.type">
            <el-radio v-for="item in radioList" :label="item.value" :key="item.value" @change="changeRadio">
              {{ item.name }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-transfer v-model="form.fields" target-order="push" :titles="['备选字段', '已选字段']" :props="{
              key: 'key',
              label: 'title'
            }" :data="data"></el-transfer>
        </el-form-item>
        <el-form-item style="text-align:right;">
          <el-button type="primary" size="mini" @click="submit('form')">
            保存
          </el-button>
          <el-button size="mini" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getSettingField,
  } from "@/api/archives-management/fileManagement/notStoredArchives.js";
  import {
    message
  } from "@/utils/common";
  export default {
    props: {
      visible: {
        type: Boolean,
        default: () => false
      },
      querySetData: {
        type: Object,
        default: () => {}
      },
    },
    data() {
      return {
        form: {
          type: 1,
          fields: []
        },
        radioList: [{
            value: 1,
            name: "目录序列"
          },
          {
            value: 2,
            name: "查询字段"
          },
          // { value: 3, name: "排序字段" },
          // { value: 4, name: "导出字段" }
        ],
        data: [],
      };
    },
    methods: {
      changeRadio(val) {
        this.querySetData.type = val
        getSettingField(this.querySetData).then(res => {
          if (res.code === "100") {
            this.data = res.body.dataSource;
            this.form.fields = res.body.targetKeys;
          }
        });
      },
      cancel() {
        this.$emit("cancel");
      },
      submit(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$emit("submit", this.form);
          } else {
            return false;
          }
        });
      },
    },
  };

</script>
