<template>
  <div>
    <el-dialog
      class="modify-exam-config page-dialog"
      :visible.sync="modalIsShow"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      fullscreen
      destroy-on-close
      @open="visibleChange"
    >
      <div class="part-box part-box-filter part-box-flex">
        <el-form
          ref="FilterForm"
          label-position="left"
          label-width="85px"
          inline
        >
          <el-form-item label="创建时间：">
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="创建开始时间"
              end-placeholder="创建结束时间"
              value-format="timestamp"
              align="right"
              unlink-panels
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="启用/禁用：" label-width="90px">
            <el-select
              v-model="filter.enable"
              style="width: 120px;"
              placeholder="启用/禁用"
              clearable
            >
              <el-option
                v-for="(val, key) in ABLE_TYPE"
                :key="key"
                :value="key * 1"
                :label="val"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toPage(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="part-box-action">
          <el-button
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="toAdd"
            >新增</el-button
          >
        </div>
      </div>

      <div class="part-box part-box-pad">
        <el-table ref="TableList" :data="examConfigList">
          <el-table-column
            type="index"
            label="序号"
            width="70"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column prop="orgs" label="适用机构">
            <template slot-scope="scope">
              <more-text :data="scope.row.orgNames" :show-count="3"></more-text>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间">
            <span slot-scope="scope">{{
              scope.row.createTime | timestampFilter
            }}</span>
          </el-table-column>
          <el-table-column prop="enable" label="启用/禁用">
            <template slot-scope="scope">
              {{ scope.row.enable | enableFilter }}
            </template>
          </el-table-column>
          <el-table-column class-name="action-column" label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                class="btn-primary"
                type="text"
                @click="toEdit(scope.row)"
                >编辑</el-button
              >
              <el-button
                :class="scope.row.enable ? 'btn-danger' : 'btn-primary'"
                type="text"
                @click="toEnable(scope.row)"
                >{{ scope.row.enable ? "禁用" : "启用" }}</el-button
              >
              <el-button
                class="btn-danger"
                type="text"
                @click="toDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="part-page">
          <el-pagination
            background
            layout="total,prev, pager, next"
            :current-page="current"
            :total="total"
            :page-size="size"
            @current-change="toPage"
          >
          </el-pagination>
        </div>
      </div>
    </el-dialog>

    <!-- ModifyExamConfigDetail -->
    <modify-exam-config-detail
      ref="ModifyExamConfigDetail"
      :instance="curExamConfig"
      @modified="examConfigDetailModified"
    ></modify-exam-config-detail>
  </div>
</template>

<script>
import { ABLE_TYPE } from "@/constants/enumerate";
import pickerOptions from "@/constants/datePickerOptions";
import { examConfigQuery, deleteExamConfig, ableExamConfig } from "../api";
import ModifyExamConfigDetail from "./ModifyExamConfigDetail";

export default {
  name: "modify-exam-config",
  components: { ModifyExamConfigDetail },
  props: {
    exam: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      modalIsShow: false,
      filter: {
        examId: "",
        createStartTime: "",
        createEndTime: "",
        enable: ""
      },
      ABLE_TYPE,
      current: 1,
      size: this.GLOBAL.pageSize,
      total: 0,
      examConfigList: [],
      curExamConfig: {},
      usedOrgIds: [],
      // date-picker
      createTime: [],
      pickerOptions
    };
  },
  computed: {
    title() {
      return "配置管理-" + this.exam.name;
    }
  },
  methods: {
    visibleChange() {
      this.filter.examId = this.exam.id;
      this.toPage(1);
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    examConfigDetailModified() {
      this.getList();
    },
    async getList() {
      const datas = {
        ...this.filter,
        pageNumber: this.current,
        pageSize: this.size
      };
      if (this.createTime) {
        datas.createStartTime = this.createTime[0];
        datas.createEndTime = this.createTime[1];
      }
      if (datas.enable !== null && datas.enable !== "")
        datas.enable = !!datas.enable;

      const data = await examConfigQuery(datas);
      this.examConfigList = data.records.map(item => {
        item.orgNames = item.orgs.map(org => org.name);
        return item;
      });
      this.total = data.total;
    },
    toPage(page) {
      this.current = page;
      this.getList();
    },
    toAdd() {
      this.curExamConfig = {
        examId: this.filter.examId
      };
      this.$refs.ModifyExamConfigDetail.open();
    },
    toEdit(row) {
      this.curExamConfig = { ...row, examId: this.filter.examId };
      this.$refs.ModifyExamConfigDetail.open();
    },
    toDelete(row) {
      this.$confirm(`确定要删除该配置吗?`, "提示", {
        type: "warning"
      })
        .then(async () => {
          await deleteExamConfig(row.id);
          this.$message.success("删除成功！");
          this.deletePageLastItem();
        })
        .catch(() => {});
    },
    toEnable(row) {
      const action = row.enable ? "禁用" : "启用";
      this.$confirm(`确定要${action}该配置吗?`, "提示", {
        type: "warning"
      })
        .then(async () => {
          const enable = !row.enable;
          await ableExamConfig({
            id: row.id,
            enable
          });
          row.enable = enable;
          this.$message.success("操作成功！");
        })
        .catch(() => {});
    }
  }
};
</script>
