<template>
    <div>
        <Form :model="formSearch" :rules="rules" ref="vsForm" :label-width="85">
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                <Form-item prop="vsiKey" :label="$t('module.valueSet.key')">
                <Input  type="text" v-model="formSearch.vsiKey" style="width: 242.99px" :readonly="readOnly"/>
                </Form-item>
                </Col>
                <Col span="12">
                <Form-item prop="vsiValue" :label="$t('module.valueSet.value')">
                    <Input type="text" v-model="formSearch.vsiValue" style="width: 242.99px"></Input>
                    <Icon class="global-icon" v-show="isShow"  @click.native="nameEdit"></Icon> 
                </Form-item>
                </Col>           
            </Row>
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                <Form-item  :label="$t('module.valueSet.parentValue')">
                    <Select v-model="vsiParentKey" size="small"  @on-change="langChange" :disabled="noEdit" style="width: 243px; height: 32px">
                        <Option v-for="item in parentValueList" :title="item.vsiValue" :value="item.vsiKey" :key="item.vsiKey">{{item.vsiValue}}</Option>
                    </Select>
                </Form-item>
                </Col>
                <Col span="12">
                <Form-item prop="enabled" :label="$t('common.status')">
                <Select v-model="formSearch.enabled" size="small" style="width: 243px; height: 32px" clearable>
                    <Option value="1">{{$t("common.valid")}}</Option>
                    <Option value="0">{{$t("common.invalid")}}</Option>
                </Select>
                </Form-item>
                </Col> 
            </Row>
            <Row :gutter="20" class="code-row-bg">
                <Col span="12">
                <Form-item prop="vsiStartDate" :label="$t('module.valueSet.startDate')">
                    <DatePicker type="date" transfer="true" ref="vsiStartDate" :placeholder="$t('module.valueSet.selectDate')" style="width: 243px;height:32px;" :value="formSearch.vsiStartDate" size="small" @on-change="changeEffectBegin" @on-clear="clearEffectBegin"></DatePicker>
                </Form-item>
                </Col>
                <Col span="12">
                <Form-item prop="vsOrgDesc" :label="$t('module.valueSet.endDate')">
                    <DatePicker type="date" transfer="true" ref="vsiEndDate" :placeholder="$t('module.valueSet.selectDate')" style="width: 243px;height:32px;" :value="formSearch.vsiEndDate" size="small" @on-change="changeEffectEnd" @on-clear="clearEffectEnd"></DatePicker>                
                </Form-item>
                </Col>
            </Row>
        </Form>
    </div>
