<template>
  <el-tabs v-model="activeTab" type="card">
    <el-tab-pane :label="$t(key('setting_value'))" name="process">
      <el-divider content-position="left">{{ $t(key(config.titleKey)) }}</el-divider>
      <el-form :model="form" label-position="right" label-width="160px" size="mini" class="device-setting-form">
        <el-row :gutter="16">
          <el-col v-for="field in config.fields" :key="field.prop" :span="12">
            <el-form-item :label="$t(key(field.labelKey))">
              <el-checkbox
                v-if="field.type === 'checkbox'"
                v-model="form[field.prop]"
                true-label="1"
                false-label=""
              />
              <el-select
                v-else-if="field.type === 'select'"
                v-model="form[field.prop]"
                :placeholder="$t(key('please_select'))"
                clearable
                filterable
                style="width:100%"
              >
                <el-option
                  v-for="option in field.options"
                  :key="option.value"
                  :label="$t(key(option.labelKey))"
                  :value="option.value"
                />
              </el-select>
              <el-input v-else v-model="form[field.prop]" :placeholder="$t(key('enter_content'))" clearable>
                <template v-if="field.unit" slot="append">{{ field.unit }}</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="json" name="json">
      <tree-view :data="json" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { i18nMixin } from '@/composables/useI18n'

function isJson (value) {
  if (typeof value !== 'string') return false
  try {
    JSON.parse(value)
    return true
  } catch (e) {
    return false
  }
}

function parseSetting (value, fallback = { process: {} }) {
  if (value === undefined || value === null || value === '') return JSON.parse(JSON.stringify(fallback))
  if (typeof value === 'object') return JSON.parse(JSON.stringify(value))
  if (isJson(value)) return JSON.parse(value)
  return JSON.parse(JSON.stringify(fallback))
}

