<template>
  <div>
    <card-container>
      <vxe-toolbar export print ref="toolbar">
        <template #buttons>
          <el-button
            icon="el-icon-plus"
            type="primary"
            size="small"
            @click="isShowAdd = true"
            >新增</el-button
          >
          <el-button
            icon="el-icon-search"
            type="primary"
            plain
            size="small"
            @click="getList"
            >搜索</el-button
          >
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="table"
        stripe
        style="margin-top: 10px"
        :loading="loading"
        keep-source
        show-overflow
        :column-config="{ resizable: true }"
        :edit-rules="validRules"
        :edit-config="{
          trigger: 'manual',
          mode: 'row',
          showStatus: true,
          isHover: true,
          autoClear: false,
        }"
        :align="allAlign"
        :data="tableData"
      >
        <vxe-column type="seq" width="58" align="center" />
        <vxe-column
          field="title"
          width="170"
          title="会议标题"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />
        <vxe-column
          field="start_time"
          width="180"
          title="会议开始时间"
          :edit-render="{}"
        >
          <template #edit="{ row }">
            <el-date-picker style="width: 100%;" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="row.start_time"></el-date-picker>
          </template>
        </vxe-column>
        <vxe-column
          field="end_time"
          width="180"
          title="会议结束时间"
          :edit-render="{}"
        >
          <template #edit="{ row }">
            <el-date-picker style="width: 100%;" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" v-model="row.end_time"></el-date-picker>
          </template>
        </vxe-column>
        <vxe-column
          field="address"
          width="170"
          title="会议地址"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />
        <vxe-column
          field="room_id"
          width="180"
          title="会议室"
          :edit-render="{ name: 'select', options: rooms, optionProps: { value: 'id', label: 'name' } }"
        >
        </vxe-column>
        <vxe-column
          field="content"
          min-width="200"
          title="主要议程"
          :edit-render="{ name: 'input', attrs: { type: 'text' } }"
        />
        <vxe-column
          field="users"
          width="220"
          title="参会用户"
          :formatter="({ cellValue }) => (cellValue && cellValue instanceof Array) ? cellValue.map(i => i.name).toString() : ''"
          :edit-render="{}"
        >
          <template #edit="{ row }">
            <user-picker v-model="row.user_ids" multiple style="width: 100%;" />
          </template>
        </vxe-column>
        <vxe-column field="files_details" title="附件" min-width="180" header-align="center" align="left" :edit-render="{}">
          <template #default="{ row }">
            <vxe-upload v-model="row.files_details" readonly progress-text="{percent}%" :more-config="{ maxCount: 1, layout: 'horizontal' }" :show-button-text="false" />
          </template>
          <template #edit="{ row }">
            <vxe-upload v-model="row.files_details" progress-text="{percent}%" :more-config="{ maxCount: 1, layout: 'horizontal' }" :limit-size="20" :show-button-text="false" :upload-method="({file}) => uploadMethod(file, row)" />
          </template>
        </vxe-column>
        <vxe-column field="meeting_status" title="审核状态" align="center" :formatter="({ cellValue }) => ['待审核','通过','未通过'][cellValue]" width="100" />
        <vxe-column field="operate" title="操作" min-width="220">
          <template #default="{ row }">
            <template v-if="isActiveStatus(row)">
              <el-button size="small" type="primary" @click="saveRowEvent(row)"
                >保存</el-button
              >
              <el-button
                size="small"
                type="primary"
                plain
                @click="cancelRowEvent(row)"
                >取消</el-button
              >
            </template>
            <template v-else>
              <el-button size="small" type="primary" @click="examine(row)"
              >审核</el-button
              >
              <el-button size="small" type="warning" @click="editRowEvent(row)"
                >编辑</el-button
              >
              <el-button
                size="small"
                type="danger"
                @click="destroyRowEvent(row)"
                >删除</el-button
              >
            </template>
          </template>
        </vxe-column>
      </vxe-table>

      <el-pagination
        style="margin-top: 10px"
        :current-page.sync="select.page"
        :page-sizes="[20, 30, 40, 50]"
        :page-size.sync="select.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="
          (e) => {
            select.page_size = e;
            select.page = 1;
            getList();
          }
        "
        @current-change="
          (e) => {
            select.page = e;
            getList();
          }
        "
      />
    </card-container>
    <add-meeting
      ref="AddMeeting"
      :rooms="rooms"
      :type="isShowType"
      :is-show.sync="isShowAdd"
      @refresh="getList"
    />
  </div>