</template>
<script>
import VsGlobal from './VsGlobal.vue'
    export default{
        components:{
            
        },
        props: {
            currentVsCode: {
                type: String,
                default() {
                    return "";
                }
            },
            vsId: {
                type: String,
                default() {
                    return "";
                }
            },
            vsType: {
                type: String,
                default() {
                    return "";
                }
            },
        },
        data(){
            return{
                formSearch: {
                    vsiKey: "",
                    vsiValue: "",
                    vsiStartDate: "",
                    vsiEndDate: "",
                    enabled: "1",
                },
                parentValueList: [],
                version: "",
                isShow: false,
                noEdit: false,
                readOnly: false,
                rules: {
                    vsiKey: [{ required: true, message: this.$t("module.valueSet.warning.enterKey"), trigger: "blur" }],
                    vsiValue: [{ required: true, message: this.$t("module.valueSet.warning.enterValue"), trigger: "blur" }],
                    enabled: [{ required: true, message: this.$t("module.valueSet.warning.enterStatus"), trigger: "blur" }],
                },
            }
        },
        computed:{

        },
        created:function(){
            if(this.vsType == this.$t("module.valueSet.independent")){
                this.noEdit = true
            }
            //获取父值下拉列表
            $store.dispatch("GetParentValue", {vsCode:this.currentVsCode}).then((response) => {
                for(const key in response.dataResult){
                    if(response.dataResult.hasOwnProperty(key)){
                        this.parentValueList.push({ "vsiKey": response.dataResult[key].vsiKey, "vsiValue": response.dataResult[key].vsiValue})
                    }
                }
            });
            if(this.vsId){
                this.isShow = true;
                this.noEdit = true;
                this.readOnly = true;
                this.$emit("SetTitle", this.$t("common.edit"));
                //获取要编辑的表单信息
                $store.dispatch("GetVSelfDefineInfo", this.vsId).then((response) => {
                    this.formSearch.vsiKey = response.dataResult.vsiKey;
                    this.formSearch.vsiValue = response.dataResult.vsiValue;
                    this.formSearch.vsiStartDate = this.getDateString(response.dataResult.vsiStartDate);
                    this.formSearch.vsiEndDate = this.getDateString(response.dataResult.vsiEndDate);
                    this.formSearch.enabled = String(response.dataResult.enabled);
                    this.vsiParentKey = response.dataResult.vsiParentKey;
                    this.version = response.dataResult.version;
                })
            }else{
                this.$emit("SetTitle", this.$t("common.create"));
            }
            this.$emit("SetPageSize", 700);
            this.$emit('SetPageActions', [
                {
                    text: this.$t("common.save"),
                    theme: "success",
                    icon: "checkmark-round",
                    handle: this.save,
                }
            ]);
        },
        beforeMount:function(){

        },
        mounted:function(){

        },
        beforeDestroy:function(){

        },
        destroyed:function(){

        },
        methods:{
            save(){
                this.$refs["vsForm"].validate(valid => {
                if(valid){
                //通过vsId判断save方法是添加还是编辑操作
                if(this.vsId){
                    $store.dispatch("UpdateVSelfDefine", {
                        vsCode: this.currentVsCode,
                        vsiKey: this.formSearch.vsiKey,
                        vsiValue: this.formSearch.vsiValue,
                        enabled: this.formSearch.enabled,
                        vsiStartDate: this.formSearch.vsiStartDate,
                        vsiEndDate: this.formSearch.vsiEndDate,
                        vsiParentKey: this.vsiParentKey,
                        version: this.version,
                        vsiId: this.vsId
                    }).then((response) => {
                        if(response.statusCode == "0"){
                            this.$Message.success({
                                content: this.$t("module.valueSet.warning.editSuccess"),
                                duration: 3
                            })
                            this.$emit("Close");
                        }else{
                            this.$Message.warning({
                                content: response.msg,
                                duration: 3
                            })
                        }
                    })
                }else{
                    $store.dispatch("AddVSelfDefine", {
                        vsCode: this.currentVsCode,
                        vsiKey: this.formSearch.vsiKey,
                        vsiValue: this.formSearch.vsiValue,
                        enabled: this.formSearch.enabled,
                        vsiStartDate: this.formSearch.vsiStartDate,
                        vsiEndDate: this.formSearch.vsiEndDate,
                        vsiParentKey: this.vsiParentKey
                    }).then((response) => {
                        if(response.statusCode == "0"){
                            this.$Message.success({
                                content: this.$t("module.valueSet.warning.createSuccess"),
                                duration: 3
                            })
                            this.$emit("Close");
    
                        }else{
                            this.$Message.warning({
                                content: response.msg,
                                duration: 3
                            })
                        }
                    })
                 }
                }else{
                    this.$Message.error({
                    content: this.$t("module.valueSet.warning.formValidateFailed"),
                    duration: 3
                })
                }
                })
            },
            cancel(){
                this.$emit("Close")
            },
            nameEdit(){
                new this.$pageModal(
                    VsGlobal,
                    {
                        props: {
                            vsiId: this.vsId
                        }
                    },(data) => {
                        //编辑名称后刷新当前页面
                        for(const key in data){
                            if(window.localStorage.language == data[key].langCode){
                            this.formSearch.vsiValue = data[key].vsiValue;//编辑名称后刷新右侧功能详情
                            }
                        }
                    }
                )
            },
            changeEffectBegin(date) {
            if (this.formSearch.vsiEndDate && date && new Date(date) > new Date(this.formSearch.vsiEndDate)) {
                this.formSearch.vsiStartDate = "";
                this.$refs["vsiStartDate"].handleClear();
                this.$Message.warning({
                content: this.$t("module.valueSet.warning.dateCompare"),
                duration: 3
                });
                return;
            }
            this.formSearch.vsiStartDate = date;
            },
            clearEffectBegin() {
            this.formSearch.vsiStartDate = "";
            },
            changeEffectEnd(date) {
            if (
                this.formSearch.vsiStartDate &&
                date &&
                new Date(date) < new Date(this.formSearch.vsiStartDate)
            ) {
                this.formSearch.vsiEndDate = "";
                this.$refs["vsiEndDate"].handleClear();
                this.$Message.warning({
                content: this.$t("module.valueSet.warning.dateCompare"),
                duration: 3
                });
                return;
            }

            this.formSearch.vsiEndDate = date;
            },
            clearEffectEnd() {
            this.formSearch.vsiEndDate = "";
            },
            getDateString(DateStr) {
            if (
                DateStr == undefined ||
                DateStr == null ||
                DateStr == "" ||
                DateStr.trim() == ""
            ) {
                return "";
            }
            return DateStr.split(" ")[0];
            },
        },
        watch:{

        },
        directives:{

        }
    }
</script>
