<template>
  <div class="cell">
    <!-- 输入框 -->
    <el-input v-if="field_type === 'Input'" :disabled="disabled" @change="changeKey" size="mini" v-model="select_value"></el-input>
    <!-- 输入框+按钮 -->
    <el-input v-if="field_type === 'Input_btn'" disabled  size="mini" title="xxxxx"
    
    <el-input v-if="field_type === 'Input_tree'" disabled  size="mini" title="xxxxx"
    
    style="margin-top: 4px;" v-model="select_value_display">
      <template slot="prepend" style="display: none;">
        {{ select_value }}
      </template>
      <el-button slot="append" icon="el-icon-search" @click="selectClick"></el-button>

    </el-input>
    <!-- 下拉单选 -->
    <el-select v-if="field_type === 'Select'" :disabled="disabled" size="mini" v-model="select_value" clearable filterable @change="changeKey" placeholder="请选择">
      <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></el-option>
    </el-select>
    <!-- 下拉多选 -->
    <el-select
      v-if="field_type === 'Multi-Select'"
      size="mini"
      multiple
      :disabled="disabled"
      collapse-tags
      clearable
      filterable
      v-model="select_value_display"
      @change="changeKey"
      placeholder="请选择"
    >
      <el-option v-for="(option, index) in options" :key="index" :label="option.label" :value="option.value"></el-option>
    </el-select>
    <!-- 日期选择 -->
    <el-date-picker
      v-if="field_type === 'DatePicker'"
      v-model="select_value"
      size="mini"
      type="date"
      placeholder="选择日期"
      :disabled="disabled"
      @change="changeKey"
    ></el-date-picker>
    <el-radio-group v-if="field_type === 'Radio'" :disabled="disabled" @change="changeKey" v-model="select_value" size="mini">
      <el-radio-button label="true">是</el-radio-button>
      <el-radio-button label="false">否</el-radio-button>
    </el-radio-group>
    <DialogSingle
      :show_dialog="show_dialog"
      :table_name="fk_table_name"
      :filter_data="filter_data"
      @dialogConfig="dialogConfig"
      @dialogClose="dialogClose"
    ></DialogSingle>
    <DialogSingleTree
      :is_check="false"
      :show_dialog="show_dialog"
      :table_name="fk_table_name"
      :filter_data="filter_data"
      @dialogConfig="dialogConfig"
      @dialogClose="dialogClose"
    ></DialogSingleTree>
    
  </div>
</template>

<script>
import flame from '../../api/flame.js';
// import { mapState, mapActions, mapGetters } from 'vuex';
import system from '../../api/system.js';
export default {
  name: 'form-field-value',
  components: {},
  props: {
    field_type: {
      type: String,
      default: 'Input',
      required: true
    },
    fk_table_name: {
      type: String,
      default: ''
    },
    // 外键的字段名
    fk_table_name_field:{
      type:String,
      default:''
    },
    // 外键显示的字段名
    fk_table_display_field_name: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    key_id: {
      type: String,
      default: ''
    },
    commbox_where_values: {
      type: String,
      default: ''
    },
    field_value: {}
  },
  data() {
    return {
      show_dialog: false,
      select_value: null,
      select_value_display: null,
      filter_data: [],
      disPlayFiledName: 'flame_id',
      options: [{ value: 'aaaa', label: 'xxxx' }],
      table_name: 'flame_table_info'
    };
  },
  mounted() {
    let that = this;
    if (that.field_type === 'Select' || that.field_type === 'Multi-Select') {
      if (that.key_id !== '') {
        console.log('where_values=======', that.commbox_where_values);
        that.getCombox(that.key_id, that.commbox_where_values);
      }
    } else if (that.field_type === 'Input_btn') {
      
      that.select_value_display = that.select_value;
    }
  },
  watch: {
    // 要示的值
    field_value(newV, oldV) {
      let that = this;
      that.select_value = newV;
      console.log('newV，oldV',newV,oldV,that.field_type,that.fk_table_name); 
     
      if (that.field_type === 'Input_btn') {
         console.log('that,',that.fk_table_name,that.select_value,that.fk_table_name_field,that.fk_table_display_field_name);
         
        that.select_value_display = that.select_value;
        if (that.fk_table_name !== '' && that.select_value != '' && that.fk_table_name_field!='' && that.fk_table_display_field_name !== '') {
          that.getRef();
        }
      }
    },
    commbox_where_values(newV, oldV) {
      let that = this;
      if (that.field_type === 'Select' || that.field_type === 'Multi-Select') {
        console.log('newV', newV, 'oldV', oldV);
        that.getCombox(that.key_id, newV);
      }
    },
    immediate: true
  },
  methods: {
    changeKey() {
      let that = this;
      console.log('dataeeee======', that.select_value);
      that.$emit('changeKey', that.key_id, that.select_value);
    },
    // 获取reF的值
    getRef() {
      let that = this;

      let temp_field = that.fk_table_display_field_name;
      console.log('temp_field:========', temp_field, that.fk_table_name_field);
      let commit_data = {
        fields: ''+ that.fk_table_name_field +','+ that.fk_table_display_field_name,
        key: that.field_value,
      };
      system.singleSearch(that.fk_table_name, commit_data, res => {
        if (res.result === true) {
          let item = res.item
          console.log('getRef----getFieldValue', item);
          that.select_value = item[that.fk_table_name_field];
          that.select_value_display = item[that.fk_table_display_field_name];
          that.$forceUpdate();
        }
      });
    },
    // 如果是下拉，则会自动获取下拉的值
    getCombox(str_keyid, commbox_where_values) {
      
      let that = this;
      let commit_data = {
        action: 'action_get_com_box_by_flame',
        param: { key_id: str_keyid }
      };
      flame.getCombox(commit_data, res => {
        that.options = [];
        console.log('res=',res)
        res.items.forEach(e => {
          that.options.push({ value: e.value, label: e.label });
        });
      });
      
    },
    selectClick() {
      let that = this;
      that.show_dialog = true;
      console.log('xxxxx ------');
      
    },
    dialogClose() {
      let that = this;
      that.show_dialog = false;
      
    },
    dialogConfig(val) {
      let that = this;
      that.show_dialog = false;
      that.select_value = val.value;
      that.select_value_display = val.lable;
      console.log('单项选择的对话框选择的值:',that.key_id, val.value, val.lable);
      that.$emit('changeKey', that.key_id, that.select_value);
    }
  }
};
</script>

<style scoped>
.cell {
  margin: 0;
  display: flex;
  align-items: center;
}
.label {
  min-width: 70px;
}
</style>
