<template>
  <div class="client-param-set">
    <Row :gutter="20" type="flex">
      <Col span="12">
        <div class="part-box">
          <h2 class="client-param-title">科目名称设置</h2>
          <div class="part-box-top">
            <Button type="success" icon="md-add" @click="toAdd">新增</Button>
          </div>

          <table class="table">
            <tr>
              <th>序号</th>
              <th>科目名称</th>
              <th>科目代码</th>
              <th>操作</th>
            </tr>
            <tr v-for="(subject, index) in subjects" :key="index">
              <td>{{ index + 1 }}</td>
              <td>
                <Input v-model="subject.subjectName" clearable></Input>
              </td>
              <td>
                <Input v-model="subject.subjectCode" clearable></Input>
              </td>
              <td>
                <Button size="small" type="primary" @click="toSave(subject)"
                  >保存</Button
                >
                <Button size="small" type="error" @click="toDelete(index)"
                  >删除</Button
                >
              </td>
            </tr>
          </table>
        </div>
      </Col>
      <Col span="12">
        <div class=" part-box">
          <h2 class="client-param-title">其他设置</h2>
          <Form ref="modalFormComp" :model="modalForm" :label-width="120">
            <FormItem label="是否整包扫描：">
              <RadioGroup v-model="modalForm.isScanPackage">
                <Radio
                  v-for="(val, key) in BOOLEAN_TYPE"
                  :key="key"
                  :label="key"
                  style="margin-right: 50px;"
                  >{{ val }}</Radio
                >
              </RadioGroup>
            </FormItem>
            <FormItem label="图片是否加密：">
              <RadioGroup v-model="modalForm.isImageEncryption">
                <Radio
                  v-for="(val, key) in BOOLEAN_TYPE"
                  :key="key"
                  :label="key"
                  style="margin-right: 50px;"
                  >{{ val }}</Radio
                >
              </RadioGroup>
            </FormItem>
            <FormItem prop="imageNameRule" label="图片命名规则：">
              <Select
                v-model="modalForm.imageNameRule"
                placeholder="请选择图片命名规则"
              >
                <Option value=""></Option>
              </Select>
            </FormItem>
            <FormItem prop="paperGrading" label="试卷档位：">
              <Select
                v-model="modalForm.imageNameRule"
                placeholder="请选择试卷档位"
              >
                <Option value=""></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="toSubmit">保存</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { subjectList, uploadSubject, deleteSubject } from "@/api";
import { BOOLEAN_TYPE } from "@/constants/enumerate";

const initSubject = {
  id: "",
  subjectName: "",
  subjectCode: "",
  password: ""
};

export default {
  name: "client-param-set",
  data() {
    return {
      BOOLEAN_TYPE,
      subjects: [],
      // other param
      modalForm: {
        isScanPackage: "0",
        isImageEncryption: "1",
        imageNameRule: "",
        paperGrading: ""
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        workId: this.workId
      };
      const data = await subjectList(datas);

      console.log(data);

      if (!this.subjects.length) this.toAdd();
    },
    toAdd() {
      this.subjects.push({ ...initSubject });
    },
    async toSave(row) {
      if (!row.subjectName || row.subjectName.length > 20) {
        this.$Message.error("必须输入科目名称，且科目名称长度不能超过20个字符");
        return;
      }
      if (!row.subjectCode.match(new RegExp(`^[a-zA-Z0-9_]{3,20}$`))) {
        this.$Message.error(
          "当前科目代码只能由数字、字母和下划线组成，长度2-20个字符"
        );
        return;
      }
      await uploadSubject(row);
      this.$Message.success("保存成功！");
      this.getList();
    },
    toDelete(index) {
      console.log(index);

      const row = this.subjects[index];
      if (!row.id) {
        this.subjects.splice(index, 1);
        return;
      }
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前科目吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteSubject(id);
      this.$Message.success("删除成功！");
      this.getList();
    },
    toSubmit() {}
  }
};
</script>