</template>

<script>
import { deepCopy } from "@/utils";
import { destroy, index, save } from "@/api/meeting";
import { index as meetingRoomIndex } from "@/api/meetingRoom";
import AddMeeting from "./components/AddMeeting.vue";
import UserPicker from "@/components/UserPicker/index.vue";
import axios from "axios";
import {getToken} from "@/utils/auth";

export default {
  components: {
    AddMeeting,
    UserPicker
  },
  data() {
    return {
      examineKey: 0,
      isShowAdd: false,
      isShowType: 'add',
      rooms: [],

      loading: false,
      select: {
        page: 1,
        page_size: 20,
        show_relation: ['users']
      },
      total: 0,
      allAlign: null,
      tableData: [],
      validRules: {},
      form: {
        id: "",
        title: "",
        start_time: "",
        end_time: "",
        address: "",
        room_id: "",
        content: "",
        meeting_status: "",
        files: [],
        user_ids: [],
        files_details: []
      },
    };
  },
  computed: {
    isActiveStatus() {
      return function (row) {
        if (this.$refs["table"]) {
          return this.$refs["table"].isEditByRow(row);
        }
      };
    },
  },
  created() {
    this.getList();
    this.getRooms();
  },
  mounted() {
    this.bindToolbar()
  },
  methods: {
    uploadMethod(file, row) {
      const formData = new FormData()
      formData.append('file', file)
      return axios.post(process.env.VUE_APP_UPLOAD_API, formData, {
        headers: {
          Authorization: `Bearer ${getToken()}`,
        }
      }).then((response) => {
        if (response.status === 200 && !response.data.code) {
          if (!(this.form['files_details'] instanceof Array)) {
            this.form['files_details'] = []
          }
          this.form['files_details'].push({
            response: response.data.data,
            name: response.data.data.original_name,
            url: response.data.data.url
          })
        } else {
          this.$message.error("上传失败")
        }
      })
    },
    bindToolbar() {
      this.$nextTick(() => {
        if (this.$refs["table"] && this.$refs["toolbar"]) {
          this.$refs["table"].connect(this.$refs["toolbar"]);
        }
      });
    },

    editRowEvent(row) {
      if (this.$refs["table"]) {
        this.$refs["table"].setEditRow(row);
      }
    },
    cancelRowEvent(row) {
      if (this.$refs["table"]) {
        this.$refs["table"].clearEdit().then(() => {
          // 还原行数据
          this.$refs["table"].revertData(row);
        });
      }
    },

    async getRooms() {
      try {
        this.rooms = (await meetingRoomIndex({
          page: 1,
          page_size: 9999,
        })).data
      } catch (err) {
        console.error(err);
      }
    },


    async getList() {
      this.loading = true;
      try {
        const res = await index(this.select);
        this.tableData = res.data;
        this.total = res.total;
        this.loading = false;
      } catch (err) {
        console.error(err);
        this.loading = false;
      }
    },

    async saveRowEvent(row) {
      try {
        const errMap = await this.$refs["table"].validate();
        if (errMap) {
          throw new Error(errMap);
        }
        await this.$confirm("确认保存？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        });
        await this.$refs["table"].clearEdit();
        const form = deepCopy(this.form);
        for (const key in form) {
          form[key] = row[key];
        }
        this.loading = true;
        form['files'] = this.form['files_details'].map(i => i.response?.id)
        await save(form);
        await this.getList();
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },
    async destroyRowEvent(row) {
      try {
        await this.$confirm("确认删除？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
        });
        this.loading = true;
        if (row.id) {
          await destroy({
            id: row.id,
          });
          await this.getList();
        } else {
          console.log(row);
          this.tableData.splice(
            this.tableData.findIndex((i) => i._X_ROW_KEY === row._X_ROW_KEY),
            1
          );
        }
        this.loading = false;
      } catch (err) {
        this.loading = false;
      }
    },

    async examine(row) {
      this.isShowType = 'examine'
      this.$refs['AddMeeting'].getDetail(row)
      this.isShowAdd = true
    }
  },
};
</script>

<style scoped lang="scss">
.total {
  color: #666;
  text-align: right;
  line-height: 3;
}
::v-deep .el-tag + .el-tag {
  margin-left: 4px;
}
</style>
