<template>
  <div>
    <form data-vv-scope="form1" v-form name="online-form">
      <table class="form-table" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <th class="group-th" colspan="4">基础控件演示</th>
          </tr>
          <tr v-permit="4">
            <th width="10%">htTimeSelect：</th>
            <td width="40%">
                <ht-file
                v-model="data.xxb.fjzl"
                :previewable="false"
                permission="b"
                :column-show="{fileType:false,fileSize:false}"
                :size="100"
                :limit="2"
                :validate="{'required':true}"
                :propConfList='[{"name":"prop1","desc":"备注"}]'
              />
            </td>

          </tr>
         
        </tbody>
      </table>
    
    </form>
    <pre>{{data}}</pre>
    <el-button
      style="margin-top: 20px"
      :loading="loading"
      size="small"
      type="primary"
      @click="submit"
    >提交</el-button>
  </div>
</template>
<script>
import utils from "@/utils.js";
import service from "@/service.js";
import { Message } from "element-ui";
import { setTimeout } from "timers";
import { Promise } from "q";
import MyDemension from "@/demo/MyDemension.vue";
import MyRoleSelector from "@/demo/MyRoleSelector.vue";
import MyUserSelector from "@/demo/MyUserSelector.vue";

export default {
  name: "basic-form",
  components: {
    MyDemension,
    MyRoleSelector,
    MyUserSelector
  },
  data() {
    return {
      loading: false,
      data: {
        xxb: {
          timeselect: "08:15",
          timeselect2: "08:30",
          timepicker: null,
          timepicker2: "2024-06-16 20:09:38",
          htCheckbox: "",
          htCheckbox2: "1,3",
          zy: "1,2",
          zyc: "1,自定义",
          zyb: "1,2,3,4",
          zyd: "2",
          xm: "张三",
          xb: false,
          ah: "1,3",
          csrq: "1986-6-29",
          bysj: "2008-6-30",
          szwd: "二维,三维，四维",
          roles: "行政角色",
          second: 3720,
          second2: 2200,
          fjzl:
            '[{"name":"更新日志.txt","size":12764,"percentage":100,"status":"success","state":"success"}]',
          sub_bxxx: []
        }
      },
      permission: {
        fields: {
          grxx: {
            xm: "r",
            xb: "w",
            ah: "w"
          }
        }
      },
      validate: {
        xm: null
      },
      options: {
        ah: [
          { key: "1", value: "爬山" },
          { key: "2", value: "游泳" },
          { key: "3", value: "美食" },
          { key: "4", value: "下棋" }
        ],
        xb: [
          { code: 0, desc: "男士", disabled: true },
          { code: true, desc: "女士" },
          { code: false, desc: "无性" }
        ],
        zy: null,
        zy2: [
          { key: "1", value: "医生" },
          { key: "2", value: "护士" },
          { key: "3", value: "老师" },
          { key: "4", value: "教授" }
        ]
      }
    };
  },
  methods: {
    readonlyFormat:function(value){
      return value + "33元";
    },
    callback: value => {
      return value == "test";
    },
    handleSelectOptions: function(query) {
      let _me = this;
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          _me.options.zy = _me.options.zy2;
          resolve();
        }, 1000);
      });
    },
    clearSelectOptions: function() {
      this.$set(this.options, "zy", []);
    },
    move: function(ary, item, direct) {
      this.data.xxb.sub_bxxx = utils.arrayMove(ary, item, direct);
    },
    submit: function() {
      this.loading = true;
      setTimeout(() => {
        utils
          .validateForm(this, "form1")
          .then(r => {
            Message.success(JSON.stringify(this.data));
          })
          .catch(items => {
            Message.error(`有${items.length}个字段未通过校验，无法提交表单。`);
          })
          .finally(() => {
            this.loading = false;
          });
      }, 500);
    }
  }
};
</script>
