<template>
  <div>
    <div>
      <span class="mg-r-10">日期格式转换</span>
      <!-- <el-button size="small" type="info" @click="showSelectEle">选择参数</el-button> -->
    </div>
    <div class="text-warning mg-t-10 mg-b-10">
      选择转成过后的格式
    </div>
    <div class="mg-t-10 flex">
      <el-select v-model="formatText" @change="formatChange" allow-create filterable placeholder="请选择" size="medium" style="width:300px" class=" mg-r-20">
        <el-option label="xxxx年xx月xx日" value="xxxx年xx月xx日"></el-option>
        <el-option label="xxxx/xx/xx" value="xxxx/xx/xx"></el-option>
        <el-option label="xxxx-xx-xx" value="xxxx-xx-xx"></el-option>
        <el-option label="xxxx.xx.xx" value="xxxx.xx.xx"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "dateFormat",
  props: {
    formulainfo: {
      type: Object,
      default: function () {
        return {};
      }
    },
    curele: {
      type: Object,
      default: function () {
        return {};
      }
    },
  },
  data(){
    return{
      formatText:'',

      fromatReg:/[xyY]{4}([^xyYmM]*)[xmM]{1,2}([^xmMdD]*)[xdD]{1,2}([^xdD]*)/,
    }
  },
  mounted(){
    //console.log(this.formulainfo.arguments[0])
    //console.log(this.formulainfo.arguments[1])
    let arg1 = this.formulainfo.arguments[1];
    if(arg1){
      let regRes = arg1.match(this.fromatReg);
      //console.log(regRes)
      this.formatText = 'xxxx' + regRes[1] + 'xx' + regRes[2] + 'xx' + regRes[3];
    }

  },
  methods:{
    showSelectEle(){
      this.$set(this.formulainfo,'showSelectEle',!this.formulainfo.showSelectEle);
    },

    formatChange(value){
      if(this.fromatReg.test(value)){
        let regRes = value.match(this.fromatReg);
        //console.log(regRes)
        this.formulainfo.arguments[1] = 'yyyy' + regRes[1] + 'MM' + regRes[2] + 'dd' + regRes[3];
      }else{
        this.$message({
          type: "error",
          message: "格式不正确"
        });
        this.formulainfo.arguments[1] = '';
        this.formatText = '';
      }
      
    },

    setELe(){

    }
  }
}
</script>
<style scoped lang="scss">
  
</style>