<template>
  <div :class="[prefixCls, 'flex']">
    <mai-tab :active="current.id" :data-source="tabs" @change="handleChange"/>
    <div :class="`${prefixCls}-content`">
      <h2>{{ current.title }}</h2>
      <el-row>
        <el-col :span="12">
          <el-form v-if="current.type === 1" ref="form" :model="formData" :rules="rules1"
                   label-position="left"
                   label-width="120px">
            <el-form-item prop="country" label="通报国家">
              <el-input v-model="formData.country" placeholder="全部"/>
            </el-form-item>
            <el-form-item prop="number" label="通报号">
              <el-input v-model="formData.number" placeholder="请输入通报号"/>
            </el-form-item>
            <el-form-item prop="title" label="通报标题">
              <el-input v-model="formData.title" placeholder="请输入通报标题"/>
            </el-form-item>
            <el-form-item prop="content" label="评议意见">
              <el-input v-model="formData.content" type="textarea" row="5"
                        placeholder="请输入评议意见"/>
            </el-form-item>
            <el-form-item label="附件">
              <el-upload
                v-model:file-list="formData.fileList"
                action="/api/common/upload"
                :http-request="handleUpload"
                accept=".jpg,.png,.bmp,.jpeg,.gif,.webp,.zip,.rar,.wav,.mp4,.mp3,.webm,.pdf"
              >
                <div class="mai-upload">
                  <el-icon size="68">
                    <el-icon-plus></el-icon-plus>
                  </el-icon>
                  <div style="margin-top: 8px">点击上传</div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item prop="author" label="提交人">
              <el-input v-model="formData.author" placeholder="请输入提交人"/>
            </el-form-item>
            <el-form-item prop="contact" label="联系方式">
              <el-input v-model="formData.contact" placeholder="请输入联系方式"/>
            </el-form-item>
            <el-form-item label-width="500px">
              <el-button @click="handleSubmit" type="primary">提交</el-button>
              <!--              <el-button style="margin-left: 10px">关闭</el-button>-->
            </el-form-item>
          </el-form>
          <el-form v-else ref="form" :model="consultFormData" :rules="rules2" label-position="left"
                   label-width="120px">
            <el-form-item prop="title" label="标题">
              <el-input v-model="consultFormData.title" placeholder="请输入标题"/>
            </el-form-item>
            <el-form-item prop="content" label="内容">
              <el-input v-model="consultFormData.content" type="textarea" placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="附件">
              <el-upload
                v-model:file-list="consultFormData.fileList"
                action="/api/common/upload"
                :http-request="handleUpload"
                accept=".jpg,.png,.bmp,.jpeg,.gif,.webp,.zip,.rar,.wav,.mp4,.mp3,.webm,.pdf"
              >
                <div class="mai-upload">
                  <el-icon size="68">
                    <el-icon-plus></el-icon-plus>
                  </el-icon>
                  <div style="margin-top: 8px">点击上传</div>
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item prop="author" label="提交人">
              <el-input v-model="consultFormData.author" placeholder="请输入提交人"/>
            </el-form-item>
            <el-form-item prop="contact" label="联系方式">
              <el-input v-model="consultFormData.contact" placeholder="请输入联系方式"/>
            </el-form-item>
            <el-form-item label-width="500px">
              <el-button @click="handleSubmit" type="primary">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {randomUUID} from '~~/utils';
definePageMeta({
  name: '通报评议',
  headerHost: false,
  order: 7,
})
useHead({
  title:'通报评议'
})
const {prefixCls} = useDesign('mai-wrap');
const {setBannerTitle} = useAppStore();
const {commonApi, commentApi} = useApi()
const tabs = ref([
  {
    name: '通报评议',
    id: randomUUID(),
    children: [
      {name: "我要评议", id: randomUUID(), type: 1},
      {name: "我要咨询", id: randomUUID(), type: 2},
    ],
  },
]);
const formData = ref({
  fileList: [],
  country: '',
  number: '',
  title: '',
  content: '',
  attachfile: '',
  author: '',
  contact: '',
});
const consultFormData = ref({
  fileList: [],
  title: '',
  content: '',
  attachfile: '',
  author: '',
  contact: '',
})
const rules1 = ref({
  country: {message: '请输入通报国家', required: true, trigger: 'blur'},
  number: {message: '请输入通报号', required: true, trigger: 'blur'},
  title: {message: '请输入通报标题', required: true, trigger: 'blur'},
  content: {message: '请输入评议意见', required: true, trigger: 'blur'},
  author: {message: '请输入提交人', required: true, trigger: 'blur'},
  contact: {message: '请输入联系方式', required: true, trigger: 'blur'},
})
const rules2 = ref({
  title: {message: '请输入标题', required: true, trigger: 'blur'},
  content: {message: '请输入意见', required: true, trigger: 'blur'},
  author: {message: '请输入提交人', required: true, trigger: 'blur'},
  contact: {message: '请输入联系方式', required: true, trigger: 'blur'},
})
const form = ref(null);
const current = ref(tabs.value[0].children[0]);
console.log('_tabs[0].children[0].id>>>', tabs.value[0].children[0].id);

