<template>
    <div>
        <Alert closable show-icon>
            {{$t("module.valueSet.getVsInfo")}}
        <span slot="desc">
            <div style="margin-top: 10px;">
                {{$t("module.valueSet.getIndVsInfo")}}
            </div>
            <div>
                {{$t("module.valueSet.invoke")}}GetValueSetByCode
            </div>
            <div>
                {{$t("module.valueSet.mustPassParams")}}code
            </div>
            <div>
                {{$t("module.valueSet.Eg")}}

                this.$store
                .dispatch("GetValueSetByCode", {
                    code: 'country'
                })
                .then(response => {
                    // your code ...
                });
            </div>
            <div style="margin-top: 10px;">
                {{$t("module.valueSet.getParentVs")}}
            </div>
            <div>
                {{$t("module.valueSet.invoke")}}GetValueSetByCodeAndParentKey
            </div>
            <div>
                {{$t("module.valueSet.mustPassParams")}}code, parentKey
            </div>
            <div>
                {{$t("module.valueSet.Eg")}}

                this.$store
                .dispatch("GetValueSetByCodeAndParentKey", {
                    "parentKey": "ShanXi",
                    "code": "city",
                })
                .then(response => {
                    // your code ...
                });
            </div>
        </span>
        </Alert>
        <PageTable ref="valueSetTable" action="GetValueSetList" :columnsFn="columns" :initParam="formSearch">
            <Form :model="formSearch" ref="vsForm" slot="search-bar" label-position="top" class="ivu-form-no-margin-bottom" inline>
                <Form-item prop="vsCode" :label="$t('module.valueSet.vsCode')">
                    <Input type="text" v-model="formSearch.vsCode" :placeholder="$t('module.valueSet.enterVsCode')"></Input>
                </Form-item>
                <Form-item prop="vsName" :label="$t('module.valueSet.vsName')">
                    <Input type="text" v-model="formSearch.vsName" :placeholder="$t('module.valueSet.enterVsName')"></Input>
                </Form-item>
            </Form>
            <div slot="table-bar">
                <!--<OptionRight resourceCode="items_add">-->
                    <Button type="ghost" icon="plus-round" size="small" @click="addOrupdateValueSet">{{$t("common.create")}}</Button>
                <!--</OptionRight>-->
                <!--<OptionRight resourceCode="dict_item_del">-->
                    <Button type="ghost" icon="trash-a" size="small" @click="deleteValueSet">{{$t("common.delete")}}</Button>
                <!--</OptionRight>-->
            </div>
            <div slot="handle-bar">
                <Button size="small" @click.native="searchValueSet" type="warning" icon="ios-search">{{$t("common.search")}}</Button>
                <Button size="small" @click.native="resetValueSet" type="info" icon="md-sync">{{$t("common.reset")}}</Button>
            </div>
        </PageTable>
    </div>
