<template>
  <div class="form">
    <el-form
      ref="elForm"
      :model="form"
      :rules="rules"
      label-position="top"
      size="small"
    >
      <el-form-item
        v-for="(value, key) in form"
        :prop="key"
        :label="formLabel[key]"
      >
        <template v-if="key === 'meeting_id'">
          <el-input
            :value="meetingInput"
            clearable
            suffix-icon="el-icon-arrow-down"
            readonly
            :placeholder="'请选择' + formLabel[key]"
            @focus="modalShow = true"
          >
          </el-input>
        </template>
        <template v-else-if="key === 'fujian'">
          <el-upload
            :action="action"
            :before-upload="uploadBefore"
            :on-success="uploadSuccess"
            :on-remove="uploadRemove"
            :limit="1"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">大小不超过5Mb</div>
          </el-upload>
        </template>
        <template v-else-if="key === 'remark'">
          <el-input
            v-model="form[key]"
            clearable
            type="textarea"
            :autosize="{ minRows: 3 }"
            :placeholder="'请输入' + formLabel[key]"
          >
          </el-input>
        </template>
        <template v-else>
          <el-input
            v-model="form[key]"
            clearable
            :placeholder="'请输入' + formLabel[key]"
          >
          </el-input>
        </template>
      </el-form-item>
      <el-form-item style="padding-top: 10px">
        <div style="display: flex">
          <Button :loading="isLoading" long type="primary" @click="submit"
            >确  认</Button
          >
        </div>
      </el-form-item>
    </el-form>

    <Modal
      :fullscreen="fullscreen"
      v-model="modalShow"
      title="展会选择"
      @on-ok="modalOk"
    >
      <Table
        :row-class-name="rowClassName"
        size="small"
        highlight-row
        :data="meetings"
        :columns="columns"
        @on-current-change="pickMeeting"
      ></Table>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <Page
          :total="meetingTotal"
          :page-size="meetingSelect.page_size"
          size="small"
          show-total
          @on-change="e => {
            meetingSelect.page = e;
            getMeetings();
          }"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import { meetingList, exhibitorSave } from "@/api/h5";
export default {
  data() {
    return {
      clientW: document.body.clientWidth,
      fileList: [],
      action: process.env.VUE_APP_UPLOAD_API,

      isLoading: false,
      form: {
        meeting_id: "",
        fujian: "",
        remark: "",
      },
      formLabel: {
        meeting_id: "展会",
        fujian: "附件",
        remark: "备注",
      },
      rules: {
        meeting_id: [
          {
            required: true,
            message: "请选择展会",
            trigger: "change",
          },
        ],
        fujian: [
          {
            required: true,
            message: "请上传附件",
            trigger: "blur",
          },
        ],
      },

      modalShow: false,
      meetingTotal: 0,
      meetings: [],
      columns: [
        {
          type: "index",
          width: 20,
          title: "\r",
          align: "center",
        },
        {
          key: "name",
          title: "名称",
        },
        {
          key: "start_date",
          title: "开始时间",
          width: 100,
          align: "center",
        },
        {
          key: "end_date",
          title: "结束时间",
          width: 100,
          align: "center",
        },
      ],
      meetingSelect: {
        page_size: 10,
        page: 1,
        sort_name: "start_date",
      },
      pickedMeeting: {},
    };
  },
  methods: {
    modalOk() {
      this.pickedMeeting.id
        ? (this.form.meeting_id = this.pickedMeeting.id)
        : "";
    },

    pickMeeting(cur, pre) {
      if (new Date().getTime() > new Date(cur.end_date).getTime()) {
        this.pickedMeeting = pre;
      } else {
        this.pickedMeeting = cur;
      }
    },

    rowClassName(row, index) {
      if (new Date().getTime() > new Date(row.end_date).getTime()) {
        return "tb-row-disabled";
      } else {
        return "";
      }
    },

    uploadBefore(file) {
      if (file.size / 1000 / 1000 > 5) {
        this.$message({
          type: "warning",
          message: "上传大小超过5Mb！",
        });
        return false;
      }
    },
    uploadSuccess(res) {
      this.form.fujian = res.id;
    },
    uploadRemove () {
      this.form.fujian = '';
    },

    async getMeetings() {
      const res = await meetingList(this.meetingSelect);
      this.meetings = res.data;
      this.meetingTotal = res.total;
    },

    submit () {
      this.$refs['elForm'].validate(res => {
        if (res) {
          this.isLoading = true;
          exhibitorSave(this.form).then(res => {
            this.isLoading = false;
            this.$message({
              type: 'success',
              message: '上传成功'
            })

            this.fileList = [];
            this.$refs['elForm'].resetFields();
            this.$emit('success');
          })
        }
      })
    }
  },
  computed: {
    fullscreen() {
      return this.clientW < 768;
    },
    meetingInput() {
      return this.form.meeting_id ? this.pickedMeeting.name : "";
    },
  },
  created() {
    window.onresize = () => {
      this.clientW = document.body.clientWidth;
    };

    this.getMeetings();
  },
  destroyed() {
    window.onresize = null;
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form--label-top .el-form-item__label {
  line-height: 20px;
  font-size: 13px;
}
</style>
<style>
.ivu-table .tb-row-disabled td {
  background: #aaac !important;
  color: #eee;
  text-shadow: 1px 1px #999;
  cursor: not-allowed;
}
</style>