function handleChange(data) {
  current.value = data;
  setBannerTitle(data.title);
}

handleChange(tabs.value[0].children[0]);

function handleUpload(options) {
  if (current.value.type === 1) {
    const index = formData.value.fileList.findIndex(i => i.uid === options.file.uid);
    commonApi.handleUpload(options.file).then(res => {
      formData.value.fileList.splice(index, 1, {
        ...formData.value.fileList[0],
        url: res.data.fullurl
      })
    }).catch(res => {
      if (!res.data) {
        formData.value.fileList.splice(index, 1)
      }
    })
  }else {
    const index = consultFormData.value.fileList.findIndex(i => i.uid === options.file.uid);
    commonApi.handleUpload(options.file).then(res => {
      consultFormData.value.fileList.splice(index, 1, {
        ...consultFormData.value.fileList[0],
        url: res.data.fullurl
      })
    }).catch(res => {
      if (!res.data) {
        consultFormData.value.fileList.splice(index, 1)
      }
    })
  }

}

function handleSubmit() {
  form.value.validate((val) => {
    if (val) {
      console.log(formData.value)
      console.log('val: >>>>>', val)
      const origin = import.meta.env.VITE_GLOB_ORIGIN
      if (current.value.type === 1) {
        const params = Object.assign({}, formData.value)
        params.attachfile = params.fileList.map(it=> it.url.replace(origin, '')).join(',')
        delete params.fileList;
        commentApi.submitComment(params).then(()=> {ElMessage.success('提交成功'); form.value.resetFields(); formData.value.fileList = []})
      }else {
        const params = Object.assign({}, consultFormData.value)
        params.attachfile = params.fileList.map(it=> it.url.replace(origin, '')).join(',')
        delete params.fileList;
        commentApi.submitConsult(params).then(()=> {ElMessage.success('提交成功'); form.value.resetFields(); consultFormData.value.fileList = []})
      }
    }
  })
}
</script>

<style scoped lang="scss">
$prefix-cls: '#{$name-prefix}-mai-wrap';

.#{$prefix-cls} {
  :deep(.el-form) {
    padding: 20px 0 0 20px;
    margin: -36px 0 0 -20px;
    border-left: 1px solid #ddd;

    .el-form-item__label {
      font-size: 20px;
      height: 60px;
      line-height: 60px;
    }

    .el-input__wrapper, .el-textarea {
      height: 60px;
      font-size: 20px;
      //border: 1px solid #02294F;
      border-radius: 10px;
      box-shadow: 0 0 0 1px #02294F;

      //&:focus{;}
    }

    .is-error .el-input__wrapper,
    .is-error .el-textarea {
      box-shadow: 0 0 0 1px var(--el-color-danger);
    }

    .el-textarea, .el-textarea__inner {
      //box-shadow: unset;
      height: 300px;
      border-radius: 10px;
      overflow: hidden;
      resize: none;
    }

    .el-upload-list-picture-card-container {

      width: 150px;
      height: 150px;
    }

    .el-upload {
      border: unset;
      width: 150px;
      height: 150px;
    }

    .el-button {
      width: 150px;
      height: 60px;
      font-size: 20px;
      border-radius: 10px;

      &--primary {
        background: #022950;
      }
    }

    .mai-upload {
      width: 100%;
      height: 100%;
      border-radius: 8px;
      border: 1px solid #022950;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      user-select: none;
      font-size: 16px;
      color: #9a9a9a;

      .anticon {
        font-size: 60px !important;
      }
    }
  }
}
</style>
