<template>
  <basic-container>
    <div v-if="designVisible">

      <avue-form-design :options="options"
                        :aside-left-width="270"
                        :aside-right-width="380"
                        @submit="handleSubmit">
      </avue-form-design>

    </div>
  </basic-container>
</template>

<script>
  import {opStr2opObj} from "../../api/bank/autostruct";

  export default {
    name: "cy-form-design",
    props: {
      callback: {
        type: Function
      },
      option: {
        type: Object
      }
    },
    data(){
      return {
        designVisible: false,
        options: {
          column: [
            {
              label: "銀行號",
              prop: "bankNo",
              span: 24,
              hide: true,
              disabled: true,
              search: true,
              searchSpan: 4,
              rules: [{
                required: true,
                message: "請輸入銀行號",
                trigger: "blur"
              }]
            },
            {
              label: "機構號",
              prop: "orgNo",
              hide: true,
              disabled: true,
              filterable: true,
              dicData: [],
              props: {
                label: "orgNo",
                value: "orgNo"
              },
              rules: [{
                required: true,
                message: "請輸入機構號",
                trigger: "blur"
              }]
            },
            {
              label: "機構名稱",
              prop: "orgName",
              disabled: true,
              rules: [{
                required: true,
                message: "請輸入機構號",
                trigger: "blur"
              }]
            },
            /*{
              label: "填報時間",
              prop: "createTime",
              addDisplay: false,
              editDisplay: false,
              rules: [{
                required: true,
                message: "請輸入填報時間",
                trigger: "blur"
              }]
            },
            {
              label: "填報人",
              prop: "createUserName",
              addDisplay: false,
              editDisplay: false,
              rules: [{
                required: true,
                message: "請輸入填報人",
                trigger: "blur"
              }]
            },*/
            {
              type: 'input',
              label: '姓名',
              span: 12,
              display: true,
              prop: 'name',
              required: true,
              rules: [
                {
                  required: true,
                  message: '姓名必須填寫'
                }
              ],
              size: 'small'
            },
            {
              type: 'input',
              label: '年齡',
              span: 12,
              display: true,
              prop: 'age',
              size: 'small'
            },
            {
              type: 'input',
              label: '手機號',
              span: 12,
              display: true,
              prop: 'phone',
              maxlength: 11,
              size: 'small'
            },
            {
              type: 'input',
              label: '住址',
              span: 12,
              display: true,
              prop: 'address',
              size: 'small'
            },
            {
              type: 'select',
              label: '業務類型',
              span: 24,
              display: true,
              size: 'small',
              prop: 'businessType',
              dicUrl: '/api/blade-system/dict/dictionary?code=business_type',
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              dicMethod: 'get'
            },
            {
              type: 'select',
              label: '印章類型',
              cascaderItem: [],
              span: 24,
              display: true,
              props: {
                label: 'dictValue',
                value: 'dictKey'
              },
              prop: 'sealTypeSearch',
              dicUrl: '/api/blade-system/dict/dictionary?code=seal_type'
            }
          ],
          labelPosition: 'right',
          labelSuffix: '：',
          labelWidth: 120,
          gutter: 0,
          menuBtn: true,
          submitBtn: true,
          submitText: '提交',
          emptyBtn: true,
          emptyText: '清空',
          menuPosition: 'center'
        },
      }
    },
    mounted() {
      if (this.option){
        this.options = opStr2opObj(this.option);
      }
      this.designVisible = true;
    },
    methods: {
      handleSubmit(value){
        if (!value){
          return;
        }
        if (value.column.length > 30){
          this.$message.warning("表單字段不能超過30個！");
          return;
        }
        let jsonStr = JSON.stringify(value, (k,v) => {
          if(typeof v === "function"){
            return v.toString();
          }
          return v;
        })
        this.callback(jsonStr);
      },
    }
  }
</script>

<style scoped>

</style>