</template>
<script>
import OptionRight from "../../../components/OptionRight.vue";
import AddOrUpdateValueSet from "./AddOrUpdateValueSet.vue";
import VDefineSelf from "./VDefineSelf.vue";
import VDefineSQL from "./VDefineSQL.vue";
export default {
  components: {
    OptionRight: OptionRight
  },
  data() {
    const validateVsCode = (rule, value, callback) => {
      if (value === "" || value === undefined || value === null) {
        callback(new Error(this.$t("module.valueSet.enterVsCode")));
      } else if (value.length > 50) {
        callback(new Error(this.$t("module.valueSet.vsCodeLength")));
      } else if (!new RegExp("^[a-zA-z0-9]+$").test(value)) {
        callback(new Error(this.$t("module.valueSet.vsCodeFormat")));
      }
      callback();
    };
    const validateVsName = (rule, value, callback) => {
      if (value === "" || value === undefined || value === null) {
        callback(new Error(this.$t("module.valueSet.enterVsName")));
      } else if (value != value.trim()) {
        callback(new Error(this.$t("module.valueSet.noBlank")));
      } else if (value.length > 200) {
        callback(new Error(this.$t("module.valueSet.vsNameLength")));
      }
      callback();
    };
    return {
      formSearch: {
        vsCode: "",
        vsName: ""
      },
      
    };
  },
  computed: {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
  methods: {
    columns(){
      return [
          {
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title: this.$t("common.operating"),
            align: "center",
            width: 120,
            render: (h, params) => {
              return h("RowTools", {
                props: {
                  data: [
                    {
                      type: "icon",
                      icon: "md-create",
                      text: this.$t("common.edit"),
                      handle: () => {
                        this.addOrupdateValueSet(params.row);
                      }
                    },
                    {
                      type: "icon",
                      icon: "md-menu",
                      text: this.$t("module.valueSet.vsDefine"),
                      handle: () => {
                        this.valueDefine(params.row);
                      }
                    }
                  ]
                }
              });
            }
          },
          {
            title: this.$t("module.valueSet.vsCode"),
            align: "center",
            key: "vsCode"
          },
          {
            title: this.$t("module.valueSet.vsName"),
            align: "center",
            key: "vsName"
          },
          {
            title: this.$t("module.valueSet.vsType"),
            align: "center",
            key: "vsType",
            render: (h, params) => {
              return h("span", params.row.vsType == "1" ? this.$t("module.valueSet.independent") : this.$t("module.valueSet.subordinate"));
            }
          },
          {
            title: this.$t("module.valueSet.vsValueSource"),
            align: "center",
            key: "vsValueSource",
            render: (h, params) => {
              return h(
                "span",
                params.row.vsValueSource == "1" ? this.$t("module.valueSet.userDefine") : this.$t("module.valueSet.dynamicSql")
              );
            }
          },
          {
            title: this.$t("module.userManage.affiliation"),
            align: "center",
            key: "orgName"
          },
          {
            title: this.$t("common.status"),
            align: "center",
            key: "enabled",
            render: (h, params) => {
              return h(
                "Tag",
                {
                  props: {
                    type: "dot",
                    color: params.row.enabled == 1 ? "blue" : "red"
                  }
                },
                params.row.enabled == 1 ? this.$t("common.valid") : this.$t("common.invalid")
              );
            }
          }
      ]
    },
    searchValueSet() {
      this.$refs["valueSetTable"].load(this.formSearch);
    },
    resetValueSet() {
      this.$refs["vsForm"].resetFields();
      this.$refs["valueSetTable"].load(this.formSearch);
    },
    addOrupdateValueSet(obj) {
      new this.$pageModal(
        AddOrUpdateValueSet,
        {
          props: {
            vsId: obj.vsId,
            version: obj.version
          }
        },
        data => {
          this.searchValueSet();
        }
      );
    },
    valueDefine(vDefine) {
      if (vDefine.vsValueSource == "1") {
        new this.$sidelipPage(
          VDefineSelf,
          {
            props: {
              vsId: vDefine.vsId,
              vsCode: vDefine.vsCode,
              columnType: vDefine.vsType,
            }
          },
          data => {}
        );
      } else {
        new this.$pageModal(
          VDefineSQL,
          {
            props: {
              vsCode: vDefine.vsCode,
              vsName: vDefine.vsName,
              vsOrgId: vDefine.vsOrgId,
              vsParentCode: vDefine.vsParentCode,
              vsType: vDefine.vsType,
              vsValueSource: vDefine.vsValueSource,
              enabled: vDefine.enabled,
              vsParam: vDefine.vsCode,
              vsId: vDefine.vsId
            }
          },
          data => {}
        );
      }
    },
    deleteValueSet() {
      let deleteStr = this.getIdAndVersion();
      if (deleteStr == "") {
        this.$Message.warning({
          content: this.$t("module.valueSet.warning.selestItems"),
          duration: 3
        });
        return;
      }
      new $confirm(`${this.$t("common.confirmDeletion")}`, this).then(() => {
        this.$store
          .dispatch("DeleteValueSet", this.getIdAndVersion())
          .then(res => {
            if (res.statusCode == "0") {
              this.$Message.success({
                content: this.$t("module.valueSet.warning.deleteSuccessfully"),
                duration: 3
              });
              this.searchValueSet();
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 3
              });
              return;
            }
          });
      });
    },
    getIdAndVersion() {
      let list = this.$refs["valueSetTable"].getSelectioned() || [];
      let ids = [];
      for (let vs of list) {
        ids.push({ vsId: vs.vsId, version: vs.version });
      }
      return ids;
    }
  },
  watch: {},
  
  directives: {}
};
</script>
