<template>
  <section class="view-component">
    <section class="meta-form">
      <s-code-editor v-model="textJSON" lang="json"></s-code-editor>
      <s-form
        ref="FormRef"
        v-model="model"
        :props="state.formProps"
        :fields="state.fields"
        :options="state.formOptions"
        @change="changeValue"
      >
        <template #diy1>1231321</template>
      </s-form>
      <el-button @click="submit">提交</el-button>
      <el-button @click="reset">重置</el-button>
    </section>
  </section>
</template>
<script lang="ts" setup>
import { reactive, ref, computed } from 'vue'
import DiyInput from '../../GroupForm/demo/diy-input.vue'

const textJSON = computed({
  get () {
    return JSON.stringify(model.value, null, '\t')
  },
  set (value) {
    model.value = JSON.parse(value)
  }
})

const model = ref({
  serviceLife: 123
})
const state = reactive<any>({
  fields: [
    {
      label: '整改状态',
      key: 'status',
      type: 'radioGroup',
      options: [{label: '待整改', value: 0}, {label: '已整改', value: 1}],
      props: {
        clearable: true,
        placeholder: '请选择',
        rules: [{
          required: true,
          message: '整改状态是必填的',
          trigger: 'change'
        }]
      }
    },
    {
      show ({ getItemValue }) {
        return getItemValue&&getItemValue({ key: 'status' }) === 0
      },
      label: '整改通知',
      key: 'annex',
      type: 'upload',
      props: {
        size: 10,
        accept: '.pdf,.doc,.docx',
        tips: '支持pdf、doc格式文件，不超过10M'
      }
    },
    {
      show ({ getItemValue }) {
        return getItemValue&&getItemValue({ key: 'status' }) === 0
      },
      label: '退款回单',
      key: 'annex1',
      type: 'upload',
      props: {
        size: 10,
        accept: '.pdf, .png, jpg, .jpeg',
        tips: '支持PDF、PNG、JPG格式文件，不超过10M'
      }
    },
    {
      show ({ getItemValue }) {
        return getItemValue&&getItemValue({ key: 'status' }) === 0
      },
      label: '收款回单',
      key: 'annex2',
      type: 'upload',
      props: {
        size: 10,
        accept: '.pdf, .png, .jpg, .jpeg',
        tips: '支持PDF、PNG、JPG格式文件，不超过10M'
      }
    },
    {
      show ({ getItemValue }) {
        return getItemValue&&getItemValue({ key: 'status' }) === 1
      },
      label: '整改通知',
      key: 'annex',
      type: 'upload',
      props: {
        size: 10,
        required: true,
        accept: '.pdf,.doc,.docx',
        tips: '支持pdf、doc格式文件，不超过10M',
        rules: [{
          required: true,
          message: '整改通知是必填的',
          trigger: 'change'
        }]
      }
    },
    {
      show ({ getItemValue }) {
        return getItemValue&&getItemValue({ key: 'status' }) === 1
      },
      label: '退款回单',
      key: 'annex1',
      type: 'upload',
      props: {
        size: 10,
        accept: '.pdf, .png, jpg, .jpeg',
        tips: '支持PDF、PNG、JPG格式文件，不超过10M',
        rules: [{
          required: true,
          message: '退款回单是必填的',
          trigger: 'change'
        }]
      }
    },
    {
      show ({ getItemValue }) {
        return getItemValue&&getItemValue({ key: 'status' }) === 1
      },
      label: '收款回单',
      key: 'annex2',
      type: 'upload',
      props: {
        size: 10,
        accept: '.pdf, .png, .jpg, .jpeg',
        tips: '支持PDF、PNG、JPG格式文件，不超过10M',
        rules: [{
          required: true,
          message: '收款回单是必填的',
          trigger: 'change'
        }]
      }
    },
  ],
  formProps: {
    labelWidth: 180
  },
  formOptions: {
    grid: {
      cols: 6
    }
  }
})
const FormRef = ref()

function submit () {
  FormRef.value.validate().then(vali => {
    console.log(vali)
  }).catch(err => {
    console.log(err)
  })
}

function reset () {
  FormRef.value.resetValue()
}

function changeValue (key: string, value: any) {
  console.log(key, value)
}
</script>
<style lang="scss" scoped>
.sel-code-editor {
  margin-bottom: 20px;
}
</style>
