<template>
  <div>
    <NavBar
      title="批量修改属性"
      :is-go-back="true"
    />
    <div>
      <div
        class="alert alert-danger"
        role="alert"
      >
        您选择了{{ modelDatas != null ? modelDatas.length : 0 }}条数据进行批量修改，这个操作非常的危险，且不能恢复，请谨慎操作。
      </div>

      <div v-if="modelDatas != null && modelDatas.length > 0">
        <div
          v-if="tab != null && tab.fields != null"
          class="form-group"
        >
          <label for="field">选择修改的字段</label>
          <select
            id="field"
            v-model="selectedField"
            class="form-control"
          >
            <template v-for="field in tab.fields">
              <option
                v-if="fieldUtil.isTextType(field) 
                  || fieldUtil.isNumberType(field) 
                  || fieldUtil.isTextAreaType(field) 
                  || fieldUtil.isTimeType(field)
                  || fieldUtil.isDateType(field) 
                  || fieldUtil.isDateTimeType(field) 
                  || fieldUtil.isYearType(field)"
                :key="field.id"
                :value="field"
              >
                {{ field.name }}
              </option>
            </template>
          </select>
        </div>
        <div
          v-if="selectedField != null"
          class="form-group"
        >
          <label for="newValue">修改的值</label>
          <input
            v-if="fieldUtil.isTextType(selectedField)"
            id="newValue"
            v-model="newValue"
            autocomplete="off"
            class="form-control"
            placeholder="新的值"
            type="text"
          />
          <input
            v-if="fieldUtil.isNumberType(selectedField)"
            id="newValue"
            v-model="newValue"
            autocomplete="off"
            class="form-control"
            placeholder="新的值"
            type="number"
          />

          <textarea
            v-if="fieldUtil.isTextAreaType(selectedField)"
            v-model="newValue"
            class="form-control"
            rows="3"
          />

          <TimeWidget
            v-if="fieldUtil.isTimeType(selectedField)"
            v-model="newValue"
            class="form-control"
          />

          <Date
            v-if="fieldUtil.isDateType(selectedField)"
            :model-value="newValue"
            @update:model-value="textChanged"
          />

          <DateTime
            v-if="fieldUtil.isDateTimeType(selectedField)"
            :model-value="newValue"
            class="form-control"
            @update:model-value="textChanged"
          />

          <YearPicker
            v-if="fieldUtil.isYearType(selectedField)"
            v-model="newValue"
          />
        </div>
        <div class="form-group">
          <label for="password">管理员密码</label>
          <input
            id="password"
            v-model="password"
            autocomplete="off"
            type="password"
            class="form-control"
            placeholder="密码"
          />
        </div>
        <button
          class="btn btn-default"
          @click="save"
        >
          确定
        </button>
      </div>
    </div>
    <Loading v-if="loading" />
  </div>
</template>

<script>

import Common from '../common/Common.js';
import UserStorageResource from '../api/base/UserStorageResource.js';
import fieldUtil from '../resource/dictionary/FieldUtil.js';
import WindowServerUtil from '../resource/dictionary/WindowServerUtil.js';
import { Notify, Uuid } from 'pc-component-v3';

export default {

  components: {
  },
  props: [],
  data: function () {
    return {
      uuid: null,
      modelDatas: [],
      tab: null,
      password: '',
      newValue: '',
      selectedField: '',
      fieldUtil: fieldUtil,
      loading: false,
    };
  },

  mounted: function () {
    this.initGetModelDatas();
  },

  methods: {

    textChanged: function (value) {
      this.newValue = value;
    },


    /**
         * 年份选择改变
         */
    yearChange: function (value) {
      this.newValue = value;
    },

    /**
         * 保存批量修改的数据
         */
    save: function () {
      if (this.modelDatas == null || this.modelDatas.length == 0) {
        Notify.error('保存失败', '未选择数据，请先选择数据。', false);
        return;
      }
      if (this.password != '123456') {
        Notify.error('保存失败', '操作密码不正确。', false);
        return;
      }
      if (this.selectedField == null || this.selectedField.fieldName.length == 0) {
        Notify.error('保存失败', '未选择批量修改的字段。', false);
        return;
      }
      if (this.newValue == null || this.newValue.length == 0) {
        Notify.error('保存失败', '未输入数据。', false);
        return;
      }

      var tabSaveDatas = [];
      for (var i = 0; i < this.modelDatas.length; i++) {
        this.modelDatas[i].data[this.selectedField.fieldName].displayValue[0] = this.newValue;
        this.modelDatas[i].changed = true;
        var tabSaveData = {
          attributeValueDtos: null,
          persistenceData: this.modelDatas[i],
        };
        tabSaveDatas.push(tabSaveData);
      }

      var _self = this;
      _self.loading=true;
      WindowServerUtil.saveTabDatas(tabSaveDatas, function (id) {
        _self.loading=false;
        Notify.success('保存成功', '数据保存成功', false);
        _self.modelDatas.splice(0, _self.modelDatas.length);
        localStorage.removeItem(_self.uuid + '_modelDatas');
      }, function () {
        _self.loading=false;
      });
    },
    /**
         * 初始化获取getModelDatas
         * @author LeiGuoXian
         * @date 2020-09-17
         */
    initGetModelDatas: function () {
      var _self = this;
      _self.uuid = this.$route.params.uuid;
      // var key1 = _self.uuid + "_tab";
      // UserStorageResource.uniqueByKey(key1).then(tabStr => {
      //     if (tabStr != null) {
      //         this.tab = JSON.parse(tabStr);
      //     }
      // }, errorData => {
      //     Common.processException(errorData);
      // })
      var key2 = _self.uuid + '_modelDatas';
      UserStorageResource.uniqueByKey(key2).then(modelDatasStr => {
        // if(modelDatasStr.errorCode != 0) {
        //   Notify.error('提示', modelDatasStr.errorMessage, false);
        //   return;
        // }
        if (modelDatasStr.data != null) {
          var modelDatas = JSON.parse(modelDatasStr.data);
          for (var i = 0; i < modelDatas.length; i++) {
            if (modelDatas[i].select == true) {
              this.modelDatas.push(modelDatas[i]);
            }
          }
        }
      }, errorData => {
        Common.processException(errorData);
      });

    },
  },
};
</script>