const deviceSettingForms = {
  DvPlugin: {
    titleKey: 'ocv_common_setting',
    fields: [
      { prop: 'ocv_min_read_range', labelKey: 'ocv_read_lower', unit: 'mV' },
      { prop: 'ocv_max_read_range', labelKey: 'ocv_read_upper', unit: 'mV' },
      { prop: 'ir_min_read_range', labelKey: 'ir_read_lower', unit: 'mΩ' },
      { prop: 'ir_max_read_range', labelKey: 'ir_read_upper', unit: 'mΩ' },
      { prop: 'NG_threshold', labelKey: 'ng_threshold', unit: 'pcs' },
      { prop: 'pin_count', labelKey: 'contact_check_bad_alarm_count', unit: '0' },
      { prop: 'K_ext', labelKey: 'k_value_switch', type: 'checkbox' },
      { prop: 'process_code', labelKey: 'process_code' },
      { prop: 'K_min_read_range', labelKey: 'k_value_read_lower', unit: 'mV/h' },
      { prop: 'K_max_read_range', labelKey: 'k_value_read_upper', unit: 'mV/h' }
    ],
    defaults: {
      ocv_min_read_range: undefined,
      ocv_max_read_range: undefined,
      ir_min_read_range: undefined,
      ir_max_read_range: undefined,
      K_min_read_range: undefined,
      K_max_read_range: undefined,
      pin_count: undefined,
      process_code: undefined,
      NG_threshold: 0
    }
  },
  OcvrPlugin: {
    titleKey: 'dcir_common_setting',
    fields: [
      {
        prop: 'SETWKMODE',
        labelKey: 'work_mode',
        type: 'select',
        options: [
          { labelKey: 'work_mode_0', value: '0' },
          { labelKey: 'work_mode_1', value: '1' },
          { labelKey: 'work_mode_2', value: '2' },
          { labelKey: 'work_mode_3', value: '3' },
          { labelKey: 'work_mode_4', value: '4' },
          { labelKey: 'work_mode_5', value: '5' },
          { labelKey: 'work_mode_6', value: '6' },
          { labelKey: 'work_mode_7', value: '7' },
          { labelKey: 'work_mode_8', value: '8' },
          { labelKey: 'work_mode_9', value: '9' }
        ]
      },
      { prop: 'VDROP', labelKey: 'max_voltage_drop' },
      { prop: 'SETUPV', labelKey: 'voltage_upper', unit: 'mV' },
      { prop: 'SETLWV', labelKey: 'voltage_lower', unit: 'mV' },
      { prop: 'DCR1_up', labelKey: 'dcr1_upper', unit: 'mΩ' },
      { prop: 'DCR1_low', labelKey: 'dcr1_lower', unit: 'mΩ' },
      { prop: 'DCR2_up', labelKey: 'dcr2_upper', unit: 'mΩ' },
      { prop: 'DCR2_low', labelKey: 'dcr2_lower', unit: 'mΩ' },
      { prop: 'REST_T', labelKey: 'rest_time', unit: 's' },
      { prop: 'NG_threshold', labelKey: 'ng_threshold', unit: 'pcs' },
      { prop: 'contact_alarm', labelKey: 'contact_alarm_count', unit: '0' },
      { prop: 'time_interval', labelKey: 'process_data_save_time', unit: 'ms' },
      { prop: 'I1_1', labelKey: 'stage1_current1', unit: 'mA' },
      { prop: 'I1_2', labelKey: 'stage1_current2', unit: 'mA' },
      { prop: 'T1_1', labelKey: 'stage1_work_time1', unit: 's' },
      { prop: 'T1_2', labelKey: 'stage1_work_time2', unit: 's' },
      { prop: 'REST_T_1', labelKey: 'stage1_rest_time', unit: 's' },
      { prop: 'CT_1', labelKey: 'stage1_sampling_time', unit: 's' },
      { prop: 'I2_1', labelKey: 'stage2_current1', unit: 'mA' },
      { prop: 'I2_2', labelKey: 'stage2_current2', unit: 'mA' },
      { prop: 'T2_1', labelKey: 'stage2_work_time1', unit: 's' },
      { prop: 'T2_2', labelKey: 'stage2_work_time2', unit: 's' },
      { prop: 'REST_T_2', labelKey: 'stage2_rest_time', unit: 's' },
      { prop: 'CT_2', labelKey: 'stage2_sampling_time', unit: 's' }
    ],
    defaults: {
      SETUPV: undefined,
      SETLWV: undefined,
      REST_T: undefined,
      VDROP: undefined,
      contact_alarm: undefined,
      time_interval: undefined,
      DCR1_up: undefined,
      DCR1_low: undefined,
      DCR2_up: undefined,
      DCR2_low: undefined,
      I1_1: undefined,
      I2_1: undefined,
      I1_2: undefined,
      I2_2: undefined,
      T1_1: undefined,
      T2_1: undefined,
      T1_2: undefined,
      T2_2: undefined,
      REST_T_1: undefined,
      REST_T_2: undefined,
      CT_1: undefined,
      CT_2: undefined,
      SETWKMODE: undefined,
      NG_threshold: 0
    }
  }
}

export default {
  name: 'ProcessStepDeviceSettingPlugin',
  mixins: [i18nMixin('page.production_master_data.process_model.process_step')],
  props: {
    type: { type: String, default: '' },
    settingJson: { default: '' }
  },
  data () {
    return {
      activeTab: 'process',
      json: { process: {} },
      form: {}
    }
  },
  computed: {
    config () {
      return deviceSettingForms[this.type] || deviceSettingForms.DvPlugin
    }
  },
  watch: {
    settingJson: {
      handler (val) {
        const parsed = parseSetting(val, { process: {} })
        this.json = parsed
        this.form = { ...this.config.defaults, ...(parsed.process || {}) }
      },
      immediate: true
    },
    form: {
      handler (val) {
        this.json = { ...this.json, process: { ...val } }
      },
      deep: true
    }
  },
  methods: {
    handleFormSubmit () {
      this.$emit('submit', this.json)
    }
  }
}
</script>

<style scoped>
.device-setting-form /deep/ .el-form-item--mini.el-form-item {
  margin-bottom: 10px;
}
</style>
